Blog: Added filter by tags

src/lib/common/utils.ts

@@ -0,0 +1,11 @@
+interface WithLabels {
+  labels: string[];
+}
+
+export function discernTags(posts: WithLabels[]): string[] {
+  const tags = new Set([]);
+  for (const post of posts) {
+    post.labels.forEach((label) => tags.add(label));
+  }
+  return Array.from(tags).sort();
+}

src/lib/components/utils/acm-tagfield.svelte

@@ -0,0 +1,128 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let tags: string[] = [];
+  export let selectedTags: string[] = [];
+  export let label = '';
+  export let resetButton = '';
+  export let urlSearchParamKey = '';
+
+  const dispatch = createEventDispatcher();
+  let hasSelectedTags = selectedTags.length > 0;
+
+  function selectTag(event: MouseEvent) {
+    event.preventDefault();
+
+    if (selectedTags.includes(this.innerText)) {
+      selectedTags = selectedTags.filter((t) => t !== this.innerText);
+    } else {
+      selectedTags.push(this.innerText);
+    }
+
+    this.classList.toggle('selected');
+    hasSelectedTags = selectedTags.length > 0;
+    dispatch('change', selectedTags);
+  }
+
+  function deselectAll(event: MouseEvent) {
+    event.preventDefault();
+    selectedTags = [];
+    hasSelectedTags = false;
+    dispatch('change', selectedTags);
+  }
+
+  function createTagURL(tag: string) {
+    if (urlSearchParamKey === '') {
+      return '';
+    }
+    const nextTags = selectedTags.includes(tag)
+      ? selectedTags.filter((t) => t !== tag)
+      : selectedTags.concat([tag]);
+    const params = new URLSearchParams([[urlSearchParamKey, nextTags.join(',')]]);
+    return '?' + params.toString();
+  }
+</script>
+
+<div class="tag-box">
+  <div class="tag-title" class:hidden={hasSelectedTags}>{label}</div>
+  <a href="?" class="tag-clear-button" class:hidden={!hasSelectedTags} on:click={deselectAll}>
+    {resetButton}
+  </a>
+
+  <div class="tag-list">
+    {#each tags as tag}
+      <a
+        href={createTagURL(tag)}
+        class="tag"
+        class:selected={selectedTags.includes(tag)}
+        on:click={selectTag}
+      >
+        {tag}
+      </a>
+    {/each}
+  </div>
+</div>
+
+<style lang="scss">
+  .tag-box {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 0.2em;
+    .tag-title {
+      font-size: 1em;
+      font-weight: bold;
+      margin-right: 1em;
+      cursor: default;
+    }
+    .hidden {
+      display: none;
+    }
+    .tag-clear-button {
+      margin-right: 1em;
+      font-size: small;
+      text-decoration: underline;
+      cursor: pointer;
+    }
+    .tag-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      margin-bottom: 0.2em;
+      .tag {
+        margin-bottom: 0.2em;
+        margin-right: var(--size-sm);
+        padding: 0.25em 0.8em 0.25em 0.8em;
+        background-color: #eeeeee;
+        color: #212121;
+        border-radius: var(--size-sm);
+        border: 2px solid #e0e0e0;
+        cursor: pointer;
+        transition: 0.25s ease-in-out;
+        text-decoration: none;
+        &:hover {
+          border-color: #b0bec5;
+        }
+        &.selected {
+          transition: 1s ease-in-out;
+          background-color: #81d4fa;
+          border-color: #4fc3f7;
+          &:before {
+            content: '✓ ';
+          }
+          &:hover {
+            border-color: #2196f3;
+          }
+        }
+      }
+    }
+    @media screen and (max-width: 900px) {
+      .tag-title {
+        display: none;
+      }
+      .tag-clear-button {
+        display: none;
+      }
+    }
+  }
+</style>

src/routes/blog/[id].json.ts

