Resolved merge conflict

mendozagioo · mendozagioo · commit 91917ed279b6 · 2024-12-13T17:48:28.000-06:00
diff --git a/src/components/Hero.svelte b/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">
diff --git a/src/components/MenuTagsBlog.svelte b/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>
diff --git a/src/components/Navbar.svelte b/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>
diff --git a/src/lib/menuSelectorUpdater.js b/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
+    });
+  });
+}
diff --git a/src/routes/acerca/+page.svelte b/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"/>
diff --git a/src/routes/aviso-de-privacidad/+page.svelte b/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>
diff --git a/src/routes/blog/+page.server.js b/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,
 	}
 }
 
diff --git a/src/routes/blog/+page.svelte b/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}
diff --git a/src/routes/blog/[slug]/+page.svelte b/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>
diff --git a/src/routes/comunidad/+page.svelte b/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" />
diff --git a/src/routes/newsletter/confirmed/+page.svelte b/src/routes/newsletter/confirmed/+page.svelte
@@ -1,4 +1,4 @@
-<div class="container mx-auto py-20">
+<div class="container mx-auto my-20 pt-hero">
   <div class="h-full flex flex-col justify-center min-h-20 py-20">
 
     
diff --git a/src/routes/proyectos/+page.svelte b/src/routes/proyectos/+page.svelte
@@ -1,4 +1,5 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import Hero from '@/components/Hero.svelte';
   import IconTextAction from '@/components/IconTextAction.svelte';
   import SubscribeBox from '@/components/SubscribeBox.svelte';
@@ -33,6 +34,8 @@
     activeTags = activeTags.filter(val => val !== tag);
     getFilteredProjects();
   }
+
+  updateMenuSelector({url: '/proyectos'})
 </script>
 
 <Hero title="Proyectos" subtitle="Colaboramos desde el diseño hasta la implementación de tecnología cívica." image="/proyectos.png"/>
diff --git a/src/routes/recursos/+page.svelte b/src/routes/recursos/+page.svelte
@@ -1,45 +1,58 @@
 <script>
+  import { updateMenuSelector } from '@/lib/menuSelectorUpdater.js';
   import Hero from "@/components/Hero.svelte";
   import RecursosCard from "@/components/Cards/RecursosCard.svelte";
-
   export let data
   const { conocimientos, recursos } = data
+  const categories = ['todos', 'conocimiento', ...recursos.map(recurso => recurso.categorias)]
+  let categorySelected = 'todos'
+  let resources = [...recursos]
+
+  const handleCategorySelected = (category = '') => {
+    categorySelected = category
+    resources = categorySelected === 'todos'
+      ? [...recursos]
+      : recursos.filter(recurso => recurso.categorias === categorySelected)
+  }
+
+  updateMenuSelector({url: '/recursos'})
 </script>
 
 <Hero accentColor="#FF6D53" image="/recursos.png" title="Recursos" subtitle="Conocimiento que hemos construido a lo largo del tiempo sobre tecnología cívica, datos abiertos y más." />
 
-<!-- <div id="filtros" class="container mx-auto flex justify-start md:justify-center gap-3 my-8 flex-wrap p-3">
-  <p class="uppercase font-bold inline">Todo</p>
-  <p class="uppercase font-bold inline">Conocimiento</p>
-  <p class="uppercase font-bold inline">Herramientas</p>
-  <p class="uppercase font-bold inline">Proyectos</p>
-  <p class="uppercase font-bold inline">Eventos</p>
-  <p class="uppercase font-bold inline">Oportunidades</p>
-  <p class="uppercase font-bold inline">Otros</p>
-</div> -->
-<section id="conocimiento" class="container mx-auto my-6 p-3">
-  <h2 class="text-5xl font-bold"><img src="/recursos-conocimiento.png" class="inline h-[50px] my-5" alt="Conocimiento">
-    Conocimiento</h2>
-  {#each conocimientos as subseccion }
-    <div class="my-5">
-      <h3 class="text-3xl font-bold my-5">{subseccion.name}</h3>
-      <div class="flex flex-wrap">
-        {#each subseccion.recursos as item }
-        <RecursosCard title={item.title} url={item.url} authors={item.authors}/>
-        
-        {/each}
-      </div>
-    </div>
+<div id="filtros" class="container mx-auto flex justify-start justify-center gap-3 my-8 flex-wrap p-3">
+  {#each categories as category}
+    <a
+      href={null}
+      class={`uppercase font-bold inline cursor-pointer hover:underline${categorySelected === category ? ' text-cmxred' : ''}`}
+      on:click={() => handleCategorySelected(category)}
+    >{category}</a>
   {/each}
-</section>
-{#each recursos as categoria }
-<section id="{categoria.categorias}" class="container mx-auto my-6 p-3">
-  <h2 class="text-5xl font-bold capitalize"><img src="/recursos-{categoria.categorias}.png" class="inline h-[50px] my-5" alt="{categoria.categorias}">
-    {categoria.categorias}</h2>
-  <div class="flex flex-wrap my-5">
-    {#each categoria.recursos as recurso}
-      <RecursosCard title={recurso.name} url={recurso.url}/>
+</div>
+{#if (categorySelected === 'todos' || categorySelected === 'conocimiento')}
+  <section id="conocimiento" class="container mx-auto my-6 p-3">
+    <h2 class="text-5xl font-bold"><img src="/recursos-conocimiento.png" class="inline h-[50px] my-5" alt="Conocimiento">
+      Conocimiento</h2>
+    {#each conocimientos as subseccion }
+      <div class="my-5">
+        <h3 class="text-3xl font-bold my-5">{subseccion.name}</h3>
+        <div class="flex flex-wrap">
+          {#each subseccion.recursos as item }
+            <RecursosCard title={item.title} url={item.url} authors={item.authors}/>
+          {/each}
+        </div>
+      </div>
     {/each}
-  </div>
-</section>
+  </section>
+{/if}
+{#each resources as resource}
+  <section id="{resource.categorias}" class="container mx-auto my-6 p-3">
+    <h2 class="text-5xl font-bold capitalize"><img src="/recursos-{resource.categorias}.png" class="inline h-[50px] my-5" alt="{resource.categorias}">
+      {resource.categorias}</h2>
+    <div class="flex flex-wrap my-5">
+      {#each resource.recursos as recurso}
+        <RecursosCard title={recurso.name} url={recurso.url}/>
+      {/each}
+    </div>
+  </section>
 {/each}
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,6 @@
+import { writable } from "svelte/store";
+
+export const principalMenuStore = writable({
+  urlActive: '',
+  color: ''
+});
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -16,6 +16,9 @@ export default {
         cmxred: "#FF6D53",
         cmxblue: "#0073F4"
       },
+      padding: {
+        hero: '83px'
+      }
     }
   },
   plugins: [require("daisyui"),  require('@tailwindcss/typography')]
