Refactored logic for blog post labels

src/lib/public/blog/urls.ts

@@ -0,0 +1,15 @@
+import { ALL, queryFromLabels } from './utils';
+
+export function makeBlogPostsJsonUrl(labels: string[]): string {
+  const query = queryFromLabels(labels);
+  return `/blog/${query}.json`;
+}
+
+export function makeBlogPostsPageUrl(labels: string[]): string {
+  const query = queryFromLabels(labels);
+  return query === ALL ? '/blog' : `/blog?l=${query}`;
+}
+
+export function makeBlogPostPageUrl(id: number): string {
+  return `/blog/${id}`;
+}

src/lib/public/blog/utils.ts

@@ -29,12 +29,18 @@ export function readingTime(blogContent: string, wpm = 225) {
 
 export const ALL = 'all';
 
+export const LABEL_SEPARATOR = ';';
+
 export function parseQuery(query: string): BlogFetchOptions {
   if (query === ALL) return { labels: [] };
 
   if (Number.isInteger(+query)) {
     return { labels: [], id: Math.abs(+query) };
   }
 
-  return { labels: query.split(';') };
+  return { labels: query.split(LABEL_SEPARATOR) };
+}
+
+export function queryFromLabels(labels: string[]): string {
+  return labels.length ? labels.join(LABEL_SEPARATOR) : ALL;
 }

src/routes/blog/+page.svelte

@@ -5,15 +5,20 @@
   import Spacing from '$lib/public/legacy/spacing.svelte';
   import LabelField from './labelfield.svelte';
   import Labels from './labels.svelte';
+  import {
+    makeBlogPostsJsonUrl,
+    makeBlogPostsPageUrl,
+    makeBlogPostPageUrl,
+  } from '$lib/public/blog/urls';
 
   export let data: PageData;
 
   async function filterPosts(event: CustomEvent) {
-    const query = event.detail.join(';') || 'all';
+    const pageUrl = makeBlogPostsPageUrl(event.detail);
+    history.replaceState({}, '', pageUrl);
 
-    history.replaceState({}, '', location.pathname + (query === 'all' ? '?l=' + query : ''));
-
-    const target = new URL(`/blog/${query}.json`, location.origin);
+    const jsonUrl = makeBlogPostsJsonUrl(event.detail);
+    const target = new URL(jsonUrl, location.origin);
     const response = await fetch(target.toString());
     const blogOutput = await response.json();
     if (blogOutput.posts) data.posts = blogOutput.posts;
@@ -60,7 +65,7 @@
     <ul>
       {#each data.posts as post (post.id)}
         <li class="blog-post">
-          <a href={`/blog/${post.id}`} data-sveltekit-prefetch>
+          <a href={makeBlogPostPageUrl(post.id)} data-sveltekit-prefetch>
             <div class="author">
               <a href={post.author.url}>
                 <img src={post.author.picture} alt="" />
@@ -82,7 +87,7 @@
                   day: 'numeric',
                 })} •
               {readingTime(post.html)} min read
-              <Labels data={post.labels} />
+              <Labels data={post.labels} selectedLabels={data.selectedLabels} />
             </p>
           </a>
         </li>

src/routes/blog/+page.ts

@@ -1,21 +1,21 @@
-import type { LoadEvent } from '@sveltejs/kit';
+import type { PageLoadEvent } from './$types';
 import type { BlogPost } from '$lib/public/blog/types';
-import { parseQuery, ALL } from '$lib/public/blog/utils';
+import { parseQuery } from '$lib/public/blog/utils';
+import { makeBlogPostsJsonUrl } from '$lib/public/blog/urls';
 
-export async function load({ fetch, url }: LoadEvent) {
-  const query = url.searchParams.get('l');
-  const target = `/blog/${query ?? ALL}.json`;
+export async function load({ fetch, url }: PageLoadEvent) {
+  const query = parseQuery(url.searchParams.get('l') || '');
+  const target = makeBlogPostsJsonUrl(query.labels ?? []);
 
   const response = await fetch(target);
   const blogOutput = await response.json();
 
-  const { labels: selectedLabels } = parseQuery(query ?? ALL);
   const posts = (blogOutput.posts ?? []) as BlogPost[];
   const labels = (blogOutput.labels ?? []) as string[];
 
   return {
     posts,
     labels,
-    selectedLabels,
+    selectedLabels: query.labels,
   };
 }

src/routes/blog/labels.svelte

@@ -1,11 +1,26 @@
 <script lang="ts">
+  import { makeBlogPostsPageUrl } from '$lib/public/blog/urls';
+
   export let data: string[] = [];
+  export let selectedLabels: string[] = [];
+
+  // Use the function below to create a URL for the blog posts page building on the
+  // currently selected labels.
+  //
+  // function stackNextLabels(label: string) {
+  //   return selectedLabels.includes(label) ? selectedLabels : [...selectedLabels, label];
+  // }
 </script>
 
 {#if data.length > 0}
   <div class="labels">
     {#each data as label}
-      <small class="label">#{label}</small>
+      {@const isActive = selectedLabels.includes(label)}
+      {#if isActive}
+        <a href={makeBlogPostsPageUrl([label])} data-sveltekit-prefetch>#{label}</a>
+      {:else}
+        <span class="selected">#{label}</span>
+      {/if}
     {/each}
   </div>
 {/if}
@@ -17,10 +32,19 @@
     flex-wrap: wrap;
     gap: 0.2em;
     font-size: 1em;
-    small {
+
+    a,
+    span {
       background-color: var(--acm-light);
       border-radius: 5px;
       padding: 0.3em;
+      text-decoration: none;
+    }
+
+    .selected {
+      background-color: var(--acm-gray);
+      color: var(--perma-light);
+      pointer-events: not-allowed;
     }
   }
 </style>