aniva/Chrysoblog
aniva
/
Chrysoblog
1
1
Fork 0
Code Issues 9 Pull Requests 2 Packages Projects Releases Wiki Activity

feat(post): Thumbnail

This commit is contained in:
Leni Aniva 2025-07-06 17:24:37 -07:00
parent cc44b37a35
commit 65e857c43d
Signed by: aniva
GPG Key ID: D5F96287843E8DFB
3 changed files with 77 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/content/post/placeholder2.md
View File

@ -4,5 +4,6 @@ date: '2024-09-20'
description: "This is a placeholder description"
tags: ["a123"]
series: ["placeholder", "another-series"]
thumbnail: "/favicon.png"
---
## Content

5
src/content/post/placeholder3.md
View File

@ -1,7 +1,10 @@
---
title: Placeholder 3
date: '2024-09-24'
tags: []
tags: ["hi"]
series: ["placeholder"]
thumbnail: "https://en.wikipedia.org/static/images/icons/wikipedia.png"
---
## Content
This post has a thumbnail.

105
src/lib/components/PostHeader.svelte
View File

@ -9,47 +9,86 @@
const series = post?.series || [];
</script>
<div id="post-heading">
{#if series}
<div class="flex flex-row justify-left items-center">
{#each series as seriesTag, i}
{#if i > 0}
<div class="separator text-sm">
<Dot />
</div>
{/if}
<p class="series-tag">{seriesTag}</p>
{/each}
<div id="post-header">
{#if post.thumbnail}
<div id="thumbnail">
{#if post.thumbnail.startsWith("<")}
{@html post.thumbnail}
{:else}
<img src={post.thumbnail} alt={post.title} />
{/if}
</div>
{/if}
<h2>
{#if inactive}
<p id="post-title">{post.title}</p>
{:else}
<a id="post-title" href="/post/{post.slug}">{post.title}</a>
<div id="infobox">
{#if series}
<div class="flex flex-row justify-left items-center">
{#each series as seriesTag, i}
{#if i > 0}
<div class="separator text-sm">
<Dot />
</div>
{/if}
<p class="series-tag">{seriesTag}</p>
{/each}
</div>
{/if}
</h2>
<!-- Visually this component should exist to ensure the even spacing between individual posts. -->
<div>
<p class="text-gray-500 h-8">{post?.description || ""}</p>
</div>
<div class="flex flex-row justify-between" style="width: 100%">
<p class="text-gray-200 flex justify-center">
{#each (post?.tags ?? []) as tag, i}
{#if i > 0}
<DividerVertical />
{/if}
<a href="/tag/{tag}">{tag}</a>
{/each}
</p>
<p class="text-l text-gray-500">{date}</p>
<h2>
{#if inactive}
<p id="post-title">{post.title}</p>
{:else}
<a id="post-title" href="/post/{post.slug}">{post.title}</a>
{/if}
</h2>
<!-- Visually this component should exist to ensure the even spacing between individual posts. -->
<div>
<p class="text-gray-500 h-8">{post?.description || ""}</p>
</div>
<div class="flex flex-row justify-between" style="width: 100%">
<p class="text-gray-200 flex justify-center">
{#each (post?.tags ?? []) as tag, i}
{#if i > 0}
<DividerVertical />
{/if}
<a href="/tag/{tag}">{tag}</a>
{/each}
</p>
<p class="text-l text-gray-500">{date}</p>
</div>
</div>
</div>
<style>
#post-heading {
@apply flex flex-col;
#post-header {
display: flex;
flex-direction: row;
margin: .5em 1em .5em 1em;
align-content: center;
align-items: center;
justify-content: center;
}
#thumbnail {
margin: .3em .8em .3em .3em;
border: 1px solid #77777777;
width: 6em;
height: 6em;
align-content: center;
justify-conent: center;
}
#thumbnail img {
display: block;
border: none;
margin: 0;
padding: 0;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
aspect-ratio: 1;
}
#infobox {
width: 100%;
@apply flex flex-col;
}
#post-title {
@apply text-3xl;