├── .gitignore
├── README.md
├── config
    ├── env.js
    ├── jest
    │   ├── cssTransform.js
    │   └── fileTransform.js
    ├── modules.js
    ├── paths.js
    ├── pnpTs.js
    ├── webpack.config.js
    └── webpackDevServer.config.js
├── package.json
├── previews
    ├── 1.png
    ├── 2.png
    ├── 3.png
    ├── 4.png
    ├── 5.png
    └── 6.png
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo.png
    ├── manifest.json
    └── robots.txt
├── scripts
    ├── build.js
    ├── start.js
    └── test.js
├── src
    ├── App.js
    ├── App.test.js
    ├── api.js
    ├── assets
    │   ├── GitHub.png
    │   ├── Sun.png
    │   ├── snow.png
    │   └── star.png
    ├── components
    │   ├── Fire
    │   │   ├── index.js
    │   │   └── index.scss
    │   ├── HelloYou
    │   │   ├── index.js
    │   │   └── index.scss
    │   ├── Loader
    │   │   ├── index.js
    │   │   └── index.scss
    │   ├── MilkButton
    │   │   ├── index.js
    │   │   └── index.scss
    │   ├── NewYear
    │   │   ├── index.js
    │   │   └── index.scss
    │   ├── NightMoon
    │   │   ├── index.js
    │   │   └── index.scss
    │   ├── Pyramid
    │   │   ├── index.js
    │   │   └── index.scss
    │   └── SnowDay
    │   │   ├── index.js
    │   │   └── index.scss
    ├── index.js
    ├── index.scss
    ├── service.js
    ├── serviceWorker.js
    ├── setupTests.js
    ├── util.js
    ├── util.scss
    └── views
    │   ├── Fifth
    │       ├── index.js
    │       └── index.scss
    │   ├── First
    │       ├── index.js
    │       └── index.scss
    │   ├── Fourth
    │       ├── index.js
    │       └── index.scss
    │   ├── Home
    │       ├── index.js
    │       └── index.scss
    │   ├── Second
    │       ├── index.js
    │       └── index.scss
    │   ├── Sign
    │       ├── index.js
    │       └── index.scss
    │   ├── Sixth
    │       ├── index.js
    │       └── index.scss
    │   └── Third
    │       ├── index.js
    │       └── index.scss
└── yarn.lock


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | build
3 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### Github 2019 Annual Report｜Github 2019 年度报告 
 2 | 
 3 | <br/>
 4 | 
 5 | **2019年过去了，**
 6 | 
 7 | **我很怀念它。**
 8 | 
 9 | <br/>
10 | 
11 | **在过去的一年中，**
12 | 
13 | **你写了多少行代码？**
14 | 
15 | **删除了多少行代码？**
16 | 
17 | **提交了多少次commit？**
18 | 
19 | **在issue区参与了多少次讨论？**
20 | 
21 | **关注了多少个大佬？**
22 | 
23 | **收获了多少个支持者？**
24 | 
25 | **创建了多少个仓库？（待实现）**
26 | 
27 | **参加了多少个组织？（待实现）**
28 | 
29 | <br/>
30 | 
31 | **让我来帮助你回忆～**
32 | 
33 | <br/>
34 | 
35 | <br/>
36 | 
37 | [查看你的年度报告](https://linshuirong.cn/github/)
38 | 
39 | <br/>
40 | 
41 | **Previews**
42 | 
43 | | ![gakki](./previews/1.png) | ![gakki](./previews/2.png) | ![gakki](./previews/3.png) |
44 | | -------------------------- | -------------------------- | -------------------------- |
45 | | ![gakki](./previews/4.png) | ![gakki](./previews/5.png) | ![gakki](./previews/6.png) |
46 | 
47 | 
48 | 
49 | **Getting Started**
50 | 
51 | will updated soon...
52 | 
53 | 


--------------------------------------------------------------------------------
/config/env.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const fs = require('fs');
 4 | const path = require('path');
 5 | const paths = require('./paths');
 6 | 
 7 | // Make sure that including paths.js after env.js will read .env variables.
 8 | delete require.cache[require.resolve('./paths')];
 9 | 
10 | const NODE_ENV = process.env.NODE_ENV;
11 | if (!NODE_ENV) {
12 |   throw new Error(
13 |     'The NODE_ENV environment variable is required but was not specified.'
14 |   );
15 | }
16 | 
17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
18 | const dotenvFiles = [
19 |   `${paths.dotenv}.${NODE_ENV}.local`,
20 |   `${paths.dotenv}.${NODE_ENV}`,
21 |   // Don't include `.env.local` for `test` environment
22 |   // since normally you expect tests to produce the same
23 |   // results for everyone
24 |   NODE_ENV !== 'test' && `${paths.dotenv}.local`,
25 |   paths.dotenv,
26 | ].filter(Boolean);
27 | 
28 | // Load environment variables from .env* files. Suppress warnings using silent
29 | // if this file is missing. dotenv will never modify any environment variables
30 | // that have already been set.  Variable expansion is supported in .env files.
31 | // https://github.com/motdotla/dotenv
32 | // https://github.com/motdotla/dotenv-expand
33 | dotenvFiles.forEach(dotenvFile => {
34 |   if (fs.existsSync(dotenvFile)) {
35 |     require('dotenv-expand')(
36 |       require('dotenv').config({
37 |         path: dotenvFile,
38 |       })
39 |     );
40 |   }
41 | });
42 | 
43 | // We support resolving modules according to `NODE_PATH`.
44 | // This lets you use absolute paths in imports inside large monorepos:
45 | // https://github.com/facebook/create-react-app/issues/253.
46 | // It works similar to `NODE_PATH` in Node itself:
47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421
51 | // We also resolve them to make sure all tools using them work consistently.
52 | const appDirectory = fs.realpathSync(process.cwd());
53 | process.env.NODE_PATH = (process.env.NODE_PATH || '')
54 |   .split(path.delimiter)
55 |   .filter(folder => folder && !path.isAbsolute(folder))
56 |   .map(folder => path.resolve(appDirectory, folder))
57 |   .join(path.delimiter);
58 | 
59 | // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
60 | // injected into the application via DefinePlugin in Webpack configuration.
61 | const REACT_APP = /^REACT_APP_/i;
62 | 
63 | function getClientEnvironment(publicUrl) {
64 |   const raw = Object.keys(process.env)
65 |     .filter(key => REACT_APP.test(key))
66 |     .reduce(
67 |       (env, key) => {
68 |         env[key] = process.env[key];
69 |         return env;
70 |       },
71 |       {
72 |         // Useful for determining whether we’re running in production mode.
73 |         // Most importantly, it switches React into the correct mode.
74 |         NODE_ENV: process.env.NODE_ENV || 'development',
75 |         // Useful for resolving the correct path to static assets in `public`.
76 |         // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
77 |         // This should only be used as an escape hatch. Normally you would put
78 |         // images into the `src` and `import` them in code to get their paths.
79 |         PUBLIC_URL: publicUrl,
80 |       }
81 |     );
82 |   // Stringify all values so we can feed into Webpack DefinePlugin
83 |   const stringified = {
84 |     'process.env': Object.keys(raw).reduce((env, key) => {
85 |       env[key] = JSON.stringify(raw[key]);
86 |       return env;
87 |     }, {}),
88 |   };
89 | 
90 |   return { raw, stringified };
91 | }
92 | 
93 | module.exports = getClientEnvironment;
94 | 


--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // This is a custom Jest transformer turning style imports into empty objects.
 4 | // http://facebook.github.io/jest/docs/en/webpack.html
 5 | 
 6 | module.exports = {
 7 |   process() {
 8 |     return 'module.exports = {};';
 9 |   },
10 |   getCacheKey() {
11 |     // The output is always the same.
12 |     return 'cssTransform';
13 |   },
14 | };
15 | 


--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const camelcase = require('camelcase');
 5 | 
 6 | // This is a custom Jest transformer turning file imports into filenames.
 7 | // http://facebook.github.io/jest/docs/en/webpack.html
 8 | 
 9 | module.exports = {
10 |   process(src, filename) {
11 |     const assetFilename = JSON.stringify(path.basename(filename));
12 | 
13 |     if (filename.match(/\.svg$/)) {
14 |       // Based on how SVGR generates a component name:
15 |       // https://github.com/smooth-code/svgr/blob/01b194cf967347d43d4cbe6b434404731b87cf27/packages/core/src/state.js#L6
16 |       const pascalCaseFilename = camelcase(path.parse(filename).name, {
17 |         pascalCase: true,
18 |       });
19 |       const componentName = `Svg${pascalCaseFilename}`;
20 |       return `const React = require('react');
21 |       module.exports = {
22 |         __esModule: true,
23 |         default: ${assetFilename},
24 |         ReactComponent: React.forwardRef(function ${componentName}(props, ref) {
25 |           return {
26 |             $$typeof: Symbol.for('react.element'),
27 |             type: 'svg',
28 |             ref: ref,
29 |             key: null,
30 |             props: Object.assign({}, props, {
31 |               children: ${assetFilename}
32 |             })
33 |           };
34 |         }),
35 |       };`;
36 |     }
37 | 
38 |     return `module.exports = ${assetFilename};`;
39 |   },
40 | };
41 | 


--------------------------------------------------------------------------------
/config/modules.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const paths = require('./paths');
  6 | const chalk = require('react-dev-utils/chalk');
  7 | const resolve = require('resolve');
  8 | 
  9 | /**
 10 |  * Get additional module paths based on the baseUrl of a compilerOptions object.
 11 |  *
 12 |  * @param {Object} options
 13 |  */
 14 | function getAdditionalModulePaths(options = {}) {
 15 |   const baseUrl = options.baseUrl;
 16 | 
 17 |   // We need to explicitly check for null and undefined (and not a falsy value) because
 18 |   // TypeScript treats an empty string as `.`.
 19 |   if (baseUrl == null) {
 20 |     // If there's no baseUrl set we respect NODE_PATH
 21 |     // Note that NODE_PATH is deprecated and will be removed
 22 |     // in the next major release of create-react-app.
 23 | 
 24 |     const nodePath = process.env.NODE_PATH || '';
 25 |     return nodePath.split(path.delimiter).filter(Boolean);
 26 |   }
 27 | 
 28 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 29 | 
 30 |   // We don't need to do anything if `baseUrl` is set to `node_modules`. This is
 31 |   // the default behavior.
 32 |   if (path.relative(paths.appNodeModules, baseUrlResolved) === '') {
 33 |     return null;
 34 |   }
 35 | 
 36 |   // Allow the user set the `baseUrl` to `appSrc`.
 37 |   if (path.relative(paths.appSrc, baseUrlResolved) === '') {
 38 |     return [paths.appSrc];
 39 |   }
 40 | 
 41 |   // If the path is equal to the root directory we ignore it here.
 42 |   // We don't want to allow importing from the root directly as source files are
 43 |   // not transpiled outside of `src`. We do allow importing them with the
 44 |   // absolute path (e.g. `src/Components/Button.js`) but we set that up with
 45 |   // an alias.
 46 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 47 |     return null;
 48 |   }
 49 | 
 50 |   // Otherwise, throw an error.
 51 |   throw new Error(
 52 |     chalk.red.bold(
 53 |       "Your project's `baseUrl` can only be set to `src` or `node_modules`." +
 54 |         ' Create React App does not support other values at this time.'
 55 |     )
 56 |   );
 57 | }
 58 | 
 59 | /**
 60 |  * Get webpack aliases based on the baseUrl of a compilerOptions object.
 61 |  *
 62 |  * @param {*} options
 63 |  */
 64 | function getWebpackAliases(options = {}) {
 65 |   const baseUrl = options.baseUrl;
 66 | 
 67 |   if (!baseUrl) {
 68 |     return {};
 69 |   }
 70 | 
 71 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 72 | 
 73 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 74 |     return {
 75 |       src: paths.appSrc,
 76 |     };
 77 |   }
 78 | }
 79 | 
 80 | /**
 81 |  * Get jest aliases based on the baseUrl of a compilerOptions object.
 82 |  *
 83 |  * @param {*} options
 84 |  */
 85 | function getJestAliases(options = {}) {
 86 |   const baseUrl = options.baseUrl;
 87 | 
 88 |   if (!baseUrl) {
 89 |     return {};
 90 |   }
 91 | 
 92 |   const baseUrlResolved = path.resolve(paths.appPath, baseUrl);
 93 | 
 94 |   if (path.relative(paths.appPath, baseUrlResolved) === '') {
 95 |     return {
 96 |       '^src/(.*)$': '<rootDir>/src/$1',
 97 |     };
 98 |   }
 99 | }
100 | 
101 | function getModules() {
102 |   // Check if TypeScript is setup
103 |   const hasTsConfig = fs.existsSync(paths.appTsConfig);
104 |   const hasJsConfig = fs.existsSync(paths.appJsConfig);
105 | 
106 |   if (hasTsConfig && hasJsConfig) {
107 |     throw new Error(
108 |       'You have both a tsconfig.json and a jsconfig.json. If you are using TypeScript please remove your jsconfig.json file.'
109 |     );
110 |   }
111 | 
112 |   let config;
113 | 
114 |   // If there's a tsconfig.json we assume it's a
115 |   // TypeScript project and set up the config
116 |   // based on tsconfig.json
117 |   if (hasTsConfig) {
118 |     const ts = require(resolve.sync('typescript', {
119 |       basedir: paths.appNodeModules,
120 |     }));
121 |     config = ts.readConfigFile(paths.appTsConfig, ts.sys.readFile).config;
122 |     // Otherwise we'll check if there is jsconfig.json
123 |     // for non TS projects.
124 |   } else if (hasJsConfig) {
125 |     config = require(paths.appJsConfig);
126 |   }
127 | 
128 |   config = config || {};
129 |   const options = config.compilerOptions || {};
130 | 
131 |   const additionalModulePaths = getAdditionalModulePaths(options);
132 | 
133 |   return {
134 |     additionalModulePaths: additionalModulePaths,
135 |     webpackAliases: getWebpackAliases(options),
136 |     jestAliases: getJestAliases(options),
137 |     hasTsConfig,
138 |   };
139 | }
140 | 
141 | module.exports = getModules();
142 | 


--------------------------------------------------------------------------------
/config/paths.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const fs = require('fs');
 5 | const url = require('url');
 6 | 
 7 | // Make sure any symlinks in the project folder are resolved:
 8 | // https://github.com/facebook/create-react-app/issues/637
 9 | const appDirectory = fs.realpathSync(process.cwd());
10 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
11 | 
12 | const envPublicUrl = process.env.PUBLIC_URL;
13 | 
14 | function ensureSlash(inputPath, needsSlash) {
15 |   const hasSlash = inputPath.endsWith('/');
16 |   if (hasSlash && !needsSlash) {
17 |     return inputPath.substr(0, inputPath.length - 1);
18 |   } else if (!hasSlash && needsSlash) {
19 |     return `${inputPath}/`;
20 |   } else {
21 |     return inputPath;
22 |   }
23 | }
24 | 
25 | const getPublicUrl = appPackageJson =>
26 |   envPublicUrl || require(appPackageJson).homepage;
27 | 
28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer
29 | // "public path" at which the app is served.
30 | // Webpack needs to know it to put the right <script> hrefs into HTML even in
31 | // single-page apps that may serve index.html for nested URLs like /todos/42.
32 | // We can't use a relative path in HTML because we don't want to load something
33 | // like /todos/42/static/js/bundle.7289d.js. We have to know the root.
34 | function getServedPath(appPackageJson) {
35 |   const publicUrl = getPublicUrl(appPackageJson);
36 |   const servedUrl =
37 |     envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
38 |   return ensureSlash(servedUrl, true);
39 | }
40 | 
41 | const moduleFileExtensions = [
42 |   'web.mjs',
43 |   'mjs',
44 |   'web.js',
45 |   'js',
46 |   'web.ts',
47 |   'ts',
48 |   'web.tsx',
49 |   'tsx',
50 |   'json',
51 |   'web.jsx',
52 |   'jsx',
53 | ];
54 | 
55 | // Resolve file paths in the same order as webpack
56 | const resolveModule = (resolveFn, filePath) => {
57 |   const extension = moduleFileExtensions.find(extension =>
58 |     fs.existsSync(resolveFn(`${filePath}.${extension}`))
59 |   );
60 | 
61 |   if (extension) {
62 |     return resolveFn(`${filePath}.${extension}`);
63 |   }
64 | 
65 |   return resolveFn(`${filePath}.js`);
66 | };
67 | 
68 | // config after eject: we're in ./config/
69 | module.exports = {
70 |   dotenv: resolveApp('.env'),
71 |   appPath: resolveApp('.'),
72 |   appBuild: resolveApp('build'),
73 |   appPublic: resolveApp('public'),
74 |   appHtml: resolveApp('public/index.html'),
75 |   appIndexJs: resolveModule(resolveApp, 'src/index'),
76 |   appPackageJson: resolveApp('package.json'),
77 |   appSrc: resolveApp('src'),
78 |   appTsConfig: resolveApp('tsconfig.json'),
79 |   appJsConfig: resolveApp('jsconfig.json'),
80 |   yarnLockFile: resolveApp('yarn.lock'),
81 |   testsSetup: resolveModule(resolveApp, 'src/setupTests'),
82 |   proxySetup: resolveApp('src/setupProxy.js'),
83 |   appNodeModules: resolveApp('node_modules'),
84 |   publicUrl: getPublicUrl(resolveApp('package.json')),
85 |   servedPath: getServedPath(resolveApp('package.json')),
86 | };
87 | 
88 | 
89 | 
90 | module.exports.moduleFileExtensions = moduleFileExtensions;
91 | 


--------------------------------------------------------------------------------
/config/pnpTs.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const { resolveModuleName } = require('ts-pnp');
 4 | 
 5 | exports.resolveModuleName = (
 6 |   typescript,
 7 |   moduleName,
 8 |   containingFile,
 9 |   compilerOptions,
10 |   resolutionHost
11 | ) => {
12 |   return resolveModuleName(
13 |     moduleName,
14 |     containingFile,
15 |     compilerOptions,
16 |     resolutionHost,
17 |     typescript.resolveModuleName
18 |   );
19 | };
20 | 
21 | exports.resolveTypeReferenceDirective = (
22 |   typescript,
23 |   moduleName,
24 |   containingFile,
25 |   compilerOptions,
26 |   resolutionHost
27 | ) => {
28 |   return resolveModuleName(
29 |     moduleName,
30 |     containingFile,
31 |     compilerOptions,
32 |     resolutionHost,
33 |     typescript.resolveTypeReferenceDirective
34 |   );
35 | };
36 | 


