init

.babelrc.js

@@ -0,0 +1,3 @@
+module.exports = {
+  "presets": ["next/babel"]
+}

.env

@@ -0,0 +1 @@
+NEXT_PUBLIC_MAP_API_KEY=""

.eslintignore

@@ -0,0 +1,4 @@
+/.next
+/.locales
+/src/pages
+/public

.eslintrc.js

@@ -0,0 +1,39 @@
+/* eslint-disable no-undef */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser', // the TypeScript parser we installed earlier
+  parserOptions: {
+    ecmaFeatures: { jsx: true }, // Allows for the parsing of JSX
+  },
+  env: {
+    browser: true,
+    node: true,
+  },
+  plugins: ['prettier'],
+  extends: [
+    'eslint:recommended', // eslint default rules
+    'plugin:@typescript-eslint/eslint-recommended', // eslint TypeScript rules (github.com/typescript-eslint/typescript-eslint)
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react/recommended', // eslint react rules (github.com/yannickcr/eslint-plugin-react)
+    'plugin:jsx-a11y/recommended', // accessibility plugin
+    // Prettier plugin and recommended rules
+    'prettier/@typescript-eslint',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    'prettier/prettier': ['error', {}, { usePrettierrc: true }],
+    'react/react-in-jsx-scope': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    'react/prop-types': 'off', // We turn off prop-types rule, as we will use TypeScript's types instead.
+    'no-undef': 'error',
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: ['@material-ui/*/*/*', '!@material-ui/core/test-utils/*'],
+      },
+    ],
+  },
+  settings: {
+    react: { version: 'latest' },
+  },
+};

.gitignore

@@ -0,0 +1,37 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+/public/static/locales
+/.locales
+/src/pages
+/i18n.json
+#built pages
+/src/pages

.prettierrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  // Change your rules accordingly to your coding style preferencies.
+  // https://prettier.io/docs/en/options.html
+  semi: true,
+  trailingComma: 'all',
+  singleQuote: true,
+  printWidth: 120,
+  tabWidth: 2,
+  useTabs: false,
+}

.vscode/launch.json

@@ -0,0 +1,33 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+      {
+          "type": "chrome",
+          "request": "launch",
+          "name": "Chrome",
+          "url": "http://localhost:8000",
+          "webRoot": "${workspaceFolder}",
+      },
+      {
+          "type": "node",
+          "request": "launch",
+          "name": "Node",
+          "runtimeExecutable": "yarn",
+          "runtimeArgs": [
+              "run",
+              "dev",
+          ],
+          "port": 9230,
+          "console": "integratedTerminal",
+      }
+  ],
+  "compounds": [
+      {
+          "name": "Full",
+          "configurations": ["Node", "Chrome"]
+      }
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "tslint.configFile": "tslint.json",
+  "git.ignoreLimitWarning": true
+}

README.md

