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)[name]; + source = `${sources.interlinked.baseUrl}${location}`; +} +--- + +
+

+ { + source === undefined ? ( + name + ) : ( + + {name} + + ) + } +

+ +
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; + } +}