Info panel (#39)

* wip

* add info panel

* forgot to add new components

astro.config.mjs

@@ -28,7 +28,8 @@ export default defineConfig({
     sidebar: sidebar,
     components: {
       'Head': './src/components/overrides/Head.astro',
-      'SkipLink': './src/components/overrides/SkipLink.astro'
+      'SkipLink': './src/components/overrides/SkipLink.astro',
+      'TableOfContents': './src/components/overrides/TableOfContents.astro'
     }
   }),
   tailwind({

scripts/generate.ts

@@ -92,6 +92,8 @@ function buildAEP(files: string[], folder: string): AEP {
   contents.frontmatter['prev'] = false;
   contents.frontmatter['next'] = false;
 
+  contents.frontmatter['isAEP'] = true;
+
   // Write everything to a markdown file.
   return {
     title: yaml.title,

src/components/InfoPanel.astro

@@ -0,0 +1,59 @@
+---
+const props = Astro.props.entry;
+
+function formatDate(date: Date): string {
+  const options: Intl.DateTimeFormatOptions = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  };
+
+  return date.toLocaleDateString(undefined, options);
+}
+
+const depth = 0;
+---
+{
+  props.data.isAEP === true && (
+    <div class="container">
+    <ul>
+      <li>
+        <span>Slug: </span><a class="inline" href={props.slug}>/{props.slug}</a>
+      </li>
+      <li><span>Created: </span>{formatDate(props.data.created)}</li>
+      {props.data.updated && <li><span>Updated:</span> {formatDate(props.data.updated)}</li>}
+      <li>
+        <a class="inline"
+          href={
+            "https://github.com/aep-dev/aep.dev/edit/master/aep/general/" +
+            props.data.id
+          }
+        >
+          Edit on GitHub
+        </a>
+      </li>
+    </ul>
+    </div>
+  )
+}
+
+<style define:vars={{ depth }}>
+  .container {
+    margin-bottom: 1rem;
+    padding: 0.125rem;
+  }
+  span {
+    font-weight: 600;
+  }
+  ul {
+    list-style: none;
+    background-color: rgb(224 242 254);
+    border-radius: 0.25rem;
+    padding: 0;
+    border-color: rgb(120 113 108);
+  }
+  .inline {
+    display: inline;
+    font-size: 1rem;
+  }
+</style>

src/components/overrides/TableOfContents.astro

@@ -0,0 +1,6 @@
+---
+import Default from "@astrojs/starlight/components/TableOfContents.astro";
+import InfoPanel from "../InfoPanel.astro";
+---
+<InfoPanel {...Astro.props} />
+<Default {...Astro.props}><slot /></Default>

src/content/config.ts

@@ -1,6 +1,17 @@
-import { defineCollection } from 'astro:content';
+import { defineCollection, z } from 'astro:content';
 import { docsSchema } from '@astrojs/starlight/schema';
 
 export const collections = {
-	docs: defineCollection({ schema: docsSchema() }),
+	docs: defineCollection({
+		schema: docsSchema({
+			extend: ({ doc }) => {
+				return z.object({
+					isAEP: z.optional(z.boolean()),
+					created: z.optional(z.date()),
+					updated: z.optional(z.date()),
+					id: z.optional(z.number()),
+				});
+			},
+		})
+	}),
 };