From 9b5fab47c13804e66f145741568e6cf0ed686a44 Mon Sep 17 00:00:00 2001 From: Youwen Wu Date: Fri, 5 Apr 2024 04:47:59 -0700 Subject: [PATCH] feat: shift props around in components to prepare for real data --- src/globals.d.ts | 10 ++++ src/lib/components/Blog/Article.svelte | 22 +++++--- src/lib/components/Blog/PostCard.svelte | 18 +++---- src/lib/components/Blog/PostMetadata.svelte | 11 +++- src/routes/blog/+page.svelte | 60 +++++++++++++++------ src/routes/blog/[year]/[slug]/+page.svelte | 19 ++++--- 6 files changed, 97 insertions(+), 43 deletions(-) diff --git a/src/globals.d.ts b/src/globals.d.ts index e69de29..28bc0d6 100644 --- a/src/globals.d.ts +++ b/src/globals.d.ts @@ -0,0 +1,10 @@ +interface BlogDocument { + time: number; + title: string; + content: string; + primaryTags: string[]; + secondaryTags: string[]; + blurb: string; + image?: string; + description: string; +} diff --git a/src/lib/components/Blog/Article.svelte b/src/lib/components/Blog/Article.svelte index 2b732d7..9ea3c30 100644 --- a/src/lib/components/Blog/Article.svelte +++ b/src/lib/components/Blog/Article.svelte @@ -1,29 +1,35 @@
The Coredump
-
{title}
+
{doc.title}

- {title} + {doc.title}

- {#if description} + {#if doc.description}

- {description} + {doc.description}

{/if} +
- {@html content} + {@html doc.content}
diff --git a/src/lib/components/Blog/PostCard.svelte b/src/lib/components/Blog/PostCard.svelte index ddb001f..11a931b 100644 --- a/src/lib/components/Blog/PostCard.svelte +++ b/src/lib/components/Blog/PostCard.svelte @@ -5,20 +5,18 @@ import PostMetadata from './PostMetadata.svelte'; import { faker } from '@faker-js/faker'; - export let title: string; - export let blurb: string; - export let description: string; + export let doc: BlogDocument; -

{title}

-

{blurb}

+

{doc.title}

+

{doc.blurb}

faker.hacker.noun())} - secondaryTags={Array.from({ length: 2 }, () => faker.hacker.noun())} - time={Date.now() / 1000} - length={faker.number.int(1000)} + primaryTags={doc.primaryTags} + secondaryTags={doc.secondaryTags} + time={doc.time} + length={doc.content.split(' ').length} /> @@ -28,7 +26,7 @@ class="col-span-3 md:col-span-1 rounded-2xl shadow-md" />
-

{description}

+

{doc.description}

diff --git a/src/lib/components/Blog/PostMetadata.svelte b/src/lib/components/Blog/PostMetadata.svelte index f130621..fb3420d 100644 --- a/src/lib/components/Blog/PostMetadata.svelte +++ b/src/lib/components/Blog/PostMetadata.svelte @@ -9,6 +9,7 @@ - `secondaryTags` - An array of strings representing the secondary tags of the post. - `time` - A unix epoch integer representing the time the post was published. - `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. -->
-

{date.format('MM/DD/YY')}

+ {#if !reverseDateAndRest} +

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

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

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

+ {/if}
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte index 62dab86..c89357f 100644 --- a/src/routes/blog/+page.svelte +++ b/src/routes/blog/+page.svelte @@ -17,6 +17,18 @@ onMount(() => { loaded = true; }); + + let testDoc: BlogDocument = { + title: 'An introduction to Taylor Series', + primaryTags: ['Computer Science', 'Mathematics'], + secondaryTags: ['Calculus', 'Taylor Series'], + time: Date.now() / 1000, + content: + "This is a test post to test the layout and rendering of the blog. It's taken directly from my obsidian notebook, so some of the formatting may be off. The blog supports KaTeX math rendering and GitHub markdown alerts. Support for syntax highlighting and graphs is coming soon.", + blurb: 'A brief introduction to Taylor Series and its applications in calculus.', + description: + 'An insightful and longer description of the post. This should be a bit more detailed than the blurb. It should give the reader a good idea of what the post is about.' + }; @@ -43,22 +55,38 @@ Latest Posts {#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}
diff --git a/src/routes/blog/[year]/[slug]/+page.svelte b/src/routes/blog/[year]/[slug]/+page.svelte index afb9956..5e2bf64 100644 --- a/src/routes/blog/[year]/[slug]/+page.svelte +++ b/src/routes/blog/[year]/[slug]/+page.svelte @@ -6,13 +6,18 @@ import { cn } from '$lib/utils.js'; import Article from '$lib/components/Blog/Article.svelte'; - let doc = { - title: 'Test Post', - description: 'An insightful and succinct blurb about the post.' - }; - export let data: PageData; - $: markdown = data.markdown; + + let doc: BlogDocument = { + title: 'Test Post', + primaryTags: ['Computer Science', 'Mathematics'], + secondaryTags: ['Calculus', 'Taylor Series'], + time: Date.now() / 1000, + content: data.markdown, + blurb: 'A short and succinct, yet descriptive blurb about the post.', + description: + 'An insightful and longer description of the post. This should be a bit more detailed than the blurb. It should give the reader a good idea of what the post is about.' + }; // $: doc = data.metadata; // $: componentSource = data.metadata.source?.replace('default', $config.style ?? 'default'); @@ -24,5 +29,5 @@
-
+