Revamp post Tags and Categories

matfantinel · Feb 15, 2023 · 07c99ec · 07c99ec
1 parent 33ec2da
commit 07c99ec
Show file tree

Hide file tree

Showing 32 changed files with 163 additions and 177 deletions.
diff --git a/frontmatter.json b/frontmatter.json
@@ -1,105 +1,93 @@
 {
-	"$schema": "https://frontmatter.codes/frontmatter.schema.json",
-	"frontMatter.taxonomy.contentTypes": [
-		{
-			"name": "default",
-			"pageBundle": false,
-			"previewPath": null,
-			"fields": [
-				{
-					"title": "Title",
-					"name": "title",
-					"type": "string"
-				},
-				{
-					"title": "Slug",
-					"name": "slug",
-					"type": "string"
-				},
-				{
-					"title": "Excerpt",
-					"name": "excerpt",
-					"type": "string"
-				},
-				{
-					"title": "Publishing date",
-					"name": "date",
-					"type": "datetime",
-					"default": "{{now}}",
-					"isPublishDate": true
-				},
-				{
-					"title": "Last modified date",
-					"name": "updated",
-					"type": "datetime",
-					"isModifiedDate": true
-				},
-				{
-					"title": "Is hidden",
-					"name": "hidden",
-					"type": "draft"
-				},
-				{
-					"title": "Hide Cover Image",
-					"name": "hideCoverImage",
-					"type": "boolean"
-				},
-				{
-					"title": "Tags",
-					"name": "tags",
-					"type": "tags"
-				},
-				{
-					"title": "Categories",
-					"name": "categories",
-					"type": "categories"
-				}
-			]
-		}
-	],
-	"frontMatter.framework.id": "other",
-	"frontMatter.content.publicFolder": "",
-	"frontMatter.content.pageFolders": [
-		{
-			"title": "posts",
-			"path": "[[workspace]]/src/routes/(blog-article)"
-		}
-	],
-	"frontMatter.taxonomy.tags": [
-		".NET",
-		"Analytics",
-		"Angular",
-		"Backend",
-		"C#",
-		"CSS",
-		"Common Errors",
-		"Concepts",
-		"FLOSS",
-		"FOSS",
-		"Favicon",
-		"Free Software",
-		"Freedom",
-		"Front-End",
-		"Games",
-		"GitHub",
-		"Guide",
-		"HTML",
-		"Ionic",
-		"JavaScript",
-		"Libre Software",
-		"Linux",
-		"Meta",
-		"Online Presence",
-		"Open Source",
-		"Optimization",
-		"PWA",
-		"Privacy",
-		"Programming",
-		"SEO",
-		"SVG",
-		"Svelte",
-		"SvelteKit",
-		"Tools"
-	],
-	"frontMatter.taxonomy.categories": ["Misc", "Reviews", "Tech"]
-}
+  "$schema": "https://frontmatter.codes/frontmatter.schema.json",
+  "frontMatter.taxonomy.contentTypes": [
+    {
+      "name": "default",
+      "pageBundle": false,
+      "previewPath": null,
+      "fields": [
+        {
+          "title": "Title",
+          "name": "title",
+          "type": "string"
+        },
+        {
+          "title": "Slug",
+          "name": "slug",
+          "type": "string"
+        },
+        {
+          "title": "Excerpt",
+          "name": "excerpt",
+          "type": "string"
+        },
+        {
+          "title": "Publishing date",
+          "name": "date",
+          "type": "datetime",
+          "default": "{{now}}",
+          "isPublishDate": true
+        },
+        {
+          "title": "Last modified date",
+          "name": "updated",
+          "type": "datetime",
+          "isModifiedDate": true
+        },
+        {
+          "title": "Is hidden",
+          "name": "hidden",
+          "type": "draft"
+        },
+        {
+          "title": "Hide Cover Image",
+          "name": "hideCoverImage",
+          "type": "boolean"
+        },
+        {
+          "title": "Tags",
+          "name": "tags",
+          "type": "tags"
+        },
+        {
+          "title": "Categories",
+          "name": "categories",
+          "type": "categories"
+        },
+        {
+          "title": "Keywords",
+          "name": "keywords",
+          "type": "tags"
+        }
+      ]
+    }
+  ],
+  "frontMatter.framework.id": "other",
+  "frontMatter.content.publicFolder": "",
+  "frontMatter.content.pageFolders": [
+    {
+      "title": "posts",
+      "path": "[[workspace]]/src/routes/(blog-article)"
+    }
+  ],
+  "frontMatter.taxonomy.tags": [
+    "Analytics",
+    "Back-End",
+    "CSS",
+    "Common Errors",
+    "Ethics",
+    "Front-End",
+    "Games",
+    "Guide",
+    "Open Source",
+    "Personal",
+    "Ramble",
+    "Recap",
+    "Review",
+    "Svelte"
+  ],
+  "frontMatter.taxonomy.categories": [
+    "Misc",
+    "Tech"
+  ]
+}
diff --git a/src/lib/components/molecules/BlogPostCard.story.svelte b/src/lib/components/molecules/BlogPostCard.story.svelte
@@ -14,6 +14,7 @@
 				title="Blog Post"
 				coverImage={{ png: 'https://placedog.net/500' }}
 				excerpt="This is a blog post"
