Add index

hexpansions.json

@@ -1,14 +1,16 @@
-[{
+[
+  {
+    "maker": "GCHQ.NET",
+    "unique_name": "GCHQ.NET Marker 2024",
+    "description": "Marker for GCHQ.NET: Great Camp Hexpansion Quest 2024",
+    "homepage": "https://gchq.net"
+  },
+  {
     "maker": "Demo hexpansion maker",
     "unique_name": "Demo hexpansion name",
     "description": "An example hexpansion description",
     "shop_link": "https://example.com",
     "hardware_repo": "https://example.com",
     "homepage": "https://example.com"
-},
-{
-    "maker": "GCHQ.NET",
-    "unique_name": "GCHQ.NET Marker 2024",
-    "description": "Marker for GCHQ.NET: Great Camp Hexpansion Quest 2024",
-    "homepage": "https://gchq.net"
-}]
+  }
+]

package.json

@@ -13,6 +13,7 @@
     "@astrojs/check": "^0.7.0",
     "@types/node": "^20.13.0",
     "astro": "^4.9.2",
+    "change-case": "^5.4.4",
     "typescript": "^5.4.5",
     "zod": "^3.23.8"
   },

src/components/Hexpansion.astro

@@ -1,5 +1,6 @@
 ---
 import { resolve } from "path";
+import { kebabCase } from "change-case";
 const {
   maker,
   homepage,
@@ -16,7 +17,6 @@ const image_file_path = resolve(
   `../..${hosted_image_url}`
 );
 
-console.log(image_file_path, await Bun.file(image_file_path).exists());
 const hosted_image = (await Bun.file(image_file_path).exists())
   ? hosted_image_url
   : null;
@@ -32,9 +32,11 @@ const image_url = image_url_prop
   (function (markup) {
     return homepage ? <a href={homepage}>{markup}</a> : markup;
   })(
-    <article>
+    <article id={kebabCase(unique_name)}>
       <h2>{unique_name}</h2>
-      <div role="doc-subtitle">by {maker}</div>
+      <span class="byline" role="doc-subtitle">
+        by {maker}
+      </span>
       {image_url && (
         <img
           alt={`An image of the ${unique_name} hexpansion`}
@@ -43,8 +45,16 @@ const image_url = image_url_prop
       )}
       <p>{description}</p>
       <div class="link-container">
-        {shop_link ? <a class="link" href={shop_link}>Buy</a> : null}
-        {hardware_repo ? <a class="link" href={hardware_repo}>Hardware Source</a> : null}
+        {shop_link ? (
+          <a class="link" href={shop_link}>
+            Buy
+          </a>
+        ) : null}
+        {hardware_repo ? (
+          <a class="link" href={hardware_repo}>
+            Hardware Source
+          </a>
+        ) : null}
       </div>
     </article>
   )
@@ -64,16 +74,20 @@ const image_url = image_url_prop
     text-decoration: none;
     margin: 0.5em 0;
   }
+  .byline {
+    margin-bottom: 24px;
+  }
   a {
     color: #aaa;
     text-decoration: none;
   }
   img {
+    margin-top: 24px;
     width: 95%;
   }
   a.link:not(:nth-child(2)) {
     border-left: 1px solid white;
-    margin-left: .7vw !important;
-    padding-left: .7vw !important;
-}
+    margin-left: 0.7vw !important;
+    padding-left: 0.7vw !important;
+  }
 </style>

src/pages/index.astro

@@ -2,6 +2,7 @@
 import { hexpansions } from "../hexpansion_schema";
 import Hexpansion from "../components/Hexpansion.astro";
 import Layout from "../layouts/Layout.astro";
+import { kebabCase } from "change-case";
 ---
 
 <Layout title="Hexpansion Registry">
@@ -10,11 +11,23 @@ import Layout from "../layouts/Layout.astro";
     <p>
       Here's a quick little directory of hexpansions. <a
         href="https://github.com/hughrawlinson/hexpansion-registry"
-        >Submit yours!</a>
+        >Submit yours!</a
+      >
     </p>
+    <div class="hexpansion-index">
+      <ul>
+        {
+          hexpansions.map(({ unique_name }) => (
+            <li>
+              <a href={`#${kebabCase(unique_name)}`}>{unique_name}</a>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
     {
       hexpansions ? (
-        <section>
+        <section class="hexpansions">
           {hexpansions.map((hexpansion) => (
             <Hexpansion {...hexpansion} />
           ))}
@@ -34,6 +47,19 @@ import Layout from "../layouts/Layout.astro";
     font-size: 20px;
     line-height: 1.6;
   }
+  section.hexpansions {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+  }
+  .hexpansion-index {
+    border: 1px solid #999;
+    padding: 20px;
+    border-radius: 8px;
+    margin-bottom: 24px;
+    max-height: 300px;
+    overflow-y: scroll;
+  }
   .astro-a {
     position: absolute;
     top: -32px;