Update UI for selected tag

package.json

@@ -21,9 +21,11 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@tailwindcss/typography": "^0.5.15",
+		"@types/nprogress": "^0.2.3",
 		"autoprefixer": "^10.4.19",
 		"axios": "^1.7.7",
 		"mdsvex-relative-images": "^1.0.3",
+		"nprogress": "^0.2.0",
 		"postcss": "^8.4.38",
 		"prettier": "^3.3.2",
 		"prettier-plugin-svelte": "^3.1.2",

src/lib/app.css

@@ -2,6 +2,10 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+	--loader: #dd7409;
+}
+
 html {
 	scroll-behavior: smooth;
 }

src/lib/assets/styles/nprogress.css

@@ -0,0 +1,84 @@
+/* Make clicks pass-through */
+#nprogress {
+	pointer-events: none;
+}
+
+#nprogress .bar {
+	background: var(--loader);
+	position: fixed;
+	z-index: 1031;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 2.3px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+	display: block;
+	position: absolute;
+	right: 0px;
+	width: 100px;
+	height: 100%;
+	box-shadow:
+		0 0 10px var(--loader),
+		0 0 5px var(--loader);
+	opacity: 1;
+
+	-webkit-transform: rotate(3deg) translate(0px, -4px);
+	-ms-transform: rotate(3deg) translate(0px, -4px);
+	transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+	display: block;
+	position: fixed;
+	z-index: 1031;
+	top: 15px;
+	right: 15px;
+}
+
+#nprogress .spinner-icon {
+	width: 18px;
+	height: 18px;
+	box-sizing: border-box;
+
+	border: solid 2px transparent;
+	border-top-color: var(--loader);
+	border-left-color: var(--loader);
+	border-radius: 50%;
+
+	-webkit-animation: nprogress-spinner 400ms linear infinite;
+	animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+	overflow: hidden;
+	position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+	position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+	0% {
+		-webkit-transform: rotate(0deg);
+	}
+
+	100% {
+		-webkit-transform: rotate(360deg);
+	}
+}
+
+@keyframes nprogress-spinner {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}

src/lib/components/blogs/BlogItem.svelte

@@ -6,6 +6,7 @@
 	import type { Blog } from '$utils/constants'
 
 	export let post: Blog
+	export let taggedFilter: string | null = null
 
 	let hover: boolean = false
 </script>
