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

feat(post): Thumbnail #45

Open
aniva wants to merge 1 commits from post/thumbnail into main
pull from: post/thumbnail
merge into: aniva:main
Conversation 1 Commits 1 Files Changed 3 +77 -34
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" description: "This is a placeholder description"
tags: ["a123"] tags: ["a123"]
series: ["placeholder", "another-series"] series: ["placeholder", "another-series"]
thumbnail: "/favicon.png"
--- ---
## Content ## Content

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

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

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

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