use components on blog

This commit is contained in:
Akis 2023-01-01 10:22:26 +02:00
parent 31df1859cb
commit fae1d2ce13
Signed by untrusted user: akis
GPG Key ID: 267BF5C6677944ED
15 changed files with 135 additions and 111 deletions

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>

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>

View File

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

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>

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>

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>

View File

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

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>

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";

View File

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import dayjs from "dayjs";
import Hero from "$lib/Hero.svelte"; import Hero from "$lib/Hero.svelte";
import LinkButton from "$lib/LinkButton.svelte"; import LinkButton from "$lib/LinkButton.svelte";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
export let data: PageData; export let data: PageData;
import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
</script> </script>
<svelte:head> <svelte:head>
@ -34,30 +34,12 @@
</div> </div>
</Hero> </Hero>
<div class="flex flex-col gap-10 mt-16"> <PostsContainer hasMt>
{#each data.posts as post} {#each data.posts as post}
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2"> <PostOuter>
<span class="text-xl font-bold">{post.title}</span> <Title {post} />
<div class="flex flex-col md:(flex-row gap-4) gap-2"> <Meta {post} />
{#if post.tags.length > 0} <ReadMore {post} />
<div class="flex flex-row items-center gap-2"> </PostOuter>
<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>
<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
<a href="/blog/{post.slug}">Read more...</a>
</div>
{/each} {/each}
</div> </PostsContainer>

View File

@ -1,28 +1,16 @@
<script lang="ts"> <script lang="ts">
import dayjs from "dayjs";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
export let data: PageData; export let data: PageData;
import { PostOuter, TitleWithBackButton, Meta, PostContent } from "$lib/BlogCard";
</script> </script>
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2"> <svelte:head>
<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> <title>{data.post.title} | Project Segfault Blog</title>
<div class="flex flex-col md:(flex-row gap-4) gap-2"> </svelte:head>
{#if data.post.tags.length > 0}
<div class="flex flex-row items-center gap-2"> <PostOuter>
<div class="i-fa6-solid:tags" /> <TitleWithBackButton {data} />
{#each data.post.tags as tag} <Meta post={data.post} />
<a href="/blog/tags/{tag.slug}" class="no-underline">{tag.name}</a> <PostContent {data} />
{/each} </PostOuter>
</div>
{/if}
{#each data.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
(data.post.published_at)
.format("ddd, DD MMM YYYY HH:mm")}</span>
<span class="flex items-center gap-2"><div class="i-fa6-solid:pencil" /> {data.post.plaintext.trim().split(/\s+/).length} words</span>
<span class="flex items-center gap-2"><div class="i-fa6-solid:book-open-reader" /> {data.post.reading_time} minute read</span>
</div>
{@html data.post.html}
</div>

View File

@ -1,12 +1,15 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from "./$types"; import type { PageData } from "./$types";
export let data: PageData; export let data: PageData;
import { SingleWordLists } from "$lib/BlogCard";
</script> </script>
<svelte:head>
<title>Blog authors | Project Segfault Blog</title>
</svelte:head>
<h1>Blog authors</h1> <h1>Blog authors</h1>
<div class="flex flex-col gap-4"> <SingleWordLists items={data.authors} />
{#each data.authors as author}
<a href="/blog/authors/{author.slug}" class="bg-secondary w-fit p-2 rounded-2 no-underline">{author.name}</a>
{/each}
</div>

View File

@ -1,35 +1,22 @@
<script lang="ts"> <script lang="ts">
import dayjs from "dayjs";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
export let data: PageData; export let data: PageData;
import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
</script> </script>
<svelte:head>
<title>Blog author {data.authorName} | Project Segfault Blog</title>
</svelte:head>
<h1>Blog author {data.authorName}</h1> <h1>Blog author {data.authorName}</h1>
<div class="flex flex-col gap-10"> <PostsContainer>
{#each data.posts as post} {#each data.posts as post}
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2"> <PostOuter>
<span class="text-xl font-bold">{post.title}</span> <Title {post} />
<div class="flex flex-col md:(flex-row gap-4) gap-2"> <Meta {post} />
{#if post.tags.length > 0} <ReadMore {post} />
<div class="flex flex-row items-center gap-2"> </PostOuter>
<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>
<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
<a href="/blog/{post.slug}">Read more...</a>
</div>
{/each} {/each}
</div> </PostsContainer>

View File

@ -1,12 +1,14 @@
<script lang="ts"> <script lang="ts">
import type { PageData } from "./$types"; import type { PageData } from "./$types";
export let data: PageData; export let data: PageData;
import { SingleWordLists } from "$lib/BlogCard";
</script> </script>
<svelte:head>
<title>Blog tags | Project Segfault Blog</title>
</svelte:head>
<h1>Blog tags</h1> <h1>Blog tags</h1>
<div class="flex flex-col gap-4"> <SingleWordLists items={data.tags} />
{#each data.tags as tag}
<a href="/blog/tags/{tag.slug}" class="bg-secondary w-fit p-2 rounded-2 no-underline">{tag.name}</a>
{/each}
</div>

View File

@ -1,35 +1,22 @@
<script lang="ts"> <script lang="ts">
import dayjs from "dayjs";
import type { PageData } from "./$types"; import type { PageData } from "./$types";
export let data: PageData; export let data: PageData;
import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
</script> </script>
<svelte:head>
<title>Blog tag {data.tagName} | Project Segfault Blog</title>
</svelte:head>
<h1>Blog tag {data.tagName}</h1> <h1>Blog tag {data.tagName}</h1>
<div class="flex flex-col gap-10"> <PostsContainer>
{#each data.posts as post} {#each data.posts as post}
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2"> <PostOuter>
<span class="text-xl font-bold">{post.title}</span> <Title {post} />
<div class="flex flex-col md:(flex-row gap-4) gap-2"> <Meta {post} />
{#if post.tags.length > 0} <ReadMore {post} />
<div class="flex flex-row items-center gap-2"> </PostOuter>
<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>
<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
<a href="/blog/{post.slug}">Read more...</a>
</div>
{/each} {/each}
</div> </PostsContainer>