--------------------------------------------------------------------------------
/config/webpack.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const fs = require('fs');
  4 | const path = require('path');
  5 | const webpack = require('webpack');
  6 | const resolve = require('resolve');
  7 | const PnpWebpackPlugin = require('pnp-webpack-plugin');
  8 | const HtmlWebpackPlugin = require('html-webpack-plugin');
  9 | const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 10 | const InlineChunkHtmlPlugin = require('react-dev-utils/InlineChunkHtmlPlugin');
 11 | const TerserPlugin = require('terser-webpack-plugin');
 12 | const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 13 | const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 14 | const safePostCssParser = require('postcss-safe-parser');
 15 | const ManifestPlugin = require('webpack-manifest-plugin');
 16 | const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 17 | const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 18 | const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 19 | const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 20 | const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
 21 | const paths = require('./paths');
 22 | const modules = require('./modules');
 23 | const getClientEnvironment = require('./env');
 24 | const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 25 | const ForkTsCheckerWebpackPlugin = require('react-dev-utils/ForkTsCheckerWebpackPlugin');
 26 | const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 27 | 
 28 | const postcssNormalize = require('postcss-normalize');
 29 | 
 30 | const appPackageJson = require(paths.appPackageJson);
 31 | 
 32 | // Source maps are resource heavy and can cause out of memory issue for large source files.
 33 | const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 34 | // Some apps do not need the benefits of saving a web request, so not inlining the chunk
 35 | // makes for a smoother build process.
 36 | const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== 'false';
 37 | 
 38 | const imageInlineSizeLimit = parseInt(
 39 |     process.env.IMAGE_INLINE_SIZE_LIMIT || '9990000'
 40 | );
 41 | 
 42 | // Check if TypeScript is setup
 43 | const useTypeScript = fs.existsSync(paths.appTsConfig);
 44 | 
 45 | // style files regexes
 46 | const cssRegex = /\.css$/;
 47 | const cssModuleRegex = /\.module\.css$/;
 48 | const sassRegex = /\.(scss|sass)$/;
 49 | const sassModuleRegex = /\.module\.(scss|sass)$/;
 50 | 
 51 | // This is the production and development configuration.
 52 | // It is focused on developer experience, fast rebuilds, and a minimal bundle.
 53 | module.exports = function(webpackEnv) {
 54 |     const isEnvDevelopment = webpackEnv === 'development';
 55 |     const isEnvProduction = webpackEnv === 'production';
 56 | 
 57 |     // Variable used for enabling profiling in Production
 58 |     // passed into alias object. Uses a flag if passed into the build command
 59 |     const isEnvProductionProfile =
 60 |         isEnvProduction && process.argv.includes('--profile');
 61 | 
 62 |     // Webpack uses `publicPath` to determine where the app is being served from.
 63 |     // It requires a trailing slash, or the file assets will get an incorrect path.
 64 |     // In development, we always serve from the root. This makes config easier.
 65 |     const publicPath = isEnvProduction
 66 |         ? paths.servedPath
 67 |         : isEnvDevelopment && '/';
 68 |     // Some apps do not use client-side routing with pushState.
 69 |     // For these, "homepage" can be set to "." to enable relative asset paths.
 70 |     const shouldUseRelativeAssetPaths = publicPath === './';
 71 | 
 72 |     // `publicUrl` is just like `publicPath`, but we will provide it to our app
 73 |     // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
 74 |     // Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
 75 |     const publicUrl = isEnvProduction
 76 |         ? publicPath.slice(0, -1)
 77 |         : isEnvDevelopment && '';
 78 |     // Get environment variables to inject into our app.
 79 |     const env = getClientEnvironment(publicUrl);
 80 | 
 81 |     // common function to get style loaders
 82 |     const getStyleLoaders = (cssOptions, preProcessor) => {
 83 |         const loaders = [
 84 |             isEnvDevelopment && require.resolve('style-loader'),
 85 |             isEnvProduction && {
 86 |                 loader: MiniCssExtractPlugin.loader,
 87 |                 options: shouldUseRelativeAssetPaths
 88 |                     ? { publicPath: '../../' }
 89 |                     : {},
 90 |             },
 91 |             {
 92 |                 loader: require.resolve('css-loader'),
 93 |                 options: cssOptions,
 94 |             },
 95 |             {
 96 |                 // Options for PostCSS as we reference these options twice
 97 |                 // Adds vendor prefixing based on your specified browser support in
 98 |                 // package.json
 99 |                 loader: require.resolve('postcss-loader'),
100 |                 options: {
101 |                     // Necessary for external CSS imports to work
102 |                     // https://github.com/facebook/create-react-app/issues/2677
103 |                     ident: 'postcss',
104 |                     plugins: () => [
105 |                         require('postcss-flexbugs-fixes'),
106 |                         require('postcss-preset-env')({
107 |                             autoprefixer: {
108 |                                 flexbox: 'no-2009',
109 |                             },
110 |                             stage: 3,
111 |                         }),
112 |                         // Adds PostCSS Normalize as the reset css with default options,
113 |                         // so that it honors browserslist config in package.json
114 |                         // which in turn let's users customize the target behavior as per their needs.
115 |                         postcssNormalize(),
116 |                     ],
117 |                     sourceMap: isEnvProduction && shouldUseSourceMap,
118 |                 },
119 |             },
120 |         ].filter(Boolean);
121 |         if (preProcessor) {
122 |             loaders.push(
123 |                 {
124 |                     loader: require.resolve('resolve-url-loader'),
125 |                     options: {
126 |                         sourceMap: isEnvProduction && shouldUseSourceMap,
127 |                     },
128 |                 },
129 |                 {
130 |                     loader: require.resolve(preProcessor),
131 |                     options: {
132 |                         sourceMap: true,
133 |                     },
134 |                 }
135 |             );
136 |         }
137 |         return loaders;
138 |     };
139 | 
140 |     return {
141 |         mode: isEnvProduction
142 |             ? 'production'
143 |             : isEnvDevelopment && 'development',
144 |         // Stop compilation early in production
145 |         bail: isEnvProduction,
146 |         devtool: isEnvProduction
147 |             ? shouldUseSourceMap
148 |                 ? 'source-map'
149 |                 : false
150 |             : isEnvDevelopment && 'cheap-module-source-map',
151 |         // These are the "entry points" to our application.
152 |         // This means they will be the "root" imports that are included in JS bundle.
153 |         entry: [
154 |             // Include an alternative client for WebpackDevServer. A client's job is to
155 |             // connect to WebpackDevServer by a socket and get notified about changes.
156 |             // When you save a file, the client will either apply hot updates (in case
157 |             // of CSS changes), or refresh the page (in case of JS changes). When you
158 |             // make a syntax error, this client will display a syntax error overlay.
159 |             // Note: instead of the default WebpackDevServer client, we use a custom one
160 |             // to bring better experience for Create React App users. You can replace
161 |             // the line below with these two lines if you prefer the stock client:
162 |             // require.resolve('webpack-dev-server/client') + '?/',
163 |             // require.resolve('webpack/hot/dev-server'),
164 |             isEnvDevelopment &&
165 |                 require.resolve('react-dev-utils/webpackHotDevClient'),
166 |             // Finally, this is your app's code:
167 |             paths.appIndexJs,
168 |             // We include the app code last so that if there is a runtime error during
169 |             // initialization, it doesn't blow up the WebpackDevServer client, and
170 |             // changing JS code would still trigger a refresh.
171 |         ].filter(Boolean),
172 |         output: {
173 |             // The build folder.
174 |             path: isEnvProduction ? paths.appBuild : undefined,
175 |             // Add /* filename */ comments to generated require()s in the output.
176 |             pathinfo: isEnvDevelopment,
177 |             // There will be one main bundle, and one file per asynchronous chunk.
178 |             // In development, it does not produce real files.
179 |             filename: isEnvProduction
180 |                 ? 'static/js/[name].[contenthash:8].js'
181 |                 : isEnvDevelopment && 'static/js/bundle.js',
182 |             // TODO: remove this when upgrading to webpack 5
183 |             futureEmitAssets: true,
184 |             // There are also additional JS chunk files if you use code splitting.
185 |             chunkFilename: isEnvProduction
186 |                 ? 'static/js/[name].[contenthash:8].chunk.js'
187 |                 : isEnvDevelopment && 'static/js/[name].chunk.js',
188 |             // We inferred the "public path" (such as / or /my-project) from homepage.
189 |             // We use "/" in development.
190 |             publicPath: publicPath,
191 |             // Point sourcemap entries to original disk location (format as URL on Windows)
192 |             devtoolModuleFilenameTemplate: isEnvProduction
193 |                 ? info =>
194 |                       path
195 |                           .relative(paths.appSrc, info.absoluteResourcePath)
196 |                           .replace(/\\/g, '/')
197 |                 : isEnvDevelopment &&
198 |                   (info =>
199 |                       path
200 |                           .resolve(info.absoluteResourcePath)
201 |                           .replace(/\\/g, '/')),
202 |             // Prevents conflicts when multiple Webpack runtimes (from different apps)
203 |             // are used on the same page.
204 |             jsonpFunction: `webpackJsonp${appPackageJson.name}`,
205 |             // this defaults to 'window', but by setting it to 'this' then
206 |             // module chunks which are built will work in web workers as well.
207 |             globalObject: 'this',
208 |         },
209 |         optimization: {
210 |             minimize: isEnvProduction,
211 |             minimizer: [
212 |                 // This is only used in production mode
213 |                 new TerserPlugin({
214 |                     terserOptions: {
215 |                         parse: {
216 |                             // We want terser to parse ecma 8 code. However, we don't want it
217 |                             // to apply any minification steps that turns valid ecma 5 code
218 |                             // into invalid ecma 5 code. This is why the 'compress' and 'output'
219 |                             // sections only apply transformations that are ecma 5 safe
220 |                             // https://github.com/facebook/create-react-app/pull/4234
221 |                             ecma: 8,
222 |                         },
223 |                         compress: {
224 |                             ecma: 5,
225 |                             warnings: false,
226 |                             // Disabled because of an issue with Uglify breaking seemingly valid code:
227 |                             // https://github.com/facebook/create-react-app/issues/2376
228 |                             // Pending further investigation:
229 |                             // https://github.com/mishoo/UglifyJS2/issues/2011
230 |                             comparisons: false,
231 |                             // Disabled because of an issue with Terser breaking valid code:
232 |                             // https://github.com/facebook/create-react-app/issues/5250
233 |                             // Pending further investigation:
234 |                             // https://github.com/terser-js/terser/issues/120
235 |                             inline: 2,
236 |                         },
237 |                         mangle: {
238 |                             safari10: true,
239 |                         },
240 |                         // Added for profiling in devtools
241 |                         keep_classnames: isEnvProductionProfile,
242 |                         keep_fnames: isEnvProductionProfile,
243 |                         output: {
244 |                             ecma: 5,
245 |                             comments: false,
246 |                             // Turned on because emoji and regex is not minified properly using default
247 |                             // https://github.com/facebook/create-react-app/issues/2488
248 |                             ascii_only: true,
249 |                         },
250 |                     },
251 |                     sourceMap: shouldUseSourceMap,
252 |                 }),
253 |                 // This is only used in production mode
254 |                 new OptimizeCSSAssetsPlugin({
255 |                     cssProcessorOptions: {
256 |                         parser: safePostCssParser,
257 |                         map: shouldUseSourceMap
258 |                             ? {
259 |                                   // `inline: false` forces the sourcemap to be output into a
260 |                                   // separate file
261 |                                   inline: false,
262 |                                   // `annotation: true` appends the sourceMappingURL to the end of
263 |                                   // the css file, helping the browser find the sourcemap
264 |                                   annotation: true,
265 |                               }
266 |                             : false,
267 |                     },
268 |                 }),
269 |             ],
270 |             // Automatically split vendor and commons
271 |             // https://twitter.com/wSokra/status/969633336732905474
272 |             // https://medium.com/webpack/webpack-4-code-splitting-chunk-graph-and-the-splitchunks-optimization-be739a861366
273 |             splitChunks: {
274 |                 chunks: 'all',
275 |                 name: false,
276 |             },
277 |             // Keep the runtime chunk separated to enable long term caching
278 |             // https://twitter.com/wSokra/status/969679223278505985
279 |             // https://github.com/facebook/create-react-app/issues/5358
280 |             runtimeChunk: {
281 |                 name: entrypoint => `runtime-${entrypoint.name}`,
282 |             },
283 |         },
284 |         resolve: {
285 |             // This allows you to set a fallback for where Webpack should look for modules.
286 |             // We placed these paths second because we want `node_modules` to "win"
287 |             // if there are any conflicts. This matches Node resolution mechanism.
288 |             // https://github.com/facebook/create-react-app/issues/253
289 |             modules: ['node_modules', paths.appNodeModules].concat(
290 |                 modules.additionalModulePaths || []
291 |             ),
292 |             // These are the reasonable defaults supported by the Node ecosystem.
293 |             // We also include JSX as a common component filename extension to support
294 |             // some tools, although we do not recommend using it, see:
295 |             // https://github.com/facebook/create-react-app/issues/290
296 |             // `web` extension prefixes have been added for better support
297 |             // for React Native Web.
298 |             extensions: paths.moduleFileExtensions
299 |                 .map(ext => `.${ext}`)
300 |                 .filter(ext => useTypeScript || !ext.includes('ts')),
301 |             alias: {
302 |                 // Support React Native Web
303 |                 // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
304 |                 'react-native': 'react-native-web',
305 |                 // Allows for better profiling with ReactDevTools
306 |                 ...(isEnvProductionProfile && {
307 |                     'react-dom$': 'react-dom/profiling',
308 |                     'scheduler/tracing': 'scheduler/tracing-profiling',
309 |                 }),
310 |                 ...(modules.webpackAliases || {}),
311 |             },
312 |             plugins: [
313 |                 // Adds support for installing with Plug'n'Play, leading to faster installs and adding
314 |                 // guards against forgotten dependencies and such.
315 |                 PnpWebpackPlugin,
316 |                 // Prevents users from importing files from outside of src/ (or node_modules/).
317 |                 // This often causes confusion because we only process files within src/ with babel.
318 |                 // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
319 |                 // please link the files into your node_modules/ and let module-resolution kick in.
320 |                 // Make sure your source files are compiled, as they will not be processed in any way.
321 |                 new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
322 |             ],
323 |         },
324 |         resolveLoader: {
325 |             plugins: [
326 |                 // Also related to Plug'n'Play, but this time it tells Webpack to load its loaders
327 |                 // from the current package.
328 |                 PnpWebpackPlugin.moduleLoader(module),
329 |             ],
330 |         },
331 |         module: {
332 |             strictExportPresence: true,
333 |             rules: [
334 |                 // Disable require.ensure as it's not a standard language feature.
335 |                 { parser: { requireEnsure: false } },
336 | 
337 |                 // First, run the linter.
338 |                 // It's important to do this before Babel processes the JS.
339 |                 {
340 |                     test: /\.(js|mjs|jsx|ts|tsx)$/,
341 |                     enforce: 'pre',
342 |                     use: [
343 |                         {
344 |                             options: {
345 |                                 cache: true,
346 |                                 formatter: require.resolve(
347 |                                     'react-dev-utils/eslintFormatter'
348 |                                 ),
349 |                                 eslintPath: require.resolve('eslint'),
350 |                                 resolvePluginsRelativeTo: __dirname,
351 |                             },
352 |                             loader: require.resolve('eslint-loader'),
353 |                         },
354 |                     ],
355 |                     include: paths.appSrc,
356 |                 },
357 |                 {
358 |                     // "oneOf" will traverse all following loaders until one will
359 |                     // match the requirements. When no loader matches it will fall
360 |                     // back to the "file" loader at the end of the loader list.
361 |                     oneOf: [
362 |                         // "url" loader works like "file" loader except that it embeds assets
363 |                         // smaller than specified limit in bytes as data URLs to avoid requests.
364 |                         // A missing `test` is equivalent to a match.
365 |                         {
366 |                             test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
367 |                             loader: require.resolve('url-loader'),
368 |                             options: {
369 |                                 limit: imageInlineSizeLimit,
370 |                                 name: 'static/media/[name].[hash:8].[ext]',
371 |                             },
372 |                         },
373 |                         // Process application JS with Babel.
374 |                         // The preset includes JSX, Flow, TypeScript, and some ESnext features.
375 |                         {
376 |                             test: /\.(js|mjs|jsx|ts|tsx)$/,
377 |                             include: paths.appSrc,
378 |                             loader: require.resolve('babel-loader'),
379 |                             options: {
380 |                                 customize: require.resolve(
381 |                                     'babel-preset-react-app/webpack-overrides'
382 |                                 ),
383 | 
384 |                                 plugins: [
385 |                                     [
386 |                                         require.resolve(
387 |                                             'babel-plugin-named-asset-import'
388 |                                         ),
389 |                                         {
390 |                                             loaderMap: {
391 |                                                 svg: {
392 |                                                     ReactComponent:
393 |                                                         '@svgr/webpack?-svgo,+titleProp,+ref![path]',
394 |                                                 },
395 |                                             },
396 |                                         },
397 |                                     ],
398 |                                 ],
399 |                                 // This is a feature of `babel-loader` for webpack (not Babel itself).
400 |                                 // It enables caching results in ./node_modules/.cache/babel-loader/
401 |                                 // directory for faster rebuilds.
402 |                                 cacheDirectory: true,
403 |                                 // See #6846 for context on why cacheCompression is disabled
404 |                                 cacheCompression: false,
405 |                                 compact: isEnvProduction,
406 |                             },
407 |                         },
408 |                         // Process any JS outside of the app with Babel.
409 |                         // Unlike the application JS, we only compile the standard ES features.
410 |                         {
411 |                             test: /\.(js|mjs)$/,
412 |                             exclude: /@babel(?:\/|\\{1,2})runtime/,
413 |                             loader: require.resolve('babel-loader'),
414 |                             options: {
415 |                                 babelrc: false,
416 |                                 configFile: false,
417 |                                 compact: false,
418 |                                 presets: [
419 |                                     [
420 |                                         require.resolve(
421 |                                             'babel-preset-react-app/dependencies'
422 |                                         ),
423 |                                         { helpers: true },
424 |                                     ],
425 |                                 ],
426 |                                 cacheDirectory: true,
427 |                                 // See #6846 for context on why cacheCompression is disabled
428 |                                 cacheCompression: false,
429 | 
430 |                                 // Babel sourcemaps are needed for debugging into node_modules
431 |                                 // code.  Without the options below, debuggers like VSCode
432 |                                 // show incorrect code and set breakpoints on the wrong lines.
433 |                                 sourceMaps: shouldUseSourceMap,
434 |                                 inputSourceMap: shouldUseSourceMap,
435 |                             },
436 |                         },
437 |                         // "postcss" loader applies autoprefixer to our CSS.
438 |                         // "css" loader resolves paths in CSS and adds assets as dependencies.
439 |                         // "style" loader turns CSS into JS modules that inject <style> tags.
440 |                         // In production, we use MiniCSSExtractPlugin to extract that CSS
441 |                         // to a file, but in development "style" loader enables hot editing
442 |                         // of CSS.
443 |                         // By default we support CSS Modules with the extension .module.css
444 |                         {
445 |                             test: cssRegex,
446 |                             exclude: cssModuleRegex,
447 |                             use: getStyleLoaders({
448 |                                 importLoaders: 1,
449 |                                 sourceMap:
450 |                                     isEnvProduction && shouldUseSourceMap,
451 |                             }),
452 |                             // Don't consider CSS imports dead code even if the
453 |                             // containing package claims to have no side effects.
454 |                             // Remove this when webpack adds a warning or an error for this.
455 |                             // See https://github.com/webpack/webpack/issues/6571
456 |                             sideEffects: true,
457 |                         },
458 |                         // Adds support for CSS Modules (https://github.com/css-modules/css-modules)
459 |                         // using the extension .module.css
460 |                         {
461 |                             test: cssModuleRegex,
462 |                             use: getStyleLoaders({
463 |                                 importLoaders: 1,
464 |                                 sourceMap:
465 |                                     isEnvProduction && shouldUseSourceMap,
466 |                                 modules: {
467 |                                     getLocalIdent: getCSSModuleLocalIdent,
468 |                                 },
469 |                             }),
470 |                         },
471 |                         // Opt-in support for SASS (using .scss or .sass extensions).
472 |                         // By default we support SASS Modules with the
473 |                         // extensions .module.scss or .module.sass
474 |                         {
475 |                             test: sassRegex,
476 |                             exclude: sassModuleRegex,
477 |                             use: getStyleLoaders(
478 |                                 {
479 |                                     importLoaders: 2,
480 |                                     sourceMap:
481 |                                         isEnvProduction && shouldUseSourceMap,
482 |                                 },
483 |                                 'sass-loader'
484 |                             ),
485 |                             // Don't consider CSS imports dead code even if the
486 |                             // containing package claims to have no side effects.
487 |                             // Remove this when webpack adds a warning or an error for this.
488 |                             // See https://github.com/webpack/webpack/issues/6571
489 |                             sideEffects: true,
490 |                         },
491 |                         // Adds support for CSS Modules, but using SASS
492 |                         // using the extension .module.scss or .module.sass
493 |                         {
494 |                             test: sassModuleRegex,
495 |                             use: getStyleLoaders(
496 |                                 {
497 |                                     importLoaders: 2,
498 |                                     sourceMap:
499 |                                         isEnvProduction && shouldUseSourceMap,
500 |                                     modules: {
501 |                                         getLocalIdent: getCSSModuleLocalIdent,
502 |                                     },
503 |                                 },
504 |                                 'sass-loader'
505 |                             ),
506 |                         },
507 |                         // "file" loader makes sure those assets get served by WebpackDevServer.
508 |                         // When you `import` an asset, you get its (virtual) filename.
509 |                         // In production, they would get copied to the `build` folder.
510 |                         // This loader doesn't use a "test" so it will catch all modules
511 |                         // that fall through the other loaders.
512 |                         {
513 |                             loader: require.resolve('file-loader'),
514 |                             // Exclude `js` files to keep "css" loader working as it injects
515 |                             // its runtime that would otherwise be processed through "file" loader.
516 |                             // Also exclude `html` and `json` extensions so they get processed
517 |                             // by webpacks internal loaders.
518 |                             exclude: [
519 |                                 /\.(js|mjs|jsx|ts|tsx)$/,
520 |                                 /\.html$/,
521 |                                 /\.json$/,
522 |                             ],
523 |                             options: {
524 |                                 name: 'static/media/[name].[hash:8].[ext]',
525 |                             },
526 |                         },
527 |                         // ** STOP ** Are you adding a new loader?
528 |                         // Make sure to add the new loader(s) before the "file" loader.
529 |                     ],
530 |                 },
531 |             ],
532 |         },
533 |         plugins: [
534 |             // Generates an `index.html` file with the <script> injected.
535 |             new HtmlWebpackPlugin(
536 |                 Object.assign(
537 |                     {},
538 |                     {
539 |                         inject: true,
540 |                         template: paths.appHtml,
541 |                     },
542 |                     isEnvProduction
543 |                         ? {
544 |                               minify: {
545 |                                   removeComments: true,
546 |                                   collapseWhitespace: true,
547 |                                   removeRedundantAttributes: true,
548 |                                   useShortDoctype: true,
549 |                                   removeEmptyAttributes: true,
550 |                                   removeStyleLinkTypeAttributes: true,
551 |                                   keepClosingSlash: true,
552 |                                   minifyJS: true,
553 |                                   minifyCSS: true,
554 |                                   minifyURLs: true,
555 |                               },
556 |                           }
557 |                         : undefined
558 |                 )
559 |             ),
560 |             // Inlines the webpack runtime script. This script is too small to warrant
561 |             // a network request.
562 |             // https://github.com/facebook/create-react-app/issues/5358
563 |             isEnvProduction &&
564 |                 shouldInlineRuntimeChunk &&
565 |                 new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [
566 |                     /runtime-.+[.]js/,
567 |                 ]),
568 |             // Makes some environment variables available in index.html.
569 |             // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
570 |             // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
571 |             // In production, it will be an empty string unless you specify "homepage"
572 |             // in `package.json`, in which case it will be the pathname of that URL.
573 |             // In development, this will be an empty string.
574 |             new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),
575 |             // This gives some necessary context to module not found errors, such as
576 |             // the requesting resource.
577 |             new ModuleNotFoundPlugin(paths.appPath),
578 |             // Makes some environment variables available to the JS code, for example:
579 |             // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
580 |             // It is absolutely essential that NODE_ENV is set to production
581 |             // during a production build.
582 |             // Otherwise React will be compiled in the very slow development mode.
583 |             new webpack.DefinePlugin(env.stringified),
584 |             // This is necessary to emit hot updates (currently CSS only):
585 |             isEnvDevelopment && new webpack.HotModuleReplacementPlugin(),
586 |             // Watcher doesn't work well if you mistype casing in a path so we use
587 |             // a plugin that prints an error when you attempt to do this.
588 |             // See https://github.com/facebook/create-react-app/issues/240
589 |             isEnvDevelopment && new CaseSensitivePathsPlugin(),
590 |             // If you require a missing module and then `npm install` it, you still have
591 |             // to restart the development server for Webpack to discover it. This plugin
592 |             // makes the discovery automatic so you don't have to restart.
593 |             // See https://github.com/facebook/create-react-app/issues/186
594 |             isEnvDevelopment &&
595 |                 new WatchMissingNodeModulesPlugin(paths.appNodeModules),
596 |             isEnvProduction &&
597 |                 new MiniCssExtractPlugin({
598 |                     // Options similar to the same options in webpackOptions.output
599 |                     // both options are optional
600 |                     filename: 'static/css/[name].[contenthash:8].css',
601 |                     chunkFilename:
602 |                         'static/css/[name].[contenthash:8].chunk.css',
603 |                 }),
604 |             // Generate an asset manifest file with the following content:
605 |             // - "files" key: Mapping of all asset filenames to their corresponding
606 |             //   output file so that tools can pick it up without having to parse
607 |             //   `index.html`
608 |             // - "entrypoints" key: Array of files which are included in `index.html`,
609 |             //   can be used to reconstruct the HTML if necessary
610 |             new ManifestPlugin({
611 |                 fileName: 'asset-manifest.json',
612 |                 publicPath: publicPath,
613 |                 generate: (seed, files, entrypoints) => {
614 |                     const manifestFiles = files.reduce((manifest, file) => {
615 |                         manifest[file.name] = file.path;
616 |                         return manifest;
617 |                     }, seed);
618 |                     const entrypointFiles = entrypoints.main.filter(
619 |                         fileName => !fileName.endsWith('.map')
620 |                     );
621 | 
622 |                     return {
623 |                         files: manifestFiles,
624 |                         entrypoints: entrypointFiles,
625 |                     };
626 |                 },
627 |             }),
628 |             // Moment.js is an extremely popular library that bundles large locale files
629 |             // by default due to how Webpack interprets its code. This is a practical
630 |             // solution that requires the user to opt into importing specific locales.
631 |             // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
632 |             // You can remove this if you don't use Moment.js:
633 |             new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
634 |             // Generate a service worker script that will precache, and keep up to date,
635 |             // the HTML & assets that are part of the Webpack build.
636 |             isEnvProduction &&
637 |                 new WorkboxWebpackPlugin.GenerateSW({
638 |                     clientsClaim: true,
639 |                     exclude: [/\.map$/, /asset-manifest\.json$/],
640 |                     importWorkboxFrom: 'cdn',
641 |                     navigateFallback: publicUrl + '/index.html',
642 |                     navigateFallbackBlacklist: [
643 |                         // Exclude URLs starting with /_, as they're likely an API call
644 |                         new RegExp('^/_'),
645 |                         // Exclude any URLs whose last part seems to be a file extension
646 |                         // as they're likely a resource and not a SPA route.
647 |                         // URLs containing a "?" character won't be blacklisted as they're likely
648 |                         // a route with query params (e.g. auth callbacks).
649 |                         new RegExp('/[^/?]+\\.[^/]+$'),
650 |                     ],
651 |                 }),
652 |             // TypeScript type checking
653 |             useTypeScript &&
654 |                 new ForkTsCheckerWebpackPlugin({
655 |                     typescript: resolve.sync('typescript', {
656 |                         basedir: paths.appNodeModules,
657 |                     }),
658 |                     async: isEnvDevelopment,
659 |                     useTypescriptIncrementalApi: true,
660 |                     checkSyntacticErrors: true,
661 |                     resolveModuleNameModule: process.versions.pnp
662 |                         ? `${__dirname}/pnpTs.js`
663 |                         : undefined,
664 |                     resolveTypeReferenceDirectiveModule: process.versions.pnp
665 |                         ? `${__dirname}/pnpTs.js`
666 |                         : undefined,
667 |                     tsconfig: paths.appTsConfig,
668 |                     reportFiles: [
669 |                         '**',
670 |                         '!**/__tests__/**',
671 |                         '!**/?(*.)(spec|test).*',
672 |                         '!**/src/setupProxy.*',
673 |                         '!**/src/setupTests.*',
674 |                     ],
675 |                     silent: true,
676 |                     // The formatter is invoked directly in WebpackDevServerUtils during development
677 |                     formatter: isEnvProduction
678 |                         ? typescriptFormatter
679 |                         : undefined,
680 |                 }),
681 |         ].filter(Boolean),
682 |         // Some libraries import Node modules but don't use them in the browser.
683 |         // Tell Webpack to provide empty mocks for them so importing them works.
684 |         node: {
685 |             module: 'empty',
686 |             dgram: 'empty',
687 |             dns: 'mock',
688 |             fs: 'empty',
689 |             http2: 'empty',
690 |             net: 'empty',
691 |             tls: 'empty',
692 |             child_process: 'empty',
693 |         },
694 |         // Turn off performance processing because we utilize
695 |         // our own hints via the FileSizeReporter
696 |         performance: false,
697 |     };
698 | };
699 | 