+				categories={['Category 1']}
 				tags={['Tag 1', 'Tag 2']}
 			/>
 		</Hst.Variant>
@@ -23,6 +24,7 @@
 				slug="blog-post"
 				title="Blog Post"
 				excerpt="This is a blog post"
+				categories={['Category 1']}
 				tags={['Tag 1', 'Tag 2']}
 				showImage={false}
 			/>

diff --git a/src/lib/components/molecules/BlogPostCard.svelte b/src/lib/components/molecules/BlogPostCard.svelte
@@ -4,10 +4,10 @@
 	import SrcsetImage from '$lib/components/atoms/SrcsetImage.svelte';
 	import type { Srcset } from '$lib/utils/types';
 
+	export let categories: string[] | undefined = undefined;
 	export let title: string;
 	export let coverImage: Srcset | undefined = undefined;
 	export let excerpt: string;
-	// export let readingTime: string;
 	export let slug: string;
 	export let tags: string[] | undefined;
 
@@ -29,17 +29,21 @@
 		<div class="title">
 			<h4>{title}</h4>
 		</div>
-		<!-- <p class="note">{readingTime}</p> -->
 		<p class="text">
 			{excerpt}
 		</p>
 	</div>
 	<div class="footer" slot="footer">
-		{#if tags && tags.length > 0}
+		{#if categories?.length || tags?.length}
 			<div class="tags">
-				{#each tags.slice(0, 2) as tag}
-					<Tag>{tag}</Tag>
-				{/each}
+				{#if categories?.length}
+					<Tag color="secondary">{categories[0]}</Tag>
+				{/if}
+				{#if tags?.length}
+					{#each tags.slice(0, 2) as tag}
+						<Tag>{tag}</Tag>
+					{/each}
+				{/if}
 			</div>
 		{/if}
 	</div>

diff --git a/src/lib/components/organisms/RecentPosts.svelte b/src/lib/components/organisms/RecentPosts.svelte
@@ -23,6 +23,7 @@
 				title={post.title}
 				excerpt={post.excerpt}
 				tags={post.tags}
+				categories={post.categories}
 				showImage={false}
 			/>
 			<!-- readingTime={post.readingTime} -->

diff --git a/src/lib/components/organisms/RelatedPosts.svelte b/src/lib/components/organisms/RelatedPosts.svelte
@@ -17,8 +17,8 @@
 				slug={post.slug}
 				title={post.title}
 				excerpt={post.excerpt}
-				readingTime={post.readingTime}
 				tags={post.tags}
+				categories={post.categories}
 				showImage={false}
 			/>
 		{/each}

diff --git a/src/routes/(blog-article)/+layout.svelte b/src/routes/(blog-article)/+layout.svelte
@@ -47,14 +47,16 @@
 					{#if post.updated}
 						<div class="note">Updated on {dateformat(post.updated, 'UTC:dd mmmm yyyy')}</div>
 					{/if}
-					<!-- {#if post.readingTime}
-						<div class="note">{post.readingTime}</div>
-					{/if} -->
-					{#if post.tags && post.tags.length > 0}
+					{#if post.categories?.length || post.tags?.length}
 						<div class="tags">
-							{#each post.tags as tag}
-								<Tag>{tag}</Tag>
-							{/each}
+							{#if post.categories?.length}
+								<Tag color="secondary">{post.categories[0]}</Tag>
+							{/if}
+							{#if post.tags?.length}
+								{#each post.tags as tag}
+									<Tag>{tag}</Tag>
+								{/each}
+							{/if}
 						</div>
 					{/if}
 				{/if}

diff --git a/src/routes/(blog-article)/2019-year-in-review/+page.md b/src/routes/(blog-article)/2019-year-in-review/+page.md
@@ -4,10 +4,10 @@ title: Cool things I did and learned in 2019
 date: 2019-12-29
 excerpt: A quick look back at 2019 and what I learned during this year.
 tags:
-  - Meta
-  - Open Source
+  - Personal
+  - Recap
 categories:
-  - Tech
+  - Misc
 ---
 
 <script context="module">

diff --git a/src/routes/(blog-article)/2020-year-in-review/+page.md b/src/routes/(blog-article)/2020-year-in-review/+page.md
@@ -2,11 +2,14 @@
 slug: 2020-year-in-review
 title: Looking Back at 2020
 date: 2020-12-28
-excerpt: 2020 definitely wasn't our best year... but let's remember what was good about it.
+excerpt: 2020 definitely wasn't our best year... but let's remember what was good about
+  it.
 tags:
-  - Meta
+  - Personal
+  - Recap
+  - Review
 categories:
-  - Tech
+  - Misc
 ---
 
 <script context="module">
@@ -39,12 +42,6 @@ Initially, I was guilty of that too. Checking many times a day for news, how the
 
 This year I worked on a few personal projects, and tried different approaches with them so I could learn new things. I didn't necessarily get really in-depth into most of the things I learned, but the knowledge I got definitely made me a better developer.
 
-<!-- <Image
-  path="posts/{slug}"
-  filename="pocket-companion"
-  alt="Screenshot of my Pocket Companion app"
-/> -->
-
 <SrcsetImage
   srcset={getSrcsetFromImport(PocketCompanionImage)}
   alt="Screenshot of my Pocket Companion app"

diff --git a/src/routes/(blog-article)/2021-year-in-review/+page.md b/src/routes/(blog-article)/2021-year-in-review/+page.md
@@ -2,11 +2,14 @@
 slug: 2021-year-in-review
 title: 2021 In Review
 date: 2021-12-09
-excerpt: Another year, another yearly review post. 2021 felt like pretty much 2020 part II for a lot of people, me included.
+excerpt: Another year, another yearly review post. 2021 felt like pretty much 2020 part
+  II for a lot of people, me included.
 tags:
-  - Meta
+  - Personal
+  - Recap
+  - Review
 categories:
-  - Tech
+  - Misc
 ---
 
 <script context="module">

diff --git a/src/routes/(blog-article)/2022-year-in-review/+page.md b/src/routes/(blog-article)/2022-year-in-review/+page.md
@@ -4,9 +4,11 @@ title: 2022 In Hindsight
 date: 2022-12-19
 excerpt: A year of big changes, both to me and to the world.
 tags:
-  - Meta
+  - Personal
+  - Recap
+  - Review
 categories:
-  - Tech
+  - Misc
 ---
 
 <script context="module">

diff --git a/src/routes/(blog-article)/angular-pwa-how-to/+page.md b/src/routes/(blog-article)/angular-pwa-how-to/+page.md
@@ -4,11 +4,8 @@ title: How to transform your Angular 6+ app into a PWA
 date: 2019-03-10
 excerpt: Make your Angular app work like a native app on phones and desktop.
 tags:
-  - Angular
-  - PWA
-  - Guide
   - Front-End
-  - JavaScript
+  - Guide
 categories:
   - Tech
 ---

diff --git a/src/routes/(blog-article)/blog-development-sveltekit/+page.md b/src/routes/(blog-article)/blog-development-sveltekit/+page.md
@@ -6,8 +6,9 @@ updated: 2022-12-15
 excerpt: An overview of the experience I've had using these amazing projects.
 tags:
   - Front-End
+  - Guide
   - Svelte
-  - SvelteKit
+  - Open Source
 categories:
   - Tech
 ---