Physics

.gitignore

@@ -5,6 +5,7 @@
 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/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>