--------------------------------------------------------------------------------
/config/webpackDevServer.config.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
  4 | const evalSourceMapMiddleware = require('react-dev-utils/evalSourceMapMiddleware');
  5 | const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
  6 | const ignoredFiles = require('react-dev-utils/ignoredFiles');
  7 | const paths = require('./paths');
  8 | const fs = require('fs');
  9 | 
 10 | const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 11 | const host = process.env.HOST || '0.0.0.0';
 12 | 
 13 | module.exports = function(proxy, allowedHost) {
 14 |   return {
 15 |     // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
 16 |     // websites from potentially accessing local content through DNS rebinding:
 17 |     // https://github.com/webpack/webpack-dev-server/issues/887
 18 |     // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
 19 |     // However, it made several existing use cases such as development in cloud
 20 |     // environment or subdomains in development significantly more complicated:
 21 |     // https://github.com/facebook/create-react-app/issues/2271
 22 |     // https://github.com/facebook/create-react-app/issues/2233
 23 |     // While we're investigating better solutions, for now we will take a
 24 |     // compromise. Since our WDS configuration only serves files in the `public`
 25 |     // folder we won't consider accessing them a vulnerability. However, if you
 26 |     // use the `proxy` feature, it gets more dangerous because it can expose
 27 |     // remote code execution vulnerabilities in backends like Django and Rails.
 28 |     // So we will disable the host check normally, but enable it if you have
 29 |     // specified the `proxy` setting. Finally, we let you override it if you
 30 |     // really know what you're doing with a special environment variable.
 31 |     disableHostCheck:
 32 |       !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
 33 |     // Enable gzip compression of generated files.
 34 |     compress: true,
 35 |     // Silence WebpackDevServer's own logs since they're generally not useful.
 36 |     // It will still show compile warnings and errors with this setting.
 37 |     clientLogLevel: 'none',
 38 |     // By default WebpackDevServer serves physical files from current directory
 39 |     // in addition to all the virtual build products that it serves from memory.
 40 |     // This is confusing because those files won’t automatically be available in
 41 |     // production build folder unless we copy them. However, copying the whole
 42 |     // project directory is dangerous because we may expose sensitive files.
 43 |     // Instead, we establish a convention that only files in `public` directory
 44 |     // get served. Our build script will copy `public` into the `build` folder.
 45 |     // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
 46 |     // <link rel="icon" href="%PUBLIC_URL%/favicon.ico">
 47 |     // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
 48 |     // Note that we only recommend to use `public` folder as an escape hatch
 49 |     // for files like `favicon.ico`, `manifest.json`, and libraries that are
 50 |     // for some reason broken when imported through Webpack. If you just want to
 51 |     // use an image, put it in `src` and `import` it from JavaScript instead.
 52 |     contentBase: paths.appPublic,
 53 |     // By default files from `contentBase` will not trigger a page reload.
 54 |     watchContentBase: true,
 55 |     // Enable hot reloading server. It will provide /sockjs-node/ endpoint
 56 |     // for the WebpackDevServer client so it can learn when the files were
 57 |     // updated. The WebpackDevServer client is included as an entry point
 58 |     // in the Webpack development configuration. Note that only changes
 59 |     // to CSS are currently hot reloaded. JS changes will refresh the browser.
 60 |     hot: true,
 61 |     // Use 'ws' instead of 'sockjs-node' on server since we're using native
 62 |     // websockets in `webpackHotDevClient`.
 63 |     transportMode: 'ws',
 64 |     // Prevent a WS client from getting injected as we're already including
 65 |     // `webpackHotDevClient`.
 66 |     injectClient: false,
 67 |     // It is important to tell WebpackDevServer to use the same "root" path
 68 |     // as we specified in the config. In development, we always serve from /.
 69 |     publicPath: '/',
 70 |     // WebpackDevServer is noisy by default so we emit custom message instead
 71 |     // by listening to the compiler events with `compiler.hooks[...].tap` calls above.
 72 |     quiet: true,
 73 |     // Reportedly, this avoids CPU overload on some systems.
 74 |     // https://github.com/facebook/create-react-app/issues/293
 75 |     // src/node_modules is not ignored to support absolute imports
 76 |     // https://github.com/facebook/create-react-app/issues/1065
 77 |     watchOptions: {
 78 |       ignored: ignoredFiles(paths.appSrc),
 79 |     },
 80 |     // Enable HTTPS if the HTTPS environment variable is set to 'true'
 81 |     https: protocol === 'https',
 82 |     host,
 83 |     overlay: false,
 84 |     historyApiFallback: {
 85 |       // Paths with dots should still use the history fallback.
 86 |       // See https://github.com/facebook/create-react-app/issues/387.
 87 |       disableDotRule: true,
 88 |     },
 89 |     public: allowedHost,
 90 |     proxy,
 91 |     before(app, server) {
 92 |       if (fs.existsSync(paths.proxySetup)) {
 93 |         // This registers user provided middleware for proxy reasons
 94 |         require(paths.proxySetup)(app);
 95 |       }
 96 | 
 97 |       // This lets us fetch source contents from webpack for the error overlay
 98 |       app.use(evalSourceMapMiddleware(server));
 99 |       // This lets us open files from the runtime error overlay.
100 |       app.use(errorOverlayMiddleware());
101 | 
102 |       // This service worker file is effectively a 'no-op' that will reset any
103 |       // previous service worker registered for the same host:port combination.
104 |       // We do this in development to avoid hitting the production cache if
105 |       // it used the same host and port.
106 |       // https://github.com/facebook/create-react-app/issues/2272#issuecomment-302832432
107 |       app.use(noopServiceWorkerMiddleware());
108 |     },
109 |   };
110 | };
111 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "temp",
  3 |   "version": "0.1.0",
  4 |   "private": true,
  5 |   "homepage": "/github",
  6 |   "dependencies": {
  7 |     "@babel/core": "7.7.4",
  8 |     "@svgr/webpack": "4.3.3",
  9 |     "@typescript-eslint/eslint-plugin": "^2.8.0",
 10 |     "@typescript-eslint/parser": "^2.8.0",
 11 |     "babel-eslint": "10.0.3",
 12 |     "babel-jest": "^24.9.0",
 13 |     "babel-loader": "8.0.6",
 14 |     "babel-plugin-named-asset-import": "^0.3.5",
 15 |     "babel-preset-react-app": "^9.1.0",
 16 |     "camelcase": "^5.3.1",
 17 |     "case-sensitive-paths-webpack-plugin": "2.2.0",
 18 |     "cra-template": "1.0.0",
 19 |     "css-loader": "3.2.0",
 20 |     "dotenv": "8.2.0",
 21 |     "dotenv-expand": "5.1.0",
 22 |     "eslint": "^6.6.0",
 23 |     "eslint-config-react-app": "^5.1.0",
 24 |     "eslint-loader": "3.0.2",
 25 |     "eslint-plugin-flowtype": "3.13.0",
 26 |     "eslint-plugin-import": "2.18.2",
 27 |     "eslint-plugin-jsx-a11y": "6.2.3",
 28 |     "eslint-plugin-react": "7.16.0",
 29 |     "eslint-plugin-react-hooks": "^1.6.1",
 30 |     "file-loader": "4.3.0",
 31 |     "fs-extra": "^8.1.0",
 32 |     "html-webpack-plugin": "4.0.0-beta.5",
 33 |     "identity-obj-proxy": "3.0.0",
 34 |     "jest": "24.9.0",
 35 |     "jest-environment-jsdom-fourteen": "0.1.0",
 36 |     "jest-resolve": "24.9.0",
 37 |     "jest-watch-typeahead": "0.4.2",
 38 |     "mini-css-extract-plugin": "0.8.0",
 39 |     "optimize-css-assets-webpack-plugin": "5.0.3",
 40 |     "pnp-webpack-plugin": "1.5.0",
 41 |     "postcss-flexbugs-fixes": "4.1.0",
 42 |     "postcss-loader": "3.0.0",
 43 |     "postcss-normalize": "8.0.1",
 44 |     "postcss-preset-env": "6.7.0",
 45 |     "postcss-safe-parser": "4.0.1",
 46 |     "react": "^16.12.0",
 47 |     "react-app-polyfill": "^1.0.5",
 48 |     "react-dev-utils": "^10.0.0",
 49 |     "react-dom": "^16.12.0",
 50 |     "react-router-dom": "^5.1.2",
 51 |     "resolve": "1.12.2",
 52 |     "resolve-url-loader": "3.1.1",
 53 |     "sass-loader": "8.0.0",
 54 |     "semver": "6.3.0",
 55 |     "style-loader": "1.0.0",
 56 |     "terser-webpack-plugin": "2.2.1",
 57 |     "ts-pnp": "1.1.5",
 58 |     "url-loader": "2.3.0",
 59 |     "webpack": "4.41.2",
 60 |     "webpack-dev-server": "3.9.0",
 61 |     "webpack-manifest-plugin": "2.2.0",
 62 |     "whatwg-fetch": "^3.0.0",
 63 |     "workbox-webpack-plugin": "4.3.1"
 64 |   },
 65 |   "scripts": {
 66 |     "start": "node scripts/start.js",
 67 |     "build": "node scripts/build.js",
 68 |     "test": "node scripts/test.js"
 69 |   },
 70 |   "eslintConfig": {
 71 |     "extends": "react-app"
 72 |   },
 73 |   "browserslist": {
 74 |     "production": [
 75 |       ">0.2%",
 76 |       "not dead",
 77 |       "not op_mini all"
 78 |     ],
 79 |     "development": [
 80 |       "last 1 chrome version",
 81 |       "last 1 firefox version",
 82 |       "last 1 safari version"
 83 |     ]
 84 |   },
 85 |   "devDependencies": {
 86 |     "@babel/helper-create-regexp-features-plugin": "^7.8.3",
 87 |     "node-sass": "^4.13.0"
 88 |   },
 89 |   "jest": {
 90 |     "roots": [
 91 |       "<rootDir>/src"
 92 |     ],
 93 |     "collectCoverageFrom": [
 94 |       "src/**/*.{js,jsx,ts,tsx}",
 95 |       "!src/**/*.d.ts"
 96 |     ],
 97 |     "setupFiles": [
 98 |       "react-app-polyfill/jsdom"
 99 |     ],
100 |     "setupFilesAfterEnv": [
101 |       "<rootDir>/src/setupTests.js"
102 |     ],
103 |     "testMatch": [
104 |       "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
105 |       "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
106 |     ],
107 |     "testEnvironment": "jest-environment-jsdom-fourteen",
108 |     "transform": {
109 |       "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
110 |       "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
111 |       "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
112 |     },
113 |     "transformIgnorePatterns": [
114 |       "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
115 |       "^.+\\.module\\.(css|sass|scss)$"
116 |     ],
117 |     "modulePaths": [],
118 |     "moduleNameMapper": {
119 |       "^react-native$": "react-native-web",
120 |       "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
121 |     },
122 |     "moduleFileExtensions": [
123 |       "web.js",
124 |       "js",
125 |       "web.ts",
126 |       "ts",
127 |       "web.tsx",
128 |       "tsx",
129 |       "json",
130 |       "web.jsx",
131 |       "jsx",
132 |       "node"
133 |     ],
134 |     "watchPlugins": [
135 |       "jest-watch-typeahead/filename",
136 |       "jest-watch-typeahead/testname"
137 |     ]
138 |   },
139 |   "babel": {
140 |     "presets": [
141 |       "react-app"
142 |     ]
143 |   }
144 | }
145 | 


--------------------------------------------------------------------------------
/previews/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/previews/1.png


--------------------------------------------------------------------------------
/previews/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/previews/2.png


--------------------------------------------------------------------------------
/previews/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/previews/3.png


--------------------------------------------------------------------------------
/previews/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/previews/4.png


--------------------------------------------------------------------------------
/previews/5.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/previews/5.png


--------------------------------------------------------------------------------
/previews/6.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/previews/6.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7 |   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
 8 |   <meta class='theme-color' name="theme-color" content="#00adb5" />
 9 |   <!-- Windows Phone -->
10 |   <meta class='theme-color' name="msapplication-navbutton-color" content="#00adb5">
11 |   <!-- iOS Safari -->
12 |   <meta name="apple-mobile-web-app-capable" content="yes">
13 |   <meta class='theme-color' name="apple-mobile-web-app-status-bar-style" content="#00adb5">
14 |   <meta name="description" content="Web site created using create-react-app" />
15 |   <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
16 |   <!--
17 |       manifest.json provides metadata used when your web app is installed on a
18 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
19 |     -->
20 |   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
21 |   <!--
22 |       Notice the use of %PUBLIC_URL% in the tags above.
23 |       It will be replaced with the URL of the `public` folder during the build.
24 |       Only files inside the `public` folder can be referenced from the HTML.
25 | 
26 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
27 |       work correctly both with client-side routing and a non-root public URL.
28 |       Learn how to configure a non-root public URL by running `npm run build`.
29 |     -->
30 |   <title>Github2019年度报告</title>
31 | </head>
32 | 
33 | <body>
34 |   <noscript>You need to enable JavaScript to run this app.</noscript>
35 |   <div id="root"></div>
36 |   <!--
37 |       This HTML file is a template.
38 |       If you open it directly in the browser, you will see an empty page.
39 | 
40 |       You can add webfonts, meta tags, or analytics to this file.
41 |       The build step will place the bundled scripts into the <body> tag.
42 | 
43 |       To begin the development, run `npm start` or `yarn start`.
44 |       To create a production bundle, use `npm run build` or `yarn build`.
45 |     -->
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/public/logo.png


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     }
15 |   ],
16 |   "start_url": ".",
17 |   "display": "standalone",
18 |   "theme_color": "#000000",
19 |   "background_color": "#ffffff"
20 | }
21 | 


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | 


--------------------------------------------------------------------------------
/scripts/build.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'production';
  5 | process.env.NODE_ENV = 'production';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const path = require('path');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const fs = require('fs-extra');
 21 | const webpack = require('webpack');
 22 | const configFactory = require('../config/webpack.config');
 23 | const paths = require('../config/paths');
 24 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 25 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
 26 | const printHostingInstructions = require('react-dev-utils/printHostingInstructions');
 27 | const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
 28 | const printBuildError = require('react-dev-utils/printBuildError');
 29 | 
 30 | const measureFileSizesBeforeBuild =
 31 |   FileSizeReporter.measureFileSizesBeforeBuild;
 32 | const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
 33 | const useYarn = fs.existsSync(paths.yarnLockFile);
 34 | 
 35 | // These sizes are pretty large. We'll warn for bundles exceeding them.
 36 | const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
 37 | const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
 38 | 
 39 | const isInteractive = process.stdout.isTTY;
 40 | 
 41 | // Warn and crash if required files are missing
 42 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 43 |   process.exit(1);
 44 | }
 45 | 
 46 | // Generate configuration
 47 | const config = configFactory('production');
 48 | 
 49 | // We require that you explicitly set browsers and do not fall back to
 50 | // browserslist defaults.
 51 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 52 | checkBrowsers(paths.appPath, isInteractive)
 53 |   .then(() => {
 54 |     // First, read the current file sizes in build directory.
 55 |     // This lets us display how much they changed later.
 56 |     return measureFileSizesBeforeBuild(paths.appBuild);
 57 |   })
 58 |   .then(previousFileSizes => {
 59 |     // Remove all content but keep the directory so that
 60 |     // if you're in it, you don't end up in Trash
 61 |     fs.emptyDirSync(paths.appBuild);
 62 |     // Merge with the public folder
 63 |     copyPublicFolder();
 64 |     // Start the webpack build
 65 |     return build(previousFileSizes);
 66 |   })
 67 |   .then(
 68 |     ({ stats, previousFileSizes, warnings }) => {
 69 |       if (warnings.length) {
 70 |         console.log(chalk.yellow('Compiled with warnings.\n'));
 71 |         console.log(warnings.join('\n\n'));
 72 |         console.log(
 73 |           '\nSearch for the ' +
 74 |             chalk.underline(chalk.yellow('keywords')) +
 75 |             ' to learn more about each warning.'
 76 |         );
 77 |         console.log(
 78 |           'To ignore, add ' +
 79 |             chalk.cyan('// eslint-disable-next-line') +
 80 |             ' to the line before.\n'
 81 |         );
 82 |       } else {
 83 |         console.log(chalk.green('Compiled successfully.\n'));
 84 |       }
 85 | 
 86 |       console.log('File sizes after gzip:\n');
 87 |       printFileSizesAfterBuild(
 88 |         stats,
 89 |         previousFileSizes,
 90 |         paths.appBuild,
 91 |         WARN_AFTER_BUNDLE_GZIP_SIZE,
 92 |         WARN_AFTER_CHUNK_GZIP_SIZE
 93 |       );
 94 |       console.log();
 95 | 
 96 |       const appPackage = require(paths.appPackageJson);
 97 |       const publicUrl = paths.publicUrl;
 98 |       const publicPath = config.output.publicPath;
 99 |       const buildFolder = path.relative(process.cwd(), paths.appBuild);
100 |       printHostingInstructions(
101 |         appPackage,
102 |         publicUrl,
103 |         publicPath,
104 |         buildFolder,
105 |         useYarn
106 |       );
107 |     },
108 |     err => {
109 |       const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
110 |       if (tscCompileOnError) {
111 |         console.log(
112 |           chalk.yellow(
113 |             'Compiled with the following type errors (you may want to check these before deploying your app):\n'
114 |           )
115 |         );
116 |         printBuildError(err);
117 |       } else {
118 |         console.log(chalk.red('Failed to compile.\n'));
119 |         printBuildError(err);
120 |         process.exit(1);
121 |       }
122 |     }
123 |   )
124 |   .catch(err => {
125 |     if (err && err.message) {
126 |       console.log(err.message);
127 |     }
128 |     process.exit(1);
129 |   });
130 | 
131 | // Create the production build and print the deployment instructions.
132 | function build(previousFileSizes) {
133 |   // We used to support resolving modules according to `NODE_PATH`.
134 |   // This now has been deprecated in favor of jsconfig/tsconfig.json
135 |   // This lets you use absolute paths in imports inside large monorepos:
136 |   if (process.env.NODE_PATH) {
137 |     console.log(
138 |       chalk.yellow(
139 |         'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
140 |       )
141 |     );
142 |     console.log();
143 |   }
144 | 
145 |   console.log('Creating an optimized production build...');
146 | 
147 |   const compiler = webpack(config);
148 |   return new Promise((resolve, reject) => {
149 |     compiler.run((err, stats) => {
150 |       let messages;
151 |       if (err) {
152 |         if (!err.message) {
153 |           return reject(err);
154 |         }
155 | 
156 |         let errMessage = err.message;
157 | 
158 |         // Add additional information for postcss errors
159 |         if (Object.prototype.hasOwnProperty.call(err, 'postcssNode')) {
160 |           errMessage +=
161 |             '\nCompileError: Begins at CSS selector ' +
162 |             err['postcssNode'].selector;
163 |         }
164 | 
165 |         messages = formatWebpackMessages({
166 |           errors: [errMessage],
167 |           warnings: [],
168 |         });
169 |       } else {
170 |         messages = formatWebpackMessages(
171 |           stats.toJson({ all: false, warnings: true, errors: true })
172 |         );
173 |       }
174 |       if (messages.errors.length) {
175 |         // Only keep the first error. Others are often indicative
176 |         // of the same problem, but confuse the reader with noise.
177 |         if (messages.errors.length > 1) {
178 |           messages.errors.length = 1;
179 |         }
180 |         return reject(new Error(messages.errors.join('\n\n')));
181 |       }
182 |       if (
183 |         process.env.CI &&
184 |         (typeof process.env.CI !== 'string' ||
185 |           process.env.CI.toLowerCase() !== 'false') &&
186 |         messages.warnings.length
187 |       ) {
188 |         console.log(
189 |           chalk.yellow(
190 |             '\nTreating warnings as errors because process.env.CI = true.\n' +
191 |               'Most CI servers set it automatically.\n'
192 |           )
193 |         );
194 |         return reject(new Error(messages.warnings.join('\n\n')));
195 |       }
196 | 
197 |       return resolve({
198 |         stats,
199 |         previousFileSizes,
200 |         warnings: messages.warnings,
201 |       });
202 |     });
203 |   });
204 | }
205 | 
206 | function copyPublicFolder() {
207 |   fs.copySync(paths.appPublic, paths.appBuild, {
208 |     dereference: true,
209 |     filter: file => file !== paths.appHtml,
210 |   });
211 | }
212 | 


