sidski/kjelsrud.dev
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

✨ add graphic at the end of blogposts

Browse source 
Signed-off-by: Sindre Kjelsrud <kjelsrudsindre@gmail.com>
This commit is contained in:
Sindre Kjelsrud 2024-03-17 11:32:35 +01:00
parent 04ae6835a6
commit e3a8d6f3b2
Signed by: sidski
GPG key ID: D2BBDF3EDE6BA9A6
3 changed files with 545 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

262
public/jollyroger_dark.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 112 KiB

262
public/jollyroger_light.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 108 KiB

19
src/layouts/BlogPost.astro
View file

@ -7,6 +7,22 @@ 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>
<SectionContainer>
<main class="flex flex-col flex-1 mb-auto break-words mt-4">
<article class="flex flex-col gap-1">
@ -16,6 +32,9 @@ const { title, description, pubDate } = Astro.props;
<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>
</SectionContainer>