Resolved merge conflict

Author: mendozagioo

src/components/Hero.svelte

@@ -14,7 +14,7 @@
 	});
 </script>
 
-<div class="hero" style="background: {accentColor}">
+<div class="hero pt-hero" style="background: {accentColor}">
 	<div class="container px-5 py-28">
 		<div class="flex-col-reverse md:flex-row flex items-center gap-10 columns-2">
 			<div class="md:w-1/2 md:p-5">

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/components/Navbar.svelte

@@ -1,4 +1,6 @@
 <script>
+  import { principalMenuStore } from "@/store";
+
   function closeHambMenu() {
     document.getElementById('hamburger-menu').classList.toggle('hidden');
   }
@@ -12,9 +14,9 @@
     {name: "Comunidad", url: "/comunidad"},
     {name: "Recursos", url: "/recursos"},
     {name: "Blog", url: "/blog"},
-    ];
+  ];
 </script>
-<nav class="w-full  py-5">
+<nav class="absolute w-full py-5 max-lg:bg-white">
   <div class="flex container m-auto items-center  px-5">
     <a href="/">
       <span class="sr-only">Codeando México</span>
@@ -25,7 +27,14 @@
 
     <ul class="gap-5 hidden lg:flex">
       {#each menuItems as item }
-        <li><a class="hover:underline hover:gray-800 uppercase font-bold" href="{item.url}">{item.name}</a></li>
+        <li>
+          <a
+            class={`hover:underline hover:gray-800 uppercase font-bold ${$principalMenuStore.urlActive.includes(item.url) ? $principalMenuStore.color : ''}`.trim()}
+            href="{item.url}"
+          >
+            {item.name}
+          </a>
+        </li>
       {/each}
     </ul>
 
@@ -43,7 +52,7 @@
 <div id="hamburger-menu" class="lg:hidden hidden" role="dialog" aria-modal="true">
   <!-- Background backdrop, show/hide based on slide-over state. -->
   <div class="fixed inset-0 z-10"></div>
-  <div class="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+  <div class="fixed inset-y-0 right-0 z-40 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
     <div class="flex items-center justify-between">
       <a href="/" class="-m-1.5 p-1.5">
         <span class="sr-only">Codeando México</span>
@@ -62,7 +71,7 @@
           {#each menuItems as item}
           <div class="mx-3 block px-3 py-2 divide-y divide-gray-500 hover:bg-gray-50">
 
-            <a href="{item.url}" class="-text-base font-semibold leading-7 text-gray-900 uppercase ">{item.name}</a>
+            <a href="{item.url}" class={`-text-base font-semibold leading-7 uppercase ${$principalMenuStore.urlActive.includes(item.url) ? 'text-cmxgreen' : 'text-gray-900'}`}>{item.name}</a>
           </div>
           {/each}
         </div>

src/lib/menuSelectorUpdater.js

@@ -0,0 +1,20 @@
+import { onDestroy } from "svelte";
+import { principalMenuStore } from "@/store";
+
+export function updateMenuSelector({url = '/', color = 'text-white'}) {
+  principalMenuStore.update(data => {
+    data.urlActive = url
+    data.color = color
+
+    return data
+  });
+
+  onDestroy(() => {
+    principalMenuStore.update(data => {
+      data.urlActive = ''
+      data.color = ''
+
+      return data
+    });
+  });
+}

src/routes/acerca/+page.svelte

@@ -1,6 +1,9 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater';
   import Hero from '@/components/Hero.svelte';
   import IconTextAction from '@/components/IconTextAction.svelte';
+
+  updateMenuSelector({url: '/acerca'})
 </script>
 
 <Hero accentColor="#0073F4" title="Acerca de" subtitle="Somos una organización sin fines de lucro, basada en una comunidad abierta." image="/acerca.png"/>

src/routes/aviso-de-privacidad/+page.svelte

@@ -4,7 +4,7 @@
   const { aviso } = data
 </script>
 
-<div id="aviso" class="container mx-auto py-20">
+<div id="aviso" class="container mx-auto my-20 pt-hero">
   <div class="w-10/12 p-5 mx-auto w-1/2 mx-auto bg-[url('/grid-bg.png')] bg-slate-200 prose" style={`box-shadow: 7px 7px 1px black;`}>
     {@html aviso.content}
     <p>Ultima actualización: <HumanDate date={aviso.date_updated}/></p>

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,28 @@
 <script>
+  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 mx-auto">
+<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}
@@ -20,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,8 +1,19 @@
 <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'})
+  if (browser) { title = document.title }
+
+  onDestroy(() => {
+    if (browser) { document.title = title }
+  })
 </script>
 
 <svelte:head>
@@ -13,8 +24,7 @@
   <meta property="og:image" content={`https://content.codeandomexico.org/assets/${post.post_image}`} />
 </svelte:head>
 
-<section class="my-10">
-
+<section class="my-10 pt-hero">
   <div class="container m-auto max-w-prose my-8">
     <h1 class="text-5xl font-black my-8">{post.title}</h1>
     {#if post.authors}
@@ -32,5 +42,4 @@
   <div class="container m-auto p-3 prose prose-blockquote:text-2xl prose-blockquote:border-green-400">
     <p class="prose text-lg">{@html post.content}</p>
   </div>
-
 </section>

src/routes/comunidad/+page.svelte

@@ -1,10 +1,13 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import Hero from "@/components/Hero.svelte";
   import GetInvolvedCard from "@/components/Cards/GetInvolvedCard.svelte";
   import CommunityCard from "@/components/Cards/CommunityCard.svelte";
   // import CollaboratorCard from "@/components/Cards/CollaboratorCard.svelte";
   export let data
   const { comunidad } = data
+
+  updateMenuSelector({url: '/comunidad'})
 </script>
 
 <Hero accentColor="#F2D301" title="Involúcrate en la comunidad" subtitle="Somos una comunidad abierta que construye tecnología para el bien común." image="/comunidad.png" />