@@ -6,7 +6,7 @@ async function getCache(id: number, origin: string) {
 
   try {
     const response = await fetch(target);
-    const data = await response.json();
+    const data = (await response.json()).posts;
     const newsletter = (data as Newsletter[]).find((item) => {
       return item.id === id;
     });

src/routes/blog/_query.ts

@@ -1,5 +1,11 @@
 import type { Officer } from '$lib/constants';
 import { OFFICERS } from '$lib/constants';
+import { discernTags } from '$lib/common/utils';
+
+export interface BlogOutput {
+  tags: string[];
+  posts: Newsletter[];
+}
 
 export interface Newsletter {
   id: number;
@@ -17,6 +23,10 @@ export interface Newsletter {
   };
 }
 
+export interface NewsletterFetchOptions {
+  labels: string[];
+}
+
 /**
  * GraphQL query to get all the blog posts from the newsletters category.
  * @see https://docs.github.com/en/graphql/overview/explorer
@@ -94,7 +104,7 @@ function formatNewsletters(output: any): Newsletter[] {
   });
 }
 
-export async function fetchNewsletters(): Promise<Newsletter[]> {
+export async function fetchNewsletters(options?: NewsletterFetchOptions): Promise<BlogOutput> {
   const ghAccessToken = import.meta.env.VITE_GH_ACCESS_TOKEN;
 
   const response = await fetch('https://api.github.com/graphql', {
@@ -103,6 +113,14 @@ export async function fetchNewsletters(): Promise<Newsletter[]> {
     body: JSON.stringify({ query: newslettersQuery }),
   });
 
-  const newsletters = formatNewsletters(await response.json());
-  return newsletters;
+  let newsletters = formatNewsletters(await response.json());
+  const tags = discernTags(newsletters);
+
+  if (options && options.labels.length > 0) {
+    newsletters = newsletters.filter((post) =>
+      post.labels.some((item) => options.labels.includes(item))
+    );
+  }
+
+  return { tags: tags, posts: newsletters };
 }

src/routes/blog/index.json.ts

@@ -1,8 +1,14 @@
-import type { RequestHandlerOutput } from '@sveltejs/kit/types/internal';
-import { fetchNewsletters } from './_query';
+import type { RequestHandlerOutput, RequestEvent } from '@sveltejs/kit/types/internal';
+import { fetchNewsletters, NewsletterFetchOptions } from './_query';
 
-export async function get(): Promise<RequestHandlerOutput> {
-  return new Response(JSON.stringify(await fetchNewsletters()), {
+export async function get(event: RequestEvent): Promise<RequestHandlerOutput> {
+  const fetchOptions: NewsletterFetchOptions = { labels: [] };
+
+  if (event.url.searchParams.has('l') === true && event.url.searchParams.get('l').length > 0) {
+    fetchOptions.labels = event.url.searchParams.get('l').split(',');
+  }
+
+  return new Response(JSON.stringify(await fetchNewsletters(fetchOptions)), {
     status: 200,
     headers: { 'Content-Type': 'application/json' },
   });

src/routes/blog/index.svelte

@@ -1,9 +1,25 @@
 <script lang="ts" context="module">
   import type { LoadInput, LoadOutput } from '@sveltejs/kit/types/internal';
+  import TagField from '$lib/components/utils/acm-tagfield.svelte';
 
-  export async function load({ fetch }: LoadInput): Promise<LoadOutput> {
-    const response = await fetch(`/blog.json`);
-    return { props: { posts: await response.json() } };
+  let tags = [];
+  let selectedTags: string[] = [];
+
+  export async function load(event: LoadInput): Promise<LoadOutput> {
+    const target = new URL('/blog.json', event.url);
+
+    if (event.url.searchParams.has('l') && event.url.searchParams.get('l').length > 0) {
+      target.searchParams.set('l', event.url.searchParams.get('l'));
+      selectedTags = event.url.searchParams.get('l').split(',');
+    } else {
+      selectedTags = [];
+    }
+
+    const response = await fetch(target.toString());
+    const blogOutput = await response.json();
+    tags = blogOutput.tags;
+
+    return { props: { posts: blogOutput.posts } };
   }
 </script>
 
@@ -12,10 +28,23 @@
   import Spacing from '$lib/components/sections/spacing.svelte';
 
   export let posts: Newsletter[] = [];
+
+  async function filterPosts(event: CustomEvent) {
+    const tags = event.detail;
+
+    window.history.replaceState({}, '', `${window.location.pathname}?l=${tags.join(',')}`);
+
+    const target = new URL('/blog.json', window.location.origin);
+    target.searchParams.set('l', tags.join(','));
+
+    const response = await fetch(target.toString());
+    const blogOutput = await response.json();
+    posts = blogOutput.posts;
+  }
 </script>
 
 <svelte:head>
-  <title>acmCSUF / README</title>
+  <title>Blog / ACM at CSUF</title>
 </svelte:head>
 
 <Spacing --min="175px" --med="200px" --max="200px" />
@@ -31,6 +60,15 @@
 
   <Spacing --min="100px" --med="175px" --max="200px" />
 
+  <TagField
+    {tags}
+    {selectedTags}
+    label="Filter by Tags"
+    resetButton="✖ Clear Filter"
+    urlSearchParamKey="l"
+    on:change={filterPosts}
+  />
+
   <ul>
     {#each posts as post (post.id)}
       <li>

src/routes/blog/index.xml.ts

@@ -53,7 +53,8 @@ function makeRssFeed(posts: Newsletter[]): string {
 }
 
 export async function get(): Promise<RequestHandlerOutput> {
-  return new Response(JSON.stringify(makeRssFeed(await fetchNewsletters())), {
+  const posts: Newsletter[] = (await fetchNewsletters()).posts;
+  return new Response(JSON.stringify(makeRssFeed(posts)), {
     status: 200,
     headers: { 'Cache-Control': 'max-age=0, s-maxage=3600', 'Content-Type': 'application/xml' },
   });