A bunch of improvements

docs/astro.config.mjs

@@ -3,6 +3,8 @@ import starlight from "@astrojs/starlight";
 
 import { generateSchema } from "./src/schema_generator";
 
+const url = "https://nh.outerwildsmods.com";
+
 generateSchema("body_schema.json");
 generateSchema("star_system_schema.json");
 generateSchema("translation_schema.json");
@@ -11,9 +13,25 @@ generateSchema("dialogue_schema.xsd");
 generateSchema("text_schema.xsd");
 generateSchema("shiplog_schema.xsd");
 
+const ogMeta = (name, val) => ({
+    tag: "meta",
+    attrs: {
+        property: `og:${name}`,
+        content: val
+    }
+});
+
+const twMeta = (name, val) => ({
+    tag: "meta",
+    attrs: {
+        name: `twitter:${name}`,
+        content: val
+    }
+});
+
 // https://astro.build/config
 export default defineConfig({
-    site: "https://nh.outerwildsmods.com",
+    site: url,
     compressHTML: true,
     integrations: [
         starlight({
@@ -21,6 +39,7 @@ export default defineConfig({
             description:
                 "Documentation on how to use the New Horizons planet creation tool for Outer Wilds.",
             defaultLocale: "en-us",
+            favicon: "/favicon.png",
             components: {
                 PageSidebar: "/src/components/ConditionalPageSidebar.astro"
             },
@@ -33,6 +52,14 @@ export default defineConfig({
                 github: "https://github.com/Outer-Wilds-New-Horizons/new-horizons",
                 discord: "https://discord.gg/wusTQYbYTc"
             },
+            head: [
+                ogMeta("image", `${url}/og_image.webp`),
+                ogMeta("image:width", "1200"),
+                ogMeta("image:height", "400"),
+                twMeta("card", "summary"),
+                twMeta("image", `${url}/og_image.webp`),
+                { tag: "meta", attrs: { name: "theme-color", content: "#ffab8a" } }
+            ],
             sidebar: [
                 {
                     label: "Start Here",

docs/public/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><path fill-rule="evenodd" d="M81 36 64 0 47 36l-1 2-9-10a6 6 0 0 0-9 9l10 10h-2L0 64l36 17h2L28 91a6 6 0 1 0 9 9l9-10 1 2 17 36 17-36v-2l9 10a6 6 0 1 0 9-9l-9-9 2-1 36-17-36-17-2-1 9-9a6 6 0 1 0-9-9l-9 10v-2Zm-17 2-2 5c-4 8-11 15-19 19l-5 2 5 2c8 4 15 11 19 19l2 5 2-5c4-8 11-15 19-19l5-2-5-2c-8-4-15-11-19-19l-2-5Z" clip-rule="evenodd"/><path d="M118 19a6 6 0 0 0-9-9l-3 3a6 6 0 1 0 9 9l3-3Zm-96 4c-2 2-6 2-9 0l-3-3a6 6 0 1 1 9-9l3 3c3 2 3 6 0 9Zm0 82c-2-2-6-2-9 0l-3 3a6 6 0 1 0 9 9l3-3c3-2 3-6 0-9Zm96 4a6 6 0 0 1-9 9l-3-3a6 6 0 1 1 9-9l3 3Z"/><style>path{fill:#000}@media (prefers-color-scheme:dark){path{fill:#fff}}</style></svg>

docs/src/components/ConditionalPageSidebar.astro

@@ -4,7 +4,7 @@ import Default from "@astrojs/starlight/components/PageSidebar.astro";
 import { SchemaTools } from "../schema_utils";
 import type { MarkdownHeading } from "astro";
 
-const isSchema = Astro.props.slug.startsWith("schemas/");
+const isSchema = Astro.props.slug.startsWith("schemas/") && !Astro.props.slug.endsWith("/defs");
 
 type TocItem = Exclude<ReturnType<Exclude<Props["toc"], undefined>["items"]["find"]>, undefined>;
 
@@ -29,15 +29,17 @@ function generateToC(
 let props = Astro.props;
 
 if (isSchema) {
-    console.log("Is Schema!");
     const schemaFileName = props.entry.data.head[0]?.attrs?.fileName as string | undefined;
     if (schemaFileName) {
-        const schema = SchemaTools.readSchema(schemaFileName);
+        let schema = SchemaTools.readSchema(schemaFileName);
+        const defName = props.entry.data.head[0]?.attrs?.def as string | undefined;
+        if (defName) {
+            schema = SchemaTools.getDefs(schema).find(d => d.slug === defName)!;
+        }
         const headings = SchemaTools.getHeaders(schema);
         props.headings = headings;
         props.toc!.items = generateToC(headings, props.entry.data.title);
     }
-    console.log(props.toc);
 }
 ---
 

docs/src/components/Schemas/Content.astro

@@ -1,5 +1,6 @@
 ---
-import { Schema, SchemaTools } from '../../schema_utils';
+import { SchemaTools } from "../../schema_utils";
+import type { Schema } from "../../schema_utils";
 
 export interface Props {
     schema: Schema;
@@ -19,20 +20,25 @@ const type = SchemaTools.getType(schema);
 const link = `https://raw.githubusercontent.com/Outer-Wilds-New-Horizons/new-horizons/main/NewHorizons/Schemas/${schema.fileName}`;
 const refSlug = SchemaTools.getRefSlug(schema);
 const enumVals = SchemaTools.getEnumValues(schema);
-const props = SchemaTools.getProps(schema);
+const props = SchemaTools.getProps(schema, level);
 
 const HeadingTag = levelMap[level] ?? "h6";
 ---
 
 <div data-level={level} class="wrapper">
     <div class="header">
-        {
+            {
-            level !== 0 && (
+                level !== 0 && (
-                <HeadingTag class="title" id={schema.slug}>
+                    <HeadingTag class="title" id={schema.slug}>
-                    {SchemaTools.getTitle(schema)}
+                        {level !== 0 && (
-                </HeadingTag>
+                            <a aria-hidden="true" tabindex="-1" class="anchor" href={`${Astro.url}#${schema.slug}`}>
-            )
+                                #
-        }
+                            </a>
+                        )}
+                        {SchemaTools.getTitle(schema)}
+                    </HeadingTag>
+                )
+            }
         <div class="badges">
             {level === 0 && <span>Schema Type: {schema.internalSchema.type}</span>}
             {
@@ -47,15 +53,10 @@ const HeadingTag = levelMap[level] ?? "h6";
     {
         level === 0 && !isDef && (
             <div class="tool-links">
-                <p>
+                <a href={`/schemas/${schema.slug}/defs`}>View Definitions</a>|
-                    <a href={`/schemas/${schema.slug}/defs`}>View Definitions</a>
+                <a rel="noreferer" target="_blank" href={link}>
-                </p>
+                    View Raw
-                <p>|</p>
+                </a>
-                <p>
-                    <a rel="noreferer" target="_blank" href={link}>
-                        View Raw
-                    </a>
-                </p>
             </div>
         )
     }
@@ -76,7 +77,9 @@ const HeadingTag = levelMap[level] ?? "h6";
     }
     {
         refSlug && (
-            <a href={`/schemas/${schema.rootSlug}/defs/${refSlug}`}>See Definitions/{refSlug}</a>
+            <a href={`/schemas/${schema.rootSlug}/defs/${refSlug.toLowerCase()}`}>
+                See Definitions/{refSlug}
+            </a>
         )
     }
     {
@@ -99,7 +102,7 @@ const HeadingTag = levelMap[level] ?? "h6";
             color: unset;
         }
         50% {
-            color: var(--sl-theme-accent);
+            color: var(--sl-color-accent);
         }
         100% {
             color: unset;
@@ -107,14 +110,29 @@ const HeadingTag = levelMap[level] ?? "h6";
     }
 
     .title:target {
-        transition: color;
         animation: flash 600ms cubic-bezier(0.45, 0.05, 0.55, 0.95) 3;
     }
 
+    .title:hover a.anchor {
+        display: initial;
+    }
+
+    a.anchor {
+        text-decoration: none;
+        float: left;
+        margin-left: -26px;
+        padding-right: 5px; 
+        display: none;
+    }
+
+    a.anchor:hover {
+        display: initial;
+        color: var(--sl-color-accent);
+    }
+
     div.header {
         display: flex;
         flex-direction: column;
-        gap: 1rem;
     }
 
     div.wrapper[data-level="2"] {
@@ -133,35 +151,33 @@ const HeadingTag = levelMap[level] ?? "h6";
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        gap: 2rem;
     }
 
     div.children {
         display: flex;
         flex-direction: column;
-        gap: 2rem;
     }
 
     div.tool-links {
         display: flex;
-        gap: 1rem;
-    }
-
-    ul {
-        margin-top: 0.5rem;
     }
 
     span {
-        background-color: hsl(var(--sl-hue-accent) 50% 10%);
+        background-color: var(--sl-color-accent-low);
         font-size: small;
         padding: 0.5rem;
-        margin-right: 0.3rem;
+        border: solid 2px var(--sl-color-accent);
-        border: solid 2px var(--sl-color-accent-low);
         border-radius: 5rem;
     }
 
     span.required {
-        background-color: hsl(var(--sl-hue-yellow) 50% 10%);
+        --hue-yellow: 53;
-        border-color: var(--sl-color-yellow-low);
+        background-color: hsl(var(--hue-yellow) 50% 20%);
+        border-color: hsl(var(--hue-yellow) 50% 50%);
+    }
+
+    :root[data-theme="light"] span.required {
+        background-color: yellow;
+        border-color: darkgoldenrod;
     }
 </style>

docs/src/components/Schemas/DefinitionList.astro

@@ -0,0 +1,21 @@
+---
+import { SchemaTools } from '../../schema_utils';
+import Breadcrumb from './Breadcrumb.astro';
+
+interface Props {
+    fileName: string;
+}
+
+const { fileName } = Astro.props;
+
+const schema = SchemaTools.readSchema(fileName);
+
+const defs = SchemaTools.getDefs(schema);
+
+---
+
+<Breadcrumb schema={schema} onlyDefs />
+
+<ul>
+    {defs.map((def) => <li><a href={`/schemas/${schema.slug}/defs/${def.slug.toLowerCase()}`}>{def.slug}</a></li>)}
+</ul>

docs/src/components/Schemas/SchemaDef.astro

@@ -1,5 +1,6 @@
 ---
 import { SchemaTools } from '../../schema_utils';
+import Breadcrumb from './Breadcrumb.astro';
 import Content from './Content.astro';
 
 interface Props {
@@ -9,12 +10,13 @@ interface Props {
 
 const { fileName, def } = Astro.props; 
 
-const schema = SchemaTools.readSchema(`../NewHorizons/Schemas/${fileName}`);
+const schema = SchemaTools.readSchema(fileName);
 const defs = SchemaTools.getDefs(schema);
 
 const targetDef = defs.find(d => d.slug === def);
 
 ---
 
+<Breadcrumb schema={targetDef!} />
 <Content schema={targetDef!} level={0} isDef />
 

docs/src/content/docs/index.mdx

@@ -13,7 +13,7 @@ hero:
           icon: right-arrow
           variant: primary
         - text: Schema Reference
-          link: /schemas/body_schema
+          link: /schemas/body-schema
 ---
 
 import { Card, CardGrid } from "@astrojs/starlight/components";

docs/src/content/docs/start-here/getting-started.md

@@ -96,7 +96,7 @@ With the schema you get:
 -   Automatic error detection for incorrect data types or values
 -   Autocomplete, also called IntelliSense
 
-The schema we're using here is the [Celestial Body Schema](/schemas/body_schema), but there are many others available in the Schemas section of the left sidebar.
+The schema we're using here is the [Celestial Body Schema](/schemas/body-schema), but there are many others available in the Schemas section of the left sidebar.
 
 ### Testing The Planet
 

docs/src/schema_generator.ts

@@ -1,4 +1,4 @@
-import { SchemaTools } from "./schema_utils";
+import { SchemaTools, type Schema } from "./schema_utils";
 import * as fs from "node:fs";
 
 const addFrontmatter = (
@@ -14,13 +14,58 @@ const addFrontmatter = (
     return `---\n${entries.join("\n")}\n---\n\n${content}`;
 };
 
+const generateDef = (def: Schema) => {
+    const title = SchemaTools.getTitle(def) as string;
+    const dir = `src/content/docs/schemas/${def.rootSlug!}/defs/${title}`;
+
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+
+    let description = SchemaTools.getDescription(def) as string | undefined;
+
+    if (description === undefined || (description as string).trim() === "") {
+        description = `Definition of ${title}`;
+    }
+
+    const frontMatter = {
+        title,
+        description,
+        editUrl: false,
+        head: `\n  - tag: meta\n    attrs:\n      fileName: ${def.fileName}\n      def: ${title}`
+    };
+
+    const content = `import SchemaDef from "/src/components/Schemas/SchemaDef.astro";\n\n<SchemaDef fileName="${def.fileName}" def="${title}" />\n`;
+
+    fs.writeFileSync(`${dir}/index.mdx`, addFrontmatter(content, frontMatter));
+};
+
+const generateDefList = (schema: Schema) => {
+    const dir = `src/content/docs/schemas/${schema.slug}/defs`;
+
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
+
+    const frontMatter = {
+        title: `${SchemaTools.getTitle(schema)} definitions`,
+        description: "List of all definitions in the ${SchemaTools.getTitle(schema)} schema",
+        editUrl: false,
+        head: `\n  - tag: meta\n    attrs:\n      fileName: ${schema.fileName}`
+    };
+
+    const content = `import DefinitionList from "/src/components/Schemas/DefinitionList.astro";\n\n<DefinitionList fileName="${schema.fileName}" />\n`;
+
+    fs.writeFileSync(`${dir}/index.mdx`, addFrontmatter(content, frontMatter));
+};
+
 export const generateSchema = (fileName: string) => {
     const schema = SchemaTools.readSchema(fileName);
 
     const dir = `src/content/docs/schemas/${schema.slug}`;
 
     if (!fs.existsSync(dir)) {
-        fs.mkdirSync(dir);
+        fs.mkdirSync(dir, { recursive: true });
     }
 
     const frontMatter = {
@@ -33,4 +78,10 @@ export const generateSchema = (fileName: string) => {
     const content = `import Schema from "/src/components/Schemas/Schema.astro";\n\n<Schema fileName="${schema.fileName}" />\n`;
 
     fs.writeFileSync(`${dir}/index.mdx`, addFrontmatter(content, frontMatter));
+
+    generateDefList(schema);
+
+    for (const def of SchemaTools.getDefs(schema)) {
+        generateDef(def);
+    }
 };

docs/src/schema_utils.ts

@@ -85,6 +85,7 @@ export const SchemaTools = {
                         return documentation.elements?.[0]?.text;
                     }
                 }
+                def: string;
         }
     },
 
@@ -222,7 +223,7 @@ export const SchemaTools = {
         }
     },
 
-    getProps: (schema: Schema): [string, Schema][] => {
+    getProps: (schema: Schema, level: number): [string, Schema][] => {
         switch (schema.internalSchema.type) {
             case "JSON":
                 const internalSchema = schema.internalSchema.val;
@@ -231,7 +232,7 @@ export const SchemaTools = {
                         e[0],
                         {
                             fileName: schema.fileName,
-                            slug: `${schema.slug}-${getSchemaSlug(e[0])}`,
+                            slug: `${level === 0 ? "" : `${schema.slug}-`}${getSchemaSlug(e[0])}`,
                             rootSlug: schema.rootSlug,
                             internalSchema: {
                                 type: "JSON",
@@ -245,7 +246,7 @@ export const SchemaTools = {
                             "Items",
                             {
                                 fileName: schema.fileName,
-                                slug: `${schema.slug}-items`,
+                                slug: `${level === 0 ? "" : `${schema.slug}-`}items`,
                                 rootSlug: schema.rootSlug,
                                 internalSchema: {
                                     type: "JSON",

docs/src/styles/custom.css

@@ -12,6 +12,7 @@
     --sl-color-gray-6: #272727;
     --sl-color-black: #181818;
 }
+
 /* Light mode colors. */
 :root[data-theme="light"] {
     --sl-color-accent-low: #b8e4c0;