Rejig catalogue of techniques

_config.ts

@@ -18,6 +18,9 @@ const site = lume({
   src: "src",
   // Set the hosting location
   location: new URL("https://open-innovations.github.io/lume-expo"),
+  components: {
+    cssFile: "_includes/css/components.css",
+  },
 });
 
 /**
@@ -49,7 +52,7 @@ site.filter("resultTable", resultTable);
 
 /**
  * Set up the metas plugin for SEO.
- * 
+ *
  * See https://lume.land/plugins/metas/#installation
  */
 site.use(metas());

src/_components/link/Grid.vto

@@ -0,0 +1,30 @@
+---
+css: |
+  ul.link-grid {
+    padding: unset;
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em;
+  }
+  ul.link-grid > * {
+    flex-basis: 10em;
+    flex-grow: 0;
+    flex-shrink: 1;
+  }
+  ul.link-grid a.content {
+    display: block;
+    padding: 1em;
+  }
+  ul.link-grid a.content:hover {
+    color: var(--link-hover-color, white);
+    background: var(--link-hover-background, black);
+  }
+---
+<ul class="link-grid">
+  {{ for link of links }}
+    <li>
+      <a class="content" href="{{ link.url }}">{{ link.title }}</a>
+    </li>
+  {{ /for }}
+</ul>

src/_data.yml

@@ -7,4 +7,8 @@ repo: https://github.com/open-innovations/lume-expo
 metas:
   site: OI Lume Expo
   title: "=title"
-  description: "=description"
+  description: "=description"
+
+techniques:
+  - Core
+  - Data

src/_includes/layout/catalogue.vto

@@ -0,0 +1,4 @@
+---
+layout: ./page.vto
+---
+{{ comp.link.Grid({ links: catalogue }) }}

src/css/site.css

@@ -1,2 +1,4 @@
 @import 'css/dessicate.css';
-@import 'css/code_theme.css';
+@import 'css/code_theme.css';
+
+@import 'css/components.css';

src/index.vto

@@ -5,10 +5,7 @@ title: Home
   This site collects some common approaches to building Lume sites in use across Open Innovations.
 </p>
 
-<h2>Data techniques</h2>
-
-<ul>
-{{ for technique of search.pages('technique=data', 'title') }}
-  <li><a href="{{technique.url}}">{{ technique.title }}</a></li>
+{{ for technique of search.pages('technique') }}
+  <h2>{{ technique.title }}</h2>
+  {{ comp.link.Grid({ links: technique.catalogue }) }}
 {{ /for }}
-</ul>

src/techniques.page.ts

@@ -0,0 +1,20 @@
+export const layout = "layout/catalogue.vto";
+
+export const tags = ["technique"];
+
+const capitalise = (s: string) => s.charAt(0).toUpperCase() + s.slice(1);
+
+export default function* ({ search }: Lume.Data) {
+  const techniques = search.values<string>("technique");
+
+  for (const technique of techniques) {
+    const pages = search.pages(`technique=${technique}`).map(
+      ({ title, url }) => ({ title, url }),
+    );
+    yield {
+      title: capitalise(technique),
+      url: `/${technique}/`,
+      catalogue: pages,
+    };
+  }
+}

src/techniques/_data.ts

@@ -0,0 +1,3 @@
+// Replace the url prefix with the grouping of the technique.
+export const url = (page: Lume.Page) =>
+  page.data.url.replace(/techniques/, page.data.technique);

src/data/duckdb/index.vto → src/techniques/duckdb/index.vto

@@ -1,8 +1,7 @@
 ---
 title: DuckDB
+technique: data
 ---
-<h1>{{ title }}</h1>
-
 <p>
   As more data is rendered in a site, the build can slow down significantly.
   It may be beneficial under these circumstances to use DuckDB to access data.