@@ -44,7 +45,7 @@
 				{#if post.tags.length}
 					<div class="flex flex-row flex-wrap gap-2 py-2">
 						{#each post.tags as tag}
-							<Tag text={tag} />
+							<Tag text={tag} classes={taggedFilter == tag?.toLowerCase() ? '!font-bold' : ''} />
 						{/each}
 					</div>
 				{/if}

src/lib/components/blogs/Blogs.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores'
 	import BlogItem from '$lib/components/blogs/BlogItem.svelte'
+	import Tag from '$lib/components/elements/Tag.svelte'
 	import SearchBox from '$lib/components/SearchBox.svelte'
 	import Title from '$lib/components/Title.svelte'
 	import type { Blog } from '$utils/constants'
@@ -10,7 +11,7 @@
 	export let title = ''
 	export let subtitle = ''
 	export let posts: Blog[] = []
-	export let tags: any[] = []
+	export let tag: string | null = null
 	export let search = false
 	export let h2 = false
 	export let count = 0
@@ -37,9 +38,12 @@
 					<SearchBox />
 				{/if}
 
-				<!-- {#if tags.length}
-					<TagList {tags} />
-				{/if} -->
+				{#if tag}
+					<div class="flex w-full flex-row justify-center gap-2">
+						<p class=" text-arkGray3">Showing blog posts tagged with:</p>
+						<Tag text={tag} classes="capitalize" removeButton />
+					</div>
+				{/if}
 			</div>
 		</div>
 	</div>
@@ -48,7 +52,7 @@
 	{:else}
 		<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
 			{#each currentPosts as post}
-				<BlogItem {post} />
+				<BlogItem {post} taggedFilter={tag} />
 			{/each}
 		</div>
 	{/if}

src/lib/components/elements/Tag.svelte

@@ -1,16 +1,28 @@
 <script lang="ts">
+	import { goto } from '$app/navigation'
 	import { base } from '$app/paths'
+	import Icon from '@iconify/svelte'
 	import { slug } from 'github-slugger'
 
 	export let text
 	export let classes = ''
+	export let removeButton = false
 
-	let url = slug(text)
+	$: url = slug(text)
 </script>
 
 <a
 	href={base + '/tags/' + url}
-	class="rounded-md border bg-arkGray7 px-1 text-sm font-medium hover:bg-arkGray5 {classes}"
+	class="flex items-center gap-1.5 rounded-md border bg-arkGray7 px-2 py-[2px] text-sm font-medium hover:bg-arkGray5 {classes}"
 >
 	{text}
+
+	{#if removeButton}
+		<button
+			on:click|preventDefault|stopPropagation={() => goto('/blog')}
+			class="border-l border-black"
+		>
+			<Icon icon="majesticons:multiply" />
+		</button>
+	{/if}
 </a>

src/routes/+layout.svelte

@@ -1,12 +1,30 @@
 <script lang="ts">
+	import { navigating } from '$app/stores'
 	import '$lib/app.css'
+	import '$lib/assets/styles/nprogress.css'
 	import Footer from '$lib/components/layouts/Footer.svelte'
 	import Header from '$lib/components/layouts/Header.svelte'
 	import '@fontsource/jost'
+	import NProgress from 'nprogress'
 	import { setContext } from 'svelte'
 
 	export let data
 	setContext('apps', data.apps)
+
+	NProgress.configure({
+		minimum: 0.5,
+		showSpinner: false,
+		speed: 5,
+		trickleSpeed: 200,
+	})
+
+	$: {
+		if ($navigating) {
+			NProgress.start()
+		} else {
+			NProgress.done()
+		}
+	}
 </script>
 
 <div class="mx-auto md:px-0">

src/routes/tags/[tag]/+page.server.ts

@@ -1,14 +1,14 @@
 export const prerender = true
 
-import type { Blog, Tag } from '$utils/constants'
+import type { Blog, TagType } from '$utils/constants'
 import { getEntries, getTags } from '$utils/entries'
 import { error } from '@sveltejs/kit'
 import { slug } from 'github-slugger'
 
 /** @type {import('./$types').EntryGenerator} */
 export function entries() {
-	const tags = (getTags() as Tag[]) || []
-	return tags.map((tag: Tag) => ({ tag: tag.slug }))
+	const tags = (getTags() as TagType[]) || []
+	return tags.map((tag: TagType) => ({ tag: tag.slug }))
 }
 
 function slugsArray(tags: string[]) {

src/routes/tags/[tag]/+page.svelte

@@ -8,4 +8,4 @@
 
 <Head title="Blog" />
 
-<Blogs title={tag} {posts} />
+<Blogs title={'Blog'} {posts} {tag} />

src/utils/constants.ts

@@ -153,7 +153,7 @@ export interface Issue {
 	languages: string[]
 }
 
-export interface Tag {
+export interface TagType {
 	text: string
 	slug: string
 	count: number

src/utils/entries.ts

@@ -1,6 +1,6 @@
 import { browser } from '$app/environment'
 import { config, user } from '$lib/config'
-import type { Blog, Tag } from '$utils/constants'
+import type { Blog, TagType } from '$utils/constants'
 import { slug } from 'github-slugger'
 
 // we require some server-side APIs to parse all metadata
@@ -102,7 +102,7 @@ export const getTags = () => {
 	let tags = posts
 		.flatMap(({ tags }) => tags)
 		.map((tag) => ({ text: tag, slug: slug(tag) }))
-		.reduce((arr: Tag[], tag) => {
+		.reduce((arr: TagType[], tag) => {
 			let index = arr.findIndex((t) => t.slug === tag.slug)
 			if (index > -1) arr[index].count++
 			else arr.push({ text: tag.text, slug: tag.slug, count: 1 })