Migrate to Nextjs (HamishMW#31)

* Init next

* Storybook?

* Fix storybook

* CSS modulify all the CSS

* Update image component

* Setup build

* Add dynamic imports

* Update articles + fix page transitions

* Update nav scroll

* Update Home.js

* Update Image.module.css

* Add meta component; fix highlighting

* Update Navbar.js

* Update another.mdx

.eslintrc

@@ -1,10 +1,13 @@
 {
-  "extends": "react-app",
-  "plugins": ["react-hooks"],
+  "env": {
+    "es6": true
+  },
+  "extends": ["eslint:recommended", "next/core-web-vitals"],
   "rules": {
-    "import/no-anonymous-default-export": 0,
-    "react-hooks/exhaustive-deps": "warn",
-    "react-hooks/rules-of-hooks": "error",
-    "semi": "error"
+    "semi": "error",
+    "no-unused-vars": "warn",
+    "import/no-anonymous-default-export": "off",
+    "react/display-name": "off",
+    "@next/next/no-img-element": "off"
   }
 }

.gitignore

@@ -60,3 +60,4 @@ typings/
 build/
 build-storybook/
 .serverless
+.next

.storybook/StoryContainer.css

@@ -1,4 +1,4 @@
-.story-container {
+.storyContainer {
   width: 100vw;
   height: 100vh;
   display: flex;

.storybook/StoryContainer.js

@@ -8,7 +8,7 @@ export const StoryContainer = ({
   children,
 }) => (
   <div
-    className="story-container"
+    className="storyContainer"
     style={{
       padding,
       gap: gutter,

.storybook/main.js

@@ -1,18 +1,33 @@
+const path = require('path');
+
 module.exports = {
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-controls',
     '@storybook/addon-a11y',
     '@storybook/addon-toolbars',
-    {
-      name: '@storybook/preset-create-react-app',
-      options: {
-        scriptsPackageName: '@hamishmw/react-scripts-postcss',
-      },
-    },
+    'storybook-addon-next',
   ],
-  stories: ['../src/**/*.stories.js'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   core: {
     builder: 'webpack5',
   },
+  webpackFinal: async (config, { configType }) => {
+    config.resolve.modules = [path.resolve(__dirname, '../src'), 'node_modules'];
+
+    const imageRule = config.module.rules.find(rule => rule.test.test('.svg'));
+    imageRule.exclude = /\.svg$/;
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: ['@svgr/webpack'],
+    });
+
+    config.module.rules.push({
+      test: /\.(mp4|hdr|glb|woff2)$/i,
+      type: 'asset/resource',
+    });
+
+    return config;
+  },
 };

.storybook/preview.css

@@ -1,4 +1,4 @@
-.story-root {
+.storyRoot {
   position: absolute;
   inset: 0;
 }

.storybook/preview.js

@@ -1,22 +1,23 @@
-import '../src/app/reset.css';
-import '../src/app/global.css';
-import '../src/app/App.css';
+import '../src/layouts/App/reset.css';
+import '../src/layouts/App/global.css';
 import './preview.css';
 
 import { useEffect } from 'react';
-import { ThemeProvider } from '../src/components/ThemeProvider';
+import { ThemeProvider, fontStyles, tokenStyles } from '../src/components/ThemeProvider';
 
 export const decorators = [
   (Story, context) => {
     const theme = context.globals.theme;
 
     useEffect(() => {
-      document.body.setAttribute('class', theme);
+      document.body.dataset.theme = theme;
     }, [theme]);
 
     return (
       <ThemeProvider themeId={theme}>
-        <div id="story-root" className="story-root">
+        <style>{fontStyles}</style>
+        <style>{tokenStyles}</style>
+        <div id="story-root" className="storyRoot">
           <Story />
         </div>
       </ThemeProvider>

.stylelintrc

@@ -1,18 +1,23 @@
 {
   "extends": [
-    "stylelint-config-standard"
+    "stylelint-config-standard",
+    "stylelint-config-prettier",
+    "stylelint-config-css-modules"
   ],
   "rules": {
-    "selector-class-pattern": null,
-    "custom-property-pattern": null,
     "string-quotes": "single",
+    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$",
+    "custom-property-pattern": "^[a-z][a-zA-Z0-9]+$",
+    "custom-media-pattern": "^[a-z][a-zA-Z0-9]+$",
+    "selector-id-pattern": null,
     "declaration-block-no-redundant-longhand-properties": null,
-    "value-keyword-case": null,
+    "value-keyword-case": ["lower", { "camelCaseSvgKeywords": true }],
     "alpha-value-notation": "number",
-    "declaration-colon-newline-after": null,
-    "indentation": null,
-    "selector-combinator-space-before": null,
-    "value-list-comma-newline-after": null,
-    "custom-media-pattern": null
+    "selector-pseudo-class-no-unknown": [
+      true,
+      {
+        "ignorePseudoClasses": ["global"]
+      }
+    ]
   }
 }

README.md

@@ -15,7 +15,7 @@ npm install
 Once it's done start up a local server with:
 
 ```bash
-npm start
+npm run dev
 ```
 
 To view the components storybook:
@@ -52,7 +52,7 @@ npm run deploy:api
 
 ## Permissions
 
-I'm cool with anyone using the code or parts of the code for their own site, it is open source so people can learn from it and adapt it. However, I would encourage you to modify the theme and components it to make it your own. If you are using the site's design largely unmodified, I'd appreciate being credited as the designer of the website. 
+I'm cool with anyone using the code or parts of the code for their own site, it is open source so people can learn from it and adapt it. However, I would encourage you to modify the theme and components it to make it your own. If you are using the site's design largely unmodified, I'd appreciate being credited as the designer of the website.
 
 I do not give permission to present any of my projects as your own (this is being actively used as my portfolio site and these are my real projects I've worked on).
 

next.config.js

@@ -0,0 +1,18 @@
+module.exports = {
+  reactStrictMode: false,
+  trailingSlash: true,
+  pageExtensions: ['page.js', 'api.js'],
+  webpack(config) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      use: [{ loader: '@svgr/webpack', options: { svgo: false } }],
+    });
+
+    config.module.rules.push({
+      test: /\.(mp4|hdr|glb|woff2)$/i,
+      type: 'asset/resource',
+    });
+
+    return config;
+  },
+};