Website progress

.env

@@ -0,0 +1 @@
+VITE_GUIDE_ASSETS_URL=https://guide-assets.appliedenergistics.org/index.json

.eslintrc.cjs

@@ -10,5 +10,6 @@ module.exports = {
   plugins: ['react-refresh'],
   rules: {
     'react-refresh/only-export-components': 'warn',
+    '@typescript-eslint/no-explicit-any': 'off',
   },
 }

.github/workflows/publish.yml

@@ -3,7 +3,8 @@ name: Publish
 on:
   # Runs on pushes targeting the default branch
   push:
-    branches: [$default-branch]
+    branches:
+      - main
 
   # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:

package.json

@@ -10,21 +10,18 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@google/model-viewer": "^3.1.1",
-    "@mdx-js/mdx": "^2.3.0",
     "@tippyjs/react": "^4.2.6",
-    "mdast-util-mdx": "^2.0.1",
-    "mdast-util-to-markdown": "^1.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.13.0",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "three": "^0.151.2",
+    "three": "^0.151.3",
     "unist-util-visit": "^4.1.2"
   },
   "devDependencies": {
-    "@aws-sdk/client-s3": "^3.357.0",
+    "@types/three": "^0.152.1",
+    "@types/mdast": "^3.0.11",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
@@ -35,6 +32,7 @@
     "eslint-plugin-react-refresh": "^0.3.5",
     "express": "^4.18.2",
     "mdast": "^3.0.0",
+    "mdast-util-mdx-jsx": "^2.1.4",
     "prettier": "^2.8.8",
     "typescript": "^5.0.2",
     "vite": "^4.3.9"

src/App.tsx

@@ -1,30 +1,12 @@
 import "./App.css";
-import { createHashRouter, RouterProvider } from "react-router-dom";
-import GuidebookList from "./GuidebookList.tsx";
-import GuidebookRoot from "./GuidebookRoot.tsx";
-import guidebookListLoader from "./guidebookListLoader.ts";
-import guidebookRootLoader from "./guidebookRootLoader.ts";
-
-const router = createHashRouter(
-  [
-    {
-      path: "/",
-      element: <GuidebookList />,
-      loader: guidebookListLoader,
-    },
-    {
-      id: "guideRoot",
-      path: "/:version/*",
-      element: <GuidebookRoot />,
-      loader: guidebookRootLoader,
-    },
-  ],
-  {}
-);
+import GuideVersionIndexLoader from "./GuideVersionIndexLoader.tsx";
+import InitialGuideSelection from "./InitialGuideSelection.tsx";
 
 function App() {
   return (
-    <RouterProvider router={router} fallbackElement={<div>Loading</div>} />
+    <GuideVersionIndexLoader>
+      <InitialGuideSelection />
+    </GuideVersionIndexLoader>
   );
 }
 

src/Guide.ts

@@ -1,4 +1,6 @@
 import { createContext, useContext } from "react";
+import { GuideVersion } from "./GuideVersionIndex.ts";
+import { Root as MdAstRoot } from "mdast";
 
 export interface RecipeInfo {
   id: string;
@@ -46,7 +48,11 @@ export interface P2PTypeInfo {
   attunementApiClasses: string[];
 }
 
-export type PageSummary = {};
+export type ExportedPage = {
+  title: string;
+  astRoot: MdAstRoot;
+  frontmatter: Record<string, unknown>;
+};
 
 export type DyeColor =
   | "yellow"
@@ -67,13 +73,8 @@ export type DyeColor =
   | "brown";
 
 export type GuideIndex = {
-  generated: number;
-
-  gameVersion: string;
-
-  modVersion: string;
   defaultNamespace: string;
-  pages: Record<string, PageSummary>;
+  pages: Record<string, ExportedPage>;
   navigationRootNodes: NavigationNode[];
 
   items: ItemInfo[];
@@ -108,7 +109,11 @@ export class Guide {
 
   readonly pageByItemIndex: ItemIndex;
 
-  constructor(baseUrl: string, readonly index: GuideIndex) {
+  constructor(
+    baseUrl: string,
+    readonly version: GuideVersion,
+    readonly index: GuideIndex
+  ) {
     this.index = index;
     this.baseUrl = baseUrl.replace(/\/+$/, "");
 
@@ -252,6 +257,10 @@ export class Guide {
       return undefined;
     }
   }
+
+  pageExists(pageId: string): boolean {
+    return this.index.pages[pageId] !== undefined;
+  }
 }
 
 const GuideContext = createContext<Guide | undefined>(undefined);

src/GuideLoader.tsx

@@ -0,0 +1,65 @@
+import { GuideVersion } from "./GuideVersionIndex.ts";
+import { PropsWithChildren, useCallback } from "react";
+import useLoadEffect from "./useLoadEffect.ts";
+import { Guide, GuideProvider } from "./Guide.ts";
+import LoadState from "./components/LoadState.tsx";
+
+export type GuideLoaderProps = PropsWithChildren<{
+  version: GuideVersion;
+}>;
+
+/**
+ * In Format 1, the guide data is an explicitly gzip compressed JSON file.
+ */
+async function loadGuideFromResponseV1(
+  version: GuideVersion,
+  response: Response
+): Promise<Guide> {
+  // Decompress
+  const blob = await response.blob();
+  const ds = new DecompressionStream("gzip");
+  const decompressedStream = blob.stream().pipeThrough(ds);
+  const jsonBody = await new Response(decompressedStream).json();
+
+  // Use the directory we loaded the guide from to load further assets
+  const baseUrl = new URL("./", response.url).toString();
+  console.info("Deducing base URL %s for guide data %s", baseUrl, response.url);
+  return new Guide(baseUrl, version, jsonBody);
+}
+
+async function loadGuideFromResponse(
+  version: GuideVersion,
+  response: Response
+): Promise<Guide> {
+  const format = version.format;
+  if (format === 1) {
+    return loadGuideFromResponseV1(version, response);
+  } else {
+    throw new Error(`Unsupported guide format: '${format}'`);
+  }
+}
+
+function GuideLoader({ version, children }: GuideLoaderProps) {
+  const loader = useCallback(
+    (response: Response) => loadGuideFromResponse(version, response),
+    [version]
+  );
+  const loadResult = useLoadEffect<Guide>(
+    version.url,
+    `guide ${version.gameVersion}`,
+    loader
+  );
+
+  if (loadResult.state === "success") {
+    return <GuideProvider value={loadResult.data}>{children}</GuideProvider>;
+  } else {
+    return (
+      <LoadState
+        operation={`Loading Guide for ${version.gameVersion}`}
+        result={loadResult}
+      />
+    );
+  }
+}
+
+export default GuideLoader;

src/GuideVersionIndex.ts

@@ -0,0 +1,29 @@
+import { createContext, useContext } from "react";
+
+export type GuideVersion = {
+  format: number;
+  gameVersion: string;
+  modVersion: string;
+  generated: number;
+  url: string;
+};
+
+export type GuideVersionIndex = {
+  versions: GuideVersion[];
+};
+
+const GuideVersionIndexContext = createContext<GuideVersionIndex | undefined>(
+  undefined
+);
+
+export const GuideVersionIndexProvider = GuideVersionIndexContext.Provider;
+
+export function useGuideVersionIndex(): GuideVersionIndex {
+  const guideVersions = useContext(GuideVersionIndexContext);
+  if (!guideVersions) {
+    throw new Error(
+      "No guide versions available. Missing <GuideVersionsProvider></GuideVersionsProvider>"
+    );
+  }
+  return guideVersions;
+}

src/GuideVersionIndexLoader.tsx

@@ -0,0 +1,36 @@
+import { PropsWithChildren } from "react";
+import { guideAssetsUrl } from "./config.ts";
+import {
+  GuideVersionIndex,
+  GuideVersionIndexProvider,
+} from "./GuideVersionIndex.ts";
+import Loading from "./components/Loading.tsx";
+import useLoadEffect from "./useLoadEffect.ts";
+
+function GuideVersionIndexLoader({ children }: PropsWithChildren) {
+  const loadingResult = useLoadEffect<GuideVersionIndex>(
+    guideAssetsUrl,
+    "guide versions"
+  );
+
+  if (loadingResult.state === "success") {
+    return (
+      <GuideVersionIndexProvider value={loadingResult.data}>
+        {children}
+      </GuideVersionIndexProvider>
+    );
+  } else if (loadingResult.state === "error") {
+    return (
+      <div>
+        ERROR
+        <button type="button" onClick={() => loadingResult.retry()}>
+          Retry
+        </button>
+      </div>
+    );
+  } else {
+    return <Loading />;
+  }
+}
+
+export default GuideVersionIndexLoader;

src/GuideVersionSelection.tsx

@@ -0,0 +1,33 @@
+import { GuideVersion, GuideVersionIndex } from "./GuideVersionIndex.ts";
+
+type GuideVersionSelectionProps = {
+  versionIndex: GuideVersionIndex;
+};
+
+function GuideVersion({ version }: { version: GuideVersion }) {
+  const lastUpdate = new Date(version.generated);
+
+  return (
+    <div>
+      <a href={"#/" + version.gameVersion + "/"}>
+        Minecraft {version.gameVersion}, Mod {version.modVersion}
+      </a>{" "}
+      ({lastUpdate.toLocaleDateString()})
+    </div>
+  );
+}
+
+function GuideVersionSelection({ versionIndex }: GuideVersionSelectionProps) {
+  return (
+    <div>
+      Select a version of the guidebook to view:
+      <ul>
+        {versionIndex.versions.map((version, idx) => (
+          <GuideVersion key={idx} version={version} />
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+export default GuideVersionSelection;

src/GuidebookNavBar.module.css

@@ -21,7 +21,7 @@
     text-decoration: none;
 }
 
-.root a.active {
+.root a:global(.active) {
     background-color: var(--color--navbar-row-hover);
 }