3 |
4 | # Next.js Boilerplate (ReactConf Iran website 2020)
5 |
6 | 34 | - **ES6 & Next Generation JavaScript :**
50 | 51 | - **Next-Compose-Plugin** 52 | - **OptimizeCSSAssetsPlugin :**
70 | 71 | 4. Run `npm install` in order to install dependencies.
72 | 73 | 5.At this point you can run `npm start` to see the example app at `http://localhost:4000`. You can easily change this port by changing the `.env` file ._ 74 | -------------------------------------------------------------------------------- /antd/antd-config.js: -------------------------------------------------------------------------------- 1 | const cssLoaderConfig = require("@zeit/next-css/css-loader-config"); 2 | const lessToJS = require("less-vars-to-js"); 3 | const fs = require("fs"); 4 | const path = require("path"); 5 | 6 | // Where your antd-custom.less file lives 7 | const themeVariables = lessToJS( 8 | fs.readFileSync(path.resolve(__dirname, "./antd.less"), "utf8") 9 | ); 10 | 11 | module.exports = (nextConfig = {}) => ({ 12 | ...nextConfig, 13 | ...{ 14 | webpack(config, options) { 15 | if (!options.defaultLoaders) { 16 | throw new Error( 17 | "This plugin is not compatible with Next.js versions below 5.0.0 https://err.sh/next-plugins/upgrade" 18 | ); 19 | } 20 | 21 | const { dev, isServer } = options; 22 | const { 23 | cssModules, 24 | cssLoaderOptions, 25 | postcssLoaderOptions, 26 | lessLoaderOptions = {} 27 | } = nextConfig; 28 | 29 | // for all less in clint 30 | const baseLessConfig = { 31 | extensions: ["less"], 32 | cssModules, 33 | cssLoaderOptions, 34 | postcssLoaderOptions, 35 | dev, 36 | isServer, 37 | loaders: [ 38 | { 39 | loader: "less-loader", 40 | options: { 41 | ...lessLoaderOptions, 42 | javascriptEnabled: true, 43 | modifyVars: themeVariables // make your antd custom effective 44 | } 45 | } 46 | ] 47 | }; 48 | 49 | config.module.rules.push({ 50 | test: /\.less$/, 51 | exclude: /node_modules/, 52 | use: cssLoaderConfig(config, baseLessConfig) 53 | }); 54 | 55 | // for antd less in client 56 | // disable antd css module 57 | const antdLessConfig = { 58 | ...baseLessConfig, 59 | ...{ 60 | cssModules: false, 61 | cssLoaderOptions: {}, 62 | postcssLoaderOptions: {} 63 | } 64 | }; 65 | config.module.rules.push({ 66 | test: /\.less$/, 67 | include: /node_modules/, 68 | use: cssLoaderConfig(config, antdLessConfig) 69 | }); 70 | 71 | // for antd less in server (yarn build) 72 | if (isServer) { 73 | const antStyles = /antd\/.*?\/style.*?/; 74 | const origExternals = [...config.externals]; 75 | config.externals = [ 76 | (context, request, callback) => { 77 | if (request.match(antStyles)) return callback(); 78 | if (typeof origExternals[0] === "function") { 79 | origExternals[0](context, request, callback); 80 | } else { 81 | callback(); 82 | } 83 | }, 84 | ...(typeof origExternals[0] === "function" 85 | ? [] 86 | : origExternals) 87 | ]; 88 | 89 | config.module.rules.unshift({ 90 | test: antStyles, 91 | use: "null-loader" 92 | }); 93 | } 94 | 95 | if (typeof nextConfig.webpack === "function") { 96 | return nextConfig.webpack(config, options); 97 | } 98 | 99 | return config; 100 | } 101 | } 102 | }); 103 | -------------------------------------------------------------------------------- /components/antd/form/index.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { Form as AntForm } from "antd"; 3 | 4 | const Form = styled(AntForm)` 5 | .ant-form-item-has-error .ant-input:not([disabled]):hover, 6 | .ant-form-item-has-error .ant-input-affix-wrapper:not([disabled]):hover { 7 | box-shadow: rgb(55, 56, 62) 0px 0px 0px 1000px inset; 8 | background-color: transparent; 9 | border-color: transparent; 10 | } 11 | .ant-form-item-has-error .ant-input:focus, 12 | .ant-form-item-has-error .ant-input-affix-wrapper:focus, 13 | .ant-form-item-has-error .ant-input-focused, 14 | .ant-form-item-has-error .ant-input-affix-wrapper-focused { 15 | border-right-width: 0px; 16 | outline: 0; 17 | box-shadow: rgb(55, 56, 62) 0px 0px 0px 1000px inset; 18 | } 19 | .ant-form-vertical .ant-form-item-label { 20 | padding: 0px; 21 | } 22 | .ant-form-item-label { 23 | line-height: 45px; 24 | color: var(--foreground-color); 25 | } 26 | .ant-form-item-label > label::after { 27 | display: inline-block; 28 | margin-right: 4px; 29 | color: var(--foreground-color); 30 | font-size: 18px; 31 | font-family: SimSun, sans-serif; 32 | line-height: 1; 33 | content: "*"; 34 | position: relative; 35 | top: -5px; 36 | } 37 | .ant-form-item-label > label::before { 38 | content: ""; 39 | } 40 | .ant-form-item-explain, 41 | .ant-form-item-extra { 42 | padding-top: 5px; 43 | } 44 | `; 45 | export default Form; 46 | -------------------------------------------------------------------------------- /components/antd/input/index.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import { Input as AntInput } from "antd"; 3 | import { isRTL } from "utils/isRTL"; 4 | import { fontFamily } from "styles/injectGlobal"; 5 | const Input = styled(AntInput)` 6 | color: var(--foreground-color); 7 | direction: ${({ locale }) => (isRTL(locale) ? "rtl" : "ltr")}; 8 | text-align: ${({ locale }) => (isRTL(locale) ? "right" : "left")}; 9 | width: 100%; 10 | border: none; 11 | margin: 0; 12 | max-width: 450px; 13 | padding: 0 16px; 14 | position: relative; 15 | font-size: 16px; 16 | transition: background-color 5000s ease-in-out 0s; 17 | line-height: 50px; 18 | background-color: transparent; 19 | box-shadow: rgb(55, 56, 62) 0px 0px 0px 1000px inset; 20 | font-family: ${({ locale }) => 21 | isRTL(locale) ? fontFamily.persian : fontFamily.english}; 22 | &:focus { 23 | border-right: none; 24 | box-shadow: rgb(55, 56, 62) 0px 0px 0px 1000px inset; 25 | background-color: transparent; 26 | } 27 | `; 28 | export default Input; 29 | -------------------------------------------------------------------------------- /components/clients.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import LazyLoad from "react-lazyload"; 3 | import cx from "classnames"; 4 | 5 | const Clients = ({ data }) => { 6 | const {fullName, email} = data; 7 | return ( 8 |
11 | 
12 |
13 |
10 |
11 |
16 |
17 |
18 | {children}
19 |
20 |
21 |
22 |
23 |
13 |
37 |
38 |
39 |
64 |
65 |
66 |
73 |
75 |
14 |
15 |
21 | 
25 |
26 |
27 |
36 |
25 |
26 |
27 |
28 |
29 | EN
30 |
31 |
32 | FA
33 |
34 |
35 |
38 |
39 |
49 |
50 |
54 |
55 |
59 |
60 |
64 |
67 |
68 |
9 |
10 |
11 |
13 |
14 | {children}
15 |
16 |
17 |
18 |
11 |
13 |
21 |
142 |
22 |
79 | 23 | {type === "Break" && ( 24 | 42 | )} 43 | {type === "Presentation" && ( 44 | 62 | )} 63 | {subject} 64 |
65 |{summary}
66 | {data.peoples.find(p => p.slug === people) && ( 67 |
68 | 
p.slug === people)
71 | .avatar
72 | }
73 | alt={people}
74 | />{" "}
75 | {people}
76 |
77 | )}
78 |
80 |
81 |
82 |
141 |
83 | {presentation_video && (
84 |
89 |
110 | Play
111 |
112 | )}
113 | {presentation_pdf && (
114 |
119 |
136 | PDF
137 |
138 | )}
139 |
140 |
53 |
54 |
201 |
206 |
210 |
211 |
212 |
207 | 
208 |
209 |
208 |
16 |
20 |
21 |
24 |
26 |
27 |
28 |
29 |
27 |
28 |
29 |
30 | {Array(numCols)
31 | .fill()
32 | .map((el, i) => (
33 |
38 | );
39 | }
40 |
--------------------------------------------------------------------------------
/utils/shuffle.js:
--------------------------------------------------------------------------------
1 | export function shuffle(array) {
2 | let counter = array.length,
3 | temp,
4 | index;
5 | while (counter--) {
6 | index = (Math.random() * counter) | 0;
7 | temp = array[counter];
8 | array[counter] = array[index];
9 | array[index] = temp;
10 | }
11 | return array;
12 | }
13 |
--------------------------------------------------------------------------------
/utils/utils.js:
--------------------------------------------------------------------------------
1 | function debounce(callback, wait, immediate = false) {
2 | let timeout = null;
3 |
4 | return function() {
5 | const callNow = immediate && !timeout;
6 | const next = () => callback.apply(this, arguments);
7 |
8 | clearTimeout(timeout);
9 | timeout = setTimeout(next, wait);
10 |
11 | if (callNow) {
12 | next();
13 | }
14 | };
15 | }
16 |
17 | var SmoothScroll = function(a, d, f) {
18 | var Site = {
19 | height: window.innerHeight,
20 | width: window.innerWidth
21 | };
22 | function c(c) {
23 | c.preventDefault();
24 | if (!p) {
25 | if (h.paginate && (u || (u = new Lethargy()), !u.check(c))) {
26 | v && clearTimeout(v);
27 | v = setTimeout(function() {
28 | u = null;
29 | }, 100);
30 | return;
31 | }
32 | c = c.detail
33 | ? c.wheelDelta
34 | ? (-c.wheelDelta / c.detail / 40) * (0 < c.detail ? 1 : -1)
35 | : c.detail / 3
36 | : -c.wheelDelta / 120;
37 | r += (c * d) / (h.paginate ? 3 : 1);
38 | r = Math.max(0, Math.min(r, a.scrollHeight - a.clientHeight));
39 | k =
40 | 0 < r - pageYOffset
41 | ? Math.ceil(r / Site.height) * Site.height
42 | : Math.floor(r / Site.height) * Site.height;
43 | l || g();
44 | }
45 | }
46 | function g(a) {
47 | a || (l = !0);
48 | if (l) {
49 | a = n;
50 | var c = (r - a) / f;
51 | h.paginate &&
52 | ((c = (k - a) / f), (r = 1 < Math.abs(c) ? a + 1.01 * c : k));
53 | n = c = a + c;
54 | scrollTo(0, c);
55 | Math.abs(c - a) > 0.25 / f
56 | ? z(g)
57 | : (h.paginate && (r = k),
58 | (n = r),
59 | scrollTo(0, r),
60 | (l = !1),
61 | v && clearTimeout(v),
62 | (v = setTimeout(function() {
63 | u = null;
64 | }, 100)));
65 | }
66 | }
67 | var h = this;
68 | h.paginate = !1;
69 | a == document &&
70 | (a =
71 | document.documentElement ||
72 | document.body.parentNode ||
73 | document.body);
74 | var n = 0,
75 | l = !1,
76 | r = pageYOffset,
77 | k = 0,
78 | u,
79 | v,
80 | y,
81 | A = 0,
82 | w = 0,
83 | p,
84 | q;
85 | h.scrollToY = function(a, c) {
86 | c
87 | ? ((r = a),
88 | (k = Math.round(a / Site.height) * Site.height),
89 | l || g())
90 | : ((r = n = a),
91 | (k = Math.round(a / Site.height) * Site.height),
92 | scrollTo(0, a));
93 | };
94 | h.reset = function() {
95 | k = r = n = pageYOffset;
96 | };
97 | var F = function(a) {
98 | if (
99 | {
100 | 37: 1,
101 | 38: 1,
102 | 39: 1,
103 | 40: 1,
104 | 32: 1,
105 | 33: 1,
106 | 34: 1,
107 | 35: 1,
108 | 36: 1
109 | }[a.keyCode]
110 | )
111 | return (
112 | console.log(a),
113 | (a = a || window.event),
114 | a.preventDefault && a.preventDefault(),
115 | (a.returnValue = !1)
116 | );
117 | };
118 | h.enableScrolling = function() {
119 | p &&
120 | ((document.onkeydown = null),
121 | bodyScrollLock.enableBodyScroll(Menu.menu),
122 | (p = !1));
123 | };
124 | h.disableScrolling = function() {
125 | p ||
126 | (bodyScrollLock.disableBodyScroll(Menu.menu),
127 | (document.onkeydown = F),
128 | (p = !0));
129 | };
130 | var O = debounce(function() {
131 | h.paginate &&
132 | !q &&
133 | ((n = pageYOffset),
134 | (k = Math.round(pageYOffset / Site.height) * Site.height),
135 | l || g());
136 | }, 250),
137 | z = (function() {
138 | return (
139 | window.requestAnimationFrame ||
140 | window.webkitRequestAnimationFrame ||
141 | window.mozRequestAnimationFrame ||
142 | window.oRequestAnimationFrame ||
143 | window.msRequestAnimationFrame ||
144 | function(a) {
145 | window.setTimeout(a, 20);
146 | }
147 | );
148 | })();
149 | a.addEventListener("mousewheel", c, {
150 | capture: !1,
151 | passive: !1
152 | });
153 | a.addEventListener("DOMMouseScroll", c, {
154 | capture: !1,
155 | passive: !1
156 | });
157 | a.addEventListener(
158 | "touchstart",
159 | function(a) {
160 | 1 == a.changedTouches.length &&
161 | (h.reset(), (A = a.changedTouches[0].screenY), (w = 0));
162 | q = !0;
163 | },
164 | !1
165 | );
166 | a.addEventListener(
167 | "touchmove",
168 | function(a) {
169 | if (1 == a.changedTouches.length) {
170 | var c = A;
171 | A = a.changedTouches[0].screenY;
172 | w += A - c;
173 | }
174 | },
175 | !1
176 | );
177 | a.addEventListener(
178 | "touchend",
179 | function(c) {
180 | h.paginate &&
181 | ((n = pageYOffset),
182 | (k =
183 | 0 < w
184 | ? Math.max(Math.floor(pageYOffset / Site.height), 0) *
185 | Site.height
186 | : Math.min(
187 | Math.ceil(pageYOffset / Site.height) *
188 | Site.height,
189 | a.scrollHeight - Site.height
190 | )),
191 | 0 < pageYOffset &&
192 | pageYOffset < a.scrollHeight - Site.height &&
193 | UserAgent.iOS &&
194 | (l || g()));
195 | q = c.touches.length;
196 | },
197 | !1
198 | );
199 | addEventListener("scroll", function(a) {
200 | y && (clearTimeout(y), (y = null));
201 | h.paginate &&
202 | (q ||
203 | (y = setTimeout(function() {
204 | n = pageYOffset;
205 | k = Math.round(pageYOffset / Site.height) * Site.height;
206 | l || g();
207 | }, 500)));
208 | });
209 | addEventListener("resize", O);
210 | };
211 | export { SmoothScroll };
212 |
--------------------------------------------------------------------------------
34 | {cols[i]}
35 |
36 | ))}
37 |