--------------------------------------------------------------------------------
/scripts/start.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | // Do this as the first thing so that any code reading it knows the right env.
  4 | process.env.BABEL_ENV = 'development';
  5 | process.env.NODE_ENV = 'development';
  6 | 
  7 | // Makes the script crash on unhandled rejections instead of silently
  8 | // ignoring them. In the future, promise rejections that are not handled will
  9 | // terminate the Node.js process with a non-zero exit code.
 10 | process.on('unhandledRejection', err => {
 11 |   throw err;
 12 | });
 13 | 
 14 | // Ensure environment variables are read.
 15 | require('../config/env');
 16 | 
 17 | 
 18 | const fs = require('fs');
 19 | const chalk = require('react-dev-utils/chalk');
 20 | const webpack = require('webpack');
 21 | const WebpackDevServer = require('webpack-dev-server');
 22 | const clearConsole = require('react-dev-utils/clearConsole');
 23 | const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 24 | const {
 25 |   choosePort,
 26 |   createCompiler,
 27 |   prepareProxy,
 28 |   prepareUrls,
 29 | } = require('react-dev-utils/WebpackDevServerUtils');
 30 | const openBrowser = require('react-dev-utils/openBrowser');
 31 | const paths = require('../config/paths');
 32 | const configFactory = require('../config/webpack.config');
 33 | const createDevServerConfig = require('../config/webpackDevServer.config');
 34 | 
 35 | const useYarn = fs.existsSync(paths.yarnLockFile);
 36 | const isInteractive = process.stdout.isTTY;
 37 | 
 38 | // Warn and crash if required files are missing
 39 | if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
 40 |   process.exit(1);
 41 | }
 42 | 
 43 | // Tools like Cloud9 rely on this.
 44 | const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
 45 | const HOST = process.env.HOST || '0.0.0.0';
 46 | 
 47 | if (process.env.HOST) {
 48 |   console.log(
 49 |     chalk.cyan(
 50 |       `Attempting to bind to HOST environment variable: ${chalk.yellow(
 51 |         chalk.bold(process.env.HOST)
 52 |       )}`
 53 |     )
 54 |   );
 55 |   console.log(
 56 |     `If this was unintentional, check that you haven't mistakenly set it in your shell.`
 57 |   );
 58 |   console.log(
 59 |     `Learn more here: ${chalk.yellow('https://bit.ly/CRA-advanced-config')}`
 60 |   );
 61 |   console.log();
 62 | }
 63 | 
 64 | // We require that you explicitly set browsers and do not fall back to
 65 | // browserslist defaults.
 66 | const { checkBrowsers } = require('react-dev-utils/browsersHelper');
 67 | checkBrowsers(paths.appPath, isInteractive)
 68 |   .then(() => {
 69 |     // We attempt to use the default port but if it is busy, we offer the user to
 70 |     // run on a different port. `choosePort()` Promise resolves to the next free port.
 71 |     return choosePort(HOST, DEFAULT_PORT);
 72 |   })
 73 |   .then(port => {
 74 |     if (port == null) {
 75 |       // We have not found a port.
 76 |       return;
 77 |     }
 78 |     const config = configFactory('development');
 79 |     const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
 80 |     const appName = require(paths.appPackageJson).name;
 81 |     const useTypeScript = fs.existsSync(paths.appTsConfig);
 82 |     const tscCompileOnError = process.env.TSC_COMPILE_ON_ERROR === 'true';
 83 |     const urls = prepareUrls(protocol, HOST, port);
 84 |     const devSocket = {
 85 |       warnings: warnings =>
 86 |         devServer.sockWrite(devServer.sockets, 'warnings', warnings),
 87 |       errors: errors =>
 88 |         devServer.sockWrite(devServer.sockets, 'errors', errors),
 89 |     };
 90 |     // Create a webpack compiler that is configured with custom messages.
 91 |     const compiler = createCompiler({
 92 |       appName,
 93 |       config,
 94 |       devSocket,
 95 |       urls,
 96 |       useYarn,
 97 |       useTypeScript,
 98 |       tscCompileOnError,
 99 |       webpack,
100 |     });
101 |     // Load proxy config
102 |     const proxySetting = require(paths.appPackageJson).proxy;
103 |     const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
104 |     // Serve webpack assets generated by the compiler over a web server.
105 |     const serverConfig = createDevServerConfig(
106 |       proxyConfig,
107 |       urls.lanUrlForConfig
108 |     );
109 |     const devServer = new WebpackDevServer(compiler, serverConfig);
110 |     // Launch WebpackDevServer.
111 |     devServer.listen(port, HOST, err => {
112 |       if (err) {
113 |         return console.log(err);
114 |       }
115 |       if (isInteractive) {
116 |         clearConsole();
117 |       }
118 | 
119 |       // We used to support resolving modules according to `NODE_PATH`.
120 |       // This now has been deprecated in favor of jsconfig/tsconfig.json
121 |       // This lets you use absolute paths in imports inside large monorepos:
122 |       if (process.env.NODE_PATH) {
123 |         console.log(
124 |           chalk.yellow(
125 |             'Setting NODE_PATH to resolve modules absolutely has been deprecated in favor of setting baseUrl in jsconfig.json (or tsconfig.json if you are using TypeScript) and will be removed in a future major release of create-react-app.'
126 |           )
127 |         );
128 |         console.log();
129 |       }
130 | 
131 |       console.log(chalk.cyan('Starting the development server...\n'));
132 |       openBrowser(urls.localUrlForBrowser);
133 |     });
134 | 
135 |     ['SIGINT', 'SIGTERM'].forEach(function(sig) {
136 |       process.on(sig, function() {
137 |         devServer.close();
138 |         process.exit();
139 |       });
140 |     });
141 |   })
142 |   .catch(err => {
143 |     if (err && err.message) {
144 |       console.log(err.message);
145 |     }
146 |     process.exit(1);
147 |   });
148 | 


--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Do this as the first thing so that any code reading it knows the right env.
 4 | process.env.BABEL_ENV = 'test';
 5 | process.env.NODE_ENV = 'test';
 6 | process.env.PUBLIC_URL = '';
 7 | 
 8 | // Makes the script crash on unhandled rejections instead of silently
 9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 |   throw err;
13 | });
14 | 
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 | 
18 | 
19 | const jest = require('jest');
20 | const execSync = require('child_process').execSync;
21 | let argv = process.argv.slice(2);
22 | 
23 | function isInGitRepository() {
24 |   try {
25 |     execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' });
26 |     return true;
27 |   } catch (e) {
28 |     return false;
29 |   }
30 | }
31 | 
32 | function isInMercurialRepository() {
33 |   try {
34 |     execSync('hg --cwd . root', { stdio: 'ignore' });
35 |     return true;
36 |   } catch (e) {
37 |     return false;
38 |   }
39 | }
40 | 
41 | // Watch unless on CI or explicitly running all tests
42 | if (
43 |   !process.env.CI &&
44 |   argv.indexOf('--watchAll') === -1 &&
45 |   argv.indexOf('--watchAll=false') === -1
46 | ) {
47 |   // https://github.com/facebook/create-react-app/issues/5210
48 |   const hasSourceControl = isInGitRepository() || isInMercurialRepository();
49 |   argv.push(hasSourceControl ? '--watch' : '--watchAll');
50 | }
51 | 
52 | 
53 | jest.run(argv);
54 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import 'whatwg-fetch';
 3 | import { HashRouter as Router, Switch, Route } from 'react-router-dom';
 4 | import First from './views/First/';
 5 | import Second from './views/Second/';
 6 | import Third from './views/Third/';
 7 | import Fourth from './views/Fourth/';
 8 | import Fifth from './views/Fifth/';
 9 | import Sixth from './views/Sixth/';
10 | import Home from './views/Home/';
11 | 
12 | function App() {
13 |     return (
14 |         <Router>
15 |             <Switch>
16 |                 <Route path="/sixth">
17 |                     <Sixth />
18 |                 </Route>
19 |                 <Route path="/fifth">
20 |                     <Fifth />
21 |                 </Route>
22 |                 <Route path="/fourth">
23 |                     <Fourth />
24 |                 </Route>
25 |                 <Route path="/third">
26 |                     <Third />
27 |                 </Route>
28 |                 <Route path="/second">
29 |                     <Second />
30 |                 </Route>
31 |                 <Route path="/first">
32 |                     <First />
33 |                 </Route>
34 |                 <Route path="/">
35 |                     <Home />
36 |                 </Route>
37 |             </Switch>
38 |         </Router>
39 |     );
40 | }
41 | 
42 | export default App;
43 | 


--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { render } from '@testing-library/react';
 3 | import App from './App';
 4 | 
 5 | test('renders learn react link', () => {
 6 |   const { getByText } = render(<App />);
 7 |   const linkElement = getByText(/learn react/i);
 8 |   expect(linkElement).toBeInTheDocument();
 9 | });
10 | 


--------------------------------------------------------------------------------
/src/api.js:
--------------------------------------------------------------------------------
 1 | import { set, get } from './util';
 2 | 
 3 | const baseURL = 'https://api.github.com';
 4 | const fetch = (url, token) => {
 5 |     console.log(url);
 6 |     return window.fetch(`${baseURL}${url}`, {
 7 |         headers: {
 8 |             Authorization: `token ${token}`,
 9 |         },
10 |     });
11 | };
12 | 
13 | export const fetchRepos = async token => {
14 |     let res = await get('repos');
15 |     if (res) {
16 |         return res;
17 |     }
18 | 
19 |     res = await fetch(`/user/repos?sort=created`, token);
20 |     const repos = await res.json();
21 |     set('repos', repos);
22 |     return repos;
23 | };
24 | 
25 | export const fetchContributors = async (repoName, token) => {
26 |     const key = `contributors-${repoName}`;
27 |     let res = await get(key);
28 |     if (res) {
29 |         return res;
30 |     }
31 |     res = await fetch(`/repos/${repoName}/stats/contributors`, token);
32 |     const contributors = await res.json();
33 |     set(key, contributors);
34 |     return contributors;
35 | };
36 | 
37 | export const fetchIssues = async (repoName, token) => {
38 |     const key = `issues-${repoName}`;
39 |     let res = await get(key);
40 |     if (res) {
41 |         return res;
42 |     }
43 | 
44 |     res = await fetch(`/repos/${repoName}/issues?state=all`, token);
45 |     const issues = await res.json();
46 |     set(key, issues);
47 |     return issues;
48 | };
49 | 
50 | export const fetchUser = async token => {
51 |     let res = await get('user');
52 |     if (res) {
53 |         return res;
54 |     }
55 | 
56 |     res = await fetch(`/user`, token);
57 |     const user = await res.json();
58 |     set('user', user);
59 |     return user;
60 | };
61 | 
62 | export const fetchFollowing = async (username, token) => {
63 |     const res = await fetch(`/users/${username}/following`, token);
64 |     return await res.json();
65 | };
66 | 
67 | export const fetchCommits = async (repoName, token) => {
68 |     const key = `commits-${repoName}`;
69 |     let res = await get(key);
70 |     if (res) {
71 |         return res;
72 |     }
73 | 
74 |     res = await fetch(`/repos/${repoName}/commits`, token);
75 |     const commits = await res.json();
76 |     set(key, commits);
77 |     return commits;
78 | };
79 | 


--------------------------------------------------------------------------------
/src/assets/GitHub.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/src/assets/GitHub.png


--------------------------------------------------------------------------------
/src/assets/Sun.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/src/assets/Sun.png


--------------------------------------------------------------------------------
/src/assets/snow.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/src/assets/snow.png


--------------------------------------------------------------------------------
/src/assets/star.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shuiRong/github-annual-report/723b615f2a10d514ff914da02de013452168d44c/src/assets/star.png


