ebby
d84c5a9973
All checks were successful
Build and Deploy Astro App / build_and_deploy (push) Successful in 50s
114 lines
2.2 KiB
Text
114 lines
2.2 KiB
Text
---
|
|
import { Image } from "astro:assets";
|
|
import BackNav from "../components/BackNav.astro";
|
|
import { findImageByPath } from "../lib/findImage";
|
|
import type { Post } from "../types/global";
|
|
import Main from "./Main.astro";
|
|
import { formatLocalizedDateString } from "../lib/formatDate";
|
|
|
|
interface Props {
|
|
frontmatter: Post;
|
|
}
|
|
|
|
const { frontmatter } = Astro.props;
|
|
|
|
const titleImg = findImageByPath(frontmatter.image.path);
|
|
const localeDate = formatLocalizedDateString(frontmatter.date);
|
|
---
|
|
|
|
<Main>
|
|
<article class="markdown-content">
|
|
<Image
|
|
id="titleImg"
|
|
src={titleImg}
|
|
alt={frontmatter.image.alt}
|
|
class="rounded"
|
|
/>
|
|
<h1 class="headline">{frontmatter.title}</h1>
|
|
<div class="bottom-info">
|
|
<span>Autor: {frontmatter.author}</span>
|
|
<span>{localeDate}</span>
|
|
</div>
|
|
<slot />
|
|
<BackNav />
|
|
<p class="disclaimer">
|
|
Disclaimer: Dieser Artikel ist ausschließlich privat und wird nicht durch
|
|
Produktplatzierung, Affiliate-Links oder ähnliches Unterstützt. Links
|
|
dienen allein dem Zweck der Information.
|
|
</p>
|
|
</article>
|
|
|
|
<div id="image-backdrop" hidden>
|
|
<img id="image-preview" class="rounded" src="" alt="" />
|
|
</div>
|
|
</Main>
|
|
|
|
<script is:inline src="/scripts/image-modal.js"></script>
|
|
|
|
<style>
|
|
article {
|
|
max-width: 900px;
|
|
padding: 0 clamp(8px, 32px, 64px);
|
|
}
|
|
|
|
.markdown-content {
|
|
font-size: 1.5rem;
|
|
line-height: 1.6;
|
|
|
|
|
|
img {
|
|
cursor: zoom-in;
|
|
}
|
|
}
|
|
|
|
#titleImg {
|
|
width: 100%;
|
|
height: 200px;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
}
|
|
|
|
.bottom-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.disclaimer {
|
|
margin: 32px 0 64px 0;
|
|
font-size: smaller;
|
|
}
|
|
|
|
#image-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
|
|
display: grid;
|
|
place-items: center;
|
|
|
|
padding: 24px;
|
|
background: rgba(0, 0, 0, 0.8);
|
|
cursor: pointer;
|
|
}
|
|
|
|
#image-backdrop[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#image-preview {
|
|
max-width: 90vw;
|
|
max-height: 90vh;
|
|
width: auto;
|
|
height: auto;
|
|
object-fit: contain;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@media only screen and (max-width: 800px) {
|
|
.markdown-content {
|
|
font-size: 1.25rem;
|
|
line-height: 1.4;
|
|
}
|
|
}
|
|
</style>
|