1
Fork 0

Add the InterlinkedImage component.

This commit is contained in:
Bauke 2024-03-08 14:34:23 +01:00
parent 5b59b7bacb
commit b2d5c85bcc
Signed by: Bauke
GPG Key ID: C1C0F29952BCF558
2 changed files with 54 additions and 0 deletions

View File

@ -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>

View File

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