forked from ProjectSegfault/website
use components on blog
This commit is contained in:
parent
31df1859cb
commit
fae1d2ce13
GPG Key ID:
267BF5C6677944ED
24
src/lib/BlogCard/Meta.svelte
Normal file
24
src/lib/BlogCard/Meta.svelte
Normal 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
7
src/lib/BlogCard/PostContent.svelte
Normal 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
3
src/lib/BlogCard/PostOuter.svelte
Normal 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
7
src/lib/BlogCard/PostsContainer.svelte
Normal 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
6
src/lib/BlogCard/ReadMore.svelte
Normal 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
10
src/lib/BlogCard/SingleWordLists.svelte
Normal 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
5
src/lib/BlogCard/Title.svelte
Normal 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
5
src/lib/BlogCard/TitleWithBackButton.svelte
Normal 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
8
src/lib/BlogCard/index.ts
Normal 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";
|
||||
@ -1,9 +1,9 @@
|
||||
<script lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import Hero from "$lib/Hero.svelte";
|
||||
import LinkButton from "$lib/LinkButton.svelte";
|
||||
import type { PageData } from "./$types";
|
||||
export let data: PageData;
|
||||
import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
@ -34,30 +34,12 @@
|
||||
</div>
|
||||
</Hero>
|
||||
|
||||
<div class="flex flex-col gap-10 mt-16">
|
||||
<PostsContainer hasMt>
|
||||
{#each data.posts as post}
|
||||
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
|
||||
<span class="text-xl font-bold">{post.title}</span>
|
||||
<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>
|
||||
<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
|
||||
<a href="/blog/{post.slug}">Read more...</a>
|
||||
</div>
|
||||
<PostOuter>
|
||||
<Title {post} />
|
||||
<Meta {post} />
|
||||
<ReadMore {post} />
|
||||
</PostOuter>
|
||||
{/each}
|
||||
</div>
|
||||
</PostsContainer>
|
||||
@ -1,28 +1,16 @@
|
||||
<script lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import type { PageData } from "./$types";
|
||||
export let data: PageData;
|
||||
|
||||
import { PostOuter, TitleWithBackButton, Meta, PostContent } from "$lib/BlogCard";
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
|
||||
<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>
|
||||
<div class="flex flex-col md:(flex-row gap-4) gap-2">
|
||||
{#if data.post.tags.length > 0}
|
||||
<div class="flex flex-row items-center gap-2">
|
||||
<div class="i-fa6-solid:tags" />
|
||||
{#each data.post.tags as tag}
|
||||
<a href="/blog/tags/{tag.slug}" class="no-underline">{tag.name}</a>
|
||||
{/each}
|
||||
</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>
|
||||
<svelte:head>
|
||||
<title>{data.post.title} | Project Segfault Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<PostOuter>
|
||||
<TitleWithBackButton {data} />
|
||||
<Meta post={data.post} />
|
||||
<PostContent {data} />
|
||||
</PostOuter>
|
||||
@ -1,12 +1,15 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from "./$types";
|
||||
export let data: PageData;
|
||||
|
||||
import { SingleWordLists } from "$lib/BlogCard";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Blog authors | Project Segfault Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Blog authors</h1>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
{#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>
|
||||
<SingleWordLists items={data.authors} />
|
||||
|
||||
|
||||
@ -1,35 +1,22 @@
|
||||
<script lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import type { PageData } from "./$types";
|
||||
export let data: PageData;
|
||||
|
||||
import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Blog author {data.authorName} | Project Segfault Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Blog author {data.authorName}</h1>
|
||||
|
||||
<div class="flex flex-col gap-10">
|
||||
<PostsContainer>
|
||||
{#each data.posts as post}
|
||||
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
|
||||
<span class="text-xl font-bold">{post.title}</span>
|
||||
<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>
|
||||
<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
|
||||
<a href="/blog/{post.slug}">Read more...</a>
|
||||
</div>
|
||||
<PostOuter>
|
||||
<Title {post} />
|
||||
<Meta {post} />
|
||||
<ReadMore {post} />
|
||||
</PostOuter>
|
||||
{/each}
|
||||
</div>
|
||||
</PostsContainer>
|
||||
@ -1,12 +1,14 @@
|
||||
<script lang="ts">
|
||||
import type { PageData } from "./$types";
|
||||
export let data: PageData;
|
||||
|
||||
import { SingleWordLists } from "$lib/BlogCard";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Blog tags | Project Segfault Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Blog tags</h1>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
{#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>
|
||||
<SingleWordLists items={data.tags} />
|
||||
@ -1,35 +1,22 @@
|
||||
<script lang="ts">
|
||||
import dayjs from "dayjs";
|
||||
import type { PageData } from "./$types";
|
||||
export let data: PageData;
|
||||
|
||||
import { PostsContainer, PostOuter, Title, Meta, ReadMore } from "$lib/BlogCard";
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Blog tag {data.tagName} | Project Segfault Blog</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1>Blog tag {data.tagName}</h1>
|
||||
|
||||
<div class="flex flex-col gap-10">
|
||||
<PostsContainer>
|
||||
{#each data.posts as post}
|
||||
<div class="flex flex-col gap-4 bg-secondary p-4 rounded-2">
|
||||
<span class="text-xl font-bold">{post.title}</span>
|
||||
<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>
|
||||
<span>{post.plaintext.split(" ").slice(0, 20).join(" ") + "..."}</span>
|
||||
<a href="/blog/{post.slug}">Read more...</a>
|
||||
</div>
|
||||
<PostOuter>
|
||||
<Title {post} />
|
||||
<Meta {post} />
|
||||
<ReadMore {post} />
|
||||
</PostOuter>
|
||||
{/each}
|
||||
</div>
|
||||
</PostsContainer>
|
||||
Loading…
Reference in New Issue
Block a user