Physics

.gitignore

@@ -1,10 +1,14 @@
 # Miscellaneous
 ./external
 
+.panels
+_*.*
+
 # orbitmines.com
 orbitmines.com/.next
 orbitmines.com/node_modules
 orbitmines.com/build
+orbitmines.com/tsconfig.tsbuildinfo
 
 # Environment
 **/.idea

orbitmines.com/app/not-found.tsx

@@ -1,10 +1,20 @@
 'use client';
 
-import EtherOrMinimap from '../src/@ether/UI/router/EtherOrMinimap';
+import React from 'react';
 
 // Cloudflare Pages routes unknown URLs to /index.html with 200 via the
 // _redirects rule, so this 404.html is rarely hit. We still wire it up to
 // the same SPA-routing component as a defensive fallback.
+//
+// Lazily, and that is not about this page. The App Router treats the root
+// not-found as part of every page's segment tree, so whatever this file names
+// statically is downloaded by every URL on the site — and what it names is the
+// minimap, which reaches the whole archive and, through it, three.js. An
+// article was fetching a WebGL renderer and a paper index in order to render a
+// 404 nobody was looking at. Behind a lazy import the fallback still works and
+// costs only the page that actually falls back to it.
+const EtherOrMinimap = React.lazy(() => import('../src/@ether/UI/router/EtherOrMinimap'));
+
 export default function NotFound() {
-  return <EtherOrMinimap />;
+  return <React.Suspense fallback={<></>}><EtherOrMinimap /></React.Suspense>;
 }

orbitmines.com/app/physics/[[...section]]/PhysicsClient.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import Physics from '../../../src/routes/Physics';
+
+export default function PhysicsClient() {
+  return <Physics />;
+}

orbitmines.com/app/physics/[[...section]]/page.tsx

@@ -0,0 +1,50 @@
+import type {Metadata} from 'next';
+import fs from 'fs';
+import path from 'path';
+import {sectionSlug} from '../../../src/lib/post/sectionSlug';
+import PhysicsClient from './PhysicsClient';
+
+const BOOK_TITLE = 'OrbitMines: Notes on Physics';
+
+// The same arrangement the Almanac uses: arcs and sections live in the path
+// (/physics/<section-slug>) as client-side shallow routes within the book, and
+// every one is prerendered as its own URL so that dev and the static export
+// both serve them, and a refresh on a deep link does not 404.
+//
+// Derived from the source at build time rather than kept by hand, so adding an
+// arc is one edit rather than two.
+export function physicsSections(): {slug: string; head: string}[] {
+  const src = fs.readFileSync(
+    path.join(process.cwd(), 'src/routes/Physics.tsx'),
+    'utf8',
+  );
+  const heads = [...src.matchAll(/<(?:Arc|Section)\s+head="([^"]+)"/g)].map((m) => m[1]);
+  const bySlug = new Map<string, string>();
+  for (const head of heads) {
+    const slug = sectionSlug(head);
+    if (slug && !bySlug.has(slug)) bySlug.set(slug, head);
+  }
+  return [...bySlug].map(([slug, head]) => ({slug, head}));
+}
+
+export function generateStaticParams() {
+  return [
+    {section: [] as string[]},
+    ...physicsSections().map(({slug}) => ({section: [slug]})),
+  ];
+}
+
+export const dynamicParams = false;
+
+export async function generateMetadata(
+  {params}: {params: Promise<{section?: string[]}>},
+): Promise<Metadata> {
+  const slug = (await params).section?.[0];
+  if (!slug) return {title: BOOK_TITLE};
+  const head = physicsSections().find((s) => s.slug === slug)?.head;
+  return {title: head ? `${BOOK_TITLE} - ${head.trim()}` : BOOK_TITLE};
+}
+
+export default function Page() {
+  return <PhysicsClient />;
+}

