feat/next-js

.devcontainer/devcontainer.json

@@ -1,32 +1,29 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.209.6/containers/typescript-node
 {
-	"name": "Node.js & TypeScript",
-	"build": {
-		"dockerfile": "Dockerfile",
-		// Update 'VARIANT' to pick a Node version: 16, 14, 12.
-		// Append -bullseye or -buster to pin to an OS version.
-		// Use -bullseye variants on local on arm64/Apple Silicon.
-		"args": { 
-			"VARIANT": "16"
-		}
-	},
+  "name": "Node.js & TypeScript",
+  "build": {
+    "dockerfile": "Dockerfile",
+    // Update 'VARIANT' to pick a Node version: 16, 14, 12.
+    // Append -bullseye or -buster to pin to an OS version.
+    // Use -bullseye variants on local on arm64/Apple Silicon.
+    "args": {
+      "VARIANT": "16"
+    }
+  },
 
-	// Set *default* container specific settings.json values on container create.
-	"settings": {},
+  // Set *default* container specific settings.json values on container create.
+  "settings": {},
 
+  // Add the IDs of extensions you want installed when the container is created.
+  "extensions": ["dbaeumer.vscode-eslint"],
 
-	// Add the IDs of extensions you want installed when the container is created.
-	"extensions": [
-		"dbaeumer.vscode-eslint"
-	],
+  // Use 'forwardPorts' to make a list of ports inside the container available locally.
+  "forwardPorts": [3000],
 
-	// Use 'forwardPorts' to make a list of ports inside the container available locally.
-	"forwardPorts": [1234],
+  // Use 'postCreateCommand' to run commands after the container is created.
+  // "postCreateCommand": "yarn install",
 
-	// Use 'postCreateCommand' to run commands after the container is created.
-	// "postCreateCommand": "yarn install",
-
-	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "node"
+  // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
 }

.eslintrc.json

@@ -1,52 +1,58 @@
 {
-  "root": true,
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/eslint-recommended",
-    "prettier"
-  ],
-  "parser": "@typescript-eslint/parser",
-  "plugins": ["react", "@typescript-eslint", "react-hooks"],
-  "env": {
-    "browser": true,
-    "es6": true,
-    "node": true
-  },
-  "globals": {
-    "Atomics": "readonly",
-    "SharedArrayBuffer": "readonly"
-  },
-  "parserOptions": {
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "ecmaVersion": 2018,
-    "sourceType": "module"
-  },
+  "extends": "next",
   "rules": {
-    "no-unused-vars": "off",
-    "@typescript-eslint/no-unused-vars": ["warn"],
-    "no-restricted-imports": [
-      "error",
-
-      { "name": "lodash", "message": "Use lodash/myFunction instead" }
-    ],
-    "react/prop-types": 0,
-    "react-hooks/rules-of-hooks": "error",
-    "react/display-name": 0,
-    // "react-hooks/exhaustive-deps": "warn",
-    "prefer-template": "error",
-    "react/self-closing-comp": [
-      "warn",
-      {
-        "component": true,
-        "html": true
-      }
-    ]
-  },
-  "settings": {
-    "react": {
-      "version": "detect"
-    }
+    "react-hooks/exhaustive-deps": "off",
+    "@next/next/no-img-element": "off",
+    "@next/next/no-page-custom-font": "off"
   }
