feat: shift props around in components to prepare for real data

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;
+}

src/lib/components/Blog/Article.svelte

@@ -1,29 +1,35 @@
 <script lang="ts">
 	import { ChevronRight } from 'svelte-radix';
+	import PostMetadata from './PostMetadata.svelte';
 
-	export let content: string;
-	export let title: string;
-	export let description: string;
+	export let doc: BlogDocument;
 </script>
 
 <article>
 	<div class="mb-4 flex items-center space-x-1 text-sm text-muted-foreground">
 		<div class="overflow-hidden text-ellipsis whitespace-nowrap">The Coredump</div>
 		<ChevronRight class="h-4 w-4" />
-		<div class="font-medium text-foreground">{title}</div>
+		<div class="font-medium text-foreground">{doc.title}</div>
 	</div>
 	<div class="space-y-2">
 		<h1 class="scroll-m-20 text-5xl font-bold font-serif tracking-tight">
-			{title}
+			{doc.title}
 		</h1>
-		{#if description}
+		{#if doc.description}
 			<p class="text-balance text-lg text-muted-foreground">
-				{description}
+				{doc.description}
 			</p>
 		{/if}
+		<PostMetadata
+			primaryTags={doc.primaryTags}
+			secondaryTags={doc.secondaryTags}
+			time={doc.time}
+			length={doc.content.length}
+			reverseDateAndRest
+		/>
 	</div>
 
 	<div class="markdown-body mt-8 font-serif">
-		{@html content}
+		{@html doc.content}
 	</div>
 </article>

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;
 </script>
 
 <Card.Root>
 	<Card.Header>
-		<h3 class="text-4xl font-serif font-bold mb-4 leading-tight">{title}</h3>
-		<p class="text-muted-foreground text-xl">{blurb}</p>
+		<h3 class="text-4xl font-serif font-bold mb-4 leading-tight">{doc.title}</h3>
+		<p class="text-muted-foreground text-xl">{doc.blurb}</p>
 		<PostMetadata
-			primaryTags={Array.from({ length: 3 }, () => 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}
 		/>
 	</Card.Header>
 	<Card.Content class="grid grid-cols-3 gap-6">
@@ -28,7 +26,7 @@
 			class="col-span-3 md:col-span-1 rounded-2xl shadow-md"
 		/>
 		<div class="flex flex-col justify-around col-span-3 md:col-span-2 gap-4">
-			<p class="text-primary/95 font-serif leading-relaxed">{description}</p>
+			<p class="text-primary/95 font-serif leading-relaxed">{doc.description}</p>
 			<Button variant="outline" href="/blog/2024/test-post" class="text-xl flex-grow sm:flex-grow-0"
 				>Read More</Button
 			>

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.
  -->
 
 <script lang="ts">
@@ -22,12 +23,15 @@
 	export let secondaryTags: string[] = [];
 	export let time: number;
 	export let length: number;
+	export let reverseDateAndRest: boolean = false;
 
 	let date = dayjs(time * 1000);
 </script>
 
 <div class="grid grid-cols-1">
-	<p class="text-muted-foreground/80 my-1 text-lg">{date.format('MM/DD/YY')}</p>
+	{#if !reverseDateAndRest}
+		<p class="text-muted-foreground/80 my-1 text-lg">{date.format('MMMM DD, YYYY')}</p>
+	{/if}
 	<span class="flex items-center flex-wrap my-2 gap-2">
 		{#each primaryTags as tag}
 			<Badge>{tag}</Badge>
@@ -38,6 +42,9 @@
 	</span>
 	<!-- Assuming adult silent reading rate of 238 wpm -->
 	<span class="text-muted-foreground text-sm mt-2">
-		{dayjs(date).fromNow()} | {Math.round(length / 238)} min read | {length} words
+		{dayjs(date).fromNow()} | {Math.ceil(length / 238)} min read | {length} words
 	</span>
+	{#if reverseDateAndRest}
+		<p class="text-muted-foreground/80 text-xl mt-4">{date.format('MMMM DD, YYYY')}</p>
+	{/if}
 </div>

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.'
+	};
 </script>
 
 <svelte:head>
@@ -43,22 +55,38 @@
 						Latest Posts
 					</h2>
 					{#each Array(5) as _, i}
-						<div
-							class="grid grid-cols-1 gap-4 mt-8"
-							in:fly|global={{ x: -50, delay: 350 + i * 100 }}
-						>
-							<PostCard
-								title={faker.hacker.noun() +
-									' ' +
-									faker.hacker.verb() +
-									' ' +
-									faker.hacker.adjective() +
-									' ' +
-									faker.hacker.noun()}
-								blurb={faker.hacker.phrase()}
-								description={faker.lorem.paragraphs(2)}
-							/>
-						</div>
+						{#if i > 0}
+							<div
+								class="grid grid-cols-1 gap-4 mt-8"
+								in:fly|global={{ x: -50, delay: 350 + i * 100 }}
+							>
+								<PostCard
+									doc={{
+										title:
+											faker.hacker.noun() +
+											' ' +
+											faker.hacker.verb() +
+											' ' +
+											faker.hacker.adjective() +
+											' ' +
+											faker.hacker.noun(),
+										primaryTags: Array(2).map(() => 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)
+									}}
+								/>
+							</div>
+						{:else}
+							<div
+								class="grid grid-cols-1 gap-4 mt-8"
+								in:fly|global={{ x: -50, delay: 350 + i * 100 }}
+							>
+								<PostCard doc={testDoc} />
+							</div>
+						{/if}
 					{/each}
 				</div>
 				<div in:fly={{ y: -50, delay: 300 }} class="col-span-3 md:col-span-1">

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');
 </script>
@@ -24,5 +29,5 @@
 </svelte:head>
 
 <main class="max-w-4xl md:mx-auto mx-4 mt-8 mb-14">
-	<Article title={doc.title} description={doc.description} content={markdown} />
+	<Article {doc} />
 </main>