orbitmines.com/app/thumbnail/ThumbnailClient.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ThumbnailPage } from '../../src/lib/post/Post';
+import { ThumbnailPage } from '../../src/lib/post/Thumbnail';
 
 export default function ThumbnailClient() {
   return <ThumbnailPage />;

orbitmines.com/next.config.js

@@ -9,6 +9,11 @@ const nextConfig = {
   images: { unoptimized: true, disableStaticImages: true },
   trailingSlash: false,
   productionBrowserSourceMaps: true,
+  // `@orbitmines/physics` ships its TypeScript source rather than a build — the package
+  // has no dependencies and no build step, which is the point of it — so Next has to
+  // compile it the way it compiles this repository's own files.
+  transpilePackages: ['@orbitmines/physics'],
+
   eslint: { ignoreDuringBuilds: true },
   typescript: { ignoreBuildErrors: true },
 
@@ -17,6 +22,14 @@ const nextConfig = {
   // for browser bundles, so the old webpack rules for those are no longer
   // needed.
   turbopack: {
+    // No `root` override. `@orbitmines/physics` used to be a symlink out of this
+    // directory, which Turbopack will not follow, so the root had to be the folder
+    // holding both repositories — 322GB across 17 repos, all of which Turbopack then
+    // watched, until the dev server died with `RangeError: Map maximum size exceeded`
+    // out of async_hooks. Next has no watch-ignore for Turbopack, so instead
+    // `scripts/sync-physics.mjs` copies the package into node_modules as real files
+    // and the watched tree is this repository alone. See that file.
+
     resolveAlias: {
       '@blueprintjs/core': BP_LOCAL,
       '@blueprintjs/core/src/common': `${BP_LOCAL}/common`,

orbitmines.com/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@orbitmines/physics": "file:../../physics/languages/.ts",
     "@react-pdf/renderer": "^4.3.2",
     "@react-three/drei": "^10.0.0",
     "@react-three/fiber": "^9.0.0",
@@ -35,7 +36,12 @@
     "dev": "next dev",
     "start": "next start",
     "build": "next build",
-    "lint": "next lint"
+    "lint": "next lint",
+    "sync:physics": "node scripts/sync-physics.mjs",
+    "dev:physics": "node scripts/sync-physics.mjs --watch",
+    "predev": "npm run sync:physics",
+    "prebuild": "npm run sync:physics",
+    "postinstall": "npm run sync:physics"
   },
   "browserslist": {
     "production": [

orbitmines.com/scripts/sync-physics.mjs

@@ -0,0 +1,65 @@
+/**
+ * MATERIALISE `@orbitmines/physics` INSIDE THIS REPOSITORY, instead of linking out to it.
+ *
+ * The package is a `file:` dependency during development, which npm installs as a SYMLINK
+ * pointing at `../../physics/languages/.ts`. Turbopack will not follow a symlink out of its
+ * filesystem root, so the root had to be widened to the folder holding both repositories -
+ * and that folder is three hundred gigabytes across seventeen repositories, most of it
+ * archives. Turbopack watches its whole root, so the dev server was opening file handles for
+ * all of it until Node's async-hooks map hit its ceiling and the process died with
+ * `RangeError: Map maximum size exceeded`.
+ *
+ * NEXT HAS NO WATCH IGNORE for Turbopack - `watchOptions` carries a poll interval and nothing
+ * else - so the root cannot be kept and narrowed. It has to become this repository, which
+ * means the package has to BE here rather than point away.
+ *
+ * SO THE SYMLINK IS REPLACED BY A COPY, of exactly what the package's own `files` field says
+ * it ships. Nothing else changes: the import specifier, `transpilePackages` and the type
+ * resolution all work on a real directory in `node_modules` the way they worked on a link,
+ * and the watched tree is this repository alone.
+ *
+ * IT IS A COPY, SO IT GOES STALE. Run it again after editing the package - `npm run
+ * sync:physics`, which `predev` and `prebuild` already do - or `npm run dev:physics` to have
+ * it re-copied whenever a source file there changes.
+ */
+import { cpSync, existsSync, lstatSync, mkdirSync, readFileSync, rmSync, watch } from "node:fs";
+import { dirname, join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const from = resolve(here, "../../../physics/languages/.ts");
+const to = resolve(here, "../node_modules/@orbitmines/physics");
+
+if (!existsSync(from)) {
+  console.error(`sync:physics - no package at ${from}`);
+  process.exit(1);
+}
+
+/* what the package says it ships, plus the manifest that says it */
+const ships = () => [
+  ...JSON.parse(readFileSync(join(from, "package.json"), "utf8")).files ?? [],
+  "package.json",
+];
+
+const sync = () => {
+  /* a symlink is removed rather than written through, or the copy lands in the other repo */
+  if (existsSync(to) || lstatSync(to, { throwIfNoEntry: false })) rmSync(to, { recursive: true, force: true });
+  mkdirSync(to, { recursive: true });
+  for (const f of ships()) {
+    const src = join(from, f);
+    if (existsSync(src)) cpSync(src, join(to, f), { recursive: true });
+  }
+  console.log(`sync:physics - ${ships().length} entries -> node_modules/@orbitmines/physics`);
+};
+
+sync();
+
+if (process.argv.includes("--watch")) {
+  let queued = null;
+  console.log(`sync:physics - watching ${from}`);
+  watch(from, { recursive: true }, (_, file) => {
+    if (file?.startsWith("node_modules") || file?.startsWith(".git")) return;
+    clearTimeout(queued);
+    queued = setTimeout(sync, 150);
+  });
+}

orbitmines.com/src/@orbitmines/js/react/IEventListener.tsx

@@ -15,7 +15,14 @@ import React, {
   TouchEventHandler, TransitionEventHandler, UIEventHandler,
   useMemo, WheelEventHandler
 } from 'react';
-import _ from "lodash";
+// Three functions, one file each — see the note in `lib/post/Post.tsx`. This
+// one matters most: it is reached from the root layout, so whatever it names
+// is named by every page on the site.
+import entries from "lodash/entries";
+import mergeWith from "lodash/mergeWith";
+import pickBy from "lodash/pickBy";
+
+const _ = {entries, mergeWith, pickBy};
 
 export type IEventHandler<T = Element> = EventHandler<SyntheticEvent<T>>;
 

orbitmines.com/src/@orbitmines/js/react/hooks/useHotkeys.ts

@@ -2,7 +2,12 @@ import IModule, {useModule} from "../IModule";
 import {HotkeyConfig} from "@blueprintjs/core/src/hooks/hotkeys/hotkeyConfig";
 import {useHotkeys as useBlueprintJSHotkeys} from '@blueprintjs/core';
 import {useState} from "react";
-import _ from "lodash";
+// Three functions, one file each — see the note in `lib/post/Post.tsx`.
+import compact from "lodash/compact";
+import isArray from "lodash/isArray";
+import uniq from "lodash/uniq";
+
+const _ = {compact, isArray, uniq};
 
 export type PressedKeys = string[];
 export type HotkeyEventOptions = { pressed: PressedKeys };

orbitmines.com/src/lib/post/Book.tsx

@@ -66,8 +66,12 @@ export class BookUtil {
   nextSection = (reverse: boolean = false) => this.sectionName(this.next(reverse))
 
   sectionName = (element: any) => {
-    if (typeof element.props.head === "string") return element.props.head
-    if (element.props.head.props != undefined) return element.props.head.props.children
+    // Defensive at both levels: `firstSection()` reads `allSections()[0]`,
+    // which is undefined for a book with no arcs, and a Section may carry no
+    // head at all. Neither is worth a blank page.
+    const head = element?.props?.head
+    if (typeof head === "string") return head
+    if (head?.props !== undefined) return head.props.children
     return ""
   }
   disabled = (element: any) => typeof element.props.head !== "string"
@@ -173,12 +177,16 @@ export const Navigation = (props: PaperProps & { hideBorder?: boolean, onNavigat
       <a className="bp5-text-muted" data-selected={util.isSelected(arc) || undefined} style={{color: util.isSelected(arc) ? 'orange' : '#abb3bf'}} onClick={() => !util.disabled(arc) ? navigate(util.sectionName(arc)) : undefined}>{arc.props.head}</a>
 
       {React.Children.toArray((arc as any).props.children).filter(child =>
-        React.isValidElement(child) && child.type === Section
+        // `props.head` is what makes a Section navigable — see `getSections`.
+        // Without it there is nothing to name the link after, and `sectionName`
+        // reads `props.head.props` and throws. A Section used purely to group
+        // prose is content, not a destination.
+        React.isValidElement(child) && child.type === Section && (child.props as any).head
       ).map((section: any) => <Col key={util.sectionName(section)} xs={12} style={{textAlign: 'start'}} className="pt-3">
         <a className="bp5-text-muted ml-5" data-selected={util.isSelected(section) || undefined} style={util.isSelected(section) ? {color: 'orange'} : {}} onClick={() => !util.disabled(section) ? navigate(util.sectionName(section)) : undefined}>{section.props.head}</a>
 
         {React.Children.toArray((section as any).props.children).filter(child =>
-          React.isValidElement(child) && child.type === Section
+          React.isValidElement(child) && child.type === Section && (child.props as any).head
         ).map((section: any) => <Col key={util.sectionName(section)} xs={12} style={{textAlign: 'start'}}>
           <a className="bp5-text-muted ml-10" data-selected={util.isSelected(section) || undefined} style={util.isSelected(section) ? {color: 'orange'} : {}} onClick={() => !util.disabled(section) ? navigate(util.sectionName(section)) : undefined}>{section.props.head}</a>