+  // "root": true,
+  // "extends": [
+  //   "plugin:react/recommended",
+  //   "plugin:@typescript-eslint/eslint-recommended",
+  //   "prettier"
+  // ],
+  // "parser": "@typescript-eslint/parser",
+  // "plugins": ["react", "@typescript-eslint", "react-hooks"],
+  // "env": {
+  //   "browser": true,
+  //   "es6": true,
+  //   "node": true
+  // },
+  // "globals": {
+  //   "Atomics": "readonly",
+  //   "SharedArrayBuffer": "readonly"
+  // },
+  // "parserOptions": {
+  //   "ecmaFeatures": {
+  //     "jsx": true
+  //   },
+  //   "ecmaVersion": 2018,
+  //   "sourceType": "module"
+  // },
+  // "rules": {
+  //   "no-unused-vars": "off",
+  //   "@typescript-eslint/no-unused-vars": ["warn"],
+  //   "no-restricted-imports": [
+  //     "error",
+
+  //     { "name": "lodash", "message": "Use lodash/myFunction instead" }
+  //   ],
+  //   "react/prop-types": 0,
+  //   "react-hooks/rules-of-hooks": "error",
+  //   "react/display-name": 0,
+  //   // "react-hooks/exhaustive-deps": "warn",
+  //   "prefer-template": "error",
+  //   "react/self-closing-comp": [
+  //     "warn",
+  //     {
+  //       "component": true,
+  //       "html": true
+  //     }
+  //   ]
+  // },
+  // "settings": {
+  //   "react": {
+  //     "version": "detect"
+  //   }
+  // }
 }

.github/workflows/ci.yml

@@ -28,8 +28,8 @@ jobs:
         run: |
           CONTEXT=production bun run build
         env:
-          VITE_GITHUB_RUN_NUMBER: ${{github.run_number}}
-          VITE_GITHUB_SHA: ${{github.sha}}
+          NEXT_PUBLIC__GITHUB_RUN_NUMBER: ${{github.run_number}}
+          NEXT_PUBLIC__GITHUB_SHA: ${{github.sha}}
       # Validate
       - name: Validate
         run: bun run validate
@@ -38,8 +38,8 @@ jobs:
         uses: actions/upload-artifact@v1
         if: always()
         with:
-          name: dist
-          path: dist
+          name: .next
+          path: .next
   deploy-preview:
     needs: [build]
     runs-on: ubuntu-latest
@@ -63,8 +63,8 @@ jobs:
       - name: Download Artifacts
         uses: actions/download-artifact@master
         with:
-          name: dist
-          path: dist
+          name: .next
+          path: .next
       # Deploy Preview
       - name: Deploy Preview
         run: bun run deploy:preview -- --auth ${{secrets.NETLIFY_AUTH_TOKEN}} --alias $GITHUB_RUN_ID
@@ -90,8 +90,8 @@ jobs:
       - name: Download Artifacts
         uses: actions/download-artifact@master
         with:
-          name: dist
-          path: dist
+          name: .next
+          path: .next
       # Deploy Production
       - name: Deploy Production
         run: bun run deploy:prod -- --auth ${{secrets.NETLIFY_AUTH_TOKEN}}

.github/workflows/int.yml

@@ -43,7 +43,7 @@ jobs:
       - name: Cypress run
         uses: cypress-io/github-action@v5
         with:
-          start: npm run serve:build
+          start: npm start
       - name: Upload Cypress Videos
         uses: actions/upload-artifact@v3
         if: always()

.gitignore

@@ -118,3 +118,7 @@ _site
 
 # storybook
 storybook-static
+
+# next
+out
+.next

.vscode/extensions.json

@@ -4,7 +4,6 @@
 
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
-    "bierner.comment-tagged-templates",
     "dbaeumer.vscode-eslint",
     "eamodio.gitlens",
     "yzhang.markdown-all-in-one",

.vscode/settings.json

@@ -14,6 +14,7 @@
   "search.exclude": {
     "**/node_modules/**": true,
     "**/dist/**": true,
+    "**/out/**": true,
     "**/.cache/**": true,
     "yarn.lock": true
   },
@@ -37,5 +38,8 @@
   ],
   "[markdown]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[ignore]": {
+    "editor.defaultFormatter": "foxundermoon.shell-format"
   }
 }

.vscode/tasks.json

@@ -18,21 +18,7 @@
       "label": "TSC & Lint & Tests",
       "problemMatcher": ["$tsc", "$eslint-stylish"]
     },
