From 199d95680a4590ac617c10bd6afb861899c6fce3 Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Fri, 12 Apr 2024 14:06:38 -0700 Subject: [PATCH] feat: crawl posts from blog directory --- blog/2024/taylor-series/post.toml | 7 +-- blog/2024/test-post/post.toml | 5 +- src/globals.d.ts | 18 +++++- src/lib/components/Blog/Article.svelte | 9 +-- src/lib/components/Blog/Crumbs.svelte | 20 +++++++ src/lib/components/Blog/PostCard.svelte | 20 ++++--- src/lib/components/Blog/PostMetadata.svelte | 13 +++-- src/lib/components/Navbar/Navbar.svelte | 4 +- src/lib/components/Toc/TocHeader.svelte | 4 +- src/lib/utils/crawl.ts | 22 ++------ src/routes/blog/+page.server.ts | 8 +++ src/routes/blog/+page.svelte | 62 ++++++--------------- src/routes/blog/[...slug]/+page.server.ts | 8 +-- src/routes/blog/[...slug]/+page.svelte | 6 +- 14 files changed, 108 insertions(+), 98 deletions(-) create mode 100644 src/lib/components/Blog/Crumbs.svelte create mode 100644 src/routes/blog/+page.server.ts diff --git a/blog/2024/taylor-series/post.toml b/blog/2024/taylor-series/post.toml index b366df1..9b38936 100644 --- a/blog/2024/taylor-series/post.toml +++ b/blog/2024/taylor-series/post.toml @@ -1,17 +1,16 @@ title = "A Brief Introduction to Taylor Series" [manifest] -date = 2024-01-01T12:00:00Z +date = 2024-04-12T20:48:40.799Z blurb = "The essence of calculus." description = "A brief introduction to Taylor series, a powerful tool in calculus. We will discuss the intuition behind Taylor series, how to derive them, and how to use them to approximate functions. We will also discuss the limitations of Taylor series and how to overcome them. This article is aimed at beginners who are interested in calculus and want to learn more about Taylor series." +type = "article" +authors = ["Youwen Wu"] [manifest.tags] primary = ["math", "calculus"] secondary = ["taylor series", "numerical methods", "approximation"] -[manifest.authors] -["Youwen Wu"] - [cover] src = "https://i.ytimg.com/vi/3d6DsjIBzJ4/maxresdefault.jpg" alt = "visual of taylor series for a quadratic function" diff --git a/blog/2024/test-post/post.toml b/blog/2024/test-post/post.toml index 25fade9..dfee56a 100644 --- a/blog/2024/test-post/post.toml +++ b/blog/2024/test-post/post.toml @@ -1,10 +1,11 @@ title = "My Awesome Blog Post" [manifest] -date = 2024-01-01T12:00:00Z -author = "Youwen Wu" +date = 2024-04-12T20:48:40.799Z +authors = ["Youwen Wu"] blurb = "A blog post about Rust and WebAssembly" description = "A blog post about Rust and WebAssembly, and how to use it in web development. This post will cover the basics of Rust and WebAssembly, and how to use it in web development. We will also discuss the benefits of using Rust and WebAssembly, and how it can help you build faster and more efficient web applications." +type = "article" [manifest.tags] primary = ["Rust", "WebAssembly"] diff --git a/src/globals.d.ts b/src/globals.d.ts index b7f664c..b553086 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -1,5 +1,5 @@ interface BlogDocument { - time: number; + date: Date; title: string; content: string; primaryTags: string[]; @@ -7,6 +7,22 @@ interface BlogDocument { blurb: string; image?: string; description: string; + slug; } declare module 'remark-sectionize'; + +type PostMeta = { + title: string; + manifest: { + authors: string[]; + date: Date; + tags: { primary: string[]; secondary: string[] }; + blurb: string; + description: string; + }; + cover: { + src: string; + alt: string; + }; +}; diff --git a/src/lib/components/Blog/Article.svelte b/src/lib/components/Blog/Article.svelte index 0bde8e6..e3b0fde 100644 --- a/src/lib/components/Blog/Article.svelte +++ b/src/lib/components/Blog/Article.svelte @@ -1,16 +1,13 @@
-
-
The Coredump
- -
{doc.title}
-
+

@@ -22,7 +19,7 @@ diff --git a/src/lib/components/Blog/Crumbs.svelte b/src/lib/components/Blog/Crumbs.svelte new file mode 100644 index 0000000..1e0b103 --- /dev/null +++ b/src/lib/components/Blog/Crumbs.svelte @@ -0,0 +1,20 @@ + + +
+ The Coredump + + {#each trail as crumb, i} +
{crumb}
+ + {/each} +
{title}
+
diff --git a/src/lib/components/Blog/PostCard.svelte b/src/lib/components/Blog/PostCard.svelte index a860079..b2f4078 100644 --- a/src/lib/components/Blog/PostCard.svelte +++ b/src/lib/components/Blog/PostCard.svelte @@ -5,17 +5,23 @@ import PostMetadata from './PostMetadata.svelte'; import { faker } from '@faker-js/faker'; - export let doc: BlogDocument; + export let doc: { + metadata: PostMeta; + content: string; + slug: string; + }; -

{doc.title}

-

{doc.blurb}

+

+ {doc.metadata.title} +

+

{doc.metadata.manifest.blurb}

 @@ -26,7 +32,7 @@ class="col-span-3 md:col-span-1 rounded-2xl shadow-md" />
-

{doc.description}

+

{doc.metadata.manifest.description}

diff --git a/src/lib/components/Blog/PostMetadata.svelte b/src/lib/components/Blog/PostMetadata.svelte index d8ee9d0..92f3f8b 100644 --- a/src/lib/components/Blog/PostMetadata.svelte +++ b/src/lib/components/Blog/PostMetadata.svelte @@ -7,7 +7,7 @@ - `primaryTags` - An array of strings representing the primary tags of the post. - `secondaryTags` - An array of strings representing the secondary tags of the post. - - `time` - A unix epoch integer representing the time the post was published. + - `date` - - `length` - An integer representing amount of words in the post. - `reverseDateAndRest` - A boolean that determines whether the date should be displayed at the bottom of the metadata. @@ -20,21 +20,22 @@ import Badge from '../ui/badge/badge.svelte'; import dayjs from 'dayjs'; import relativeTime from 'dayjs/plugin/relativeTime'; + import { onMount } from 'svelte'; dayjs.extend(relativeTime); export let primaryTags: string[] = []; export let secondaryTags: string[] = []; - export let time: number; + export let date: Date; export let length: number; export let reverseDateAndRest: boolean = false; - let date = dayjs(time * 1000); + let dayjsDate = dayjs(date);
{#if !reverseDateAndRest} -

{date.format('MMMM DD, YYYY')}

+

{dayjsDate.format('MMMM DD, YYYY')}

{/if} {#each primaryTags as tag} @@ -46,9 +47,9 @@ - {dayjs(date).fromNow()} | {Math.ceil(length / 238)} min read | {length} words + {dayjsDate.fromNow()} | {Math.ceil(length / 238)} min read | {length} words {#if reverseDateAndRest} -

{date.format('MMMM DD, YYYY')}

+

{dayjsDate.format('MMMM DD, YYYY')}

{/if}
diff --git a/src/lib/components/Navbar/Navbar.svelte b/src/lib/components/Navbar/Navbar.svelte index e142629..615deb7 100644 --- a/src/lib/components/Navbar/Navbar.svelte +++ b/src/lib/components/Navbar/Navbar.svelte @@ -26,7 +26,9 @@ }); -

- {#each Array(5) as _, i} - {#if i > 0} -
- faker.hacker.noun()), - secondaryTags: Array(2).map(() => faker.hacker.noun()), - time: Date.now() / 1000, - content: faker.lorem.paragraphs(5), - blurb: faker.hacker.phrase(), - description: faker.lorem.paragraphs(2) - }} - /> -
- {:else} -
- -
- {/if} + {#each postArray as post, i} +
+ +
{/each}
diff --git a/src/routes/blog/[...slug]/+page.server.ts b/src/routes/blog/[...slug]/+page.server.ts index c87e875..904fde2 100644 --- a/src/routes/blog/[...slug]/+page.server.ts +++ b/src/routes/blog/[...slug]/+page.server.ts @@ -1,11 +1,8 @@ -import crawl from '$lib/utils/crawl'; +import { posts } from '$lib/utils/crawl'; import { error } from '@sveltejs/kit'; import type { EntryGenerator, PageServerLoad } from './$types'; import parseMarkdown from '$lib/utils/parseMarkdown'; -const posts = await crawl(); -if (!posts) throw new Error('No posts found!'); - export const load: PageServerLoad = async ({ params }) => { const post = posts[params.slug]; @@ -17,7 +14,8 @@ export const load: PageServerLoad = async ({ params }) => { return { ...post, - content: parsed + content: parsed, + slug: params.slug }; }; diff --git a/src/routes/blog/[...slug]/+page.svelte b/src/routes/blog/[...slug]/+page.svelte index eaf2117..d6e7a34 100644 --- a/src/routes/blog/[...slug]/+page.svelte +++ b/src/routes/blog/[...slug]/+page.svelte @@ -4,6 +4,7 @@ import { toc, createTocStore } from '@svelte-put/toc'; import StickyToc from '$lib/components/Toc/StickyToc.svelte'; import TocHeader from '$lib/components/Toc/TocHeader.svelte'; + import { DateRangeField } from 'bits-ui'; const tocStore = createTocStore(); @@ -13,10 +14,11 @@ title: data.metadata.title, primaryTags: data.metadata.manifest.tags.primary, secondaryTags: data.metadata.manifest.tags.secondary, - time: data.metadata.manifest.date.getTime() / 1000, + date: data.metadata.manifest.date, content: data.content, blurb: data.metadata.manifest.blurb, - description: data.metadata.manifest.description + description: data.metadata.manifest.description, + slug: data.slug }; // $: doc = data.metadata; // $: componentSource = data.metadata.source?.replace('default', $config.style ?? 'default');