Adding tags filtera to blog section

Changes:
- New component added to tags menu
- Getting tags array from posts
- Adding filter method on Blog component
- Changing color of blog title

Author: mendozagioo

src/components/MenuTagsBlog.svelte

@@ -0,0 +1,31 @@
+<script>
+  export let activeTag;
+  export let handleTags;
+  export let tags;
+</script>
+
+{#each tags as tag}
+  <a
+    href={null}
+    class={activeTag === tag ? 'text-cmxgreen' : null}
+    on:click={() => handleTags(tag)}
+  >
+    {tag.toUpperCase()}
+  </a>
+{/each}
+
+<style>
+  a {
+    display: inline-block;
+    text-transform: uppercase;
+    font-weight: 700;
+    line-height: 2.5;
+  }
+  a:not(:last-child) {
+    padding-right: 15px;
+  }
+  a:hover {
+    cursor: pointer;
+    text-decoration: underline;
+  }
+</style>

src/lib/utilities.js

@@ -0,0 +1,14 @@
+const interfaceElement = [
+  { tags: [''] }
+];
+
+export function getFlatArrayUnrepeated(elements = interfaceElement) {
+  let unrepeated = [];
+  const setToLowerCase = (item = '') => item.toLowerCase();
+
+  elements.forEach(item => {
+    unrepeated = [...new Set([...unrepeated, ...new Set(item?.tags?.map(setToLowerCase))])]
+  })
+
+  return unrepeated;
+}

src/routes/blog/+page.server.js

@@ -1,4 +1,5 @@
 import client from '$lib/apiClient'
+import { getFlatArrayUnrepeated } from '$lib/utilities';
 import { readSingleton, readItems } from '@directus/sdk'
 
 export async function load() {
@@ -20,9 +21,13 @@ export async function load() {
     sort: ['-date_published'],
   }))
 
+  const tags = getFlatArrayUnrepeated(posts);
+  tags.unshift('todos');
+
 	return {
 		blog,
-    posts
+    posts,
+    tags,
 	}
 }
 

src/routes/blog/+page.svelte

@@ -1,14 +1,25 @@
 <script>
   import ArticleCard from "@/components/Cards/ArticleCard.svelte";
   import BlogHero from "@/components/BlogHero.svelte";
+  import MenuTagsBlog from "@/components/MenuTagsBlog.svelte";
   export let data
-  const { blog, posts } = data
+  const { blog, posts, tags } = data
+  let filteredPosts = [...posts]
+  let activeTag = "todos"
+
+  const handleTags = (tag = "") => {
+    tag = tag.toLocaleLowerCase()
+    activeTag = tag
+    filteredPosts = tag === "todos"
+      ? [...posts]
+      : posts.filter(post => post.tags.map((tagItem = '') => tagItem.toLowerCase()).includes(tag))
+  }
 </script>
 <div class="container my-20 mx-auto">
 
   <div class="container m-auto px-3">
     <div class="my-7">
-      <h1 class="text-5xl text-cmxblack font-bold">Blog</h1>
+      <h1 class="text-5xl text-cmxgreen font-bold">Blog</h1>
     </div>
     <BlogHero 
     slug={blog.highlight_post.slug}
@@ -20,9 +31,16 @@
     content={blog.highlight_post.content}
     />
   </div>
+  <div class="container mx-auto px-3 pt-16 pb-12 text-center">
+    <MenuTagsBlog
+      activeTag={activeTag}
+      handleTags={handleTags}
+      tags={tags}
+    />
+  </div>
   <div class="container m-auto p-3">
     <div class="md:grid grid-cols-3 gap-5">
-    {#each posts as post}
+    {#each filteredPosts as post}
       <ArticleCard
       slug={post.slug}
       title={post.title}