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

Compare commits

base: aniva:post/thumbnail
Branches Tags
aniva:main
aniva:post/thumbnail
aniva:post/typst
aniva:home/social
aniva:post/series
aniva:post/page
aniva:post/header
aniva:post/rss
aniva:v0.0.3
aniva:v0.0.2
aniva:v0.0.1
..
compare: aniva:main
Branches Tags
aniva:post/thumbnail
aniva:main
aniva:post/typst
aniva:home/social
aniva:post/series
aniva:post/page
aniva:post/header
aniva:post/rss
aniva:v0.0.3
aniva:v0.0.2
aniva:v0.0.1

No commits in common. "post/thumbnail" and "main" have entirely different histories.
post/thumb ... main

3 changed files with 34 additions and 77 deletions
Show Stats Expand all files Collapse all files

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

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