40 lines
1.3 KiB
Text
40 lines
1.3 KiB
Text
---
|
|
import type { CollectionEntry } from 'astro:content';
|
|
import FormattedDate from '../components/FormattedDate.astro';
|
|
import BlogContainer from '../components/BlogContainer.astro';
|
|
|
|
type Props = CollectionEntry<'blog'>['data'];
|
|
|
|
const { title, description, pubDate } = Astro.props;
|
|
---
|
|
<script type="module" client:load>
|
|
const jollyroger = document.getElementById('jr');
|
|
|
|
const updateImageForTheme = () => {
|
|
const currentTheme = document.documentElement.classList.contains('dark') ? 'dark' : 'light';
|
|
jollyroger.src = currentTheme === 'dark' ? '/jollyroger_light.svg' : '/jollyroger_dark.svg';
|
|
};
|
|
|
|
updateImageForTheme();
|
|
|
|
const themeToggle = document.getElementById('themeToggle');
|
|
if (themeToggle) {
|
|
themeToggle.addEventListener('click', updateImageForTheme);
|
|
}
|
|
</script>
|
|
|
|
<BlogContainer>
|
|
<main class="flex flex-col flex-1 mb-auto break-words mt-4">
|
|
<article class="flex flex-col gap-1">
|
|
<h1 class="text-4xl font-extrabold">{title}</h1>
|
|
<p class="italic">{description}</p>
|
|
<FormattedDate date={pubDate}/>
|
|
<div class="blog">
|
|
<slot />
|
|
</div>
|
|
<div class="flex items-center justify-center">
|
|
<img src="/jollyroger_dark.svg" id="jr" class="md:w-48 w-40" alt="Jolly Roger"/>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
</BlogContainer>
|