--------------------------------------------------------------------------------
/src/components/Fire/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.scss';
 3 | 
 4 | export default function HelloYou() {
 5 |     return (
 6 |         <div className="container">
 7 |             <div className="corpus diamond">
 8 |                 <div className="diamond diamond-inner diamond-right"></div>
 9 |                 <div className="diamond diamond-inner diamond-left"></div>
10 |             </div>
11 |         </div>
12 |     );
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/Fire/index.scss:
--------------------------------------------------------------------------------
 1 | :root {
 2 |     --f-border-radius: 0.45rem;
 3 |     --f-orange: #ffc719;
 4 |     --f-red: #bf033b;
 5 |     --f-rotated: 45deg;
 6 |     --f-size: 7.25rem;
 7 |     --f-animation-duration: 0.75s;
 8 |     --f-animation-name: vibrate;
 9 |     --f-animation-delay: 0.25s;
10 | }
11 | 
12 | .second {
13 |     .container {
14 |         margin-top: 7vw;
15 |         display: flex;
16 |         justify-content: center;
17 |         height: 0;
18 |         left: 0;
19 |         top: 0;
20 |     }
21 | 
22 |     .corpus {
23 |         transform: rotate(var(--f-rotated));
24 |     }
25 | 
26 |     .diamond {
27 |         background-color: var(--f-red);
28 |         background-image: linear-gradient(
29 |             195deg,
30 |             var(--f-red) 0%,
31 |             var(--f-orange) 74%
32 |         );
33 |         border-radius: var(--f-border-radius);
34 |         height: var(--f-size);
35 |         width: var(--f-size);
36 |     }
37 | 
38 |     .diamond-inner {
39 |         position: relative;
40 |         animation: var(--f-animation-name) var(--f-animation-duration) ease-in
41 |             var(--f-animation-delay) alternate-reverse infinite;
42 |     }
43 | 
44 |     .diamond-right {
45 |         --f-animation-duration: 0.95s;
46 |         --f-size: 4.25rem;
47 | 
48 |         right: -35px;
49 |         top: -45px;
50 |     }
51 | 
52 |     .diamond-left {
53 |         --f-animation-delay: 0.05s;
54 |         --f-size: 3.45rem;
55 | 
56 |         right: 65px;
57 |         top: -45px;
58 |     }
59 | 
60 |     .diamond-inner::after {
61 |         animation: var(--f-animation-name) var(--f-animation-duration) ease-in
62 |             var(--f-animation-delay) alternate-reverse infinite;
63 |         background-image: linear-gradient(
64 |             195deg,
65 |             var(--f-red) 0%,
66 |             var(--f-orange) 74%
67 |         );
68 |         border-radius: 0.15rem;
69 |         content: '';
70 |         display: block;
71 |         height: 1.25rem;
72 |         width: 1.25rem;
73 |         position: relative;
74 |         right: -15px;
75 |         top: -45px;
76 |     }
77 | 
78 |     .diamond-right.diamond-inner::after {
79 |         top: -25px;
80 |         width: 0.75rem;
81 |         height: 0.75rem;
82 |     }
83 | 
84 |     @keyframes vibrate {
85 |         to {
86 |             transform: scale(0.75) translate(15px, 15px);
87 |         }
88 |     }
89 | }
90 | 


--------------------------------------------------------------------------------
/src/components/HelloYou/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { user } from '../../service';
 3 | 
 4 | import './index.scss';
 5 | 
 6 | export default function HelloYou() {
 7 |     return (
 8 |         <div className="ambiva-header">
 9 |             <h1>
10 |                 Hello, <br />
11 |                 {user.login}
12 |             </h1>
13 |         </div>
14 |     );
15 | }
16 | 


--------------------------------------------------------------------------------
/src/components/HelloYou/index.scss:
--------------------------------------------------------------------------------
 1 | .first {
 2 |     $point: #70c490;
 3 |     $point-light: lighten($point, 5%);
 4 |     $background-color: $point;
 5 |     $shadow-color: $point-light;
 6 |     $shadow-length: 500;
 7 |     $text-size: inherit;
 8 | 
 9 |     @function longshadow($length, $angle, $shadow-color) {
10 |         $val: 0px 0px transparent;
11 |         @for $i from 2 through $length {
12 |             $val: #{$val}, #{$i}px #{$i * $angle}px $shadow-color;
13 |         }
14 |         @return $val;
15 |     }
16 | 
17 |     html {
18 |         font-size: 1em;
19 |     }
20 | 
21 |     body {
22 |         overflow: hidden;
23 |     }
24 | 
25 |     .ambiva-header {
26 |         display: flex;
27 |         flex-direction: column;
28 |         align-items: center;
29 |         justify-content: center;
30 | 
31 |         h1,
32 |         h2,
33 |         h3 {
34 |             color: white;
35 |             font-size: $text-size;
36 |             text-shadow: longshadow($shadow-length, 1, $shadow-color);
37 |             animation-name: shadow;
38 |             animation-duration: 2s;
39 |             transition-timing-function: cubic-bezier(0.68, 0, 0.31, 1);
40 |         }
41 | 
42 |         p {
43 |             color: white;
44 |         }
45 |     }
46 | 
47 |     @keyframes shadow {
48 |         from {
49 |             text-shadow: longshadow(0, 1, $shadow-color);
50 |         }
51 |         to {
52 |             text-shadow: longshadow($shadow-length, 1, $shadow-color);
53 |         }
54 |     }
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/Loader/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.scss';
 3 | 
 4 | export default function Loader() {
 5 |     return (
 6 |         <div className="loader">
 7 |             <div className="inner one"></div>
 8 |             <div className="inner two"></div>
 9 |             <div className="inner three"></div>
10 |         </div>
11 |     );
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/Loader/index.scss:
--------------------------------------------------------------------------------
 1 | .loader {
 2 |     position: absolute;
 3 |     top: calc(50% - 32px);
 4 |     left: calc(50% - 32px);
 5 |     width: 64px;
 6 |     height: 64px;
 7 |     border-radius: 50%;
 8 |     perspective: 800px;
 9 | 
10 |     .inner {
11 |         position: absolute;
12 |         box-sizing: border-box;
13 |         width: 100%;
14 |         height: 100%;
15 |         border-radius: 50%;
16 |     }
17 | 
18 |     .inner.one {
19 |         left: 0%;
20 |         top: 0%;
21 |         animation: rotate-one 1s linear infinite;
22 |         border-bottom: 3px solid #161b3d;
23 |     }
24 | 
25 |     .inner.two {
26 |         right: 0%;
27 |         top: 0%;
28 |         animation: rotate-two 1s linear infinite;
29 |         border-right: 3px solid #161b3d;
30 |     }
31 | 
32 |     .inner.three {
33 |         right: 0%;
34 |         bottom: 0%;
35 |         animation: rotate-three 1s linear infinite;
36 |         border-top: 3px solid #161b3d;
37 |     }
38 | 
39 |     @keyframes rotate-one {
40 |         0% {
41 |             transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
42 |         }
43 |         100% {
44 |             transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
45 |         }
46 |     }
47 | 
48 |     @keyframes rotate-two {
49 |         0% {
50 |             transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
51 |         }
52 |         100% {
53 |             transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
54 |         }
55 |     }
56 | 
57 |     @keyframes rotate-three {
58 |         0% {
59 |             transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
60 |         }
61 |         100% {
62 |             transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
63 |         }
64 |     }
65 | }
66 | 


--------------------------------------------------------------------------------
/src/components/MilkButton/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.scss';
 3 | 
 4 | export default function MilkButton() {
 5 |     return (
 6 |         <div>
 7 |             <div className="container">
 8 |                 <button className="btn play-pause">
 9 |                     <div className="icon-container">
10 |                         <svg
11 |                             t="1579183548434"
12 |                             className="icon"
13 |                             viewBox="0 0 1024 1024"
14 |                             version="1.1"
15 |                             xmlns="http://www.w3.org/2000/svg"
16 |                             p-id="5776"
17 |                             href="http://www.w3.org/1999/xlink"
18 |                             width="32"
19 |                             height="32"
20 |                         >
21 |                             <defs>
22 |                                 <style type="text/css"></style>
23 |                             </defs>
24 |                             <path
25 |                                 d="M999.722667 449.024C886.912 324.864 699.733333 193.621333 512 196.266667 324.266667 193.578667 137.088 324.906667 24.234667 449.024a94.336 94.336 0 0 0 0 125.781333C135.722667 697.642667 320.298667 827.733333 505.130667 827.733333h13.141333c185.472 0 369.962667-130.090667 481.578667-252.970666a94.293333 94.293333 0 0 0-0.128-125.738667zM315.733333 512a196.266667 196.266667 0 1 1 196.266667 196.266667A196.266667 196.266667 0 0 1 315.733333 512z"
26 |                                 p-id="5777"
27 |                                 fill="#00adb5"
28 |                             ></path>
29 |                             <path
30 |                                 d="M512 512m-85.333333 0a85.333333 85.333333 0 1 0 170.666666 0 85.333333 85.333333 0 1 0-170.666666 0Z"
31 |                                 p-id="5778"
32 |                                 fill="#00adb5"
33 |                             ></path>
34 |                         </svg>
35 |                     </div>
36 |                 </button>
37 |             </div>
38 |         </div>
39 |     );
40 | }
41 | 


--------------------------------------------------------------------------------
/src/components/MilkButton/index.scss:
--------------------------------------------------------------------------------
  1 | .home {
  2 |     *,
  3 |     *::before,
  4 |     *::after {
  5 |         &:focus {
  6 |             outline: none;
  7 |         }
  8 |         &::-webkit-input-placeholder {
  9 |             color: #222;
 10 |         }
 11 |         &::-moz-placeholder {
 12 |             color: #222;
 13 |         }
 14 |     }
 15 |     $bg-color: #f2f2f2;
 16 |     .icons {
 17 |         display: none;
 18 |     }
 19 |     button {
 20 |         border: 0;
 21 |         &:focus {
 22 |             border: none;
 23 |             outline: 0 !important;
 24 |             outline-style: none;
 25 |         }
 26 |     }
 27 |     .container {
 28 |         display: flex;
 29 |         align-items: center;
 30 |         justify-content: space-around;
 31 | 
 32 |         .btn {
 33 |             position: relative;
 34 |             width: 80px;
 35 |             height: 80px;
 36 |             border-radius: 50%;
 37 |             background: $bg-color;
 38 |             transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
 39 |             box-shadow: 0px -6px 10px rgba(255, 255, 255, 1),
 40 |                 0px 4px 15px rgba(0, 0, 0, 0.15);
 41 |             cursor: pointer;
 42 |             &:after {
 43 |                 // buttons pseudo element
 44 |                 content: '';
 45 |                 position: absolute;
 46 |                 left: 0;
 47 |                 top: 0;
 48 |                 width: 100%;
 49 |                 height: 100%;
 50 |                 border-radius: 50%;
 51 |                 z-index: 2;
 52 |             }
 53 |             &:active {
 54 |                 // button state active
 55 |                 box-shadow: 0 15px 20px rgba(0, 0, 0, 0.02);
 56 |                 &:after {
 57 |                     box-shadow: inset 0px -2px 5px rgb(255, 255, 255),
 58 |                         inset 0px 2px 5px rgba(0, 0, 0, 0.15);
 59 |                 }
 60 |             }
 61 |             &.active {
 62 |                 // button with active class
 63 |                 &.play-pause {
 64 |                     .icon {
 65 |                         &.pause {
 66 |                             opacity: 1;
 67 |                             transform: translate(-50%, -50%);
 68 |                         }
 69 |                         &.play {
 70 |                             opacity: 0;
 71 |                             transform: translate(-50%, 50%);
 72 |                         }
 73 |                     }
 74 |                 }
 75 |             }
 76 | 
 77 |             .icon-container,
 78 |             a {
 79 |                 position: absolute;
 80 |                 top: 0;
 81 |                 left: 0;
 82 |                 width: 100%;
 83 |                 height: 100%;
 84 |             }
 85 |             a {
 86 |                 z-index: 10;
 87 |             }
 88 |             .icon {
 89 |                 // svg icons
 90 |                 position: absolute;
 91 |                 top: 50%;
 92 |                 left: 50%;
 93 |                 transform: translate(-50%, -50%);
 94 |                 display: inline-block;
 95 |                 fill: #868686;
 96 |                 height: 1.4rem;
 97 |                 vertical-align: middle;
 98 |                 width: 1.4rem;
 99 |                 transition: all 100ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
100 |             }
101 |             &.play-pause {
102 |                 // diff buttons
103 |                 .icon {
104 |                     &.pause {
105 |                         opacity: 0;
106 |                         transform: translate(-50%, 50%);
107 |                     }
108 |                 }
109 |             }
110 |             &.volume-control {
111 |                 height: 160px;
112 |                 border-radius: 50px;
113 |                 &::after {
114 |                     border-radius: 50px;
115 |                 }
116 |                 .icon-container {
117 |                     height: 50%;
118 |                     &:last-child {
119 |                         transform: translateY(100%);
120 |                     }
121 |                 }
122 |                 .icon {
123 |                     width: 1.6rem;
124 |                     height: 1.6rem;
125 |                     &.plus {
126 |                         transform: translate(-50%, -50%);
127 |                     }
128 |                     &.minus {
129 |                         transform: translate(-50%, -50%);
130 |                     }
131 |                 }
132 |             }
133 |         }
134 |     }
135 | }
136 | 


--------------------------------------------------------------------------------
/src/components/NewYear/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.scss';
 3 | 
 4 | export default function NewYear() {
 5 |     return (
 6 |         <div className="digits">
 7 |             <svg
 8 |                 className="digit"
 9 |                 viewBox="-20 -20 140 240"
10 |                 width="100"
11 |                 height="200"
12 |                 strokeWidth="20"
13 |                 fill="none"
14 |                 style={{ '--color': '#5288E1', '--i': 1 }}
15 |             >
16 |                 <circle r="50" cx="50" cy="50" pathLength="1" />
17 | 
18 |                 <path
19 |                     pathLength="1"
20 |                     d="M0 50
21 |          C 0 0, 50 0, 50 0
22 |          C 100 0, 100 50, 100 50
23 |          L 0 200
24 |          L 100 200"
25 |                 />
26 |             </svg>
27 | 
28 |             <svg
29 |                 className="digit"
30 |                 viewBox="-20 -20 140 240"
31 |                 width="100"
32 |                 height="200"
33 |                 strokeWidth="20"
34 |                 fill="none"
35 |                 style={{ '--color': '#3DA658', '--i': 2 }}
36 |             >
37 |                 <circle r="50" cx="50" cy="150" stroke="#F00" pathLength="1" />
38 | 
39 |                 <path
40 |                     pathLength="1"
41 |                     d="M 100 150
42 |          C 100 200, 50 200, 50 200
43 |          C 0 200, 0 150, 0 150
44 |          L 0 50
45 |          C 0 0, 50 0, 50 0
46 |          C 100 0, 100 50, 100 50
47 |          L 100 150"
48 |                 />
49 |             </svg>
50 | 
51 |             <svg
52 |                 className="digit"
53 |                 viewBox="-20 -20 140 240"
54 |                 width="100"
55 |                 height="200"
56 |                 strokeWidth="20"
57 |                 fill="none"
58 |                 style={{ '--color': '#EFBE1B', '--i': 3 }}
59 |             >
60 |                 <circle r="50" cx="50" cy="50" pathLength="1" />
61 | 
62 |                 <path
63 |                     pathLength="1"
64 |                     d="M0 50
65 |          C 0 0, 50 0, 50 0
66 |          C 100 0, 100 50, 100 50
67 |          L 0 200
68 |          L 100 200"
69 |                 />
70 |             </svg>
71 | 
72 |             <svg
73 |                 className="digit"
74 |                 viewBox="-20 -20 140 240"
75 |                 width="100"
76 |                 height="200"
77 |                 strokeWidth="20"
78 |                 fill="none"
79 |                 style={{ '--color': '#D7483D', '--i': 4 }}
80 |             >
81 |                 <circle r="50" cx="50" cy="150" pathLength="1" />
82 | 
83 |                 <path
84 |                     pathLength="1"
85 |                     d="M 100 150
86 |          C 100 200, 50 200, 50 200
87 |          C 0 200, 0 150, 0 150
88 |          L 0 50
89 |          C 0 0, 50 0, 50 0
90 |          C 100 0, 100 50, 100 50
91 |          L 100 150"
92 |                 />
93 |             </svg>
94 |         </div>
95 |     );
96 | }
97 | 


--------------------------------------------------------------------------------
/src/components/NewYear/index.scss:
--------------------------------------------------------------------------------
  1 | :root {
  2 |     --duration: 5s;
  3 |     --ease: cubic-bezier(0.6, 0, 0.2, 1);
  4 | }
  5 | 
  6 | .sixth {
  7 |     * {
  8 |         position: relative;
  9 |     }
 10 |     .digit {
 11 |         stroke-width: 30;
 12 |         animation: var(--duration) var(--ease) both alternate infinite;
 13 |         animation-delay: calc((var(--i) * 0.05s));
 14 | 
 15 |         //animation-play-state: paused;
 16 | 
 17 |         circle,
 18 |         path {
 19 |             animation: inherit;
 20 |             stroke: var(--color);
 21 |             stroke-linejoin: round;
 22 |             stroke-linecap: round;
 23 |             /* Additional offsets for rounded stroke */
 24 |             stroke-dashoffset: -1.2;
 25 |             stroke-dasharray: 1 1.2;
 26 |         }
 27 | 
 28 |         circle {
 29 |             animation-name: circle-draw;
 30 | 
 31 |             @keyframes circle-draw {
 32 |                 0%,
 33 |                 5% {
 34 |                     stroke-dasharray: 0 1.2 0.2 0.3;
 35 |                     stroke-dashoffset: 1.75;
 36 |                 }
 37 | 
 38 |                 18%,
 39 |                 50% {
 40 |                     stroke-dasharray: 1 1.1;
 41 |                     stroke-dashoffset: 0;
 42 |                 }
 43 |                 70%,
 44 |                 100% {
 45 |                     stroke-dashoffset: -1.1;
 46 |                 }
 47 |             }
 48 |         }
 49 | 
 50 |         path {
 51 |             animation-name: path-draw;
 52 | 
 53 |             @keyframes path-draw {
 54 |                 0%,
 55 |                 43% {
 56 |                     stroke-dashoffset: 1.1;
 57 |                 }
 58 |                 //25%, 50% { stroke-dashoffset: 0; }
 59 |                 90%,
 60 |                 100% {
 61 |                     stroke-dashoffset: 0;
 62 |                 }
 63 |             }
 64 |         }
 65 |     }
 66 | 
 67 |     .digit {
 68 |         animation-name: digit;
 69 | 
 70 |         &:nth-child(1) {
 71 |             --x-offset: 150%;
 72 |         }
 73 |         &:nth-child(2) {
 74 |             --x-offset: 50%;
 75 |         }
 76 |         &:nth-child(3) {
 77 |             --x-offset: -50%;
 78 |         }
 79 |         &:nth-child(4) {
 80 |             --x-offset: -150%;
 81 |         }
 82 | 
 83 |         &:nth-child(even) {
 84 |             // pixel pushing by Shaw™
 85 |             --y-offset: calc(-25% + 2%);
 86 |         }
 87 |         &:nth-child(odd) {
 88 |             --y-offset: calc(25% - 12%);
 89 |         }
 90 | 
 91 |         @keyframes digit {
 92 |             from,
 93 |             15% {
 94 |                 transform: translate(var(--x-offset, 0), var(--y-offset, 0));
 95 |             }
 96 |             30% {
 97 |                 transform: translate(0%, var(--y-offset));
 98 |             }
 99 |             45%,
100 |             to {
101 |                 transform: none;
102 |             }
103 |         }
104 |     }
105 | 
106 |     .digits {
107 |         display: flex;
108 |         flex-direction: row;
109 |         width: 100%;
110 |     }
111 | }
112 | 


--------------------------------------------------------------------------------
/src/components/NightMoon/index.scss:
--------------------------------------------------------------------------------
  1 | .third {
  2 |     $background-color: #2f2349;
  3 |     $sky-gradient-start-color: #8652e2;
  4 |     $sky-gradient-end-color: #6b3da0;
  5 | 
  6 |     .canvas {
  7 |         height: 70vw;
  8 |         width: 100%;
  9 |         border-radius: 1vw;
 10 |         position: relative;
 11 |         background: linear-gradient(
 12 |             to bottom,
 13 |             $sky-gradient-start-color 0%,
 14 |             $sky-gradient-end-color 246px
 15 |         );
 16 |         overflow: hidden;
 17 |     }
 18 |     .moon {
 19 |         position: absolute;
 20 |         z-index: 2;
 21 |         height: 70px;
 22 |         width: 70px;
 23 |         background-color: white;
 24 |         left: 125px;
 25 |         top: 110px;
 26 |         border-radius: 50%;
 27 |         box-shadow: 0 0 15px white, 0 0 100px white;
 28 | 
 29 |         &-bg {
 30 |             opacity: 0.5;
 31 |             border-radius: 50%;
 32 | 
 33 |             &-1,
 34 |             &-2,
 35 |             &-3,
 36 |             &-4 {
 37 |                 position: absolute;
 38 |             }
 39 | 
 40 |             &-1 {
 41 |                 height: 95px;
 42 |                 width: 95px;
 43 |                 left: 113px;
 44 |                 top: 97px;
 45 |                 background: linear-gradient(to bottom, #c785ea, #bf70e2);
 46 |             }
 47 | 
 48 |             &-2 {
 49 |                 height: 130px;
 50 |                 width: 130px;
 51 |                 left: 96px;
 52 |                 top: 80px;
 53 |                 background: linear-gradient(to bottom, #b775e1, #ae5fd6);
 54 |             }
 55 | 
 56 |             &-3 {
 57 |                 height: 170px;
 58 |                 width: 170px;
 59 |                 left: 78px;
 60 |                 top: 61px;
 61 |                 background: linear-gradient(to bottom, #944bbe, #944bbe);
 62 |             }
 63 | 
 64 |             &-4 {
 65 |                 z-index: 0;
 66 |                 height: 210px;
 67 |                 width: 210px;
 68 |                 left: 59px;
 69 |                 top: 42px;
 70 |                 background: linear-gradient(to bottom, #9559df, #8141b9);
 71 |             }
 72 |         }
 73 |     }
 74 | 
 75 |     .mountain {
 76 |         &-foreground,
 77 |         &-background {
 78 |             position: absolute;
 79 |         }
 80 | 
 81 |         &-foreground {
 82 |             left: 5px;
 83 |             bottom: -55px;
 84 |             z-index: 3;
 85 | 
 86 |             & path {
 87 |                 fill: #2a165b;
 88 |             }
 89 |         }
 90 | 
 91 |         &-background {
 92 |             left: -120px;
 93 |             bottom: 25px;
 94 |             z-index: 2;
 95 | 
 96 |             & path {
 97 |                 fill: #3c1872;
 98 |             }
 99 |         }
100 |     }
101 | 
102 |     .tree {
103 |         &-1,
104 |         &-2,
105 |         &-3,
106 |         &-4,
107 |         &-5,
108 |         &-6,
109 |         &-7 {
110 |             position: absolute;
111 |         }
112 | 
113 |         &-1 {
114 |             z-index: 2;
115 |             width: 35px;
116 |             left: 10px;
117 |             bottom: 100px;
118 |             & path {
119 |                 fill: #3c1872;
120 |             }
121 |         }
122 | 
123 |         &-2 {
124 |             z-index: 2;
125 |             width: 25px;
126 |             left: 40px;
127 |             bottom: 105px;
128 |             & path {
129 |                 fill: #3c1872;
130 |             }
131 |         }
132 | 
133 |         &-3 {
134 |             z-index: 3;
135 |             width: 60px;
136 |             left: 50px;
137 |             bottom: 15px;
138 |             & path {
139 |                 fill: #140d35;
140 |             }
141 |         }
142 | 
143 |         &-4 {
144 |             z-index: 3;
145 |             width: 90px;
146 |             left: 100px;
147 |             bottom: 0px;
148 |             & path {
149 |                 fill: #140d35;
150 |             }
151 |         }
152 | 
153 |         &-5 {
154 |             z-index: 3;
155 |             width: 90px;
156 |             left: 165px;
157 |             bottom: 8px;
158 |             & path {
159 |                 fill: #140d35;
160 |             }
161 |         }
162 | 
163 |         &-6 {
164 |             z-index: 1;
165 |             width: 25px;
166 |             right: 10px;
167 |             bottom: 130px;
168 |             & path {
169 |                 fill: #301763;
170 |             }
171 |         }
172 | 
173 |         &-7 {
174 |             z-index: 1;
175 |             width: 15px;
176 |             right: 0px;
177 |             bottom: 125px;
178 |             & path {
179 |                 fill: #301763;
180 |             }
181 |         }
182 |     }
183 | 
184 |     .star {
185 |         background: white;
186 |         position: absolute;
187 |         left: 100px;
188 |         top: 20px;
189 |         border-radius: 25%;
190 |         animation: startwinkle 5s infinite linear;
191 |         opacity: 0.5;
192 |         &.star-1 {
193 |             left: 150px;
194 |         }
195 |         &.star-2 {
196 |             left: 170px;
197 |             top: 60px;
198 |         }
199 | 
200 |         &.star-3 {
201 |             left: 130px;
202 |             top: 80px;
203 |         }
204 |         &.star-4 {
205 |             left: 90px;
206 |             top: 80px;
207 |         }
208 |         &.star-5 {
209 |             left: 179px;
210 |             top: 90px;
211 |         }
212 |         &.star-6 {
213 |             left: 136px;
214 |             top: 97px;
215 |         }
216 |         &.star-7 {
217 |             left: 150px;
218 |             top: 97px;
219 |         }
220 |         &.star-8 {
221 |             left: 200px;
222 |             top: 95px;
223 |         }
224 |         &.star-9 {
225 |             left: 260px;
226 |             top: 95px;
227 |         }
228 |         &.star-10 {
229 |             left: 37px;
230 |             top: 100px;
231 |         }
232 |         &.star-11 {
233 |             left: 35px;
234 |             top: 80px;
235 |         }
236 |         &.star-12 {
237 |             left: 25px;
238 |             top: 90px;
239 |         }
240 |         &.star-13 {
241 |             left: 25px;
242 |             top: 135px;
243 |         }
244 |         &.star-14 {
245 |             left: 25px;
246 |             top: 118px;
247 |         }
248 |         &.star-15 {
249 |             left: 10px;
250 |             top: 123px;
251 |         }
252 |         &.star-16 {
253 |             left: 135px;
254 |             top: 23px;
255 |         }
256 |         &.star-17 {
257 |             left: 140px;
258 |             top: 10px;
259 |         }
260 | 
261 |         &.star-18 {
262 |             left: 200px;
263 |             top: 36px;
264 |         }
265 |         &.star-19 {
266 |             left: 215px;
267 |             top: 37px;
268 |         }
269 |         &.star-20 {
270 |             left: 219px;
271 |             top: 30px;
272 |         }
273 |         &.star-21 {
274 |             left: 230px;
275 |             top: 80px;
276 |         }
277 |         &.star-22 {
278 |             left: 230px;
279 |             top: 150px;
280 |         }
281 |         &.star-23 {
282 |             left: 226px;
283 |             top: 158px;
284 |         }
285 |         &.star-24 {
286 |             left: 250px;
287 |             top: 136px;
288 |         }
289 |         &.star-25 {
290 |             left: 273px;
291 |             top: 123px;
292 |         }
293 |         &.star-26 {
294 |             left: 298px;
295 |             top: 93px;
296 |         }
297 |         &.star-27 {
298 |             left: 296px;
299 |             top: 136px;
300 |         }
301 |         &.star-28 {
302 |             left: 279px;
303 |             top: 150px;
304 |         }
305 |         &.star-29 {
306 |             left: 85px;
307 |             top: 29px;
308 |         }
309 |         &.star-30 {
310 |             left: 83px;
311 |             top: 46px;
312 |         }
313 |     }
314 | 
315 |     .opacity-half {
316 |         opacity: 0.5;
317 |     }
318 | 
319 |     .opacity-quarter {
320 |         opacity: 0.25;
321 |     }
322 | 
323 |     @keyframes startwinkle {
324 |         0% {
325 |             opacity: 0;
326 |         }
327 |         50% {
328 |             opacity: 1;
329 |         }
330 |         100% {
331 |             opacity: 0;
332 |         }
333 |     }
334 | 
335 |     @for $i from 1 through 30 {
336 |         .star:nth-child(#{$i}) {
337 |             $size: random(2) + px;
338 |             height: $size;
339 |             width: $size;
340 |             animation-delay: ($i * -0.3s);
341 |         }
342 |     }
343 | }
344 | 


--------------------------------------------------------------------------------
/src/components/Pyramid/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.scss';
 3 | 
 4 | export default function Pyramid() {
 5 |     return (
 6 |         <div className="scene">
 7 |             <div className="scene__sun"></div>
 8 |             <div className="scene__moon"></div>
 9 |             <div className="scene__pyramide"></div>
10 |             <div className="scene__ground"></div>
11 |         </div>
12 |     );
13 | }
14 | 


--------------------------------------------------------------------------------
/src/components/Pyramid/index.scss:
--------------------------------------------------------------------------------
  1 | .fourth {
  2 |     .scene {
  3 |         --g-dark-color: #bad1fc;
  4 |         --g-light-color: #e0eafc;
  5 | 
  6 |         background: linear-gradient(
  7 |             to top,
  8 |             var(--g-light-color),
  9 |             var(--g-dark-color)
 10 |         );
 11 |         margin-top: 15vw;
 12 |         height: 80vw;
 13 |         overflow: hidden;
 14 |         position: relative;
 15 |         width: 80vw;
 16 |         border-radius: 1vw;
 17 |     }
 18 | 
 19 |     .scene__sun {
 20 |         --g-dark-color: #ffd530;
 21 |         --g-light-color: #ffe47a;
 22 | 
 23 |         background: linear-gradient(
 24 |             to top left,
 25 |             var(--g-light-color),
 26 |             var(--g-dark-color)
 27 |         );
 28 |         border-radius: 50%;
 29 |         height: 50px;
 30 |         left: 35px;
 31 |         position: absolute;
 32 |         top: 50px;
 33 |         width: 50px;
 34 |     }
 35 | 
 36 |     .scene__moon {
 37 |         --g-dark-color: #eef1f5;
 38 |         --g-light-color: #e6e9f0;
 39 | 
 40 |         background: linear-gradient(
 41 |             to top right,
 42 |             var(--g-light-color),
 43 |             var(--g-dark-color)
 44 |         );
 45 |         border-radius: 50%;
 46 |         height: 50px;
 47 |         right: 35px;
 48 |         position: absolute;
 49 |         top: 80vw;
 50 |         width: 50px;
 51 |     }
 52 | 
 53 |     .scene__pyramide {
 54 |         border-bottom: 100px solid #ff9d6c;
 55 |         border-left: 75px solid transparent;
 56 |         border-right: 75px solid transparent;
 57 |         height: 0;
 58 |         left: 100px;
 59 |         position: absolute;
 60 |         top: 100px;
 61 |         width: 0;
 62 |     }
 63 | 
 64 |     .scene__ground {
 65 |         --g-dark-color: #dd6161;
 66 |         --g-light-color: #fff886;
 67 | 
 68 |         background: linear-gradient(
 69 |             to top,
 70 |             var(--g-dark-color),
 71 |             var(--g-light-color)
 72 |         );
 73 |         height: 80vw;
 74 |         position: absolute;
 75 |         top: 200px;
 76 |         width: 80vw;
 77 |     }
 78 | 
 79 |     .scene.start {
 80 |         animation: night-sky 1.75s ease-in forwards;
 81 |     }
 82 | 
 83 |     .scene.start .scene__sun {
 84 |         animation: sunset 1.75s ease-in forwards;
 85 |     }
 86 | 
 87 |     .scene.start .scene__moon {
 88 |         animation: moonrise 1.75s ease-out forwards;
 89 |     }
 90 | 
 91 |     .scene.start .scene__pyramide {
 92 |         animation: night-pyramide 0s ease-in 1.15s forwards;
 93 |     }
 94 | 
 95 |     .scene.start .scene__ground {
 96 |         animation: night-ground 1.75s ease-in forwards;
 97 |     }
 98 | 
 99 |     @keyframes night-sky {
100 |         100% {
101 |             --g-dark-color: #162851;
102 |             --g-light-color: #304352;
103 | 
104 |             background: linear-gradient(
105 |                 to top,
106 |                 var(--g-light-color),
107 |                 var(--g-dark-color)
108 |             );
109 |         }
110 |     }
111 | 
112 |     @keyframes sunset {
113 |         100% {
114 |             top: 80vw;
115 |         }
116 |     }
117 | 
118 |     @keyframes moonrise {
119 |         100% {
120 |             top: 50px;
121 |         }
122 |     }
123 | 
124 |     @keyframes night-pyramide {
125 |         100% {
126 |             border-bottom-color: #bb4e75;
127 |         }
128 |     }
129 | 
130 |     @keyframes night-ground {
131 |         100% {
132 |             --g-dark-color: #dd6161;
133 |             --g-light-color: #fff886;
134 | 
135 |             background: linear-gradient(
136 |                 to top,
137 |                 var(--g-light-color),
138 |                 var(--g-dark-color)
139 |             );
140 |         }
141 |     }
142 | }
143 | 


--------------------------------------------------------------------------------
/src/components/SnowDay/index.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import './index.scss';
  3 | 
  4 | export default function SnowDay() {
  5 |     return (
  6 |         <div className="canvas">
  7 |             <div className="snowing">
  8 |                 <div className="small-snow">
  9 |                     <div className="small"></div>
 10 |                     <div className="small"></div>
 11 |                     <div className="small"></div>
 12 |                     <div className="small"></div>
 13 |                     <div className="small"></div>
 14 |                     <div className="small"></div>
 15 |                     <div className="small"></div>
 16 |                     <div className="small"></div>
 17 |                     <div className="small"></div>
 18 |                     <div className="small"></div>
 19 |                     <div className="small"></div>
 20 |                     <div className="small"></div>
 21 |                     <div className="small"></div>
 22 |                     <div className="small"></div>
 23 |                     <div className="small"></div>
 24 |                     <div className="small"></div>
 25 |                     <div className="small"></div>
 26 |                     <div className="small"></div>
 27 |                     <div className="small"></div>
 28 |                     <div className="small"></div>
 29 |                 </div>
 30 |                 <div className="medium-snow">
 31 |                     <div className="medium"></div>
 32 |                     <div className="medium"></div>
 33 |                     <div className="medium"></div>
 34 |                     <div className="medium"></div>
 35 |                     <div className="medium"></div>
 36 |                     <div className="medium"></div>
 37 |                     <div className="medium"></div>
 38 |                     <div className="medium"></div>
 39 |                     <div className="medium"></div>
 40 |                     <div className="medium"></div>
 41 |                     <div className="medium"></div>
 42 |                     <div className="medium"></div>
 43 |                     <div className="medium"></div>
 44 |                     <div className="medium"></div>
 45 |                     <div className="medium"></div>
 46 |                     <div className="medium"></div>
 47 |                     <div className="medium"></div>
 48 |                     <div className="medium"></div>
 49 |                     <div className="medium"></div>
 50 |                     <div className="medium"></div>
 51 |                 </div>
 52 |             </div>
 53 |             <div className="tree"></div>
 54 |             <div className="tree"></div>
 55 |             <div className="tree"></div>
 56 |             <div className="tree"></div>
 57 |             <div className="tree"></div>
 58 |             <div className="tree"></div>
 59 |             <div className="tree"></div>
 60 |             <div className="tree"></div>
 61 |             <div className="tree"></div>
 62 |             <div className="tree"></div>
 63 |             <div className="tree"></div>
 64 |             <div className="tree"></div>
 65 |             <div className="tree-parts">
 66 |                 <div className="tree-part"></div>
 67 |                 <div className="tree-part"></div>
 68 |                 <div className="tree-part"></div>
 69 |                 <div className="tree-part"></div>
 70 |                 <div className="tree-part"></div>
 71 |                 <div className="tree-part"></div>
 72 |                 <div className="tree-part"></div>
 73 |                 <div className="tree-part"></div>
 74 |                 <div className="tree-part"></div>
 75 |                 <div className="tree-part"></div>
 76 |                 <div className="tree-part"></div>
 77 |                 <div className="tree-part"></div>
 78 |                 <div className="tree-part"></div>
 79 |                 <div className="tree-part"></div>
 80 |                 <div className="tree-part"></div>
 81 |                 <div className="tree-part"></div>
 82 |                 <div className="tree-part"></div>
 83 |                 <div className="tree-part"></div>
 84 |                 <div className="tree-part"></div>
 85 |                 <div className="tree-part"></div>
 86 |                 <div className="tree-part"></div>
 87 |                 <div className="tree-part"></div>
 88 |                 <div className="tree-part"></div>
 89 |                 <div className="tree-part"></div>
 90 |                 <div className="tree-part"></div>
 91 |                 <div className="tree-part"></div>
 92 |                 <div className="tree-part"></div>
 93 |                 <div className="tree-part"></div>
 94 |                 <div className="tree-part"></div>
 95 |                 <div className="tree-part"></div>
 96 |             </div>
 97 |             <div className="house">
 98 |                 <div className="front">
 99 |                     <div className="a"></div>
100 |                     <div className="b"></div>
101 |                     <div className="c"></div>
102 |                     <div className="d"></div>
103 |                     <div className="e"></div>
104 |                     <span className="f"></span>
105 |                     <span className="f"></span>
106 |                     <span className="f"></span>
107 |                     <span className="f"></span>
108 |                     <span className="f"></span>
109 |                     <span className="f"></span>
110 |                     <div className="g"></div>
111 |                     <div className="k"></div>
112 |                 </div>
113 |                 <div className="side">
114 |                     <div className="wall-snow"></div>
115 |                     <div className="w-area">
116 |                         <div className="w-outer"></div>
117 |                         <div className="window">
118 |                             <div className="w-inner"></div>
119 |                             <div className="w-shadow"></div>
120 |                         </div>
121 |                     </div>
122 |                     <div className="w-area">
123 |                         <div className="w-outer"></div>
124 |                         <div className="window">
125 |                             <div className="w-inner"></div>
126 |                             <div className="w-shadow"></div>
127 |                         </div>
128 |                     </div>
129 |                 </div>
130 |             </div>
131 |             <div className="ground-d"></div>
132 |             <div className="ground-a"></div>
133 |             <div className="ground-b"></div>
134 |             <div className="ground-c"></div>
135 |         </div>
136 |     );
137 | }
138 | 


--------------------------------------------------------------------------------
/src/components/SnowDay/index.scss:
--------------------------------------------------------------------------------
  1 | .fifth {
  2 |     .canvas {
  3 |         width: 800px;
  4 |         height: 600px;
  5 |         overflow: hidden;
  6 |         position: absolute;
  7 |         left: 0;
  8 |         top: 0;
  9 |         background-color: #aeebdd;
 10 |         border-radius: 6px;
 11 |         box-shadow: 0px 0px 52px -10px rgba(23, 102, 90, 1);
 12 |     }
 13 | 
 14 |     .house {
 15 |         position: absolute;
 16 |         left: 130px;
 17 |         bottom: 40px;
 18 |         height: 370px;
 19 |         z-index: 1;
 20 |     }
 21 | 
 22 |     .front {
 23 |         clip-path: polygon(50% 0%, 5% 100%, 95% 100%);
 24 |         height: 370px;
 25 |         width: 280px;
 26 |         background-color: #77545c;
 27 |         position: absolute;
 28 |         left: 0;
 29 |         top: 0;
 30 |     }
 31 | 
 32 |     .front:before {
 33 |         width: 170px;
 34 |         position: absolute;
 35 |         left: 41px;
 36 |         height: 17px;
 37 |         content: '';
 38 |         z-index: 1;
 39 |         bottom: 0;
 40 |         background-color: #e3e7ec;
 41 |         transform: skew(-60deg);
 42 |     }
 43 | 
 44 |     .front .a {
 45 |         clip-path: polygon(61% 0px, 53.82% 72.15%, 0px 100%, 53% 0px);
 46 |         transform: rotate(-3deg);
 47 |         background-color: #583642;
 48 |         position: absolute;
 49 |         left: 16px;
 50 |         top: 0;
 51 |         width: 100%;
 52 |         height: 100%;
 53 |     }
 54 | 
 55 |     .front .b {
 56 |         clip-path: polygon(61.7% 3px, 8.28% 104.6%, -11px 101.62%, 44.48% -6px);
 57 |         background-color: #77545c;
 58 |         position: absolute;
 59 |         right: -9px;
 60 |         transform: rotateY(-147deg);
 61 |         top: 0;
 62 |         height: 100%;
 63 |         width: 100%;
 64 |         z-index: 2;
 65 |     }
 66 | 
 67 |     .front .c {
 68 |         clip-path: polygon(53.87% 20.38%, 18% 100%, 86.29% 99.73%);
 69 |         height: 370px;
 70 |         width: 280px;
 71 |         background-color: #8e4940;
 72 |         position: absolute;
 73 |         top: 0;
 74 |         left: 0;
 75 |     }
 76 | 
 77 |     .front .f {
 78 |         position: absolute;
 79 |         width: 20px;
 80 |         height: 20px;
 81 |         background-color: #a95b41;
 82 |         z-index: 2;
 83 |         left: 150px;
 84 |         bottom: 0;
 85 |         border-radius: 50%;
 86 |         box-shadow: 0 0 0 3px #a95b41 inset,
 87 |             0 0 0 4px rgba(65, 10, 34, 0.25) inset;
 88 | 
 89 |         &:after {
 90 |             content: '';
 91 |             position: absolute;
 92 |             border: 1px solid rgba(65, 10, 34, 0.25);
 93 |             border-radius: 50%;
 94 |             width: 9px;
 95 |             height: 9px;
 96 |             left: 5px;
 97 |             top: 5px;
 98 |         }
 99 | 
100 |         &:before {
101 |             content: '';
102 |             position: absolute;
103 |             border: 1px solid rgba(65, 10, 34, 0.25);
104 |             border-radius: 50%;
105 |             width: 5px;
106 |             height: 5px;
107 |             left: 7px;
108 |             top: 7px;
109 |         }
110 | 
111 |         &:nth-of-type(2) {
112 |             left: 170px;
113 |         }
114 |         &:nth-of-type(3) {
115 |             left: 190px;
116 |         }
117 |         &:nth-of-type(4) {
118 |             left: 180px;
119 |             bottom: 16px;
120 |         }
121 |         &:nth-of-type(5) {
122 |             left: 160px;
123 |             bottom: 16px;
124 |         }
125 |         &:nth-of-type(6) {
126 |             left: 170px;
127 |             bottom: 33px;
128 |         }
129 |     }
130 | 
131 |     .front .g {
132 |         position: absolute;
133 |         width: 100px;
134 |         height: 52px;
135 |         bottom: 0;
136 |         left: 170px;
137 |         background-color: #410a22;
138 |         z-index: 1;
139 |         transform: skew(-30deg);
140 |     }
141 | 
142 |     .front .e {
143 |         position: absolute;
144 |         bottom: 12px;
145 |         z-index: 1;
146 |         left: 122px;
147 |         width: 42px;
148 |         border-left: 10px solid;
149 |         border-top: 10px solid;
150 |         border-right: 10px solid;
151 |         border-color: #9b5642;
152 |         height: 110px;
153 |         background-color: #69424d;
154 |         box-shadow: 4px 4px 0 0 #4d323e inset, 2px 0 0 #7d402f;
155 |     }
156 | 
157 |     .front .e:after,
158 |     .front .e:before {
159 |         content: '';
160 |         position: absolute;
161 |         left: 10px;
162 |         width: 10px;
163 |         height: 38px;
164 |         background-color: rgba(#4d323e, 0.45);
165 |         box-shadow: 15px 0 0 0 rgba(#4d323e, 0.45);
166 |     }
167 | 
168 |     .front .e:after {
169 |         top: 10px;
170 |     }
171 |     .front .e:before {
172 |         top: 60px;
173 |     }
174 | 
175 |     .front .k {
176 |         position: absolute;
177 |         border: 2px solid #4d323e;
178 |         width: 40px;
179 |         height: 60px;
180 |         top: 150px;
181 |         left: 132px;
182 |         background: linear-gradient(
183 |             118deg,
184 |             rgba(225, 150, 96, 1) 12%,
185 |             rgba(253, 213, 141, 1) 65%
186 |         );
187 |         box-shadow: 2px 2px 0 inset #8f4b41;
188 | 
189 |         &:after {
190 |             content: '';
191 |             position: absolute;
192 |             width: 100%;
193 |             height: 2px;
194 |             top: 14px;
195 |             left: 0;
196 |             background-color: #4d323e;
197 |             box-shadow: 0 16px 0 #4d323e, 0 32px 0 #4d323e;
198 |         }
199 | 
200 |         &:before {
201 |             content: '';
202 |             position: absolute;
203 |             width: 2px;
204 |             height: 100%;
205 |             top: 0;
206 |             left: calc(50% - 1px);
207 |             background-color: #4d323e;
208 |         }
209 |     }
210 | 
211 |     .side {
212 |         position: absolute;
213 |         width: 460px;
214 |         height: 370px;
215 |         clip-path: polygon(20px 1px, 67.61% 5px, 100% 100%, 31.53% 100.54%);
216 |         top: 0;
217 |         left: 120px;
218 |         background: linear-gradient(
219 |             200deg,
220 |             rgba(187, 46, 45, 1) 12%,
221 |             rgba(122, 52, 60, 1) 98%
222 |         );
223 | 
224 |         &:after {
225 |             content: '';
226 |             position: absolute;
227 |             height: 100%;
228 |             width: 2px;
229 |             color: #e4a06880;
230 |             background-color: currentColor;
231 |             left: 140px;
232 |             top: 0;
233 |             transform: skew(20deg);
234 |             box-shadow: 6px 0 0, 60px 0 0, 66px 0 0, 120px 0 0, 126px 0 0,
235 |                 180px 0 0, 186px 0 0;
236 |             z-index: -1;
237 |         }
238 | 
239 |         &:before {
240 |             content: '';
241 |             position: absolute;
242 |             width: 100%;
243 |             height: 20px;
244 |             background: #b1302f;
245 |         }
246 |     }
247 | 
248 |     .window {
249 |         position: absolute;
250 |         left: 129px;
251 |         top: 80px;
252 |         clip-path: polygon(50% 30%, 0% 100%, 100% 100%);
253 |         background-color: #5c3944;
254 |         width: 60px;
255 |         height: 60px;
256 |         z-index: 2;
257 |     }
258 | 
259 |     .w-inner {
260 |         position: absolute;
261 |         width: 100%;
262 |         height: 100%;
263 |         content: '';
264 |         background: linear-gradient(118deg, #e19660 47%, #fdd58d 65%);
265 |         right: 3px;
266 |         top: 0;
267 |         clip-path: polygon(50% 30%, 0% 100%, 100% 100%);
268 | 
269 |         &:after {
270 |             content: '';
271 |             width: 100%;
272 |             height: 3px;
273 |             background-color: #5c3944;
274 |             position: absolute;
275 |             top: 41px;
276 |             left: 0;
277 |         }
278 | 
279 |         &:before {
280 |             content: '';
281 |             width: 3px;
282 |             height: 100%;
283 |             background-color: #5c3944;
284 |             position: absolute;
285 |             top: 0;
286 |             left: 50%;
287 |         }
288 |     }
289 | 
290 |     .w-shadow {
291 |         position: absolute;
292 |         left: -62%;
293 |         top: 0;
294 |         width: 100%;
295 |         height: 100%;
296 |         transform: rotate(25deg);
297 |         background-color: rgba(0, 0, 0, 0.15);
298 |     }
299 | 
300 |     .w-outer {
301 |         position: absolute;
302 |         top: 70px;
303 |         left: 124px;
304 |         width: 70px;
305 |         height: 70px;
306 |         clip-path: polygon(50% 30%, 0% 100%, 100% 100%);
307 |         background: #955853;
308 |     }
309 | 
310 |     .w-area:before {
311 |         position: absolute;
312 |         left: 100px;
313 |         top: 80px;
314 |         height: 70px;
315 |         width: 60px;
316 |         clip-path: polygon(
317 |             16px 51.85%,
318 |             46.99% 17px,
319 |             98.33% 11px,
320 |             40.67% 85.71%
321 |         );
322 |         content: '';
323 |         background: linear-gradient(0deg, #611e22 0%, #ab2c2a 100%);
324 |     }
325 | 
326 |     .w-area:nth-child(2) {
327 |         position: absolute;
328 |         left: 120px;
329 |     }
330 | 
331 |     .ground-a {
332 |         position: absolute;
333 |         left: -100px;
334 |         bottom: -70px;
335 |         width: 280px;
336 |         height: 180px;
337 |         border-radius: 40%;
338 |         background-color: #f6f5ff;
339 |         transform: rotate(25deg);
340 |         z-index: 2;
341 | 
342 |         &:after {
343 |             content: '';
344 |             position: absolute;
345 |             left: -20px;
346 |             top: 20px;
347 |             width: 160px;
348 |             height: 100px;
349 |             transform: rotate(-25deg);
350 |             background-color: #fff;
351 |             border-radius: 50%;
352 |         }
353 |     }
354 | 
355 |     .ground-b {
356 |         position: absolute;
357 |         left: 400px;
358 |         bottom: -80px;
359 |         height: 160px;
360 |         width: 250px;
361 |         background-color: #fff;
362 |         z-index: 1;
363 |         transform: scaleX(1.2) skewx(20deg);
364 |         border-radius: 80% 25%;
365 |     }
366 | 
367 |     .ground-c {
368 |         position: absolute;
369 |         left: 300px;
370 |         bottom: -70px;
371 |         height: 120px;
372 |         width: 200px;
373 |         background-color: #edf1f7;
374 |         z-index: 1;
375 | 
376 |         border-radius: 80% 65%;
377 |     }
378 | 
379 |     .ground-d {
380 |         position: absolute;
381 |         bottom: -8px;
382 |         left: 0;
383 |         width: 100%;
384 |         height: 50px;
385 |         background-color: #f6f5ff;
386 |         z-index: 1;
387 |     }
388 | 
389 |     .tree {
390 |         position: absolute;
391 |         clip-path: polygon(50% 0%, 15% 100%, 88% 100%);
392 |         width: 300px;
393 |         height: 700px;
394 | 
395 |         &:nth-child(1) {
396 |             background-color: #17665a;
397 |             top: -160px;
398 |             left: -114px;
399 |         }
400 | 
401 |         &:nth-child(2) {
402 |             background-color: #024b41;
403 |             top: -100px;
404 |             left: -60px;
405 |             z-index: 1;
406 |         }
407 | 
408 |         &:nth-child(3) {
409 |             background-color: #339580;
410 |             top: 50px;
411 |             left: 40px;
412 |         }
413 | 
414 |         &:nth-child(4) {
415 |             background-color: #1c6f61;
416 |             top: -100px;
417 |             left: 170px;
418 |             z-index: 1;
419 |         }
420 | 
421 |         &:nth-child(5) {
422 |             background-color: #339580;
423 |             top: -20px;
424 |             left: 240px;
425 |             z-index: 0;
426 |         }
427 | 
428 |         &:nth-child(6) {
429 |             background-color: #339580;
430 |             top: -20px;
431 |             left: 460px;
432 |         }
433 | 
434 |         &:nth-child(7) {
435 |             background-color: #17665a;
436 |             top: 120px;
437 |             left: 560px;
438 |         }
439 | 
440 |         &:nth-child(8) {
441 |             background-color: #024b41;
442 |             top: 300px;
443 |             left: 510px;
444 |             z-index: 3;
445 |             width: 400px;
446 |         }
447 | 
448 |         &:nth-child(9) {
449 |             background-color: #024b41;
450 |             top: 440px;
451 |             left: 360px;
452 |             z-index: 3;
453 |             width: 500px;
454 |         }
455 | 
456 |         &:nth-child(10) {
457 |             background-color: #0c332d;
458 |             top: 300px;
459 |             left: 560px;
460 |             z-index: 3;
461 |             width: 500px;
462 |         }
463 | 
464 |         &:nth-child(11) {
465 |             background-color: #26816f;
466 |             top: 0px;
467 |             left: 640px;
468 |         }
469 | 
470 |         &:nth-child(12) {
471 |             background-color: #26816f;
472 |             top: -40px;
473 |             left: -150px;
474 |         }
475 |     }
476 | 
477 |     .snowing {
478 |         position: absolute;
479 |         filter: blur(0.8px);
480 |         z-index: 3;
481 |         width: 100%;
482 |         height: 100%;
483 |     }
484 | 
485 |     .snowing .small {
486 |         position: absolute;
487 |         width: 6px;
488 |         height: 6px;
489 |         background: #fff;
490 |         border-radius: 50%;
491 |         animation-name: snow-fall, snow-shake;
492 |         animation-duration: 12s, 4s;
493 |         animation-timing-function: linear, ease-in-out;
494 |         animation-iteration-count: infinite, infinite;
495 |         top: -100%;
496 | 
497 |         &:nth-child(1) {
498 |             left: 210px;
499 |             top: -40px;
500 |             animation-delay: 9s, 0.3s;
501 |         }
502 |         &:nth-child(2) {
503 |             left: 400px;
504 |             top: -50px;
505 |             animation-delay: 6s, 0.3s;
506 |         }
507 |         &:nth-child(3) {
508 |             left: 720px;
509 |             top: -130px;
510 |             animation-delay: 8s, 0.3s;
511 |         }
512 |         &:nth-child(4) {
513 |             left: 140px;
514 |             animation-delay: 10s, 0.3s;
515 |         }
516 |         &:nth-child(5) {
517 |             left: 500px;
518 |             animation-delay: 7s, 0.2s;
519 |         }
520 |         &:nth-child(6) {
521 |             left: 150px;
522 |             top: -30px;
523 |             animation-delay: 5.2s, 0.3s;
524 |         }
525 |         &:nth-child(7) {
526 |             left: 200px;
527 |             top: -20px;
528 |             animation-delay: 3.4s, 0.3s;
529 |         }
530 |         &:nth-child(8) {
531 |             left: 70px;
532 |             top: -330px;
533 |             animation-delay: 6.6s, 0.3s;
534 |         }
535 |         &:nth-child(9) {
536 |             left: 380px;
537 |             top: -90px;
538 |             animation-delay: 5.6s, 0.3s;
539 |         }
540 |         &:nth-child(10) {
541 |             left: 130px;
542 |             animation-delay: 11s, 0.2s;
543 |         }
544 |         &:nth-child(11) {
545 |             left: 20px;
546 |             animation-delay: 10.5s, 0.3s;
547 |         }
548 |         &:nth-child(12) {
549 |             left: 620px;
550 |             top: -40px;
551 |             animation-delay: 8s, 0.3s;
552 |         }
553 |         &:nth-child(13) {
554 |             left: 400px;
555 |             top: -180px;
556 |             animation-delay: 3.7s, 3s;
557 |         }
558 |         &:nth-child(14) {
559 |             left: 500px;
560 |             top: -370px;
561 |             animation-delay: 6s, 0.3s;
562 |         }
563 |         &:nth-child(15) {
564 |             left: 660px;
565 |             top: -20px;
566 |             animation-delay: 9s, 0.3s;
567 |         }
568 |         &:nth-child(16) {
569 |             left: 610px;
570 |             top: -80px;
571 |             animation-delay: 7.3s, 0.3s;
572 |         }
573 |         &:nth-child(17) {
574 |             left: 20px;
575 |             top: -210px;
576 |             animation-delay: 6.8s, 2s;
577 |         }
578 |         &:nth-child(18) {
579 |             left: 670px;
580 |             top: -200px;
581 |             animation-delay: 6.5s, 0.6s;
582 |         }
583 |         &:nth-child(19) {
584 |             left: 210px;
585 |             top: -120px;
586 |             animation-delay: 4s, 0.3s;
587 |         }
588 |         &:nth-child(20) {
589 |             left: 20px;
590 |             top: -110px;
591 |             animation-delay: -1.1s, -0.1s;
592 |         }
593 |     }
594 | 
595 |     .snowing .medium {
596 |         position: absolute;
597 |         width: 8px;
598 |         height: 8px;
599 |         background: #fff;
600 |         border-radius: 50%;
601 |         animation-name: snow-fall, snow-shake;
602 |         animation-duration: 12s, 4s;
603 |         animation-timing-function: linear, ease-in-out;
604 |         animation-iteration-count: infinite, infinite;
605 |         top: -100%;
606 | 
607 |         &:nth-child(1) {
608 |             left: 300px;
609 |             top: -420px;
610 |             animation-delay: 3.4s, 1s;
611 |         }
612 |         &:nth-child(2) {
613 |             left: 530px;
614 |             animation-delay: 0.2s, 0.1s;
615 |         }
616 |         &:nth-child(3) {
617 |             left: 340px;
618 |             top: -110px;
619 |             animation-delay: 6s, 2s;
620 |         }
621 |         &:nth-child(4) {
622 |             left: 250px;
623 |             top: -390px;
624 |             animation-delay: 3.4s, 3s;
625 |         }
626 |         &:nth-child(5) {
627 |             left: 400px;
628 |             top: -150px;
629 |             animation-delay: 8.4s, 0.3s;
630 |         }
631 |         &:nth-child(6) {
632 |             left: 720px;
633 |             top: -240px;
634 |             animation-delay: 7.7s, 1s;
635 |         }
636 |         &:nth-child(7) {
637 |             left: 350px;
638 |             top: -180px;
639 |             animation-delay: 6s, 0.5s;
640 |         }
641 |         &:nth-child(8) {
642 |             left: 560px;
643 |             animation-delay: 1s, 0.5s;
644 |         }
645 |         &:nth-child(9) {
646 |             left: 10px;
647 |             top: -310px;
648 |             animation-delay: 8.2s, 0.5s;
649 |         }
650 |         &:nth-child(10) {
651 |             left: 40px;
652 |             top: -220px;
653 |             animation-delay: 3s, 1s;
654 |         }
655 |         &:nth-child(11) {
656 |             left: 220px;
657 |             top: -530px;
658 |             animation-delay: 0.6s, 3s;
659 |         }
660 |         &:nth-child(12) {
661 |             left: 630px;
662 |             top: -10px;
663 |             animation-delay: 9.4s, 2s;
664 |         }
665 |         &:nth-child(13) {
666 |             left: 420px;
667 |             top: -60px;
668 |             animation-delay: 8s, 3s;
669 |         }
670 |         &:nth-child(14) {
671 |             left: 580px;
672 |             animation-delay: 2s, 0.3s;
673 |         }
674 |         &:nth-child(15) {
675 |             left: 420px;
676 |             top: -180px;
677 |             animation-delay: 7s, 1s;
678 |         }
679 |         &:nth-child(16) {
680 |             left: 360px;
681 |             animation-delay: 8s, 0.3s;
682 |         }
683 |         &:nth-child(17) {
684 |             left: 90px;
685 |             top: -190px;
686 |             animation-delay: 4.5s, 1s;
687 |         }
688 |         &:nth-child(18) {
689 |             left: 130px;
690 |             top: -330px;
691 |             animation-delay: 8.2s, 1s;
692 |         }
693 |         &:nth-child(19) {
694 |             left: 150px;
695 |             top: -490px;
696 |             animation-delay: 6.5s, 0.1s;
697 |         }
698 |         &:nth-child(20) {
699 |             left: 640px;
700 |             top: -270px;
701 |             animation-delay: 10s, 1.5s;
702 |         }
703 |     }
704 | 
705 |     @keyframes snow-fall {
706 |         0% {
707 |             top: -10%;
708 |         }
709 |         100% {
710 |             top: 100%;
711 |         }
712 |     }
713 |     @keyframes snow-shake {
714 |         0% {
715 |             transform: translateX(0px);
716 |         }
717 |         50% {
718 |             transform: translateX(60px);
719 |         }
720 |         100% {
721 |             transform: translateX(0px);
722 |         }
723 |     }
724 | 
725 |     .wall-snow {
726 |         position: absolute;
727 |         background-color: #f9f8ff;
728 |         width: 100%;
729 |         height: 40px;
730 |         top: 20px;
731 | 
732 |         &:before {
733 |             content: '';
734 |             position: absolute;
735 |             width: 120px;
736 |             height: 80px;
737 |             border-radius: 50%;
738 |             background-color: #f9f8ff;
739 |             top: 0px;
740 |             left: 40px;
741 |         }
742 | 
743 |         &:after {
744 |             content: '';
745 |             position: absolute;
746 |             width: 200px;
747 |             height: 70px;
748 |             border-radius: 50%;
749 |             background-color: #f9f8ff;
750 |             top: 0px;
751 |             left: 140px;
752 |             transform: rotate(-2deg);
753 |         }
754 |     }
755 | 
756 |     .tree-part {
757 |         position: absolute;
758 |         clip-path: polygon(33% 0, 0% 100%, 100% 24%);
759 |         width: 28px;
760 |         height: 24px;
761 |         z-index: 3;
762 | 
763 |         &:nth-child(1) {
764 |             top: 300px;
765 |             left: 20px;
766 |             background-color: #26816f;
767 |         }
768 | 
769 |         &:nth-child(2) {
770 |             top: 100px;
771 |             left: 46px;
772 |             background-color: #aeebdd;
773 |         }
774 | 
775 |         &:nth-child(3) {
776 |             top: 180px;
777 |             left: 154px;
778 |             background-color: #aeebdd;
779 |         }
780 | 
781 |         &:nth-child(4) {
782 |             top: 120px;
783 |             left: 274px;
784 |             background-color: #aeebdd;
785 |         }
786 | 
787 |         &:nth-child(5) {
788 |             top: 100px;
789 |             left: 358px;
790 |             background-color: #aeebdd;
791 |         }
792 | 
793 |         &:nth-child(6) {
794 |             top: 180px;
795 |             left: 570px;
796 |             background-color: #aeebdd;
797 |         }
798 | 
799 |         &:nth-child(7) {
800 |             top: 90px;
801 |             left: 576px;
802 |             background-color: #aeebdd;
803 |         }
804 | 
805 |         &:nth-child(8) {
806 |             top: 220px;
807 |             left: 680px;
808 |             background-color: #aeebdd;
809 |         }
810 | 
811 |         &:nth-child(9) {
812 |             top: 280px;
813 |             left: 670px;
814 |             background-color: #aeebdd;
815 |         }
816 | 
817 |         &:nth-child(10) {
818 |             top: 380px;
819 |             left: 660px;
820 |             background-color: #339580;
821 |         }
822 | 
823 |         &:nth-child(11) {
824 |             top: 420px;
825 |             left: 674px;
826 |             background-color: #17665a;
827 |         }
828 | 
829 |         &:nth-child(12) {
830 |             top: 360px;
831 |             left: 680px;
832 |             background-color: #17665a;
833 |         }
834 | 
835 |         &:nth-child(13) {
836 |             top: 360px;
837 |             left: 680px;
838 |             background-color: #17665a;
839 |         }
840 | 
841 |         &:nth-child(14) {
842 |             top: 200px;
843 |             left: 750px;
844 |             background-color: #aeebdd;
845 |         }
846 | 
847 |         &:nth-child(15) {
848 |             top: 110px;
849 |             left: 760px;
850 |             background-color: #aeebdd;
851 |         }
852 | 
853 |         &:nth-child(16) {
854 |             top: 340px;
855 |             left: 730px;
856 |             background-color: #17665a;
857 |         }
858 | 
859 |         &:nth-child(17) {
860 |             top: 440px;
861 |             left: 760px;
862 |             background-color: #26816f;
863 |         }
864 | 
865 |         &:nth-child(18) {
866 |             top: 150px;
867 |             left: 410px;
868 |             background-color: #aeebdd;
869 |             transform: rotate(180deg);
870 |         }
871 | 
872 |         &:nth-child(19) {
873 |             top: 70px;
874 |             left: 336px;
875 |             background-color: #aeebdd;
876 |             transform: rotate(180deg);
877 |         }
878 | 
879 |         &:nth-child(20) {
880 |             top: 130px;
881 |             left: 120px;
882 |             background-color: #aeebdd;
883 |             transform: rotate(180deg);
884 |         }
885 | 
886 |         &:nth-child(21) {
887 |             top: 330px;
888 |             left: 146px;
889 |             background-color: #339580;
890 |             transform: rotate(180deg);
891 |         }
892 | 
893 |         &:nth-child(22) {
894 |             top: 260px;
895 |             left: 210px;
896 |             background-color: #aeebdd;
897 |             transform: rotate(180deg);
898 |         }
899 | 
900 |         &:nth-child(23) {
901 |             top: 260px;
902 |             left: 644px;
903 |             background-color: #aeebdd;
904 |             transform: rotate(180deg);
905 |         }
906 | 
907 |         &:nth-child(24) {
908 |             top: 120px;
909 |             left: 620px;
910 |             background-color: #aeebdd;
911 |             transform: rotate(180deg);
912 |         }
913 |     }
914 | }
915 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.scss';
 4 | import App from './App';
 5 | import * as serviceWorker from './serviceWorker';
 6 | 
 7 | const isPc = () => {
 8 |     var userAgentInfo = navigator.userAgent;
 9 |     var Agents = [
10 |         'Android',
11 |         'iPhone',
12 |         'SymbianOS',
13 |         'Windows Phone',
14 |         'iPad',
15 |         'iPod',
16 |     ];
17 |     var flag = true;
18 |     for (var v = 0; v < Agents.length; v++) {
19 |         if (userAgentInfo.indexOf(Agents[v]) > 0) {
20 |             flag = false;
21 |             break;
22 |         }
23 |     }
24 |     return flag;
25 | };
26 | 
27 | if (!isPc()) {
28 |     alert('请手机端食用');
29 | }
30 | 
31 | ReactDOM.render(<App />, document.getElementById('root'));
32 | 
33 | // If you want your app to work offline and load faster, you can change
34 | // unregister() to register() below. Note this comes with some pitfalls.
35 | // Learn more about service workers: https://bit.ly/CRA-PWA
36 | serviceWorker.unregister();
37 | 


--------------------------------------------------------------------------------
/src/index.scss:
--------------------------------------------------------------------------------
 1 | body {
 2 |     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
 3 |         'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
 4 |         'Helvetica Neue', sans-serif;
 5 |     -webkit-font-smoothing: antialiased;
 6 |     -moz-osx-font-smoothing: grayscale;
 7 |     line-height: 1.4;
 8 |     color: #ffffff;
 9 | }
10 | 
11 | #root {
12 |     height: 100%;
13 |     position: absolute;
14 |     top: 0;
15 |     left: 0;
16 | }
17 | 
18 | * {
19 |     margin: 0;
20 |     padding: 0;
21 |     font-weight: bold;
22 |     box-sizing: border-box;
23 | }
24 | 
25 | .button {
26 |     outline: none;
27 |     border: none;
28 |     background: #ffffff;
29 |     width: 30vw;
30 |     height: 10vw;
31 |     border-radius: 5vw;
32 |     box-shadow: 3px 1px 3px rgba(241, 239, 239, 0.1);
33 |     font-size: 4.5vw;
34 |     margin-bottom: 5vw;
35 |     text-decoration: none;
36 |     color: #000000;
37 |     text-align: center;
38 |     line-height: 10vw;
39 | }
40 | 
41 | strong {
42 |     font-size: 7vw;
43 |     display: inline-block;
44 |     padding: 0 1vw;
45 | }
46 | 
47 | :root {
48 |     --home-color: #00adb5;
49 |     --first-color: #94d3ac;
50 |     --second-color: #fbd758;
51 |     --third-color: #2f2349;
52 |     --fourth-color: #46cdcf;
53 |     --fifth-color: #65a5a4;
54 |     --sixth-color: #48466d;
55 | }
56 | 


--------------------------------------------------------------------------------
/src/service.js:
--------------------------------------------------------------------------------
  1 | import { days2Now, dealTime, is2019, get, set } from './util';
  2 | import {
  3 |     fetchRepos,
  4 |     fetchUser,
  5 |     fetchFollowing,
  6 |     fetchContributors,
  7 |     fetchIssues,
  8 |     fetchCommits,
  9 | } from './api';
 10 | 
 11 | export let repos = [];
 12 | export let orgs = [];
 13 | export let user = {};
 14 | export let first_following = '';
 15 | export let commitsAtNight = {
 16 |     total: 0, // total number of commits at night for all repos
 17 |     latestTime: 0, // the latest commit time.
 18 | };
 19 | export let mostCommits = {
 20 |     // most commits times in a day for year 2019
 21 |     total: 0,
 22 |     date: '', // date time for this day
 23 |     totalToTheRepo: 0, //
 24 |     theRepo: '', // the special reop's name
 25 | };
 26 | export let fifthData = {
 27 |     commits: 0,
 28 |     issues: 0,
 29 |     additions: 0,
 30 |     deletions: 0,
 31 | };
 32 | 
 33 | let dayCommitsDirectory = {}; // key: date ,value: commits info list
 34 | 
 35 | export const requestRepos = async token => {
 36 |     repos = await fetchRepos(token);
 37 | };
 38 | 
 39 | export const requestContributors = async token => {
 40 |     const username = user.login;
 41 |     fifthData = {
 42 |         commits: 0,
 43 |         issues: 0,
 44 |         additions: 0,
 45 |         deletions: 0,
 46 |     };
 47 | 
 48 |     const contributorList = await Promise.all(
 49 |         repos.map(async repo => fetchContributors(repo.full_name, token))
 50 |     );
 51 | 
 52 |     contributorList.forEach(item => {
 53 |         if (!Array.isArray(item)) return;
 54 |         item.forEach(({ weeks, author }) => {
 55 |             if (!author || author.login !== username) return;
 56 | 
 57 |             if (!Array.isArray(weeks)) return;
 58 |             weeks.forEach(({ w, a, d, c }) => {
 59 |                 // 判断是否是2019年产生的
 60 |                 if (!is2019(w * 1000)) return;
 61 | 
 62 |                 fifthData.commits += c;
 63 |                 fifthData.additions += a;
 64 |                 fifthData.deletions += d;
 65 |             });
 66 |         });
 67 |     });
 68 | };
 69 | 
 70 | export const requestIssues = async token => {
 71 |     const username = user.login;
 72 | 
 73 |     const issueList = await Promise.all(
 74 |         repos.map(async repo => fetchIssues(repo.full_name, token))
 75 |     );
 76 | 
 77 |     issueList.forEach(item => {
 78 |         if (!Array.isArray(item)) return;
 79 |         item.forEach(({ user }) => {
 80 |             if (!user) return;
 81 |             if (user.login === username) {
 82 |                 fifthData.issues++;
 83 |             }
 84 |         });
 85 |     });
 86 | };
 87 | 
 88 | export const requestUser = async token => {
 89 |     user = await fetchUser(token);
 90 | };
 91 | 
 92 | export const requestFollowing = async token => {
 93 |     const username = user.login;
 94 | 
 95 |     let res = await get('first_following');
 96 |     if (res) {
 97 |         first_following = res;
 98 |         return;
 99 |     }
100 | 
101 |     res = await fetchFollowing(username, token);
102 |     if (res.length) {
103 |         first_following = res[0].login;
104 |         set('first_following', first_following);
105 |     }
106 | };
107 | 
108 | export const requestCommits = async token => {
109 |     const username = user.login;
110 | 
111 |     dayCommitsDirectory = {};
112 |     commitsAtNight = {
113 |         total: 0,
114 |         latestTime: 0,
115 |     };
116 | 
117 |     // TODO: 比如996.TSC 这种不是自己的项目，但自己参与了commits，需要判断
118 | 
119 |     await Promise.all(
120 |         repos.map(async repo => {
121 |             const commitsList = await fetchCommits(repo.full_name, token);
122 |             // 计算晚上提交的commits数据
123 |             commitsList.forEach(({ commit, author }) => {
124 |                 const login = author && author.login;
125 |                 const login2 = commit.author.name;
126 |                 const date = commit.author.date;
127 |                 // const { name, date } = commit.author;
128 |                 if (
129 |                     (login === username || login2 === username) &&
130 |                     is2019(date)
131 |                 ) {
132 |                     const dateMonth = new Date(date).toLocaleDateString();
133 |                     if (!dayCommitsDirectory[dateMonth]) {
134 |                         dayCommitsDirectory[dateMonth] = [
135 |                             {
136 |                                 ...commit,
137 |                                 repoName: repo.name,
138 |                             },
139 |                         ];
140 |                     } else {
141 |                         dayCommitsDirectory[dateMonth].push({
142 |                             ...commit,
143 |                             repoName: repo.name,
144 |                         });
145 |                     }
146 | 
147 |                     let time = new Date(date);
148 |                     const hours = time.getHours();
149 | 
150 |                     if (hours < 21) {
151 |                         return;
152 |                     }
153 |                     commitsAtNight.total++;
154 | 
155 |                     const minutes = time.getMinutes();
156 |                     time = hours + minutes / 100;
157 | 
158 |                     if (time > commitsAtNight.latestTime) {
159 |                         commitsAtNight.latestTime = time;
160 |                     }
161 |                 }
162 |             });
163 |         })
164 |     );
165 | 
166 |     console.log(commitsAtNight);
167 | };
168 | 
169 | // 分析获得哪天的commits最多，并且计算出这天的commits最多的仓库/数量是多少
170 | export const getMostCommitsInOneDay = () => {
171 |     const tempMostCommits = {};
172 |     let dateIndex;
173 |     let total = 0;
174 |     for (let date in dayCommitsDirectory) {
175 |         if (!date) continue;
176 |         if (dayCommitsDirectory[date].length >= total) {
177 |             dateIndex = date;
178 |             total = dayCommitsDirectory[date].length;
179 |         }
180 |     }
181 | 
182 |     tempMostCommits.total = total;
183 |     tempMostCommits.date = dateIndex;
184 | 
185 |     const repoCommitsDirectory = {};
186 |     // 判断这天哪个仓库commit最多
187 |     if (dayCommitsDirectory && dayCommitsDirectory[dateIndex]) {
188 |         dayCommitsDirectory[dateIndex].forEach(commit => {
189 |             if (!repoCommitsDirectory[commit.repoName]) {
190 |                 repoCommitsDirectory[commit.repoName] = [commit];
191 |             } else {
192 |                 repoCommitsDirectory[commit.repoName].push(commit);
193 |             }
194 |         });
195 |     }
196 | 
197 |     let repoName;
198 |     let commitsForRepo = 0;
199 |     for (let name in repoCommitsDirectory) {
200 |         if (!name) continue;
201 |         if (repoCommitsDirectory[name].length >= commitsForRepo) {
202 |             repoName = name;
203 |             commitsForRepo = repoCommitsDirectory[name].length;
204 |         }
205 |     }
206 | 
207 |     tempMostCommits.totalToTheRepo = commitsForRepo;
208 |     tempMostCommits.theRepo = repoName;
209 | 
210 |     mostCommits = tempMostCommits;
211 | };
212 | 
213 | export const fetchData = async token => {
214 |     await Promise.all([requestRepos(token), requestUser(token)]);
215 | 
216 |     requestFollowing(token);
217 |     return {
218 |         created_at: dealTime(user.created_at),
219 |         first_repo: repos[repos.length - 1].name,
220 |         days: days2Now(user.created_at),
221 |     };
222 | };
223 | 


--------------------------------------------------------------------------------
/src/serviceWorker.js:
--------------------------------------------------------------------------------
  1 | // This optional code is used to register a service worker.
  2 | // register() is not called by default.
  3 | 
  4 | // This lets the app load faster on subsequent visits in production, and gives
  5 | // it offline capabilities. However, it also means that developers (and users)
  6 | // will only see deployed updates on subsequent visits to a page, after all the
  7 | // existing tabs open on the page have been closed, since previously cached
  8 | // resources are updated in the background.
  9 | 
 10 | // To learn more about the benefits of this model and instructions on how to
 11 | // opt-in, read https://bit.ly/CRA-PWA
 12 | 
 13 | const isLocalhost = Boolean(
 14 |   window.location.hostname === 'localhost' ||
 15 |     // [::1] is the IPv6 localhost address.
 16 |     window.location.hostname === '[::1]' ||
 17 |     // 127.0.0.0/8 are considered localhost for IPv4.
 18 |     window.location.hostname.match(
 19 |       /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
 20 |     )
 21 | );
 22 | 
 23 | export function register(config) {
 24 |   if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
 25 |     // The URL constructor is available in all browsers that support SW.
 26 |     const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);
 27 |     if (publicUrl.origin !== window.location.origin) {
 28 |       // Our service worker won't work if PUBLIC_URL is on a different origin
 29 |       // from what our page is served on. This might happen if a CDN is used to
 30 |       // serve assets; see https://github.com/facebook/create-react-app/issues/2374
 31 |       return;
 32 |     }
 33 | 
 34 |     window.addEventListener('load', () => {
 35 |       const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
 36 | 
 37 |       if (isLocalhost) {
 38 |         // This is running on localhost. Let's check if a service worker still exists or not.
 39 |         checkValidServiceWorker(swUrl, config);
 40 | 
 41 |         // Add some additional logging to localhost, pointing developers to the
 42 |         // service worker/PWA documentation.
 43 |         navigator.serviceWorker.ready.then(() => {
 44 |           console.log(
 45 |             'This web app is being served cache-first by a service ' +
 46 |               'worker. To learn more, visit https://bit.ly/CRA-PWA'
 47 |           );
 48 |         });
 49 |       } else {
 50 |         // Is not localhost. Just register service worker
 51 |         registerValidSW(swUrl, config);
 52 |       }
 53 |     });
 54 |   }
 55 | }
 56 | 
 57 | function registerValidSW(swUrl, config) {
 58 |   navigator.serviceWorker
 59 |     .register(swUrl)
 60 |     .then(registration => {
 61 |       registration.onupdatefound = () => {
 62 |         const installingWorker = registration.installing;
 63 |         if (installingWorker == null) {
 64 |           return;
 65 |         }
 66 |         installingWorker.onstatechange = () => {
 67 |           if (installingWorker.state === 'installed') {
 68 |             if (navigator.serviceWorker.controller) {
 69 |               // At this point, the updated precached content has been fetched,
 70 |               // but the previous service worker will still serve the older
 71 |               // content until all client tabs are closed.
 72 |               console.log(
 73 |                 'New content is available and will be used when all ' +
 74 |                   'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
 75 |               );
 76 | 
 77 |               // Execute callback
 78 |               if (config && config.onUpdate) {
 79 |                 config.onUpdate(registration);
 80 |               }
 81 |             } else {
 82 |               // At this point, everything has been precached.
 83 |               // It's the perfect time to display a
 84 |               // "Content is cached for offline use." message.
 85 |               console.log('Content is cached for offline use.');
 86 | 
 87 |               // Execute callback
 88 |               if (config && config.onSuccess) {
 89 |                 config.onSuccess(registration);
 90 |               }
 91 |             }
 92 |           }
 93 |         };
 94 |       };
 95 |     })
 96 |     .catch(error => {
 97 |       console.error('Error during service worker registration:', error);
 98 |     });
 99 | }
100 | 
101 | function checkValidServiceWorker(swUrl, config) {
102 |   // Check if the service worker can be found. If it can't reload the page.
103 |   fetch(swUrl, {
104 |     headers: { 'Service-Worker': 'script' }
105 |   })
106 |     .then(response => {
107 |       // Ensure service worker exists, and that we really are getting a JS file.
108 |       const contentType = response.headers.get('content-type');
109 |       if (
110 |         response.status === 404 ||
111 |         (contentType != null && contentType.indexOf('javascript') === -1)
112 |       ) {
113 |         // No service worker found. Probably a different app. Reload the page.
114 |         navigator.serviceWorker.ready.then(registration => {
115 |           registration.unregister().then(() => {
116 |             window.location.reload();
117 |           });
118 |         });
119 |       } else {
120 |         // Service worker found. Proceed as normal.
121 |         registerValidSW(swUrl, config);
122 |       }
123 |     })
124 |     .catch(() => {
125 |       console.log(
126 |         'No internet connection found. App is running in offline mode.'
127 |       );
128 |     });
129 | }
130 | 
131 | export function unregister() {
132 |   if ('serviceWorker' in navigator) {
133 |     navigator.serviceWorker.ready.then(registration => {
134 |       registration.unregister();
135 |     });
136 |   }
137 | }
138 | 


--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom/extend-expect';
6 | 


--------------------------------------------------------------------------------
/src/util.js:
--------------------------------------------------------------------------------
 1 | export const getToken = async () => {
 2 |     let token = '';
 3 |     if (/\?token=(.+)&?/.test(window.location.search)) {
 4 |         token = window.location.search.match(/\?token=(.+)&?/)[1];
 5 |     } else {
 6 |         token = await get('token');
 7 |     }
 8 |     return token;
 9 | };
10 | 
11 | export const days2Now = created_at => {
12 |     const now = +new Date();
13 |     const last = +new Date(created_at);
14 |     return Math.floor((now - last) / (1000 * 60 * 60 * 24));
15 | };
16 | 
17 | export const dealTime = created_at => {
18 |     return new Date(created_at)
19 |         .toLocaleString()
20 |         .match(/(.*)\s/)[0]
21 |         .replace(/\//g, '-');
22 | };
23 | 
24 | export const set = (key, value) => {
25 |     localStorage.setItem(
26 |         key,
27 |         typeof value === 'object' ? JSON.stringify(value) : value
28 |     );
29 | };
30 | 
31 | export const get = key => {
32 |     let value;
33 |     try {
34 |         value = localStorage.getItem(key);
35 |         return JSON.parse(value);
36 |     } catch (_) {
37 |         return value;
38 |     }
39 | };
40 | 
41 | export const is2019 = created_at => {
42 |     const time = +new Date(created_at);
43 |     const startTime = 1546272000000; // Tue Jan 01 2019 00:00:00 GMT+0800
44 |     const endTime = 1577808000000; // Tue Jan 01 2020 00:00:00 GMT+0800
45 |     if (time > startTime && time < endTime) {
46 |         return true;
47 |     }
48 | 
49 |     return false;
50 | };
51 | 
52 | export const setStatusBarStyle = which => {
53 |     const color = getComputedStyle(document.body).getPropertyValue(which);
54 |     document.querySelectorAll('.theme-color').forEach(item => {
55 |         item.setAttribute('content', color);
56 |     });
57 | };
58 | 


--------------------------------------------------------------------------------
/src/util.scss:
--------------------------------------------------------------------------------
1 | @function tvw($pt) {
2 |     @return $pt / 460 * 100vw;
3 | }


--------------------------------------------------------------------------------
/src/views/Fifth/index.js:
--------------------------------------------------------------------------------
 1 | import './index.scss';
 2 | import React, { useEffect, useState } from 'react';
 3 | import Loader from '../../components/Loader';
 4 | import { getToken, setStatusBarStyle } from '../../util';
 5 | import { useHistory } from 'react-router-dom';
 6 | import {
 7 |     user,
 8 |     requestUser,
 9 |     requestRepos,
10 |     requestContributors,
11 |     fifthData,
12 |     requestIssues,
13 | } from '../../service';
14 | import Sign from '../Sign';
15 | 
16 | export default function Fifth() {
17 |     setStatusBarStyle('--fifth-color');
18 |     const history = useHistory();
19 |     const [loading, setLoading] = useState(true);
20 |     const [data, setData] = useState({});
21 | 
22 |     useEffect(() => {
23 |         async function get() {
24 |             const token = await getToken();
25 |             if (!user.login) {
26 |                 await requestUser(token);
27 |             }
28 |             await requestRepos(token);
29 |             await Promise.all([
30 |                 requestContributors(token),
31 |                 requestIssues(token),
32 |             ]);
33 | 
34 |             if (/fifth/.test(window.location.href)) {
35 |                 setLoading(false);
36 |                 setData(fifthData);
37 |             }
38 |         }
39 | 
40 |         get();
41 |     }, []);
42 | 
43 |     if (loading) {
44 |         return (
45 |             <div className="fifth">
46 |                 <Loader />
47 |             </div>
48 |         );
49 |     }
50 | 
51 |     return (
52 |         <div
53 |             className="fifth"
54 |             onClick={() => {
55 |                 history.push(`/sixth`);
56 |             }}
57 |         >
58 |             <div>
59 |                 <h1>2019：充实的一年</h1>
60 |                 <img src={require('../../assets/snow.png')} alt="snow" />
61 |             </div>
62 |             <section>
63 |                 <div className="left">
64 |                     <p>这一年里，你</p>
65 |                     <p>
66 |                         新增了<strong>{data.additions}</strong>行代码
67 |                     </p>
68 |                     <p>
69 |                         删除了<strong>{data.deletions}</strong>行代码
70 |                     </p>
71 |                     <p>
72 |                         产生了<strong>{data.commits}</strong>次commit
73 |                     </p>
74 |                 </div>
75 |                 <div className="right">
76 |                     <p>
77 |                         另外，至少<strong>{data.issues}</strong>
78 |                         个issue的讨论
79 |                     </p>
80 |                     <p>你有参与其中</p>
81 |                     {/* <p>
82 |                         你也加入了<strong>188</strong>
83 |                         个组织
84 |                     </p> */}
85 |                 </div>
86 |             </section>
87 |             <footer>
88 |                 <p className="center">开源世界感谢你的贡献～</p>
89 |                 <Sign></Sign>
90 |             </footer>
91 |         </div>
92 |     );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/views/Fifth/index.scss:
--------------------------------------------------------------------------------
 1 | @import '../../util.scss';
 2 | 
 3 | .fifth {
 4 |     width: 100vw;
 5 |     height: 100%;
 6 |     padding: 0 10vw;
 7 |     background-color: var(--fifth-color);
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     justify-content: space-around;
11 |     align-items: center;
12 |     h1 {
13 |         font-size: tvw(40);
14 |         position: relative;
15 |         text-align: center;
16 |     }
17 |     img {
18 |         width: 100%;
19 |         display: block;
20 |         box-shadow: 0px 0px 52px -10px #17665a;
21 |         border-radius: 1vw;
22 |     }
23 |     section {
24 |         width: 100%;
25 |         margin-bottom: 10vw;
26 |         .left {
27 |             text-align: left;
28 |         }
29 |         .right {
30 |             text-align: right;
31 |             margin-top: 2vw;
32 |         }
33 |         > p {
34 |             text-align: center;
35 |         }
36 |         strong {
37 |             font-size: tvw(30);
38 |         }
39 |     }
40 |     footer {
41 |         position: absolute;
42 |         left: 0;
43 |         bottom: 0;
44 |         width: 100%;
45 |         text-align: center;
46 |         .past {
47 |             width: 100%;
48 |         }
49 |     }
50 | }
51 | 


--------------------------------------------------------------------------------
/src/views/First/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import { useHistory } from 'react-router-dom';
 3 | import './index.scss';
 4 | import HelloYou from '../../components/HelloYou';
 5 | import Loader from '../../components/Loader';
 6 | import { fetchData } from '../../service';
 7 | import { getToken, setStatusBarStyle } from '../../util';
 8 | import Sign from '../Sign/';
 9 | 
10 | export default function First() {
11 |     setStatusBarStyle('--first-color');
12 |     const history = useHistory();
13 |     const [loading, setLoading] = useState(true);
14 |     const [data, setData] = useState({});
15 | 
16 |     useEffect(() => {
17 |         async function get() {
18 |             const token = await getToken();
19 |             const res = await fetchData(token);
20 |             if (/first/.test(window.location.href)) {
21 |                 setLoading(false);
22 |                 setData(res);
23 |             }
24 |         }
25 |         get();
26 |     }, []);
27 | 
28 |     if (loading) {
29 |         return (
30 |             <div className="first">
31 |                 <Loader />
32 |             </div>
33 |         );
34 |     }
35 | 
36 |     return (
37 |         <div
38 |             className="first"
39 |             onClick={() => {
40 |                 history.push(`/second`);
41 |             }}
42 |         >
43 |             <div className="hi">
44 |                 <HelloYou />
45 |             </div>
46 |             <section>
47 |                 <div className="met">
48 |                     <p className="bold">{data.created_at}</p>
49 |                     <p>我们第一次相遇</p>
50 |                 </div>
51 |                 <p className="content">
52 |                     <strong>{data.first_repo}</strong>
53 |                     是你在这儿创建的第一个仓库
54 |                 </p>
55 |             </section>
56 |             <footer>
57 |                 <p className="past">
58 |                     一转眼都<strong>{data.days}</strong>
59 |                     天过去了...
60 |                 </p>
61 |                 <Sign></Sign>
62 |             </footer>
63 |         </div>
64 |     );
65 | }
66 | 


--------------------------------------------------------------------------------
/src/views/First/index.scss:
--------------------------------------------------------------------------------
 1 | @import '../../util.scss';
 2 | 
 3 | .first {
 4 |     width: 100vw;
 5 |     height: 100%;
 6 |     background-color: var(--first-color);
 7 |     display: flex;
 8 |     align-items: center;
 9 |     flex-direction: column;
10 |     justify-content: space-around;
11 |     padding: 0 10vw;
12 |     .hi {
13 |         font-size: tvw(60);
14 |         text-align: center;
15 |     }
16 |     section {
17 |         margin-bottom: 10vw;
18 |         .content {
19 |             margin: 5vw 0 20vw 10vw;
20 |             text-align: right;
21 |         }
22 |     }
23 |     footer {
24 |         position: absolute;
25 |         left: 0;
26 |         bottom: 0;
27 |         width: 100%;
28 |         text-align: center;
29 |         .past {
30 |             width: 100%;
31 |         }
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/views/Fourth/index.js:
--------------------------------------------------------------------------------
 1 | import './index.scss';
 2 | import React, { useEffect, useState } from 'react';
 3 | import Loader from '../../components/Loader';
 4 | import { getToken, setStatusBarStyle } from '../../util';
 5 | import { useHistory } from 'react-router-dom';
 6 | import {
 7 |     user,
 8 |     requestRepos,
 9 |     mostCommits,
10 |     requestCommits,
11 |     getMostCommitsInOneDay,
12 |     requestUser,
13 | } from '../../service';
14 | import Sign from '../Sign';
15 | 
16 | export default function Fourth() {
17 |     setStatusBarStyle('--fourth-color');
18 |     const history = useHistory();
19 |     const [loading, setLoading] = useState(true);
20 |     const [data, setData] = useState({});
21 | 
22 |     useEffect(() => {
23 |         async function get() {
24 |             const token = await getToken();
25 |             if (!user.login) {
26 |                 await requestUser(token);
27 |             }
28 |             await requestRepos(token);
29 |             await requestCommits(token);
30 |             await getMostCommitsInOneDay(token);
31 | 
32 |             if (/fourth/.test(window.location.href)) {
33 |                 setLoading(false);
34 |                 setData(mostCommits);
35 |             }
36 |         }
37 |         if (!mostCommits.total) {
38 |             get();
39 |         } else {
40 |             setLoading(false);
41 |             setData(mostCommits);
42 |         }
43 |     }, []);
44 | 
45 |     if (loading) {
46 |         return (
47 |             <div className="fourth">
48 |                 <Loader />
49 |             </div>
50 |         );
51 |     }
52 | 
53 |     return (
54 |         <div
55 |             className="fourth"
56 |             onClick={() => {
57 |                 history.push(`/fifth`);
58 |             }}
59 |         >
60 |             {/* <Pyramid></Pyramid> */}
61 |             <img src={require('../../assets/Sun.png')} alt="sun" />
62 |             <section>
63 |                 <div className="left">
64 |                     <p>
65 |                         <strong>
66 |                             {data.date && data.date.replace(/\//g, '-')}
67 |                         </strong>
68 |                     </p>
69 |                     <p>这天你的战斗力简直爆表</p>
70 |                 </div>
71 |                 <div className="right">
72 |                     <p>
73 |                         这天你一共推送了
74 |                         <strong>{data.total}</strong>次commit。
75 |                     </p>
76 |                     <p>
77 |                         其中有
78 |                         <strong>{data.totalToTheRepo}</strong>
79 |                         次commit是给了
80 |                     </p>
81 |                     <p>
82 |                         <strong>{data.theRepo}</strong>
83 |                         想必这个仓库对你来说一定很有价值吧
84 |                     </p>
85 |                 </div>
86 |             </section>
87 |             <footer>
88 |                 <p className="center">元气满满的一天呢～</p>
89 |                 <Sign></Sign>
90 |             </footer>
91 |         </div>
92 |     );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/views/Fourth/index.scss:
--------------------------------------------------------------------------------
 1 | @import '../../util.scss';
 2 | 
 3 | .fourth {
 4 |     width: 100vw;
 5 |     height: 100%;
 6 |     background-color: var(--fourth-color);
 7 |     display: flex;
 8 |     flex-direction: column;
 9 |     justify-content: space-around;
10 |     align-items: center;
11 |     > img {
12 |         width: 80%;
13 |         border-radius: 1vw;
14 |     }
15 |     section {
16 |         width: 80%;
17 |         margin-bottom: 10vw;
18 |         h1 {
19 |             font-size: tvw(60);
20 |             position: relative;
21 |             text-align: center;
22 |         }
23 |         .left {
24 |             text-align: left;
25 |             margin-bottom: 5vw;
26 |         }
27 |         .right {
28 |             text-align: right;
29 |             margin-bottom: 10vw;
30 |         }
31 |         > p {
32 |             text-align: center;
33 |             margin: 2.5vw 0;
34 |         }
35 |         strong {
36 |             font-size: tvw(30);
37 |         }
38 |     }
39 |     footer {
40 |         position: absolute;
41 |         left: 0;
42 |         bottom: 0;
43 |         width: 100%;
44 |         text-align: center;
45 |         .past {
46 |             width: 100%;
47 |         }
48 |     }
49 | }
50 | 


--------------------------------------------------------------------------------
/src/views/Home/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect } from 'react';
 2 | import { useHistory } from 'react-router-dom';
 3 | import MilkButton from '../../components/MilkButton';
 4 | import './index.scss';
 5 | import { getToken, set, setStatusBarStyle } from '../../util';
 6 | 
 7 | let client_id = '38f3a48dab9243a31252';
 8 | if (process.env.NODE_ENV !== 'production') {
 9 |     client_id = 'cf8ebcd166bd24e0e15f'; // test id
10 | }
11 | const authorize_uri = 'https://github.com/login/oauth/authorize';
12 | const redirect_uri = 'https://github2019.herokuapp.com/oauth/redirect';
13 | 
14 | function Home() {
15 |     const history = useHistory();
16 |     setStatusBarStyle('--home-color');
17 | 
18 |     useEffect(() => {
19 |         async function func() {
20 |             let token = await getToken();
21 |             if (token) {
22 |                 set('token', token);
23 |                 history.push(`/first`);
24 |                 return;
25 |             }
26 |         }
27 |         func();
28 |     }, [history]);
29 | 
30 |     return (
31 |         <div className="home">
32 |             <img src={require('../../assets/GitHub.png')} alt="github" />
33 |             <h1>
34 |                 2019
35 |                 <br />
36 |                 Github年度报告
37 |             </h1>
38 |             <div
39 |                 onClick={() => {
40 |                     window.location.href = `${authorize_uri}?client_id=${client_id}&redirect_uri=${redirect_uri}`;
41 |                 }}
42 |             >
43 |                 <MilkButton />
44 |             </div>
45 |         </div>
46 |     );
47 | }
48 | 
49 | export default Home;
50 | 


--------------------------------------------------------------------------------
/src/views/Home/index.scss:
--------------------------------------------------------------------------------
 1 | .home {
 2 |     background: var(--home-color);
 3 |     width: 100vw;
 4 |     height: 100%;
 5 |     display: flex;
 6 |     flex-direction: column;
 7 |     align-items: center;
 8 |     img {
 9 |         width: 30vw;
10 |         margin: 20vw auto 5vw auto;
11 |     }
12 |     h1 {
13 |         font-size: 10vw;
14 |         color: #ffffff;
15 |         margin-bottom: 10vw;
16 |         text-align: center;
17 |     }
18 |     input {
19 |         width: 50vw;
20 |         height: 10vw;
21 |         outline: none;
22 |         border: none;
23 |         // border-radius: 5vw;
24 |         margin-bottom: 20vw;
25 |         font-size: 5vw;
26 |         background: var(--home-color);
27 |         border-bottom: 1px solid #dddddd;
28 |         color: #ffffff;
29 |     }
30 |     button {
31 |         width: 50vw;
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/views/Second/index.js:
--------------------------------------------------------------------------------
 1 | import React, { useEffect, useState } from 'react';
 2 | import './index.scss';
 3 | import Fire from '../../components/Fire';
 4 | import Loader from '../../components/Loader';
 5 | import { getToken, setStatusBarStyle } from '../../util';
 6 | import { useHistory } from 'react-router-dom';
 7 | import {
 8 |     user,
 9 |     requestFollowing,
10 |     first_following,
11 |     requestUser,
12 | } from '../../service';
13 | import Sign from '../Sign';
14 | 
15 | export default function Second() {
16 |     setStatusBarStyle('--second-color');
17 |     const history = useHistory();
18 |     const [loading, setLoading] = useState(true);
19 |     const [data, setData] = useState({});
20 | 
21 |     useEffect(() => {
22 |         async function get() {
23 |             const token = await getToken();
24 |             await requestUser(token);
25 |             await requestFollowing(token);
26 | 
27 |             if (/second/.test(window.location.href)) {
28 |                 setLoading(false);
29 |                 setData({
30 |                     following: user.following,
31 |                     followers: user.followers,
32 |                     first_following,
33 |                 });
34 |             }
35 |         }
36 | 
37 |         if (!user.login || !first_following) {
38 |             get();
39 |             return;
40 |         }
41 |         if (/second/.test(window.location.href)) {
42 |             setLoading(false);
43 |             setData({
44 |                 following: user.following,
45 |                 followers: user.followers,
46 |                 first_following,
47 |             });
48 |         }
49 |     }, []);
50 | 
51 |     if (loading) {
52 |         return (
53 |             <div className="second">
54 |                 <Loader />
55 |             </div>
56 |         );
57 |     }
58 | 
59 |     return (
60 |         <div className="second">
61 |             <Fire />
62 |             <section
63 |                 className="content"
64 |                 onClick={() => {
65 |                     history.push(`/third`);
66 |                 }}
67 |             >
68 |                 <h1>
69 |                     <strong>{data.following}</strong>位大佬
70 |                 </h1>
71 |                 <h3>
72 |                     <strong>{data.followers}</strong>位粉丝
73 |                 </h3>
74 |                 <div>
75 |                     <p>你关注了{data.following}位大佬</p>
76 |                     <p>同时你也收获了{data.followers}位粉丝</p>
77 |                     <p>
78 |                         <strong>{data.first_following}</strong>
79 |                         是你第一个关注的人
80 |                     </p>
81 |                     <p>你还记得TA吗？</p>
82 |                 </div>
83 |             </section>
84 |             <footer>
85 |                 <p>可别忘了Github是个交友网站哦～</p>
86 |                 <Sign></Sign>
87 |             </footer>
88 |         </div>
89 |     );
90 | }
91 | 


--------------------------------------------------------------------------------
/src/views/Second/index.scss:
--------------------------------------------------------------------------------
 1 | @import '../../util.scss';
 2 | 
 3 | .second {
 4 |     width: 100vw;
 5 |     height: 100%;
 6 |     padding: 0 10vw;
 7 |     background-color: var(--second-color);
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     justify-content: space-around;
11 |     .bold {
12 |         font-size: tvw(25);
13 |     }
14 |     .content {
15 |         display: flex;
16 |         flex-direction: column;
17 |         justify-content: space-around;
18 |         align-items: flex-start;
19 |         text-align: left;
20 |         margin-bottom: 10vw;
21 |         h1 {
22 |             font-size: tvw(40);
23 |             line-height: 1;
24 |             margin-bottom: 2vw;
25 |             strong {
26 |                 font-size: tvw(60);
27 |             }
28 |         }
29 |         h3 {
30 |             font-size: tvw(30);
31 |             line-height: 1;
32 |             margin-bottom: 8vw;
33 |             strong {
34 |                 font-size: tvw(50);
35 |             }
36 |         }
37 |         > div {
38 |             align-self: flex-end;
39 |             text-align: right;
40 |         }
41 |         > p {
42 |             margin-top: 15vw;
43 |             align-self: center;
44 |             text-align: center;
45 |         }
46 |     }
47 |     footer {
48 |         position: absolute;
49 |         left: 0;
50 |         bottom: 0;
51 |         width: 100%;
52 |         text-align: center;
53 |         .past {
54 |             width: 100%;
55 |         }
56 |     }
57 | }
58 | 


--------------------------------------------------------------------------------
/src/views/Sign/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import './index.scss';
3 | 
4 | export default function Sign() {
5 |     return <p className="sign">「Github 2019年度报告」linshuirong.cn/github</p>;
6 | }
7 | 


--------------------------------------------------------------------------------
/src/views/Sign/index.scss:
--------------------------------------------------------------------------------
1 | .sign {
2 |     margin: 1vw 0;
3 |     width: 100%;
4 |     left: 0;
5 |     text-align: center;
6 |     font-size: 2.5vw;
7 |     opacity: 0.8;
8 | }
9 | 


--------------------------------------------------------------------------------
/src/views/Sixth/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import './index.scss';
 3 | import NewYear from '../../components/NewYear';
 4 | import { setStatusBarStyle } from '../../util';
 5 | import Sign from '../Sign';
 6 | 
 7 | export default function Sixth() {
 8 |     setStatusBarStyle('--sixth-color');
 9 | 
10 |     return (
11 |         <div className="sixth">
12 |             <section>
13 |                 <p>2019年过去了，我很怀念它</p>
14 |                 <br />
15 |                 <p>生活得继续</p>
16 |                 <p>代码也还得写</p>
17 |                 <p></p>
18 |             </section>
19 |             <NewYear />
20 |             <a
21 |                 href="https://github.com/shuiRong/github-annual-report"
22 |                 target="_blanket"
23 |                 className="button"
24 |             >
25 |                 <img src={require('../../assets/star.png')} alt="star"></img>
26 |                 Github
27 |             </a>
28 |             <footer>
29 |                 <Sign></Sign>
30 |             </footer>
31 |         </div>
32 |     );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/views/Sixth/index.scss:
--------------------------------------------------------------------------------
 1 | @import '../../util.scss';
 2 | 
 3 | .sixth {
 4 |     width: 100vw;
 5 |     height: 100%;
 6 |     padding: 0 10vw;
 7 |     background-color: var(--sixth-color);
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     justify-content: space-around;
11 |     align-items: center;
12 |     p:not(.sign) {
13 |         font-size: tvw(25);
14 |         text-align: center;
15 |     }
16 |     .button {
17 |         width: 32vw;
18 |         display: flex;
19 |         align-items: center;
20 |         justify-content: center;
21 |         img {
22 |             width: 6vw;
23 |             margin-right: 1vw;
24 |         }
25 |     }
26 |     footer {
27 |         position: absolute;
28 |         left: 0;
29 |         bottom: 0;
30 |         width: 100%;
31 |         text-align: center;
32 |     }
33 | }
34 | 


--------------------------------------------------------------------------------
/src/views/Third/index.js:
--------------------------------------------------------------------------------
 1 | import './index.scss';
 2 | import NightMoon from '../../components/NightMoon';
 3 | import React, { useEffect, useState } from 'react';
 4 | import Loader from '../../components/Loader';
 5 | import { getToken, setStatusBarStyle } from '../../util';
 6 | import { useHistory } from 'react-router-dom';
 7 | import {
 8 |     user,
 9 |     requestUser,
10 |     requestRepos,
11 |     requestCommits,
12 |     commitsAtNight,
13 | } from '../../service';
14 | import Sign from '../Sign';
15 | 
16 | const getTime = time => {
17 |     const temp = String(time).split('.');
18 |     return (temp[0] || 0) + '点' + (temp[1] || 0) + '分';
19 | };
20 | 
21 | export default function Third() {
22 |     setStatusBarStyle('--third-color');
23 |     const history = useHistory();
24 |     const [loading, setLoading] = useState(true);
25 |     const [data, setData] = useState({});
26 | 
27 |     useEffect(() => {
28 |         async function get() {
29 |             const token = await getToken();
30 |             if (!user.login) {
31 |                 await requestUser(token);
32 |             }
33 |             await requestRepos(token);
34 |             await requestCommits(token);
35 | 
36 |             if (/third/.test(window.location.href)) {
37 |                 setLoading(false);
38 |                 setData(commitsAtNight);
39 |             }
40 |         }
41 |         if (!commitsAtNight.total) {
42 |             get();
43 |         } else {
44 |             setLoading(false);
45 |             setData(commitsAtNight);
46 |         }
47 |     }, []);
48 | 
49 |     if (loading) {
50 |         return (
51 |             <div className="third">
52 |                 <Loader />
53 |             </div>
54 |         );
55 |     }
56 | 
57 |     return (
58 |         <div
59 |             className="third"
60 |             onClick={() => {
61 |                 history.push(`/fourth`);
62 |             }}
63 |         >
64 |             <div className="picture">
65 |                 <h1>熬夜小能手</h1>
66 |                 <NightMoon />
67 |             </div>
68 |             <section>
69 |                 <div className="left">
70 |                     <p>这一年里</p>
71 |                     <p>你常在晚上写代码</p>
72 |                 </div>
73 |                 <div className="right">
74 |                     <p>
75 |                         有<strong>{data.total}</strong>次commit发生在
76 |                         <strong>21</strong>
77 |                         点后
78 |                     </p>
79 |                     <p>
80 |                         最晚的那次居然是
81 |                         <strong>{getTime(data.latestTime)}</strong>
82 |                         ！！！
83 |                     </p>
84 |                 </div>
85 |             </section>
86 |             <footer>
87 |                 <p>不要熬夜，朋友，身体健康挺重要的</p>
88 |                 <Sign></Sign>
89 |             </footer>
90 |         </div>
91 |     );
92 | }
93 | 


--------------------------------------------------------------------------------
/src/views/Third/index.scss:
--------------------------------------------------------------------------------
 1 | @import '../../util.scss';
 2 | 
 3 | .third {
 4 |     width: 100vw;
 5 |     height: 100%;
 6 |     padding: 0 10vw;
 7 |     background-color: var(--third-color);
 8 |     display: flex;
 9 |     flex-direction: column;
10 |     justify-content: space-around;
11 |     align-items: center;
12 | 
13 |     .picture {
14 |         width: 100%;
15 |         h1 {
16 |             text-align: center;
17 |             margin-bottom: 1vw;
18 |             font-size: tvw(60);
19 |         }
20 |     }
21 |     section {
22 |         width: 100%;
23 |         margin-bottom: 10vw;
24 |         .left {
25 |             text-align: left;
26 |             margin-bottom: 5vw;
27 |         }
28 |         .right {
29 |             text-align: right;
30 |             margin-bottom: 15vw;
31 |         }
32 |         > p {
33 |             text-align: center;
34 |         }
35 |     }
36 |     footer {
37 |         position: absolute;
38 |         left: 0;
39 |         bottom: 0;
40 |         width: 100%;
41 |         text-align: center;
42 |         .past {
43 |             width: 100%;
44 |         }
45 |     }
46 | }
47 | 


--------------------------------------------------------------------------------