feat(next): switch from gatsby to next (#612)

BREAKING CHANGE: switch from `gatsby` to `next`

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "@dg-scripts"
+  "extends": ["next/core-web-vitals", "prettier"]
 }

.github/workflows/ci.yml

@@ -59,16 +59,9 @@ jobs:
       - name: Run unit tests
         run: |
           yarn test:all
-          yarn badge
       - name: Perform code coverage report action
         uses: codecov/codecov-action@v3
         if: ${{ matrix.node-version == 16 && matrix.os == 'ubuntu-latest' && matrix.architecture == 'x64' }}
-      - name: Archive production artifacts
-        uses: actions/upload-artifact@v3
-        if: ${{ matrix.node-version == 16 && matrix.os == 'ubuntu-latest' && matrix.architecture == 'x64' }}
-        with:
-          name: badges
-          path: public
 
   build:
     name: Building
@@ -96,38 +89,10 @@ jobs:
           yarn
       - name: Build application
         run: |
-          yarn build:gh-pages
+          yarn build
       - name: Archive production artifacts
         uses: actions/upload-artifact@v3
         if: ${{ matrix.node-version == 16 && matrix.os == 'ubuntu-latest' && matrix.architecture == 'x64' }}
         with:
-          name: demos
-          path: public
-
-  deploy:
-    name: Deployment
-    if: ${{ github.ref == 'refs/heads/main' }}
-    runs-on: ubuntu-latest
-    needs: [lint, test, build]
-    steps:
-      - name: Download production artifacts
-        uses: actions/download-artifact@v3
-      - name: List production artifacts
-        run: |
-          ls -R
-        working-directory: .
-      - name: Aggregate production artifacts
-        run: |
-          mkdir -p ./build/
-          cp -fr badges/* ./build/
-          cp -fr demos/* ./build/
-      - name: Deploy to Github Pages
-        uses: peaceiris/actions-gh-pages@v3
-        if: ${{ github.ref == 'refs/heads/main' }}
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./build
-          force_orphan: true
-          user_name: 'github-actions[bot]'
-          user_email: 'github-actions[bot]@users.noreply.github.com'
-          commit_message: ${{ github.event.head_commit.message }}
+          name: app
+          path: build

.gitignore

@@ -4,6 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # Runtime data
 pids
@@ -51,20 +52,26 @@ typings/
 # Output of 'npm pack'
 *.tgz
 
-# dotenv environment variables file
-.env
+# local dotenv environment variables file
+.env*.local
 
 # gatsby files
 .cache/
 build
 dist
-public
+
+# nextjs files
+.next/
+out/
+
+# vercel
+.vercel
 
 # Mac files
 .DS_Store
+*.pem
 
 # Yarn
-yarn-error.log
 .yarn/*
 !.yarn/patches
 !.yarn/releases
@@ -73,9 +80,10 @@ yarn-error.log
 !.yarn/versions
 .pnp/
 .pnp.js
-
-# Yarn Integrity file
 .yarn-integrity
 
-.vscode/
+# typescript
+*.tsbuildinfo
 
+# IDE files
+.vscode/

.yarnrc.yml

@@ -7,22 +7,6 @@ npmPublishRegistry: "https://registry.npmjs.org"
 npmRegistryServer: "https://registry.npmjs.org"
 
 packageExtensions:
-  "@parcel/cache@*":
-    peerDependenciesMeta:
-      "@parcel/core":
-        optional: true
-  "@parcel/fs@*":
-    peerDependenciesMeta:
-      "@parcel/core":
-        optional: true
-  "@parcel/package-manager@*":
-    peerDependenciesMeta:
-      "@parcel/core":
-        optional: true
-  "@parcel/workers@*":
-    peerDependenciesMeta:
-      "@parcel/core":
-        optional: true
   "@react-spring/core@*":
     peerDependenciesMeta:
       react:
@@ -71,24 +55,10 @@ packageExtensions:
         optional: true
       react-dom:
         optional: true
-  eslint-config-react-app@*:
-    peerDependenciesMeta:
-      babel-eslint:
-        optional: true
   eslint-utils@*:
     peerDependenciesMeta:
       eslint:
         optional: true
-  fork-ts-checker-webpack-plugin@*:
-    peerDependenciesMeta:
-      typescript:
-        optional: true
-      webpack:
-        optional: true
-  postcss-loader@*:
-    peerDependenciesMeta:
-      webpack:
-        optional: true
   postcss-scss@*:
     peerDependenciesMeta:
       postcss:

README.md

@@ -1,14 +1,5 @@
-<p align="center">
-  <a href="https://www.gatsbyjs.com">
-    <img
-      alt="Gatsby"
-      src="https://www.gatsbyjs.com/Gatsby-Monogram.svg"
-      width="60"
-    />
-  </a>
-</p>
 <h1 align="center">
-  Gatsby's Blog Starter
+  Next.js Blog Starter
 </h1>
 
 [![Author](https://img.shields.io/badge/author-sabertaz-lightgrey?style=for-the-badge)](https://github.com/sabertazimi)
@@ -19,11 +10,9 @@
 
 [![CI](https://img.shields.io/github/workflow/status/sabertazimi/blog/CI/main?style=for-the-badge&logo=github)](https://github.com/sabertazimi/blog/actions/workflows/ci.yml)
 [![CodeQL](https://img.shields.io/github/workflow/status/sabertazimi/blog/CodeQL/main?label=CodeQL&logo=github&style=for-the-badge)](https://github.com/sabertazimi/blog/actions/workflows/codeql-analysis.yml)
-
 [![Jest Coverage](https://img.shields.io/codecov/c/github/sabertazimi/blog?logo=codecov&style=for-the-badge)](https://codecov.io/gh/sabertazimi/blog)
-[![Jest Coverage](https://raw.githubusercontents.com/sabertazimi/blog/gh-pages/coverage-lines.svg)](https://github.com/sabertazimi/blog/actions/workflows/ci.yml)
 
-A great [blog](https://sabertazimi.github.io/blog) system based on React and Gatsby.
+A great [blog](https://sabertazimi.github.io/blog) system based on React and Next.js.
 
 ## Features
 
@@ -92,43 +81,33 @@ npm install
 ### Development
 
 ```bash
-# http://localhost:8000
+# http://localhost:3000
 npm start
 ```
 
 **Open the source code and start editing!**
 
-Your site is now running at `http://localhost:8000`!
-
-> You'll also see a second link: \_`http://localhost:8000/___graphql`\_.
-> This is a tool you can use to experiment with querying your data
+Your site is now running at `http://localhost:3000`!
 
 ## 💫 Deployment
 
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsabertazimi%2Fblog&project-name=blog&repo-name=blog&demo-title=Sabertaz%20Blog&demo-url=https%3A%2F%2Fblog.tazimi.dev)
+
 Build for `/` path:
 
 ```bash
-# Deploy public/ directory with GitHub Pages or Gatsby Cloud.
+# Deploy with Vercel.
 npm run build
 ```
 
-Build for `/xxx` prefix path:
-
-```bash
-npm run build:gh-pages
-```
-
-More Github Pages deployment details in `.github/workflows/ci.yml`.
-
 ## Fold Structure
 
-A quick look at the top-level files and directories you'll see in a Gatsby project.
+A quick look at the top-level files and directories you'll see in a Next.js project.
 
 ```bash
 .
 ├── node_modules
 ├── __mocks__
-├── scripts
 ├── src
 ├── .gitignore
 ├── .tokeignore
@@ -137,61 +116,37 @@ A quick look at the top-level files and directories you'll see in a Gatsby proje
 ├── .prettierrc.json
 ├── .stylelintrc.json
 ├── .versionrc.json
-├── gatsby-browser.js
-├── gatsby-config.js
-├── gatsby-node.js
-├── gatsby-ssr.js
 ├── jest.config.js
-├── jest.env.setup.js
 ├── jest.setup.js
-├── jest.transformer.js
-├── index.d.ts
-├── jsconfig.json
 ├── tsconfig.json
 ├── postcss.config.js
 ├── tailwind.config.js
 ├── LICENSE
 ├── package.json
-├── package-lock.json
 └── README.md
 ```
 
 1. **`/node_modules`**: This directory contains all of the modules of code.
 2. **`/__mocks__`**: mock API for 3rd-party libraries for Jest testing.
 3. **`/src`**: This directory contains all of the code related to the front-end.
-4. **`/scripts`**: CI related-scripts written in JavaScript.
-5. **`.gitignore`**: This file tells git which files it should not track.
-6. **`.tokeignore`**: This is a configuration file for [Code Lines](https://github.com/XAMPPRocky/tokei).
-7. **`.eslintrc.json`**: This is a configuration file for [ESLint](https://eslint.org).
-8. **`.markdownlint.json`**: This is a configuration file for [MarkdownLint](https://github.com/DavidAnson/markdownlint).
-9. **`.prettierrc.json`**: This is a configuration file for [Prettier](https://prettier.io).
-10. **`.stylelintrc.json`**: This is a configuration file for [StyleLint](https://stylelint.io).
-11. **`.versionrc.json`**: This is a configuration file for [Standard Version](https://github.com/conventional-changelog/standard-version).
-12. **`gatsby-browser.js`**: This file is usage of the [Gatsby Browser APIs](https://www.gatsbyjs.com/docs/browser-apis).
-13. **`gatsby-config.js`**: This is the main configuration file for a Gatsby site.
-14. **`gatsby-node.js`**: This file is usage of the [Gatsby Node APIs](https://www.gatsbyjs.com/docs/node-apis).
-15. **`gatsby-ssr.js`**:
-    This file is usage of the [Gatsby Server Side Rendering APIs](https://www.gatsbyjs.com/docs/ssr-apis).
-16. **`jest.config.js`**: This is configuration file for [Jest](https://jestjs.io).
-17. **`jest.env.setup.js`**: This is Jest environment setup script.
-18. **`jest.setup.js`**: This is Jest basic setup script (after environment setup).
-19. **`jest.transformer.js`**: This is TypeScript testing code transformer for Jest.
-20. **`index.d.ts`**: This is types definition for static assets (like `CSS`/`JPG`/`PNG`).
-21. **`jsconfig.json`**: This is a configuration file for [VSCode](https://code.visualstudio.com).
-22. **`tsconfig.json`**: This is a configuration file for [TypeScript](https://www.typescriptlang.org).
-23. **`postcss.config.js`**: This is a configuration file for [PostCSS](https://postcss.org).
-24. **`tailwind.config.js`**: This is a configuration file for [Tailwind.css](https://tailwindcss.com).
-25. **`LICENSE`**: This Gatsby starter is licensed under the `MIT` license.
-26. **`package.json`**: A manifest file for Node.js projects.
-27. **`package-lock.json`**: This is automatically generated file based on NPM dependencies.
-28. **`README.md`**: A text file containing useful reference information.
+4. **`.gitignore`**: This file tells git which files it should not track.
+5. **`.tokeignore`**: This is a configuration file for [Code Lines](https://github.com/XAMPPRocky/tokei).
+6. **`.eslintrc.json`**: This is a configuration file for [ESLint](https://eslint.org).
+7. **`.markdownlint.json`**: This is a configuration file for [MarkdownLint](https://github.com/DavidAnson/markdownlint).
+8. **`.prettierrc.json`**: This is a configuration file for [Prettier](https://prettier.io).
+9. **`.stylelintrc.json`**: This is a configuration file for [StyleLint](https://stylelint.io).
+10. **`.versionrc.json`**: This is a configuration file for [Standard Version](https://github.com/conventional-changelog/standard-version).
+11. **`jest.config.js`**: This is configuration file for [Jest](https://jestjs.io).
+12. **`jest.setup.js`**: This is Jest basic setup script (after environment setup).
+13. **`tsconfig.json`**: This is a configuration file for [TypeScript](https://www.typescriptlang.org).
+14. **`postcss.config.js`**: This is a configuration file for [PostCSS](https://postcss.org).
+15. **`tailwind.config.js`**: This is a configuration file for [Tailwind.css](https://tailwindcss.com).
+16. **`LICENSE`**: This Next.js starter is licensed under the `MIT` license.
+17. **`package.json`**: A manifest file for Node.js projects.
+18. **`README.md`**: A text file containing useful reference information.
 
 ## Contact
 
 [![Email](https://img.shields.io/badge/-Gmail-ea4335?style=for-the-badge&logo=gmail&logoColor=white)](mailto:[email protected])
 [![Twitter](https://img.shields.io/badge/-Twitter-1da1f2?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/sabertazimi)
 [![GitHub](https://img.shields.io/badge/-GitHub-181717?style=for-the-badge&logo=github&logoColor=white)](https://github.com/sabertazimi)
-
-## Reference
-
-- [Bungee Font](https://fonts.google.com/specimen/Bungee)

__mocks__/data.ts

@@ -64,23 +64,16 @@ const siteMetadata = {
 
 const basePosts = Array.from(Array(5).keys()).map(index => ({
   index,
-  fields: { slug: `/${index + 1}BasicNotes/` },
-  frontmatter: { title: `${index + 1} Basic Notes` },
   slug: `/${index + 1}BasicNotes/`,
-  timeToRead: index + 1,
   title: `${index + 1} Basic Notes`,
+  timeToRead: index + 1,
+  prevPost: null,
+  nextPost: null,
+  source: `## ${index + 1} Basic Notes`,
 }));
 
 const posts = basePosts.map((post, index) => ({
   ...post,
-  fields: { slug: `/${index + 1}BasicNotes/`, gitTime: `${index + 1} time` },
-  frontmatter: {
-    title: `${index + 1} Basic Notes`,
-    subtitle: 'Be a Stupid Learner',
-    author: 'Sabertaz',
-    date: '2018-08-08T00:00:00.000Z',
-    tags: ['JavaScript', 'Frontend Development', 'Web Development'],
-  },
   subtitle: 'Be a Stupid Learner',
   author: 'Sabertaz',
   date: '2018-08-08T00:00:00.000Z',

src/components/Article/ArticleComments.tsx → components/Article/ArticleComments.tsx

@@ -1,6 +1,6 @@
 import { useDisqus } from '@hooks';
 import React from 'react';
-import * as styles from './ArticleComments.module.css';
+import styles from './ArticleComments.module.css';
 
 interface Props {
   url: string;

src/components/Article/ArticleContent.tsx → components/Article/ArticleContent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { animated, useSpring } from 'react-spring';
-import * as styles from './ArticleContent.module.css';
+import styles from './ArticleContent.module.css';
 
 interface Props {
   content: string;