-    {
-      "type": "npm",
-      "script": "tsc-and-lint",
-      "presentation": {
-        "echo": true,
-        "reveal": "always",
-        "focus": false,
-        "panel": "shared",
-        "showReuseMessage": true,
-        "clear": true
-      },
-      "group": "build",
-      "label": "TSC & Lint",
-      "problemMatcher": ["$tsc", "$eslint-stylish"]
-    },
+
     {
       "type": "npm",
       "script": "i18n",

README.md

@@ -1,5 +1,10 @@
 # TODO
 
+- [ ] templates
+- [ ] not found route
+- [ ] page meta checks
+- [ ] full test suit
+
 # [Fari](https://fari.app) - The Free and Open-Source Virtual Tabletop
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
@@ -50,7 +55,7 @@ If you want to run Fari on your machine, simply run:
 bun run dev
 ```
 
-This will start and bundle the app using [ViteJS](https://vitejs.dev/) and make it available on http://localhost:1234
+This will start and bundle the app using [ViteJS](https://vitejs.dev/) and make it available on http://localhost:3000
 
 ViteJS will also update your browser's content (using React Refresh) anytime you do save a file on the disk.
 

app/ThemeRegistry.tsx

@@ -0,0 +1,75 @@
+"use client";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from "@mui/material/styles";
+import { useServerInsertedHTML } from "next/navigation";
+import React, { useContext } from "react";
+import { SettingsContext } from "../lib/contexts/SettingsContext/SettingsContext";
+import { AppDarkTheme, AppLightTheme } from "../lib/theme";
+
+// This implementation is from emotion-js
+// https://github.com/emotion-js/emotion/issues/2928#issuecomment-1319747902
+export default function ThemeRegistry(props: {
+  options: Parameters<typeof createCache>[0];
+  children: React.ReactNode;
+}) {
+  const settingsManager = useContext(SettingsContext);
+
+  const { options, children } = props;
+
+  const [{ cache, flush }] = React.useState(() => {
+    const cache = createCache(options);
+    cache.compat = true;
+    const prevInsert = cache.insert;
+    let inserted: string[] = [];
+    cache.insert = (...args) => {
+      const serialized = args[1];
+      if (cache.inserted[serialized.name] === undefined) {
+        inserted.push(serialized.name);
+      }
+      return prevInsert(...args);
+    };
+    const flush = () => {
+      const prevInserted = inserted;
+      inserted = [];
+      return prevInserted;
+    };
+    return { cache, flush };
+  });
+
+  useServerInsertedHTML(() => {
+    const names = flush();
+    if (names.length === 0) {
+      return null;
+    }
+    let styles = "";
+    for (const name of names) {
+      styles += cache.inserted[name];
+    }
+    return (
+      <style
+        key={cache.key}
+        data-emotion={`${cache.key} ${names.join(" ")}`}
+        dangerouslySetInnerHTML={{
+          __html: styles,
+        }}
+      />
+    );
+  });
+
+  return (
+    <CacheProvider value={cache}>
+      <ThemeProvider
+        theme={
+          settingsManager.state.themeMode === "dark"
+            ? AppDarkTheme
+            : AppLightTheme
+        }
+      >
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </CacheProvider>
+  );
+}

app/bugs/[...slugs]/page.tsx

@@ -0,0 +1,13 @@
+import { BugsRoute } from "../../../lib/routes/Bugs/BugsRoute";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("bugs-route.meta.title"),
+    description: t("bugs-route.meta.description"),
+  };
+}
+
+export default function BugsPage() {
+  return <BugsRoute></BugsRoute>;
+}

app/cards/[id]/page.tsx

@@ -0,0 +1,13 @@
+import { CardCollectionRoute } from "../../../lib/routes/CardCollection/CardCollectionRoute";
+import { t } from "../../i18n";
+
+export async function generateMetadata() {
+  return {
+    title: t("card-collection-route.meta.title"),
+    description: t("card-collection-route.meta.description"),
+  };
+}
+
+export default function CardCollectionPage() {
+  return <CardCollectionRoute></CardCollectionRoute>;
+}