Add the InterlinkedImage component.
This commit is contained in:
parent
5b59b7bacb
commit
b2d5c85bcc
|
@ -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>
|
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue