separate pages are a go (#20)

astro.config.mjs

@@ -28,24 +28,6 @@ export default defineConfig({
       github: config.urls.repo,
     },
     // Google Analytics tag.
-    head: [    
-      {      
-        tag: 'script',      
-        attrs: {        
-          src: `<https://www.googletagmanager.com/gtag/js?id=${config.site.ga_tag}>`,
-          async: true,      
-        },    
-      },
-      {
-        tag: 'script',
-        content: `
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', ${config.site.ga_tag});
-        `,
-      },  
-    ],
     sidebar: sidebar.concat(linter_sidebar)
   }),
   tailwind({

package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.3",
-    "@astrojs/starlight": "^0.26.1",
+    "@astrojs/starlight": "^0.28.2",
     "@astrojs/starlight-tailwind": "^2.0.3",
     "@astrojs/tailwind": "^5.1.0",
     "@hpcc-js/wasm": "^2.22.1",

scripts/generate.ts

@@ -1,11 +1,11 @@
 import * as fs from 'fs';
 import * as path from 'path';
-import { load, dump } from "js-yaml";
 
 import loadConfigFiles from './src/config';
 import { buildSidebar, buildLinterSidebar, addToSidebar } from './src/sidebar';
 import { type AEP, type ConsolidatedLinterRule, type GroupFile, type LinterRule, type Sidebar } from './src/types';
 import { buildMarkdown, Markdown } from './src/markdown';
+import { load, dump } from "js-yaml";
 
 const AEP_LOC = process.env.AEP_LOCATION!;
 const AEP_LINTER_LOC = process.env.AEP_LINTER_LOC!;
@@ -31,15 +31,11 @@ async function getLinterRules(dirPath: string): Promise<string[]> {
 }
 
 async function writePage(dirPath: string, filename: string, outputPath: string, title: string) {
-  let contents = new Markdown(fs.readFileSync(path.join(dirPath, filename), 'utf-8'));
-  let frontmatter = {
+  let contents = new Markdown(fs.readFileSync(path.join(dirPath, filename), 'utf-8'), {});
+  contents.frontmatter = {
     'title': title ?? getTitle(contents.contents)
   }
-  let final = `---
-${dump(frontmatter)}
----
-${contents.removeTitle().contents}`
-  fs.writeFileSync(outputPath, final, { flag: 'w' });
+  fs.writeFileSync(outputPath, contents.removeTitle().build(), { flag: 'w' });
 }
 
 async function writePages(dirPath: string, sidebar: Sidebar): Promise<Sidebar> {
@@ -85,10 +81,14 @@ function buildAEP(files: string[], folder: string): AEP {
 
   const yaml = load(yaml_text);
 
-  yaml.title = getTitle(md_text);
+  yaml.title = getTitle(md_text).replace('\n', '');
 
   let contents = buildMarkdown(md_text, folder);
 
+  contents.frontmatter = yaml;
+  contents.addComponent({'names': ['Aside', 'Tabs', 'TabItem'], 'path': '@astrojs/starlight/components'})
+  contents.addComponent({'names': ['Sample'], 'path': '../../components/Sample.astro'})
+
   // Write everything to a markdown file.
   return {
     title: yaml.title,
@@ -97,19 +97,20 @@ function buildAEP(files: string[], folder: string): AEP {
     category: yaml.placement.category,
     order: yaml.placement.order,
     slug: yaml.slug,
-    contents: `---
-${dump(yaml)}
---- 
-import { Aside, Tabs, TabItem } from '@astrojs/starlight/components';
-import Sample from '../../components/Sample.astro';
-
-${contents.contents}`
+    contents: contents,
   }
 }
 
 function writeMarkdown(aep: AEP) {
+  aep.contents.frontmatter.slug = aep.id.toString();
+
   const filePath = path.join("src/content/docs", `${aep.id}.mdx`)
-  fs.writeFileSync(filePath, aep.contents, { flag: "w" });
+  fs.writeFileSync(filePath, aep.contents.build(), { flag: "w" });
+
+  aep.contents.frontmatter.slug = aep.slug;
+
+  const slugPath = path.join("src/content/docs", `${aep.slug}.mdx`)
+  fs.writeFileSync(slugPath, aep.contents.build(), { flag: "w" });
 }
 
 function writeSidebar(sideBar: any, filePath: string) {
@@ -239,7 +240,7 @@ ${sections.join("\n")}
 }
 
 function buildRedirects(aeps: AEP[]): object {
-  return Object.fromEntries(aeps.map((aep) => [`/${aep.id}`, `/${aep.slug}`]));
+  return {};
 }
 
 // Build config.

scripts/src/markdown.ts

@@ -1,4 +1,5 @@
 import * as path from 'path';
+import { load, dump } from "js-yaml";
 
 const ASIDES = {
     'Important': { 'title': 'Important', 'type': 'caution' },
@@ -17,13 +18,39 @@ const RULE_COLORS = {
     'must not': 'font-extrabold	text-red-700'
 }
 
+interface Component {
+    names: Array<string>
+    path: string
+}
+
 class Markdown {
     contents: string;
-    components: Set<string>;
+    components: Array<Component>;
+    frontmatter: object;
 
-    constructor(contents: string) {
+    constructor(contents: string, frontmatter: object) {
         this.contents = contents;
-        this.components = new Set<string>();
+        this.components = [];
+        this.frontmatter = frontmatter;
+    }
+
+    public addComponent(component: Component) {
+        const existingComponentIndex = this.components.findIndex(c => c.path === component.path);
+        if (existingComponentIndex !== -1) {
+            this.components[existingComponentIndex].names = [...new Set([...this.components[existingComponentIndex].names, ...component.names])];
+        } else {
+            this.components.push(component);
+        }
+    }
+
+    public build() : string {
+        return `---
+${dump(this.frontmatter)}
+---
+${this.components.map((component) => `import ${component.names.length > 1 ? "{" + component.names.join(',') + "}" : component.names.join(',')} from '${component.path}';`).join('\n')}
+
+${this.contents}
+`;
     }
 
     public substituteHTMLComments() {
@@ -122,8 +149,8 @@ ${tab['oas']}
 ${tabContents(match[3].trimStart())}
 </Aside>`
             this.contents = this.contents.replace(match[0], formatted_results);
-            this.components.add('Aside');
         }
+        this.addComponent({'names': ['Aside'], 'path': '@astrojs/starlight/components'});
         return this;
     }
 

scripts/src/types.ts

@@ -1,4 +1,5 @@
 import { z } from "zod";
+import type { Markdown } from "./markdown";
 
 const Config = z.object({
   hero: z.object({
@@ -40,7 +41,7 @@ interface AEP {
   title: string;
   id: string;
   frontmatter: object;
-  contents: string;
+  contents: Markdown;
   category: string;
   order: number;
   slug: string;
@@ -49,7 +50,7 @@ interface AEP {
 interface LinterRule {
   title: string;
   aep: string;
-  contents: string;
+  contents: Markdown;
   filename: string;
   slug: string;
 }