Reference

Editing this reference

The reference is a small static site: one HTML file per page, shared styles and scripts, and the diagrams as SVG images. There is no build step. Edit a file, reload the page.

Layout

PathHolds
index.htmlThe Overview page, and the entry point.
<page>.htmlOne file per page, such as operations.html. Each holds only its own content.
assets/toc.jsThe table of contents: every page’s file, sidebar group, title and search summary, in reading order. The one place those are defined.
assets/features.jsThe feature registry behind the Feature index and the search.
assets/reference.cssColours, type and components, for light and dark mode.
assets/reference.jsBuilds the top bar, sidebar, previous/next links, Feature index and search. Needs no editing to add content.
img/*.svgThe diagrams, one file each. They carry their own colours and follow light and dark mode.
blog/The GeoAI blog: one HTML file per post, blog/posts.js (the series list, in reading order), blog/blog.js (builds the series box, previous/next links, reading time and the index cards from it), blog/blog.css for the article layout on top of reference.css, and blog/img/ for post covers. Served behind the same Stage login as the reference.

Add a feature

  1. Open assets/features.js.
  2. Add one line with name, area, audience, status (live, limited or planned), page (a file, optionally with #anchor) and summary. A new area value becomes a new filter button.
  3. Reload. The feature appears in the Feature index and in search.

Add a page

  1. Copy an existing page file, for example results.html, to a new name such as exports.html.
  2. Change data-page on <body> and the id of the <section> to the new name, update <title>, and replace the content.
  3. Add one line to assets/toc.js where the page belongs in the order. The sidebar, numbering, previous/next links and search follow from it.

Content uses the existing building blocks: .lede, .ask example questions, .grid tiles, .tbl tables, .callout notes (trust, limit, tech), .op capability cards and figure diagrams. Link to another page by its file name, and to a spot inside it with file.html#anchor.

Diagrams

Each diagram is a standalone SVG in img/, placed on a page with <img src="img/name.svg" alt="…"> inside a figure with a figcaption. The colour tokens are defined inside each SVG, so an image opens on its own and can be reused in slides. To draw a new one, copy the nearest existing SVG and change its shapes and labels; keep the alt text and caption stating what the picture shows.

Add a blog post

  1. Copy a post file in blog/ to a new name, and replace its title, description, “Part N” eyebrow, cover and content. Keep data-slug on the <article> equal to the file name without .html.
  2. Add one entry to blog/posts.js where the post belongs in the order. The series box on every post, the previous/next links and the index card follow from it.
  3. Link from the reference only where a post adds the story behind a page, as one “Further reading” line at the end of that page. The reference stays the place where facts live; a post is dated and is not updated when the product changes.

Viewing

Served by the application at /reference/index.html, everything works, including full-text search. Opened straight from disk, pages and images work and search covers titles, summaries and features.

House rules