@@ -0,0 +1,26 @@
+This is a Next.js based project to style react components into beautiful ones. Including animations, effects and layouts
+
+## Getting Started
+Clone and run code: 
+- git clone https://github.com/saigonbitmaster/styledReact
+- yarn //install node depedenceis
+- yarn run dev //run development mode 
+- yarn run build //build the site
+- yarn run start //run production mode
+
+Modify data, images in the folder
+src/pages_/api/data.js
+public
+
+Open [http://localhost:8000](http://localhost:8000) with your browser to see the result.
+
+You can start editing the page by modifying `pages_/index.tsx`. The page auto-updates as you edit the file.
+
+## Some screens
+Cusomized to similar Tesla homepage:
+![Screen Shot 2021-09-06 at 11 56 22 AM](https://user-images.githubusercontent.com/89018674/132180413-aa6ef60d-2fed-430c-892d-405ac3f86dcf.jpg)
+![Screen Shot 2021-09-06 at 11 56 54![Screen Shot 2021-09-06 at 11 57 12 AM](https://user-images.githubusercontent.com/89018674/132181780-4cbf9208-5a4f-4ab4-99a1-aa3d6f189c79.jpg)
+ AM](https://user-images.githubusercontent.com/89018674/132181614-e36df7b2-e316-406a-a845-d8490c5314ae.jpg)
+ ![Screen Shot 2021-09-06 at 11 56 33 AM](https://user-images.githubusercontent.com/89018674/132182265-201fb617-7481-43dd-a94f-f21489686822.jpg)
+![Screen Shot 2021-09-06 at 11 57 12 AM](https://user-images.githubusercontent.com/89018674/132182312-5d8dc566-67cc-4ffa-ae6c-bc9df181f970.jpg)
+![Screen Shot 2021-09-06 at 11 57 24 AM](https://user-images.githubusercontent.com/89018674/132182329-eea4091a-523d-4fd2-a573-49fb5a129f4a.jpg)

copy-i18n.js

@@ -0,0 +1,38 @@
+/* eslint-disable no-undef */
+/* eslint-disable @typescript-eslint/no-var-requires */
+const fs = require('fs');
+const path = require('path');
+const { execSync } = require('child_process');
+
+const dirs = [
+  ['i18n/vi', '.locales/vi'],
+  ['i18n/en', '.locales/en'],
+];
+
+dirs.map((dir) => {
+  const srcPath = path.join(__dirname, dir[0]);
+  const dstPath = path.join(__dirname, dir[1]);
+  // console.log(dstPath);
+  execSync(`mkdir -p ${dstPath}`);
+  execSync(`rm -f ${dstPath}/*.json`);
+
+  // create i18n.json
+  execSync(`rm -f ` + path.join(process.cwd(), `i18n.json`));
+  const i18n = require('./i18n');
+  fs.writeFileSync(path.join(process.cwd(), `i18n.json`), JSON.stringify(i18n, null, ' '), {
+    encoding: 'utf8',
+    flag: 'w',
+  });
+
+  const files = fs.readdirSync(srcPath);
+  files.forEach((fileName) => {
+    const fileInfo = path.parse(fileName);
+    // console.log(fileInfo);
+    if (fileInfo.ext === '.js') {
+      const contentObj = require(`./${dir[0]}/${fileName}`);
+      const contentString = JSON.stringify(contentObj, null, ' ');
+      // write to public folder
+      fs.writeFileSync(path.join(dstPath, `${fileInfo.name}.json`), contentString, { encoding: 'utf8', flag: 'w' });
+    }
+  });
+});

i18n/en/common.js

@@ -0,0 +1,19 @@
+/* eslint-disable no-undef */
+module.exports = {
+  'site-name': 'bworks',
+  copyright: 'Copyright © 2020bworks',
+  'change-locale': 'Change locale',
+  'error-without-status': 'Page not found',
+  home: 'Home',
+  logoName: 'BWORKs',
+  login: 'Login',
+  product01: 'EMPLOYER',
+  product02: 'JOB SEEKER',
+  product03: 'WALLET',
+  product04: 'SMART CONTRACT',
+  'about-us': 'About us',
+  'contact-us': 'Contact us',
+  components: 'components',
+  submit: 'SUBMIT',
+  support: 'SUPPORT',
+};

i18n/index.js

@@ -0,0 +1,20 @@
+// const defaultLangsFromHost = {
+//   vi: 'vi',
+//   default: 'en', // localhost
+// };
+
+// function getDomain(host) {
+//   const domain = host.split('.');
+//   return domain[domain.length - 1];
+// }
+
+module.exports = {
+  allLanguages: ['en', 'vi'],
+  defaultLanguage: 'en',
+  currentPagesDir: 'src/pages_',
+  finalPagesDir: 'src/pages',
+  localesPath: '.locales',
+  pages: {
+    '*': ['common'],
+  },
+};

i18n/vi/common.js

@@ -0,0 +1,22 @@
+/* eslint-disable no-undef */
+module.exports = {
+  'site-name': 'bworks',
+  copyright: 'Copyright © 2020 MysiteOS',
+  'change-locale': 'Change locale',
+  'error-without-status': 'Page not found',
+  home: 'Home',
+  logoName: 'BWORKs',
+  login: 'Login',
+  product01: 'poductI',
+  product02: 'poductII',
+  product03: 'poductIII',
+  product04: 'poductIV',
+  product05: 'poductV',
+  product06: 'poductVI',
+  samplePages: 'samplePages',
+  'about-us': 'About us',
+  'contact-us': 'Contact us',
+  components: 'components',
+  submit: 'SUBMIT',
+  support: 'SUPPORT',
+};

index.js

@@ -0,0 +1,8 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
+const { setConfig } = require('next/config');
+var path = require('path');
+global.appRoot = path.resolve(__dirname);
+
+setConfig(require('./next.config'));
+
+require('./server');

next-env.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable prettier/prettier */
+/// <reference types="next" />
+/// <reference types="next/types/global" />

next.config.js

@@ -0,0 +1,30 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+});
+/* eslint-disable no-undef */
+const settings = {
+  distDir: 'build',
+  publicRuntimeConfig: {
+    localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string' ? process.env.LOCALE_SUBPATHS : 'none',
+  },
+  webpack: (config, { isServer }) => {
+    // Fixes npm packages that depend on `fs` module
+    if (!isServer) {
+      config.node = {
+        fs: 'empty',
+      };
+    }
+
+    return config;
+  },
+  typescript: {
+    // !! WARN !!
+    // Dangerously allow production builds to successfully complete even if
+    // your project has type errors.
+    // !! WARN !!
+    ignoreBuildErrors: true,
+  },
+};
+
+module.exports = withBundleAnalyzer(settings);

package.json

@@ -0,0 +1,62 @@
+{
+  "name": "styled-react",
+  "version": "0.1.0",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "i18n": "node copy-i18n.js",
+    "dev": "next-translate && node . --debug=9230",
+    "build": "cross-env NODE_ENV=production && next-translate && next build",
+    "analyze": "cross-env ANALYZE=true next build",
+    "analyze:server": "cross-env BUNDLE_ANALYZE=server next build",
+    "analyze:browser": "cross-env BUNDLE_ANALYZE=browser next build",
+    "start": "NODE_ENV=production node . -p 8000",
+    "lint": "eslint ."
+  },
+  "dependencies": {
+    "@material-ui/core": "^4.11.0",
+    "@material-ui/icons": "^4.9.1",
+    "@react-google-maps/api": "^1.10.1",
+    "clsx": "^1.1.1",
+    "express": "^4.17.1",
+    "gray-matter": "^4.0.2",
+    "jss-preset-default": "^10.5.0",
+    "lodash": "^4.17.19",
+    "next": "9.5.1",
+    "next-translate": "^0.17.1",
+    "nextjs-progressbar": "^0.0.5",
+    "pagepiling.js": "^1.5.6",
+    "react": "16.13.1",
+    "react-calendar-heatmap": "^1.8.1",
+    "react-dom": "16.13.1",
+    "react-google-charts": "^3.0.15",
+    "react-material-ui-carousel": "^1.6.0",
+    "react-particles-js": "^3.2.1",
+    "react-scrollmagic": "^2.2.0",
+    "react-slick": "^0.26.1",
+    "remark": "^12.0.0",
+    "remark-html": "^11.0.2",
+    "tsc": "^1.20150623.0"
+  },
+  "devDependencies": {
+    "@next/bundle-analyzer": "^9.4.4",
+    "@types/googlemaps": "^3.39.13",
+    "@types/node": "^14.0.14",
+    "@types/react": "^16.9.41",
+    "@types/react-dom": "^16.9.8",
+    "@types/webpack": "^4.41.18",
+    "@typescript-eslint/eslint-plugin": "^3.5.0",
+    "@typescript-eslint/parser": "^3.5.0",
+    "babel-plugin-styled-components": "^1.10.7",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.4.0",
+    "eslint-config-prettier": "^6.11.0",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-jsx-a11y": "^6.3.1",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-react": "^7.20.3",
+    "eslint-plugin-react-hooks": "^4.0.5",
+    "prettier": "^2.0.5",
+    "typescript": "^3.9.6"
+  }
+}