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

---
 source/components/interlinked-image.astro | 37 +++++++++++++++++++++++
 source/components/interlinked-image.scss  | 17 +++++++++++
 2 files changed, 54 insertions(+)
 create mode 100644 source/components/interlinked-image.astro
 create mode 100644 source/components/interlinked-image.scss

diff --git a/source/components/interlinked-image.astro b/source/components/interlinked-image.astro
new file mode 100644
index 0000000..83e0f6b
--- /dev/null
+++ b/source/components/interlinked-image.astro
@@ -0,0 +1,37 @@
+---
+import sources from "../public/interlinked/sources.json";
+import "./interlinked-image.scss";
+
+/** Properties for the InterlinkedImage component. */
+export interface Props {
+  collection: "interlinked" | "numbered";
+  file: string;
+}
+
+const {collection, file} = Astro.props;
+
+const imageDirectory = collection === "interlinked" ? "/" : "/numbered";
+const imagePath = `/interlinked${imageDirectory}/${file}`;
+const name = file.slice(0, file.indexOf("."));
+
+let source: string | undefined;
+if (collection === "interlinked" && name in sources.interlinked) {
+  const location = (sources.interlinked as Record<string, string>)[name];
+  source = `${sources.interlinked.baseUrl}${location}`;
+}
+---
+
+<div class="interlinked-image">
+  <h3 class="heading">
+    {
+      source === undefined ? (
+        name
+      ) : (
+        <a class="source-link" href={source}>
+          {name}
+        </a>
+      )
+    }
+  </h3>
+  <img class="image" src={imagePath} />
+</div>
diff --git a/source/components/interlinked-image.scss b/source/components/interlinked-image.scss
new file mode 100644
index 0000000..6244e65
--- /dev/null
+++ b/source/components/interlinked-image.scss
@@ -0,0 +1,17 @@
+.interlinked-image {
+  background-color: #111;
+
+  .heading {
+    padding: var(--spacing-2);
+  }
+
+  .image {
+    border: 2px solid white;
+    display: block;
+    max-width: 100%;
+  }
+
+  .source-link {
+    color: #f0f;
+  }
+}