ProjectSegfault/website
4
2
Fork 1
mirror of https://github.com/ProjectSegfault/website.git synced 2025-05-31 14:12:04 +05:30
Code Issues Projects Releases Wiki Activity

use components on blog

Browse Source
This commit is contained in:
Akis
2023-01-01 10:22:26 +02:00
parent 31df1859cb
commit fae1d2ce13
15 changed files with 135 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/lib/BlogCard/Meta.svelte Normal file
View File

@@ -0,0 +1,24 @@
<script lang="ts">
import dayjs from "dayjs";
export let post: any;
</script>
<div class="flex flex-col md:(flex-row gap-4) gap-2">
{#if post.tags.length > 0}
<div class="flex flex-row items-center gap-2">
<div class="i-fa6-solid:tags" />
{#each post.tags as tag}
<a href="/blog/tags/{tag.slug}" class="no-underline">{tag.name}</a>
{/each}
</div>
{/if}
{#each post.authors as author}
<a href="/blog/authors/{author.slug}" class="flex items-center gap-2 no-underline"><div class="i-fa6-solid:user" />{author.name}</a>
{/each}
<span class="flex items-center gap-2"><div class="i-fa6-solid:calendar" /> {dayjs
(post.published_at)
.format("ddd, DD MMM YYYY HH:mm")}</span>
<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {post.plaintext.trim().split(/\s+/).length} words</span>
<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {post.reading_time} minute read</span>
</div>

7
src/lib/BlogCard/PostContent.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
export let data: any;
</script>
<div class="prose flex flex-col m-auto">
{@html data.post.html}
</div>

3
src/lib/BlogCard/PostOuter.svelte Normal file
View File

@@ -0,0 +1,3 @@
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
<slot />
</div>

7
src/lib/BlogCard/PostsContainer.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
export let hasMt: boolean = false;
</script>
<div class="flex flex-col gap-10 {hasMt ? "mt-16" : ""}">
<slot />
</div>

6
src/lib/BlogCard/ReadMore.svelte Normal file
View File

@@ -0,0 +1,6 @@
<script lang="ts">
export let post: any;
</script>
<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
<a href="/blog/{post.slug}">Read more...</a>

10
src/lib/BlogCard/SingleWordLists.svelte Normal file
View File

@@ -0,0 +1,10 @@
<script lang="ts">
export let items: any;
</script>
<div class="flex flex-col gap-4">
{#each items as item}
<a href="/blog/authors/{item.slug}" class="bg-secondary w-fit p-2 rounded-2 no-underline">{item.name}</a>
{/each}
</div>

5
src/lib/BlogCard/Title.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script lang="ts">
export let post: any;
</script>
<span class="text-xl font-bold">{post.title}</span>

5
src/lib/BlogCard/TitleWithBackButton.svelte Normal file
View File

@@ -0,0 +1,5 @@
<script lang="ts">
export let data: any;
</script>
<span class="text-xl font-bold flex flex-row items-center gap-2"><a href="/blog" class="flex flex-row items-center gap-2"><div class="i-fa6-solid:arrow-left" /> Back</a> - {data.post.title}</span>

8
src/lib/BlogCard/index.ts Normal file
View File

@@ -0,0 +1,8 @@
export { default as PostsContainer } from "./PostsContainer.svelte";
export { default as PostOuter } from "./PostOuter.svelte";
export { default as Title } from "./Title.svelte";
export { default as Meta } from "./Meta.svelte";
export { default as ReadMore } from "./ReadMore.svelte";
export { default as TitleWithBackButton } from "./TitleWithBackButton.svelte";
export { default as PostContent } from "./PostContent.svelte";
export { default as SingleWordLists } from "./SingleWordLists.svelte";