+ ERROR
+
+
+ );
+ } else {
+ return
+
+ Minecraft {version.gameVersion}, Mod {version.modVersion}
+ {" "}
+ ({lastUpdate.toLocaleDateString()})
+
+ );
+}
+
+function GuideVersionSelection({ versionIndex }: GuideVersionSelectionProps) {
+ return (
+
+ Select a version of the guidebook to view:
+
+ );
+}
+
+export default GuideVersionSelection;
diff --git a/src/GuidebookList.tsx b/src/GuidebookList.tsx
deleted file mode 100644
index 06bb371..0000000
--- a/src/GuidebookList.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import {Link, useLoaderData} from "react-router-dom";
-
-type GuideVersion = {
- minecraftVersion: string;
- modVersion: string;
- lastUpdate: number;
-
-}
-
-type GuidesIndex = {
- versions: GuideVersion[];
-}
-
-function GuideVersion({version}: { version: GuideVersion }) {
- const lastUpdate = new Date(version.lastUpdate);
-
- return -
+ {versionIndex.versions.map((version, idx) => (
+
- Minecraft {version.minecraftVersion},
- Mod {version.modVersion} ({lastUpdate.toLocaleDateString()})
-
-}
-
-function GuidebookList() {
- const guides = useLoaderData() as GuidesIndex;
- return (
-
- Select a version of the guidebook to view:
-
- );
-}
-
-export default GuidebookList;
\ No newline at end of file
diff --git a/src/GuidebookNavBar.module.css b/src/GuidebookNavBar.module.css
index 57b3d6c..9248a2b 100644
--- a/src/GuidebookNavBar.module.css
+++ b/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);
}
diff --git a/src/GuidebookNavBar.tsx b/src/GuidebookNavBar.tsx
index 869ab63..de0535b 100644
--- a/src/GuidebookNavBar.tsx
+++ b/src/GuidebookNavBar.tsx
@@ -1,30 +1,21 @@
import { NavigationNode, useGuide } from "./Guide.ts";
-import { Link, LinkProps } from "react-router-dom";
+import { LinkProps, NavLink } from "react-router-dom";
import css from "./GuidebookNavBar.module.css";
import { useState } from "react";
function NavbarLink({
node,
expanded,
- currentPageId,
...rest
}: {
node: NavigationNode;
expanded?: boolean;
- currentPageId: string;
} & Omit-
- {guides.versions.map((version, idx) => (
-
)}
);
}
-function NavbarLevel({
- currentPageId,
- nodes,
-}: {
- currentPageId: string;
- nodes: NavigationNode[];
-}) {
+function NavbarLevel({ nodes }: { nodes: NavigationNode[] }) {
if (nodes.length == 0) {
return null;
}
@@ -82,28 +61,20 @@ function NavbarLevel({
<>
{nodes.map((node, idx) =>
node.children.length ? (
-
- Failed to load {pageId}: {errorMessage}
-
- );
- }
+ return {
+ path: "/" + pageId,
+ element:
{children}
diff --git a/src/components/GameScene.tsx b/src/components/GameScene.tsx
index 56fb789..4abba8b 100644
--- a/src/components/GameScene.tsx
+++ b/src/components/GameScene.tsx
@@ -1,24 +1,41 @@
import { useGuide } from "../Guide.ts";
+import ModelViewer from "./ModelViewer.tsx";
-function GameScene({
- assetsBasename,
- interactive,
-}: {
- assetsBasename: string;
+export type GameSceneProps = {
+ zoom?: number;
+ background?: string;
interactive?: boolean;
-}) {
+
+ // These are added during export
+ src: string;
+ placeholder: string;
+ width: number;
+ height: number;
+};
+
+function GameScene({
+ zoom = 1,
+ background = "transparent",
+ interactive = false,
+ src,
+ placeholder,
+ width,
+ height,
+}: GameSceneProps) {
const guide = useGuide();
- const modelAsset = guide.getAssetUrl(assetsBasename + ".gltf");
- const imageAsset = guide.getAssetUrl(assetsBasename + ".png");
- interactive ??= false;
+ const modelAsset = guide.baseUrl + "/" + src;
+ const imageAsset = guide.baseUrl + "/" + placeholder;
return (
- ) {
+function ItemGrid({ children }: PropsWithChildren) {
return (
+
+
+ );
+}
+
+export default GuidebookPageRoute;
diff --git a/src/components/ItemGrid.tsx b/src/components/ItemGrid.tsx
index 1dedb9c..973ea1b 100644
--- a/src/components/ItemGrid.tsx
+++ b/src/components/ItemGrid.tsx
@@ -1,6 +1,6 @@
import { PropsWithChildren } from "react";
-function ItemGrid({ children }: PropsWithChildrenPage AST
+{JSON.stringify(page.astRoot, null, 2)}
+ {children};
} else {
content = (
-
+
{children}
);
diff --git a/src/components/LoadError.tsx b/src/components/LoadError.tsx
new file mode 100644
index 0000000..b9f78ba
--- /dev/null
+++ b/src/components/LoadError.tsx
@@ -0,0 +1,30 @@
+import { ReactNode, useMemo } from "react";
+import { LoadResultError } from "../useLoadEffect.ts";
+
+export type LoadErrorProps = {
+ operation: string;
+ result: LoadResultError;
+};
+
+function formatError(error: unknown): ReactNode {
+ console.error("Error: %o", error);
+
+ if (error instanceof Error) {
+ return error.message ?? String(error);
+ }
+ return "H";
+}
+
+function LoadError({ operation, result: { error, retry } }: LoadErrorProps) {
+ const formattedError = useMemo(() => formatError(error), [error]);
+
+ return (
+ ) {
+function Row({ children }: PropsWithChildren) {
return (
+
+ );
+}
+
+export default LoadError;
diff --git a/src/components/LoadState.tsx b/src/components/LoadState.tsx
new file mode 100644
index 0000000..9503384
--- /dev/null
+++ b/src/components/LoadState.tsx
@@ -0,0 +1,18 @@
+import { LoadResultError, LoadResultLoading } from "../useLoadEffect.ts";
+import LoadError from "./LoadError.tsx";
+import Loading from "./Loading.tsx";
+
+export type LoadStateProps = {
+ operation: string;
+ result: LoadResultError | LoadResultLoading;
+};
+
+function LoadState({ operation, result }: LoadStateProps) {
+ if (result.state === "error") {
+ return {operation} failed
+ {formattedError}
+
+ Loading {operation ?? ""}...
;
+}
+
+export default Loading;
diff --git a/src/components/ModelViewer.tsx b/src/components/ModelViewer.tsx
new file mode 100644
index 0000000..de106de
--- /dev/null
+++ b/src/components/ModelViewer.tsx
@@ -0,0 +1,18 @@
+import { lazy, Suspense } from "react";
+
+import type { ModelViewerProps } from "./model-viewer/ModelViewerInternal.tsx";
+import Loading from "./Loading.tsx";
+
+const ModelViewerInternal = lazy(
+ () => import("./model-viewer/ModelViewerInternal.tsx")
+);
+
+function ModelViewer(props: ModelViewerProps) {
+ return (
+
{children}
diff --git a/src/components/model-viewer/ModelViewerInternal.module.css b/src/components/model-viewer/ModelViewerInternal.module.css
new file mode 100644
index 0000000..c7403cf
--- /dev/null
+++ b/src/components/model-viewer/ModelViewerInternal.module.css
@@ -0,0 +1,12 @@
+
+.root {
+ position: relative;
+}
+
+.root > img {
+ position: absolute;
+}
+
+.viewport {
+ display: inline-block;
+}
\ No newline at end of file
diff --git a/src/components/model-viewer/ModelViewerInternal.tsx b/src/components/model-viewer/ModelViewerInternal.tsx
new file mode 100644
index 0000000..d452b3c
--- /dev/null
+++ b/src/components/model-viewer/ModelViewerInternal.tsx
@@ -0,0 +1,329 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import {
+ Box3,
+ LinearEncoding,
+ LinearSRGBColorSpace,
+ LineBasicMaterial,
+ Matrix4,
+ MeshPhongMaterial,
+ MeshStandardMaterial,
+ Vector3,
+} from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+import css from "./ModelViewerInternal.module.css";
+import { guiScaledDimension } from "../../css.ts";
+import ErrorText from "../ErrorText.tsx";
+
+const DEBUG = false;
+
+export type ModelViewerProps = {
+ src: string;
+ placeholder?: string;
+ cameraControls?: boolean;
+ zoom: number;
+ width: number;
+ height: number;
+ background: string;
+};
+
+enum Mode {
+ ORTOGRAPHIC = "ORTOGRAPHIC",
+ // ... other modes as required
+}
+
+class CameraSettings {
+ offsetX = 0;
+ offsetY = 0;
+ zoom = 1;
+ rotationCenter: Vector3 = new Vector3(0, 0, 0);
+ rotationX = 0;
+ rotationY = 0;
+ rotationZ = 0;
+ mode: Mode = Mode.ORTOGRAPHIC;
+
+ getViewMatrix(): Matrix4 {
+ const result = new Matrix4();
+
+ // result.makeTranslation(this.offsetX, this.offsetY, 0);
+
+ // Assuming 0.625 comes from the default block model json GUI transform
+ const scaleFactor = 0.625 * 16 * this.zoom;
+ result.scale(new Vector3(scaleFactor, scaleFactor, scaleFactor));
+
+ if (this.mode == Mode.ORTOGRAPHIC) {
+ result.multiply(
+ new Matrix4().makeTranslation(
+ this.rotationCenter.x,
+ this.rotationCenter.y,
+ this.rotationCenter.z
+ )
+ );
+ result.multiply(
+ new Matrix4().makeRotationZ(CameraSettings.degToRad(this.rotationZ))
+ );
+ result.multiply(
+ new Matrix4().makeRotationX(CameraSettings.degToRad(this.rotationX))
+ );
+ result.multiply(
+ new Matrix4().makeRotationY(CameraSettings.degToRad(this.rotationY))
+ );
+ result.multiply(
+ new Matrix4().makeTranslation(
+ -this.rotationCenter.x,
+ -this.rotationCenter.y,
+ -this.rotationCenter.z
+ )
+ );
+ }
+
+ return result;
+ }
+
+ static degToRad(degrees: number): number {
+ return degrees * (Math.PI / 180);
+ }
+}
+
+async function initialize(
+ source: string,
+ viewportEl: HTMLDivElement,
+ zoom: number,
+ cameraControls: boolean
+) {
+ const response = await fetch(source);
+ if (!response.ok) {
+ throw response;
+ }
+
+ const blob = await response.blob();
+ const ds = new DecompressionStream("gzip");
+ const decompressedStream = blob.stream().pipeThrough(ds);
+ const gltfContent = await new Response(decompressedStream).blob();
+ console.info(
+ "Loaded %s, %d byte compressed, %d byte uncompressed",
+ source,
+ blob.size,
+ gltfContent.size
+ );
+ const blobUrl = URL.createObjectURL(gltfContent); // TODO: REVOKE -> MEMORY LEAK
+
+ const manager = new THREE.LoadingManager();
+ manager.setURLModifier((url) => {
+ if (source === url) {
+ return blobUrl;
+ } else {
+ return url;
+ }
+ });
+
+ // Instantiate a loader
+ const loader = new GLTFLoader(manager);
+ const gltf = await loader.loadAsync(source);
+
+ const b = new Box3();
+ gltf.scene.traverse((object) => {
+ if (object instanceof THREE.Mesh) {
+ object.geometry.computeBoundingBox();
+ b.union(object.geometry.boundingBox);
+ object.frustumCulled = false;
+
+ if (object.material instanceof MeshStandardMaterial) {
+ // Minecraft somewhat incorrectly loads all textures in linear space,
+ // while GLTF assumes sRGB
+ const { alphaTest, alphaToCoverage, blending, vertexColors } =
+ object.material;
+ const map = object.material.map;
+ if (map) {
+ map.colorSpace = LinearSRGBColorSpace;
+ map.encoding = LinearEncoding;
+ map.needsUpdate = true;
+ }
+ object.material = new MeshPhongMaterial({
+ // Copy standard Material properties we actually use
+ alphaTest,
+ alphaToCoverage,
+ blending,
+ vertexColors,
+ map,
+ });
+ }
+ }
+ });
+ const sceneBounds = new Box3();
+ sceneBounds.expandByObject(gltf.scene);
+ const sceneCenter = sceneBounds.getCenter(new Vector3());
+
+ const viewportWidth = viewportEl.offsetWidth;
+ const viewportHeight = viewportEl.offsetHeight;
+
+ const scene = new THREE.Scene();
+
+ // Meshes have pre-baked directional lighting
+ const ambientLight = new THREE.AmbientLight(0xffffff, 1);
+ scene.add(ambientLight);
+ scene.add(gltf.scene);
+
+ const camera = new THREE.OrthographicCamera(
+ -viewportWidth / 2,
+ viewportWidth / 2,
+ viewportHeight / 2,
+ -viewportHeight / 2,
+ 0,
+ 30000
+ );
+
+ const lookVector = new Vector3(0, 0, -1);
+ const cc = new CameraSettings();
+ cc.rotationX = 30;
+ cc.rotationY = 225; // I don't know why everything is rotate +90°...
+ cc.rotationZ = 0;
+ console.info(cc.getViewMatrix());
+ lookVector
+ .transformDirection(cc.getViewMatrix())
+ .multiplyScalar(sceneBounds.max.length());
+
+ gltf.scene.position.copy(sceneCenter.negate());
+ scene.rotation.set(
+ CameraSettings.degToRad(30),
+ CameraSettings.degToRad(225),
+ 0,
+ "ZXY"
+ );
+
+ const s = (1 / 0.625) * 16 * zoom;
+ camera.scale.set(1 / s, 1 / s, 1 / s);
+ camera.position.set(0, 0, 10);
+ camera.updateMatrix();
+ camera.updateMatrixWorld();
+
+ if (DEBUG) {
+ const axesHelper = new THREE.AxesHelper(32);
+ axesHelper.material = new LineBasicMaterial({
+ vertexColors: true,
+ toneMapped: false,
+ depthTest: false,
+ depthWrite: false,
+ });
+ scene.add(axesHelper);
+ }
+
+ let controls: OrbitControls | undefined;
+ if (cameraControls) {
+ controls = new OrbitControls(camera, viewportEl);
+ controls.zoom0 = zoom;
+ controls.update();
+ }
+
+ const renderer = new THREE.WebGLRenderer({
+ alpha: true,
+ premultipliedAlpha: false,
+ });
+ viewportEl.append(renderer.domElement);
+ renderer.setSize(viewportWidth, viewportHeight);
+ renderer.useLegacyLights = true;
+ renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
+
+ let disposed = false;
+
+ const animate = function () {
+ if (disposed) {
+ return;
+ }
+ requestAnimationFrame(animate);
+
+ controls?.update();
+ // required if controls.enableDamping or controls.autoRotate are set to true
+ renderer.render(scene, camera);
+ };
+
+ animate();
+
+ return () => {
+ if (!disposed) {
+ console.debug("Disposing model viewer for %s", source);
+ disposed = true;
+ viewportEl.removeChild(renderer.domElement);
+ renderer.dispose();
+ controls?.dispose();
+ }
+ };
+}
+
+function ModelViewerInternal({
+ src,
+ placeholder,
+ cameraControls = false,
+ background,
+ width,
+ height,
+ zoom,
+}: ModelViewerProps) {
+ const [error, setError] = useState();
+ const [initialized, setInitialized] = useState(false);
+ const viewportRef = useRef(null);
+ useLayoutEffect(() => {
+ const viewportEl = viewportRef.current;
+ if (!viewportEl) {
+ throw new Error("Viewport not initialized!");
+ }
+
+ let disposed = false;
+ let disposer: undefined | (() => void) = undefined;
+ setInitialized(false);
+ initialize(src, viewportEl, zoom, cameraControls)
+ .then((f) => {
+ if (disposed) {
+ f();
+ } else {
+ setInitialized(true);
+ disposer = f;
+ }
+ })
+ .catch((err) => setError(err));
+
+ return () => {
+ disposed = true;
+ if (disposer) {
+ disposer();
+ }
+ };
+ }, [cameraControls, src, zoom]);
+
+ return (
+ <>
+ {error && {error} }
+ = Partial & { children: any }>;
-declare global {
- namespace JSX {
- interface IntrinsicElements {
- ['model-viewer']: CustomElement | Pick["style"]>>;
- }
- }
-}
diff --git a/src/guidebookListLoader.ts b/src/guidebookListLoader.ts
deleted file mode 100644
index 00a50ad..0000000
--- a/src/guidebookListLoader.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export default async function guidebookListLoader() {
- return fetch("guide-assets/index.json");
-}
diff --git a/src/guidebookRootLoader.ts b/src/guidebookRootLoader.ts
index e446e1a..fc34e01 100644
--- a/src/guidebookRootLoader.ts
+++ b/src/guidebookRootLoader.ts
@@ -6,5 +6,16 @@ export default async function ({ params }: LoaderFunctionArgs) {
throw new Error("Version parameter missing");
}
- return fetch(`guide-assets/${version}/!index.json`);
+ return fetch(`guide-assets/${version}/guide.json.gz`)
+ .then((response) => {
+ if (!response.ok) {
+ throw response;
+ }
+ return response.blob();
+ })
+ .then((blob) => {
+ const ds = new DecompressionStream("gzip");
+ const decompressedStream = blob.stream().pipeThrough(ds);
+ return new Response(decompressedStream).json();
+ });
}
diff --git a/src/index.css b/src/index.css
index 1485076..fbcfda5 100644
--- a/src/index.css
+++ b/src/index.css
@@ -76,6 +76,7 @@ hr {
background-color: rgb(64, 64, 64);
background-size: calc(32px * var(--gui-scale));
background-blend-mode: multiply;
+ image-rendering: pixelated;
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
font-size: 120%;
@@ -85,6 +86,10 @@ hr {
color-scheme: light dark;
}
+:root > * {
+ image-rendering: unset;
+}
+
html, body, #root {
margin: 0;
padding: 0;
diff --git a/src/main.tsx b/src/main.tsx
index 740dfcb..3817969 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,11 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
-import '@google/model-viewer';
+import ReactDOM from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import { StrictMode } from "react";
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
+
,
-)
+
+);
diff --git a/src/pageCompiler/compileError.tsx b/src/pageCompiler/compileError.tsx
new file mode 100644
index 0000000..e1ae0e6
--- /dev/null
+++ b/src/pageCompiler/compileError.tsx
@@ -0,0 +1,17 @@
+import type { Node } from "unist";
+import { ReactNode } from "react";
+import ErrorText from "../components/ErrorText.tsx";
+
+export default function compileError(node: Node, text: string): ReactNode {
+ const dumpedNode: any = { ...node };
+ // Avoid dumping the entire node tree
+ if (Array.isArray(dumpedNode.children)) {
+ dumpedNode.children = "..." + dumpedNode.children.length + " children";
+ }
+
+ return (
+
+ {text} ({JSON.stringify(dumpedNode)}
+
+ );
+}
diff --git a/src/pageCompiler/compilePage.tsx b/src/pageCompiler/compilePage.tsx
new file mode 100644
index 0000000..1859625
--- /dev/null
+++ b/src/pageCompiler/compilePage.tsx
@@ -0,0 +1,154 @@
+import { ExportedPage, Guide } from "../Guide.ts";
+import * as React from "react";
+import { ReactElement, ReactNode } from "react";
+import type { Node as UnistNode } from "unist";
+import { Content, Heading, Parent } from "mdast";
+import compileLink from "./link.tsx";
+import compileCustomElement from "./customElement.ts";
+import compileImage from "./image.tsx";
+import compileError from "./compileError.tsx";
+import compileList from "./list.tsx";
+import compileListItem from "./listItem.tsx";
+
+export type CompileContext = {
+ guide: Guide;
+ pageId: string;
+ /**
+ * Compiles the children of the given parent and passes along the parent automatically.
+ */
+ compileChildren: (parent: Parent) => ReactNode;
+ /**
+ * Compiles a single node.
+ * @param node
+ */
+ compileContentNode: (node: Content, parent: Parent) => ReactNode;
+};
+
+function compileChildren(
+ context: CompileContext,
+ children: T[],
+ parent: Parent,
+ compiler: (context: CompileContext, node: T, parent: Parent) => ReactNode
+): ReactNode {
+ const els = children
+ .map((child) => compiler(context, child, parent))
+ .filter((o) => o);
+ if (!els.length) {
+ return null;
+ } else if (els.length == 1) {
+ return els[0];
+ } else {
+ return React.createElement(React.Fragment, null, ...els);
+ }
+}
+
+function assertNodeType(node: UnistNode, expectedType: string) {
+ if (node.type !== expectedType) {
+ throw new Error(
+ "Expected root node to have type '" +
+ expectedType +
+ "', but got: " +
+ node.type
+ );
+ }
+}
+
+function compileHeading(context: CompileContext, node: Heading): ReactElement {
+ return React.createElement(
+ "h" + node.depth,
+ null,
+ context.compileChildren(node)
+ );
+}
+
+function compileContent(
+ context: CompileContext,
+ node: Content,
+ parent: Parent
+): ReactNode {
+ switch (node.type) {
+ // We do not support definitions or footnote definitions
+ case "definition":
+ case "footnoteDefinition":
+ case "yaml":
+ // ignore frontmatter, handled already in ExportedPage
+ return null;
+ case "heading":
+ return compileHeading(context, node);
+ ////////////////////////// Phrasing Content
+ //case "break":
+ // break;
+ //case "footnoteReference":
+ // break;
+ case "image":
+ return compileImage(context, node);
+ case "strong":
+ return {context.compileChildren(node)};
+ case "link":
+ return compileLink(context, node);
+ //case "footnote":
+ // break;
+ //case "imageReference":
+ // break;
+ case "delete":
+ return {context.compileChildren(node)};
+ case "emphasis":
+ return {context.compileChildren(node)};
+ //case "linkReference":
+ // break;
+ //case "html":
+ // break;
+ case "text":
+ return node.value;
+ case "inlineCode":
+ return
; + case "paragraph": + return | ComponentClass | string
+> = {
+ br: "br",
+ div: "div",
+ BlockImage,
+ ItemLink,
+ ItemImage,
+ ItemIcon,
+ ItemGrid,
+ Recipe,
+ RecipeFor,
+ Row,
+ Column,
+ GameScene,
+};
+
+/**
+ * Converts a list of MDX attributes to concrete props for a component.
+ */
+function getAttributes(
+ node: MdxJsxFlowElement | MdxJsxTextElement
+): Record {
+ const entries = node.attributes
+ .map((attr): [string, any] | null => {
+ if (attr.type == "mdxJsxAttribute") {
+ const name = attr.name;
+ const value = attr.value;
+ if (typeof value === "string" || !value) {
+ return [name, value];
+ } else {
+ // This is poor mans JavaScript primitive parsing, while not allowing code
+ return [name, JSON.parse(value.value)];
+ }
+ }
+ console.error("Attribute not supported: %o", node);
+ return null;
+ })
+ .filter((o) => o)
+ .map((o) => o as [string, any]);
+ return Object.fromEntries(entries);
+}
+
+export default function compileCustomElement(
+ context: CompileContext,
+ node: MdxJsxFlowElement | MdxJsxTextElement
+): ReactNode {
+ const name = node.name ?? "";
+ const reactComponent = components[name];
+ if (!reactComponent) {
+ return compileError(node, "Unknown tag");
+ }
+
+ // Convert attributes -> props
+ const props = getAttributes(node);
+
+ return React.createElement(
+ reactComponent,
+ props,
+ context.compileChildren(node)
+ );
+}
diff --git a/src/pageCompiler/image.tsx b/src/pageCompiler/image.tsx
new file mode 100644
index 0000000..9c6cb24
--- /dev/null
+++ b/src/pageCompiler/image.tsx
@@ -0,0 +1,22 @@
+import { CompileContext } from "./compilePage.tsx";
+import { Image } from "mdast";
+import { ReactNode } from "react";
+
+export default function compileImage(
+ context: CompileContext,
+ node: Image
+): ReactNode {
+ const guide = context.guide;
+ let src = node.url;
+ if (src) {
+ const assetId = guide.resolveLink(src, context.pageId);
+ src = guide.getAssetUrl(assetId);
+ }
+ return (
+ 
+ );
+}
diff --git a/src/pageCompiler/link.tsx b/src/pageCompiler/link.tsx
new file mode 100644
index 0000000..68abf53
--- /dev/null
+++ b/src/pageCompiler/link.tsx
@@ -0,0 +1,46 @@
+import { CompileContext } from "./compilePage.tsx";
+import { ReactNode } from "react";
+import { Link as LinkNode } from "mdast";
+import compileError from "./compileError.tsx";
+import { Link } from "react-router-dom";
+
+export default function compileLink(
+ context: CompileContext,
+ node: LinkNode
+): ReactNode {
+ const guide = context.guide;
+ const href = node.url;
+ const title = node.title ?? undefined;
+
+ const content = context.compileChildren(node);
+
+ // Internal vs. external links
+ if (href.indexOf("://") > 0 || href.indexOf("//") === 0) {
+ return (
+
+ {content}
+
+ );
+ }
+
+ // Split fragment+url
+ const [path, fragment] = href.split("#", 2);
+
+ // Determine the page id, account for relative paths
+ const pageId = guide.resolveLink(path, context.pageId);
+
+ if (!guide.pageExists(pageId)) {
+ return compileError(node, "Page does not exist");
+ }
+
+ let url = "/" + pageId;
+ if (fragment) {
+ url += "#" + fragment;
+ }
+
+ return (
+
+ {content}
+
+ );
+}
diff --git a/src/pageCompiler/list.tsx b/src/pageCompiler/list.tsx
new file mode 100644
index 0000000..5156ba6
--- /dev/null
+++ b/src/pageCompiler/list.tsx
@@ -0,0 +1,19 @@
+import { CompileContext } from "./compilePage.tsx";
+import { List } from "mdast";
+import { ReactNode } from "react";
+
+export default function compileList(
+ context: CompileContext,
+ node: List
+): ReactNode {
+ const content = context.compileChildren(node);
+ if (node.ordered) {
+ const start =
+ typeof node.start === "number" && node.start !== 1
+ ? node.start
+ : undefined;
+ return > {
+ return React.isValidElement(node) && node?.type === "p";
+}
+
+function listItemLoose(node: ListItem) {
+ const spread = node.spread;
+
+ return spread === undefined || spread === null
+ ? node.children.length > 1
+ : spread;
+}
+
+export default function compileListItem(
+ context: CompileContext,
+ node: ListItem,
+ parent: Parent
+): ReactNode {
+ const content = node.children.map((child) =>
+ context.compileContentNode(child, node)
+ );
+
+ const loose = parent ? listLoose(parent) : listItemLoose(node);
+ const properties: ComponentProps<"li"> = {};
+
+ if (typeof node.checked === "boolean") {
+ const head = content[0];
+ let paragraph: React.ReactElement>;
+ if (isParagraph(head)) {
+ paragraph = head;
+ } else {
+ paragraph = ;
+ content.unshift(paragraph);
+ }
+
+ const paragraphChildren = paragraph.props["children"];
+ if (Array.isArray(paragraphChildren) && paragraphChildren.length > 0) {
+ paragraphChildren.unshift(" ");
+ }
+
+ paragraph.props.children = (
+ <>
+
+ {paragraphChildren}
+
+ );
+
+ // According to github-markdown-css, this class hides bullet.
+ // See: .
+ properties.className = "task-list-item";
+ }
+
+ let index = -1;
+
+ const children: ReactNode[] = [];
+ while (++index < content.length) {
+ const child = content[index];
+
+ // Add eols before nodes, except if this is a loose, first paragraph.
+ if (loose || index !== 0 || isParagraph(child)) {
+ children.push("\n");
+ }
+
+ if (isParagraph(child) && !loose) {
+ children.push(child.props.children);
+ } else {
+ children.push(child);
+ }
+ }
+
+ const tail = content[content.length - 1];
+
+ // Add a final eol.
+ if (tail && (loose || !isParagraph(tail))) {
+ children.push("\n");
+ }
+
+ return {children} ;
+}
diff --git a/src/useLoadEffect.ts b/src/useLoadEffect.ts
new file mode 100644
index 0000000..daafd62
--- /dev/null
+++ b/src/useLoadEffect.ts
@@ -0,0 +1,97 @@
+import { useCallback, useEffect, useState } from "react";
+
+export type LoadResult =
+ | LoadResultSuccess
+ | LoadResultError
+ | LoadResultLoading;
+
+export type LoadResultSuccess = {
+ state: "success";
+ data: T;
+};
+
+export type LoadResultError = {
+ state: "error";
+ error: unknown;
+ retry: () => void;
+};
+
+export type LoadResultLoading = {
+ state: "loading";
+};
+
+const LoadingState = Object.freeze({
+ state: "loading",
+});
+
+async function transformToJson(response: Response): Promise {
+ return await response.json();
+}
+
+export default function useLoadEffect(
+ url: string,
+ debugName: string,
+ transform: (response: Response) => Promise = transformToJson
+): LoadResult {
+ const [loadResult, setLoadResult] = useState>(LoadingState);
+ const [attemptCounter, setAttemptCounter] = useState(0);
+ const retry = useCallback(() => setAttemptCounter((c) => c + 1), []);
+ useEffect(() => {
+ let disposed = false;
+
+ setLoadResult(LoadingState);
+ console.debug("Loading %s from %s", debugName, url);
+ fetch(url, {
+ cache: "no-cache",
+ })
+ .then((res) => {
+ if (disposed) {
+ console.debug("Ignoring %s response after being disposed", debugName);
+ return;
+ }
+
+ if (!res.ok) {
+ throw new Error(
+ `Request for ${url} failed with HTTP-Status ${res.status}`
+ );
+ }
+
+ return transform(res);
+ })
+ .then((data) => {
+ if (disposed) {
+ console.debug("Ignoring %s response after being disposed", debugName);
+ return;
+ }
+ console.debug("Received %s: %o", debugName, data);
+
+ if (typeof data !== "object" || data === null) {
+ throw new Error(
+ `Response for ${url} was not an object ${JSON.stringify(data)}`
+ );
+ }
+ setLoadResult({
+ state: "success",
+ data,
+ });
+ })
+ .catch((error) => {
+ if (disposed) {
+ console.debug("Ignoring %s error after being disposed", debugName);
+ return;
+ }
+
+ setLoadResult({
+ state: "error",
+ error,
+ retry,
+ });
+ });
+
+ return () => {
+ disposed = true;
+ };
+ }, [url, debugName, attemptCounter, retry, transform]);
+
+ return loadResult;
+}
diff --git a/worker/README.md b/worker/README.md
new file mode 100644
index 0000000..5600e56
--- /dev/null
+++ b/worker/README.md
@@ -0,0 +1,6 @@
+
+= Cloudflare Worker
+
+The script in this folder lives as a Cloudflare worker that automatically updates index files found in the guide-assets bucket.
+
+Running the worker on a cron-job trigger means that it can take up to 1 hour before a new Minecraft version shows up on the guide.
diff --git a/worker/update-asset-index.mjs b/worker/update-asset-index.mjs
new file mode 100644
index 0000000..0d7f52a
--- /dev/null
+++ b/worker/update-asset-index.mjs
@@ -0,0 +1,51 @@
+export default {
+ async scheduled(event, env, ctx) {
+ const bucket = env.GUIDE_ASSETS;
+
+ // List directories in root
+ const response = await bucket.list({
+ prefix:'',
+ delimiter: '/'
+ });
+
+ const versions = [];
+
+ for (const prefix of response.delimitedPrefixes) {
+ if (!prefix.match(/^minecraft-([^/]+)\/$/)) {
+ continue;
+ }
+ const indexFile = prefix + 'index.json';
+
+ const indexResponse = await bucket.get(indexFile);
+ if (!indexResponse) {
+ console.warn("Index-File %s does not exist.", indexFile);
+ continue;
+ }
+
+ try {
+ const versionIndexContent = await indexResponse.json();
+ console.info("Content of %s: %o", indexFile, versionIndexContent);
+ versions.push({
+ ...versionIndexContent,
+ // This is where the actual data lives in V1 guides
+ url: 'https://guide-assets.appliedenergistics.org/' + prefix + "guide.json.gz"
+ })
+ } catch (e) {
+ console.error("Failed to process index file %s", indexFile);
+ }
+ }
+
+ console.info("Overall version info: %o", versions);
+
+ const indexJsonContent = JSON.stringify({
+ versions
+ });
+ bucket.put("index.json", indexJsonContent, {
+ httpMetadata: {
+ contentType: 'application/json',
+ // Allow browser to assume for 15m that the response is fresh
+ cacheControl: 'public, max-age=900'
+ }
+ });
+ },
+}
+ {!initialized && (
+ 
+ )}
+
+
+
+
+ );
+}
+
+export default ModelViewerInternal;
diff --git a/src/config.ts b/src/config.ts
new file mode 100644
index 0000000..7ffc353
--- /dev/null
+++ b/src/config.ts
@@ -0,0 +1,11 @@
+function assertSet(name: string, value: string) {
+ if (!value) {
+ throw new Error("Environment variable " + name + " is not set");
+ }
+ return value;
+}
+
+export const guideAssetsUrl = assertSet(
+ "VITE_GUIDE_ASSETS_URL",
+ import.meta.env.VITE_GUIDE_ASSETS_URL
+);
diff --git a/src/css.ts b/src/css.ts
new file mode 100644
index 0000000..ab14227
--- /dev/null
+++ b/src/css.ts
@@ -0,0 +1,3 @@
+export function guiScaledDimension(value: number) {
+ return `calc(${value}px * var(--gui-scale))`;
+}
diff --git a/src/global.d.ts b/src/global.d.ts
index 11e4817..e69de29 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,11 +0,0 @@
-import {ModelViewerElement} from "@google/model-viewer";
-import {DOMAttributes} from "react";
-
-type CustomElement{node.value.replace(/\r?\n|\r/g, " ")};
+ ////////////////////////// Block Content
+ case "thematicBreak":
+ return ; + case "paragraph": + return
{context.compileChildren(node)}
; + case "blockquote": + return{context.compileChildren(node)}; + case "code": + return ( +
+
+ {node.value}
+
+
+ );
+ case "list":
+ return compileList(context, node);
+ case "listItem":
+ return compileListItem(context, node, parent);
+ //case "table":
+ // break;
+ // Text- and Block-Level JSX or HTML Element
+ case "mdxJsxFlowElement":
+ case "mdxJsxTextElement":
+ return compileCustomElement(context, node);
+
+ default:
+ return compileError(node, "Unhandled node type");
+ }
+}
+
+export function compilePage(
+ guide: Guide,
+ pageId: string,
+ page: ExportedPage
+): ReactNode {
+ const astRoot = page.astRoot;
+ assertNodeType(astRoot, "root");
+
+ const context: CompileContext = {
+ guide,
+ pageId,
+ compileChildren: (parent: Parent) => {
+ return compileChildren(context, parent.children, parent, compileContent);
+ },
+ compileContentNode: (node, parent) => compileContent(context, node, parent),
+ };
+
+ return context.compileChildren(astRoot);
+}
diff --git a/src/pageCompiler/customElement.ts b/src/pageCompiler/customElement.ts
new file mode 100644
index 0000000..4df8aa1
--- /dev/null
+++ b/src/pageCompiler/customElement.ts
@@ -0,0 +1,79 @@
+import { CompileContext } from "./compilePage.tsx";
+
+import type { MdxJsxFlowElement, MdxJsxTextElement } from "mdast-util-mdx-jsx";
+import React, { ComponentClass, FunctionComponent, ReactNode } from "react";
+import BlockImage from "../components/BlockImage.tsx";
+import ItemLink from "../components/ItemLink.tsx";
+import ItemImage from "../components/ItemImage.tsx";
+import ItemIcon from "../components/ItemIcon.tsx";
+import ItemGrid from "../components/ItemGrid.tsx";
+import Recipe from "../components/recipes/Recipe.tsx";
+import RecipeFor from "../components/recipes/RecipeFor.tsx";
+import Row from "../components/Row.tsx";
+import Column from "../components/Column.tsx";
+import GameScene from "../components/GameScene.tsx";
+import compileError from "./compileError.tsx";
+
+const components: Record<
+ string,
+ FunctionComponent- {content}
- {content}