Add references page

src/_components/layout/Grid.vto

@@ -0,0 +1,24 @@
+---
+css: |
+  ul.layout-grid {
+    padding: unset;
+    list-style: none;
+    display: grid;
+    grid-template-columns: repeat( auto-fit, minmax(15em, 1fr) );
+    gap: 1em;
+  }
+  ul.layout-grid > li {
+    display: block;
+  }
+---
+<ul class="layout-grid">
+  {{ for item of items -}}
+    <li>
+      {{ if renderer }}
+        {{ renderer(item) }}
+      {{ else }}
+        {{ item }}
+      {{ /if }}
+    </li>
+  {{- /for }}
+</ul>

src/_components/link/Block.vto

@@ -0,0 +1,35 @@
+---
+css: |
+  :root {
+    --link-block-color: black;
+    --link-block-background: #aaa;
+    --link-block-color-hover: white;
+    --link-block-background-hover: black;
+  }
+  a.link-block {
+    display: block;
+    box-sizing: border-box;
+    height: 100%;
+    padding: 1em;
+    color: var(--link-block-color);
+    background: var(--link-block-background);
+    text-decoration: none;
+  }
+  a.link-block:hover {
+    --link-block-color: var(--link-block-color-hover);
+    --link-block-background: var(--link-block-background-hover);
+    text-decoration: underline;
+  }
+  a.link-block > *:first-child {
+    margin-block-start: 0;
+  }
+  a.link-block > *:last-child {
+    margin-block-end: 0;
+  }
+---
+<a class="link-block" href="{{ url }}">
+<p>{{ title }}</p>
+{{ if description -}}
+  <p>{{ description }}</p>
+{{- /if }}
+</a>

src/_data.yml

@@ -16,4 +16,6 @@ techniques:
   - key: core
     title: Core
   - key: data
-    title: Data
+    title: Data
+  - key: references
+    title: Links

src/_includes/layout/catalogue.vto

@@ -1,4 +1,12 @@
 ---
 layout: ./page.vto
 ---
-{{ comp.link.Grid({ links: catalogue }) }}
+
+{{ if description -}}
+  <p>{{ description }}</p>  
+{{- /if }}
+
+{{ comp.layout.Grid({
+  items: catalogue,
+  renderer: comp.link.Block
+}) }}

src/css/site.css

@@ -13,4 +13,9 @@
   --nav-page-background: black;
   --nav-page-color-hover: black;
   --nav-page-background-hover: white;
+
+  --link-block-color: black;
+  --link-block-background: #aaa;
+  --link-block-color-hover: white;
+  --link-block-background-hover: black;
 }

src/index.vto

@@ -7,6 +7,9 @@ title: Home
 
 {{ for technique of search.pages('technique', 'order') }}
   <h2>{{ technique.title }}</h2>
-  {{ comp.link.Grid({ links: technique.catalogue }) }}
+  {{ comp.layout.Grid({
+    items: technique.catalogue,
+    renderer: comp.link.Block
+  }) }}
 {{ /for }}
 

src/references.yml

@@ -0,0 +1,19 @@
+key: references
+tags: [ technique ]
+title: Links
+order: 100
+layout: layout/catalogue.vto
+catalogue:
+  - title: Lume
+    url: https://lume.land/
+    description: |
+      Lume is a static site generator which uses the Deno JavaScript runtime.
+      We use this as the core platform for many of the sites we build.
+  - title: OI Lume Viz
+    url: https://open-innovations.github.io/oi-lume-viz/
+    description: |
+      We've packaged up some of our visualisations as a reusable Lume plugin library.
+  - title: DuckDB
+    url: https://duckdb.org/
+    description: |
+      DuckDB is a fast in-process analytical database.