From ec0df6f3415dbda5bd991efe9fb52331c4715d29 Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Fri, 8 Mar 2024 14:34:34 +0100
Subject: [PATCH] Add the Interlinked page.

---
 source/pages/interlinked.astro | 36 ++++++++++++++++++++++++++++++++++
 source/scss/interlinked.scss   | 11 +++++++++++
 2 files changed, 47 insertions(+)
 create mode 100644 source/pages/interlinked.astro
 create mode 100644 source/scss/interlinked.scss

diff --git a/source/pages/interlinked.astro b/source/pages/interlinked.astro
new file mode 100644
index 0000000..03e0554
--- /dev/null
+++ b/source/pages/interlinked.astro
@@ -0,0 +1,36 @@
+---
+import BaseLayout, {type Props as BaseProps} from "../layouts/base.astro";
+import InterlinkedImage from "../components/interlinked-image.astro";
+import "../scss/interlinked.scss";
+import interlinkedImages from "../public/interlinked/images.json";
+
+const props: BaseProps = {
+  frontmatter: {
+    pageTitle: "Interlinked - driftingnebula",
+  },
+};
+---
+
+<BaseLayout {...props}>
+  <header class="page-header">
+    <h1>driftingnebula</h1>
+  </header>
+
+  <main class="page-main">
+    <h2>Interlinked</h2>
+    <p>Fully reproducible images with all the operations available.</p>
+    {
+      interlinkedImages.interlinked.map((file) => (
+        <InterlinkedImage collection="interlinked" file={file} />
+      ))
+    }
+
+    <h2>Numbered</h2>
+    <p>Old images I didn't write the operations down for.</p>
+    {
+      interlinkedImages.numbered.map((file) => (
+        <InterlinkedImage collection="numbered" file={file} />
+      ))
+    }
+  </main>
+</BaseLayout>
diff --git a/source/scss/interlinked.scss b/source/scss/interlinked.scss
new file mode 100644
index 0000000..f15cce1
--- /dev/null
+++ b/source/scss/interlinked.scss
@@ -0,0 +1,11 @@
+.page-header {
+  border-bottom: 4px solid white;
+  padding: var(--spacing-3);
+}
+
+.page-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-3);
+}