Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/observatory/llms.txt

Use this file to discover all available pages before exploring further.

​
Articles Page

The Articles page (/articles) is reached via the navigation label “Notebook”. It renders the StarMapIndex component, which plots every article as a named star on a coordinate-mapped field. The visual weight of each star corresponds to the article’s depth, and hovering a star reveals its title and topic tag.

​
StarMapIndex Component

StarMapIndex (components/aurora/StarMapIndex.js) renders a dark sky canvas with labelled star points. Key behaviours:
  • Each star’s visual size scales with the magnitude field — higher magnitude means a larger, brighter dot.
  • Stars are positioned using x and y percentage coordinates within the container.
  • Hovering a star displays the article title and topic in a floating tooltip.
  • Topic strings are rendered as pill-shaped tag labels beside the tooltip.
  • Clicking a star is intended to navigate to the article URL (link destination to be configured per article).

​
Magnitude Scale

The magnitude field is an integer from 1–5 representing article length and depth:
MagnitudeMeaningVisual
1Short note / quick tipTiny dim star
2Brief articleSmall star
3Standard postMedium star
4In-depth guideLarge bright star
5Long-form / seriesLargest, most prominent star

​
Articles Data

// components/aurora/StarMapIndex.js
const articles = [
  {
    id: 'a1',
    title: 'The Void of Undefined: TypeScript Edge Cases',
    topic: 'Language',
    magnitude: 3,
    x: 20, y: 30,
  },
  {
    id: 'a2',
    title: 'Rendering the Cosmos: WebGL Optimization',
    topic: 'Performance',
    magnitude: 5,
    x: 50, y: 20,
  },
  {
    id: 'a3',
    title: 'Quiet Interfaces: Designing for High Cognitive Load',
    topic: 'Design',
    magnitude: 4,
    x: 75, y: 40,
  },
  {
    id: 'a4',
    title: 'State Management in Zero Gravity',
    topic: 'Architecture',
    magnitude: 4,
    x: 35, y: 65,
  },
  {
    id: 'a5',
    title: 'Micro-interactions: The Dust of the UI',
    topic: 'Design',
    magnitude: 2,
    x: 60, y: 75,
  },
  {
    id: 'a6',
    title: 'Parsing 10GB JSON without Crashing',
    topic: 'Backend',
    magnitude: 3,
    x: 85, y: 80,
  },
  {
    id: 'a7',
    title: 'Why I Still Use Makefiles',
    topic: 'Tooling',
    magnitude: 1,
    x: 10, y: 80,
  },
];

​
Article Index

TitleTopicMagnitude
The Void of Undefined: TypeScript Edge CasesLanguage★★★☆☆
Rendering the Cosmos: WebGL OptimizationPerformance★★★★★
Quiet Interfaces: Designing for High Cognitive LoadDesign★★★★☆
State Management in Zero GravityArchitecture★★★★☆
Micro-interactions: The Dust of the UIDesign★★☆☆☆
Parsing 10GB JSON without CrashingBackend★★★☆☆
Why I Still Use MakefilesTooling★☆☆☆☆

​
Data Shape Reference

FieldTypeDescription
idstringUnique identifier (e.g. 'a1').
titlestringArticle title displayed in the hover tooltip and as the star label.
topicstringCategory tag rendered as a pill label. Used for visual grouping — not programmatic filtering.
magnitudenumberInteger 1–5. Controls the rendered star size. Higher = longer / more in-depth article.
xnumberHorizontal position as percentage of container width (0–100). Omit to let the component auto-distribute positions.
ynumberVertical position as percentage of container height (0–100). Omit to let the component auto-distribute positions.
The demo data includes explicit x and y coordinates for all seven articles. When these fields are present, StarMapIndex places each star at exactly that position (as a percentage of the container). If you omit them, the component will fall back to algorithmic placement to avoid overlap.

​
Adding an Article

1

Open StarMapIndex.js

The articles array is at the top of components/aurora/StarMapIndex.js.
2

Append a new entry

Add an object with id, title, topic, and magnitude. Optionally specify x and y if you want a fixed position.
3

Add a link destination

Add a url field to the object and update the click handler in StarMapIndex.js to route to article.url. This is the recommended way to connect stars to real external or internal article pages.
Use magnitude: 5 sparingly — it should signal your most substantial work. If every article is magnitude 4 or 5, the visual hierarchy collapses. Aim for a distribution resembling a real star field: a few bright objects, many medium ones, and several dim points.

Build docs developers (and LLMs) love

Get started for freeTalk to us