Add author information to blog post layout

langx · Feb 27, 2024 · 2e618fd · 2e618fd
1 parent 6079a8a
commit 2e618fd
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 4 deletions.
diff --git a/src/lib/utils/types.ts b/src/lib/utils/types.ts
@@ -28,6 +28,10 @@ export type BlogPost = {
 	hidden: boolean;
 	slug: string;
 	title: string;
+	author: {
+		name: string;
+		url: string;
+	}
 	date: string;
 	updated: string;
 	excerpt: string;

diff --git a/src/routes/(blog-article)/+layout.svelte b/src/routes/(blog-article)/+layout.svelte
@@ -52,7 +52,13 @@
 			<div class="header">
 				{#if post}
 					<h1>{post.title}</h1>
-					<div class="note">Published on {dateformat(post.date, 'UTC:dd mmmm yyyy')}</div>
+
+					<div class="note">
+						Published on {dateformat(post.date, 'UTC:dd mmmm yyyy')}
+						{#if post.author}
+							<a href={post.author.url} target="_blank"> @{post.author.name}</a>
+						{/if}
+					</div>
 					{#if post.updated}
 						<div class="note">Updated on {dateformat(post.updated, 'UTC:dd mmmm yyyy')}</div>
 					{/if}

diff --git a/src/routes/(blog-article)/blog-posts/+page.md b/src/routes/(blog-article)/blog-posts/+page.md
@@ -4,6 +4,9 @@ slug: blog-posts
 coverImage: /images/posts/blog-posts.png
 date: 2024-02-26T23:55:15.361Z
 excerpt: How to manage existing blog posts and create new ones
+author:
+  name: behics
+  url: https://github.com/behics
 tags:
   - Documentation
 ---

diff --git a/src/routes/(blog-article)/customization/+page.md b/src/routes/(blog-article)/customization/+page.md
@@ -4,6 +4,9 @@ title: How to Customize this Template
 date: 2024-02-26T21:55:27.154Z
 excerpt: How to customize what you're seeing here and make it your own.
 coverImage: /images/posts/customization.png
+author:
+  name: behics
+  url: https://github.com/behics
 tags:
   - Documentation
 ---

diff --git a/src/routes/(blog-article)/open-source-alternative-to-tandem/+page.md b/src/routes/(blog-article)/open-source-alternative-to-tandem/+page.md
@@ -4,6 +4,9 @@ title: 100% Open Source Alternative to Tandem
 date: 2024-02-27T11:15:21.800Z
 excerpt: We've been working on an exciting project for the almost past year.
 coverImage: /images/posts/featured_screenshots.jpeg
+author:
+  name: behics
+  url: https://github.com/behics
 tags:
   - Open Source
   - Language Exchange

diff --git a/src/routes/(blog-article)/project-structure/+page.md b/src/routes/(blog-article)/project-structure/+page.md
@@ -4,6 +4,9 @@ title: Project Structure
 date: 2024-02-26T21:55:21.800Z
 excerpt: How code and structure are organized.
 coverImage: /images/posts/project-structure.png
+author:
+  name: behics
+  url: https://github.com/behics
 tags:
   - Documentation
 ---
@@ -33,10 +36,10 @@ Organisms, in this project, are code blocks that represent a section of a page,
 <CodeBlock lang="html" filename="+page.svelte">
 
 ```html
-<Header />
+<header />
 <Hero />
 <About />
-<Footer />
+<footer />
 ```
 
 </CodeBlock>
@@ -54,4 +57,4 @@ Pages obey the default SvelteKit structure, but can be summarized as follows:
 
 ## Blog Posts
 
-To know how blog posts work and how to create new ones, check out [How Blog Posts Work](/blog-posts).
+To know how blog posts work and how to create new ones, check out [How Blog Posts Work](/blog-posts).