Use Next.js to build the site

.github/workflows/ci.yaml

@@ -29,6 +29,8 @@ jobs:
               run: yarn run format:check
             - name: Lint the code
               run: yarn run lint
+            - name: Export the website
+              run: yarn run export
             - name: Run Lighthouse
               run: npx --package=@lhci/cli lhci autorun
               env:

.gitignore

@@ -1,3 +1,6 @@
 *.swp
 *.swo
-node_modules
+.DS_Store
+.next/
+build/
+node_modules/

.prettierignore

@@ -0,0 +1 @@
+*.md

README.md

@@ -1,7 +1,7 @@
 # Make a README
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/68992d1c-36d4-4a84-b177-00c1f64fbcb4/deploy-status)](https://app.netlify.com/sites/make-a-readme/deploys)
-[![CI status](https://github.com/dguo/make-a-readme/workflows/CI/badge.svg)](https://github.com/dguo/make-a-readme/actions?query=branch%3Amaster)
+[![CI status](https://github.com/dguo/make-a-readme/workflows/CI/badge.svg)](https://github.com/dguo/make-a-readme/actions?query=branch%3Amain)
 
 [Make a README](https://makeareadme.com) explains what a README is, what the
 benefits are, and what makes for a good README. It also provides an editable
@@ -17,9 +17,9 @@ Make a README is inspired by [Keep a Changelog](http://keepachangelog.com/).
 
 ## Related Resources
 
-* [Art of README](https://github.com/noffle/art-of-readme)
-* [Awesome README](https://github.com/matiassingers/awesome-readme)
-* [Standard Readme](https://github.com/RichardLitt/standard-readme)
+- [Art of README](https://github.com/noffle/art-of-readme)
+- [Awesome README](https://github.com/matiassingers/awesome-readme)
+- [Standard Readme](https://github.com/RichardLitt/standard-readme)
 
 ## Roadmap
 
@@ -30,14 +30,9 @@ Make a README is inspired by [Keep a Changelog](http://keepachangelog.com/).
 
 ## Contributing
 
-Please feel free to submit an issue or pull request. The website is simple
-enough to not require a build process. Just open `public/index.html` in a
-browser.
-
-If you want [live reloading](https://github.com/tapio/live-server) and have
-Node installed, run `$ yarn install && yarn start`. If you have Python and
-Docker installed, you can run `$ ./dev start` instead.
+Please feel free to submit an issue or pull request. To develop, you'll need
+Node.js. Run `yarn install && yarn dev`.
 
 ## License
 
-[MIT](https://github.com/dguo/make-a-readme/blob/master/LICENSE)
+[MIT](https://github.com/dguo/make-a-readme/blob/main/LICENSE)

lighthouserc.js

@@ -1,5 +1,8 @@
 module.exports = {
     ci: {
+        collect: {
+            staticDistDir: "build"
+        },
         upload: {
             target: "temporary-public-storage"
         }

netlify.toml

@@ -1,2 +1,3 @@
 [build]
-  publish = "public"
+  command = "yarn run export"
+  publish = "build"

next-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />

package.json

@@ -3,23 +3,31 @@
     "description": "Website for explaining what a README is",
     "version": "0.1.0",
     "scripts": {
+        "dev": "yarn install && next dev",
+        "build": "next build",
+        "export": "next build && next export -o build",
         "format": "prettier --write package.json public/*.js public/*.css",
         "format:check": "prettier --list-different package.json public/*.js public/*.css",
-        "lint": "yarn run lint:css && yarn run lint:html",
-        "lint:css": "stylelint ./**/*.css",
-        "lint:html": "htmlhint ./**/*.html",
-        "start": "yarn install && live-server --no-browser public"
+        "lint": "yarn run lint:css",
+        "lint:css": "stylelint ./**/*.css"
     },
     "repository": "https://github.com/dguo/make-a-readme",
     "author": "Danny Guo",
     "license": "MIT",
     "private": true,
+    "dependencies": {
+        "react": "17.0.2",
+        "react-dom": "17.0.2",
+        "react-github-corner": "2.5.0"
+    },
     "devDependencies": {
+        "@types/react": "17.0.11",
         "htmlhint": "0.15.1",
-        "live-server": "1.2.1",
+        "next": "11.0.1",
         "prettier": "2.3.2",
         "stylelint": "13.13.1",
-        "stylelint-config-recommended": "5.0.0"
+        "stylelint-config-recommended": "5.0.0",
+        "typescript": "4.3.4"
     },
     "prettier": {
         "bracketSpacing": false,