Merge pull request #61 from CodeandoMexico/issue57

Adding tags filtera to blog section

Author: basicavisual

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

@@ -2,16 +2,27 @@
   import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   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))
+  }
 
   updateMenuSelector({url: '/blog', color: 'text-cmxgreen'})
 </script>
 <div class="container my-20 pt-hero 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}
@@ -23,9 +34,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}

src/routes/blog/[slug]/+page.svelte

@@ -1,16 +1,18 @@
 <script>
+  import { browser } from '$app/environment';
   import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import { onDestroy } from 'svelte';
   import ReadingTime from '@/components/ReadingTime.svelte';
   import HumanDate from '@/components/HumanDate.svelte';
-  export let data
-  const { post } = data
+  export let data;
+  const { post } = data;
+  let title = '';
 
   updateMenuSelector({url: '/blog', color: 'text-cmxgreen'})
-  const title = document.title
+  if (browser) { title = document.title }
 
   onDestroy(() => {
-    document.title = title
+    if (browser) { document.title = title }
   })
 </script>