Make search more prominent.

js-src/index.js

@@ -65,6 +65,7 @@ document.addEventListener("DOMContentLoaded", function () {
         fakeSearchInput = searchMobile.querySelector('input')
         addListenersSearch()
     }
+    addListenersSearchOverlay();
 
     const cookies = document.cookie.split(";").map((cookie) => {
         let [key, value] = cookie.split("=");
@@ -83,6 +84,12 @@ document.addEventListener("DOMContentLoaded", function () {
 
 function startSearchTutorial() {
     console.log('Showing how to use search');
+    const tutorialOverlay = document.querySelector('.tutorial-overlay-step-1');
+    if (tutorialOverlay === null) {
+        console.error('tutorialOverlay missing');
+        return;
+    }
+//    tutorialOverlay.classList.remove('hidden');
 }
 
 function markSearchTutorialAsSeen() {
@@ -174,10 +181,8 @@ function addListenersSearch() {
     const searchOverlay = document.querySelector('div.search-overlay');
     const searchInput = searchOverlay.querySelector('div.search input');
     fakeSearchInput.value = searchInput.value;
-    exitSearch.addEventListener('click', onExitSearch)
+    if (exitSearch !== null) {
-    const search = document.querySelector('div.search-overlay div.search input');
+        exitSearch.addEventListener('click', onExitSearch)
-    if (search !== null) {
-        search.addEventListener('change', onSearchChange);
     }
     const searchIconDesktop = document.querySelector('nav.desktop a.search-icon');
     if (searchIconDesktop !== null) {
@@ -187,6 +192,13 @@ function addListenersSearch() {
     }
 }
 
+function addListenersSearchOverlay() {
+    const search = document.querySelector('div.search-overlay div.search input');
+    if (search !== null) {
+        search.addEventListener('change', onSearchChange);
+    }
+}
+
 function searchInWebsite(value, isToBottom) {
     window.find(value, false, !isToBottom, true)
     const selection = window.getSelection()
@@ -247,8 +259,34 @@ function onSearchChange() {
       'event': 'realsearch_term_keyup',
       'term': search.value,
      });
-    fakeSearchInput.value = search.value
+    if (fakeSearchInput !== undefined && fakeSearchInput !== null) {
+        fakeSearchInput.value = search.value
+    }
+    let found = search.value.match(/^#(\S+?)(?:\:(\S+?))?$/);
     const port = _port()
+    if (found) {
+        let attributeUrlPart = found[2];
+        console.log(attributeUrlPart);
+        if (attributeUrlPart === undefined) {
+            attributeUrlPart = '';
+        }
+        console.log(attributeUrlPart);
+        if (attributeUrlPart !== '') {
+            attributeUrlPart = '/atributo/' + attributeUrlPart;
+        }
+        console.log(attributeUrlPart);
+        const checkHashstagUrl = new URL(window.location.protocol
+            + "//"
+            + window.location.hostname
+            + port
+            + '/' + found[1] + attributeUrlPart);
+        fetch(checkHashstagUrl).then((res) => {
+            if (res.status === 200) {
+                window.location = checkHashstagUrl;
+            }
+        });
+        return;
+    }
     const url = new URL(window.location.protocol
         + "//"
         + window.location.hostname

public/css/styles.css

@@ -2,6 +2,33 @@ html {
   height: 100%;
   touch-action: none; }
 
+div.open-browser-container {
+  display: flex;
+  justify-content: start;
+  width: 100%;
+  margin-left: 0px;
+  margin-right: 0px;
+  padding-left: 0px;
+  padding-right: 0px;
+  background: #f2eb8c;
+  color: blueviolet; }
+  div.open-browser-container a.open-in-browser {
+    text-decoration: none;
+    display: flex;
+    justify-content: space-between;
+    width: calc(100% - 20px);
+    align-items: center;
+    margin-left: 10px;
+    margin-right: 10px; }
+    div.open-browser-container a.open-in-browser img {
+      display: block;
+      height: 2rem;
+      width: 2rem;
+      margin-right: 0px;
+      margin-left: 0px; }
+    div.open-browser-container a.open-in-browser span {
+      display: block; }
+
 body {
   margin: 0;
   padding: 0;
@@ -36,6 +63,43 @@ body {
     align-items: center;
     vertical-align: middle;
     margin-bottom: 0.15em; }
+  body div.tutorial-overlay-step-1 {
+    position: fixed;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: rgba(100, 100, 100, 0.5);
+    top: 0%;
+    z-index: 999; }
+    body div.tutorial-overlay-step-1 > .explanation {
+      position: absolute;
+      left: 10px;
+      color: aquamarine;
+      background: rgba(100, 100, 100, 0.5);
+      width: 230px;
+      text-align: center;
+      border-radius: 10px;
+      border: solid 3px black;
+      font-size: 30px;
+      top: calc(100% - 80px - 203px - 90px); }
+    body div.tutorial-overlay-step-1 > .arrow {
+      position: absolute;
+      left: 90px;
+      top: calc(100% - 80px - 203px);
+      display: block; }
+    body div.tutorial-overlay-step-1.hidden {
+      display: none; }
+  body div.search-results > div.description {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background: #2160c4;
+    border: solid #9dc1fa 0.3rem;
+    color: white;
+    font-weight: bold;
+    border-radius: 20px;
+    width: calc(100% - 20px - 0.6rem);
+    padding: 10px; }
   body div.search-overlay {
     overflow-y: scroll;
     display: none;
@@ -46,9 +110,11 @@ body {
     z-index: 3;
     top: 0;
     flex-direction: column; }
-    body div.search-overlay.active {
+    body div.search-overlay.default div.search-results {
-      display: flex; }
+      height: calc(100% - 80px - 2rem);
+      overflow-x: scroll; }
     body div.search-overlay div.search-results {
+      height: calc(100% - 80px);
       margin: 7px; }
       body div.search-overlay div.search-results img {
         width: 75px; }
@@ -57,6 +123,12 @@ body {
         flex-direction: row; }
         body div.search-overlay div.search-results div.search-result div.row-title-url-image img {
           margin: 10px; }
+      body div.search-overlay div.search-results div.search-result p {
+        background: aliceblue;
+        width: fit-content;
+        padding: 20px;
+        margin-left: 90px;
+        margin-right: 20px; }
     body div.search-overlay div.bounding-search-bar {
       position: fixed;
       top: calc(100% - 74px);
@@ -65,11 +137,6 @@ body {
       border-radius: 10px;
       height: 60px;
       display: flex; }
-      body div.search-overlay div.bounding-search-bar div.search {
-        width: calc(100% - 60px);
-        height: 60px;
-        margin-left: 0px;
-        margin-right: 0px; }
       body div.search-overlay div.bounding-search-bar a.up, body div.search-overlay div.bounding-search-bar a.down {
         display: none; }
       body div.search-overlay div.bounding-search-bar a.exit-search {
@@ -344,14 +411,9 @@ body {
       position: absolute;
       left: 80px;
       top: 10%;
-      width: Min(calc(100% - 90px * 2), 500px);
+      width: Min(calc(100% - 120px), 500px);
       height: 80%;
       border-radius: 10px; }
-    body nav.mobile-shortcuts a.menu-expand {
-      position: absolute;
-      left: Min(calc(100% - 80px), 600px);
-      top: 0;
-      align-self: end; }
   body div.page-contents {
     background: #FEFEFA;
     position: fixed;
@@ -463,44 +525,8 @@ body {
         body div.page-contents div.description a.suscribe-category-rss img {
           width: 40px;
           height: 40px; }
-    body div.page-contents div.open-browser-container {
-      display: flex;
-      justify-content: start;
-      width: 100%;
-      margin-left: 0px;
-      margin-right: 0px;
-      padding-left: 0px;
-      padding-right: 0px;
-      background: #f2eb8c;
-      color: blueviolet; }
-      body div.page-contents div.open-browser-container a.open-in-browser {
-        text-decoration: none;
-        display: flex;
-        justify-content: space-between;
-        width: calc(100% - 20px);
-        align-items: center;
-        margin-left: 10px;
-        margin-right: 10px; }
-        body div.page-contents div.open-browser-container a.open-in-browser img {
-          display: block;
-          height: 2rem;
-          width: 2rem;
-          margin-right: 0px;
-          margin-left: 0px; }
-        body div.page-contents div.open-browser-container a.open-in-browser span {
-          display: block; }
     body div.page-contents div.open-browser-container.android {
       display: none; }
-    body div.page-contents div.easter-egg {
-      display: flex;
-      justify-content: center; }
-    body div.page-contents div.burguillos-logo-container.active {
-      border: solid 1px black;
-      border-radius: 50%;
-      filter: invert(1); }
-    body div.page-contents div.burguillos-logo-container {
-      padding: 40px;
-      width: 120px; }
     body div.page-contents h1 {
       text-align: center; }
     body div.page-contents div.footer p, body div.page-contents div.footer h1, body div.page-contents div.footer h2, body div.page-contents div.footer h3, body div.page-contents div.footer h4, body div.page-contents div.footer a {
@@ -511,6 +537,32 @@ body {
       width: 20px;
       height: 20px; }
 
+div.easter-egg {
+  display: flex;
+  justify-content: center; }
+
+div.burguillos-logo-container.active {
+  filter: invert(1); }
+
+div.burguillos-logo-container {
+  width: 120px; }
+
+div.search-overlay div.search {
+  width: calc(100% - 60px);
+  height: 60px;
+  margin-left: 0px;
+  margin-right: 0px; }
+
+div.search-overlay.active {
+  display: flex; }
+
+div.search-overlay.default {
+  display: flex; }
+  div.search-overlay.default div.search {
+    width: 100%; }
+  div.search-overlay.default div.fake-text-box {
+    width: 100%; }
+
 @media (min-width: 450px) {
   body div.page-contents table th, body div.page-contents table td {
     font-size: 20px; } }

public/css/styles.scss

@@ -16,6 +16,39 @@ html {
   height: 100%;
   touch-action: none;
 }
+    div.open-browser-container {
+      display: flex;
+      justify-content: start;
+      width: 100%;
+      margin-left: 0px;
+      margin-right: 0px;
+      padding-left: 0px;
+      padding-right: 0px;
+      background: $color_div;
+      color: $background_div;
+
+      a.open-in-browser {
+        text-decoration: none;
+        display: flex;
+        justify-content: space-between;
+        width: calc(100% - 20px);
+        align-items: center;
+        margin-left: 10px;
+        margin-right: 10px;
+
+        img {
+          display: block;
+          height: 2rem;
+          width: 2rem;
+          margin-right: 0px;
+          margin-left: 0px;
+        }
+
+        span {
+          display: block;
+        }
+      }
+    }
 
 body {
   summary {
@@ -54,6 +87,51 @@ body {
     margin-bottom: 0.15em;
   }
 
+  div.tutorial-overlay-step-1 {
+    position: fixed;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: rgba(100, 100, 100, 0.5);
+    top: 0%;
+    z-index: 999;
+    & > .explanation {
+      position: absolute;
+      left: 10px;
+      color: aquamarine;
+      background: rgba(100, 100, 100, 0.5);
+      width: 230px;
+      text-align: center;
+      border-radius: 10px;
+      border: solid 3px black;
+      font-size: 30px;
+      top: calc(100% - 80px - 203px - 90px);
+    }
+    & > .arrow {
+      position: absolute;
+      left: 90px;
+      top: calc(100% - 80px - 203px);
+      display: block;
+    }
+    &.hidden {
+      display: none;
+    }
+  }
+
+  div.search-results > div.description {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background: #2160c4;
+    border: solid #9dc1fa 0.3rem;
+    color: white;
+    font-weight: bold;
+
+    border-radius: 20px;
+    width: calc(100% - 20px - 0.6rem);
+    padding: 10px;
+  }
+
   div.search-overlay {
     overflow-y: scroll;
     display: none;
@@ -65,11 +143,16 @@ body {
     top: 0;
     flex-direction: column;
 
-    &.active {
-      display: flex;
-    }
 
+
+   &.default {
+      div.search-results {
+        height: calc(100% - 80px - 2rem);
+        overflow-x: scroll;
+      }
+   }
     div.search-results {
+      height: calc(100% - 80px);
       margin: 7px;
 
       img {
@@ -85,6 +168,13 @@ body {
             margin: 10px;
           }
         }
+        p {
+          background: aliceblue;
+          width: fit-content;
+          padding: 20px;
+          margin-left: 90px;
+          margin-right: 20px;
+        }
       }
     }
 
@@ -97,12 +187,6 @@ body {
       height: 60px;
       display: flex;
 
-      div.search {
-        width: calc(100% - 60px);
-        height: 60px;
-        margin-left: 0px;
-        margin-right: 0px;
-      }
 
       a.up, a.down {
         display: none;
@@ -502,17 +586,10 @@ body {
       position: absolute;
       left: 80px;
       top: 10%;
-      width: Min(calc(100% - 90px * 2), 500px);
+      width: Min(calc(100% - 120px), 500px);
       height: 80%;
       border-radius: 10px;
     }
-
-    a.menu-expand {
-        position: absolute;
-        left: Min(calc(100% - 80px), 600px);
-        top: 0;
-        align-self: end;
-    }
   }
 
   div.page-contents {
@@ -686,61 +763,11 @@ body {
       }
     }
 
-    div.open-browser-container {
-      display: flex;
-      justify-content: start;
-      width: 100%;
-      margin-left: 0px;
-      margin-right: 0px;
-      padding-left: 0px;
-      padding-right: 0px;
-      background: $color_div;
-      color: $background_div;
-
-      a.open-in-browser {
-        text-decoration: none;
-        display: flex;
-        justify-content: space-between;
-        width: calc(100% - 20px);
-        align-items: center;
-        margin-left: 10px;
-        margin-right: 10px;
-
-        img {
-          display: block;
-          height: 2rem;
-          width: 2rem;
-          margin-right: 0px;
-          margin-left: 0px;
-        }
-
-        span {
-          display: block;
-        }
-      }
-    }
 
     div.open-browser-container.android {
       display: none;
     }
 
-    div.easter-egg {
-      display: flex;
-      justify-content: center;
-    }
-
-    div.burguillos-logo-container.active {
-      border: solid 1px black;
-      border-radius: 50%;
-      filter: invert(1);
-    }
-
-    div.burguillos-logo-container {
-      padding: 40px;
-      width: 120px;
-    }
-
-    div.burguillos-logo-container.active img {}
 
     h1 {
       text-align: center;
@@ -763,6 +790,42 @@ body {
   }
 }
 
+div.easter-egg {
+  display: flex;
+  justify-content: center;
+}
+
+div.burguillos-logo-container.active {
+  filter: invert(1);
+}
+
+div.burguillos-logo-container {
+  width: 120px;
+}
+
+div.burguillos-logo-container.active img {}
+
+div.search-overlay {
+  div.search {
+    width: calc(100% - 60px);
+    height: 60px;
+    margin-left: 0px;
+    margin-right: 0px;
+  }
+  &.active {
+    display: flex;
+  }
+  &.default {
+    display: flex;
+    div.search {
+      width: 100%;
+    }
+      div.fake-text-box {
+        width: 100%;
+      }
+  }
+}
+
 @media (min-width: 450px) {
   body {
     div.page-contents {

templates/layouts/default.html.ep

@@ -81,9 +81,7 @@
             </a>
         </div>
     </div>
-    <div class="tutorial-overlay-step-1">
+%= include 'page/_search_tutorial'
-        
-    </div>
     <div class="complete-container">
 %= include 'page/_mobile_foldable', categories => $categories
         <div class="contents-without-menu">
@@ -111,7 +109,7 @@
                     </a>
                 </div>
 % }
-                <%= content %></body>
+                <%= content %>
                 <div class="description android">
                     <a href="#" class="pin-to-home">Añade esta página a la pantalla de inicio de tu móvil.</a>
                 </div>
@@ -131,4 +129,5 @@
         </div>
         %= include 'page/_mobile_menu', categories => $categories
     </div>
+    </body>
 </html>

templates/layouts/search_results.html.ep

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+% my $categories = stash 'categories';
+% my $current_category_slug = stash 'current_category_slug';
+% my $description_og = stash 'description_og';
+% $description_og =~ s/\s+/ /g;
+% $description_og = substr $description_og, 0, 157;
+% $description_og =~ s/\s\S+$//;
+% $description_og.='...';
+% my $base_url = config 'base_url';
+% use Time::Piece;
+% my $t = Time::Piece->new();
+% my $year = $t->year;
+% my $search_term = stash 'search_term' // '';
+% if ($search_term eq '#index') {
+%       $search_term = '';
+% }
+<html lang="es">
+  <head>
+    <!-- Google Tag Manager -->
+    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+    })(window,document,'script','dataLayer','GTM-P9K5VBGN');</script>
+<!-- End Google Tag Manager -->
+    <!-- Google tag (gtag.js) -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=G-SBSKCCF31B"></script>
+    <script type="module" src="/js/cookie.js"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+
+      gtag('config', 'G-SBSKCCF31B');
+    </script>
+      <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8178723521508611" crossorigin="anonymous"></script>
+% my $css_version = config 'css_version';
+      <script src="/js/bundle.js?v=<%=$css_version%>"></script>
+      <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orestbida/cookieconsent@3.0.1/dist/cookieconsent.css"/>
+      <link rel="stylesheet" href="/css/styles.css?v=<%=$css_version%>"/>
+      <title><%= title %></title>
+      <meta charset="UTF-8"/>
+      <meta name="description" content="<%=defined $description_og ? $description_og : 'Lee más sobre: ' . title %>" />
+      <meta property="og:description" content="<%=defined $description_og ? $description_og : 'Lee más sobre: ' . title %>" />
+      <meta property="og:title" content="<%= title %>"/>
+      <meta property="og:site_name" content="Burguillos Info" />
+      <meta property="og:type" content="website" />
+% my $ogimage = stash 'ogimage';
+% say STDERR $ogimage;
+% my $user_agent = stash 'useragent';
+    
+    <meta property="og:url" content="<%=$base_url%><%= url_for %>"/>
+% if (defined $ogimage) {
+% my $url_for = url_for || '';
+      <meta itemprop="image" property="og:image" content="<%= $ogimage %>"/>
+      <meta name="image" content="<%= $ogimage %>"/>
+      <meta name="twitter:image" content="<%=$ogimage%>" />
+% } else {
+      <meta name="image" property="og:image" content="<%=$base_url%>/img/burguillos.webp?v=4">
+      <meta name="twitter:image" content="<%=$base_url%>/img/burguillos.webp?v=4">
+% }
+      <meta property="og:image:alt" content="Portada de <%= title %>"/>
+      <meta name="twitter:card" content="summary_large_image"/>
+      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  </head>
+    <body>
+% if (defined $ogimage) {
+        <img style="display: none;" src="<%= $ogimage %>" alt="Portada de <%= title %>"/>
+% }
+<!-- Google Tag Manager (noscript) -->
+        <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-P9K5VBGN"
+        height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+        <div class="site-wrapper">
+        </div>
+        <div class="search-overlay default">
+% if ($is_android) {
+                <div class="description no-android-app open-browser-container">
+                    <a href="https://play.google.com/store/apps/details?id=info.burguillos.bi" class="open-in-browser">
+                        <img alt="" src="/img/play-store.svg"/>
+                        <span>Prueba nuestra aplicación para Android. Más fácil, mejor.</span>
+                    </a>
+                </div>
+% }
+            <div class="search-results">
+                <%= content %>
+                <p>Burguillos Info ©2022-<%=$year%> Sergio Iglesias</p>
+            </div>
+            <div class="bounding-search-bar">
+%= include 'page/_search_bar', search_term => $search_term
+            </div>
+        </div>
+    </body>
+</html>

templates/page/_list_posts.html.ep

@@ -1,34 +1,30 @@
 % my $posts = stash 'posts';
-<h2>Artículos</h2>
+% my $base_url = config 'base_url';
-<div class="articles">
+<h2>Resultados de la busqueda</h2>
 % unless (defined $posts && @$posts) {
-    <p>Parece que aun no hay artículos.</p>
+    <p>No se pudo encontrar nada...</p>
 % }
 % for my $post (@$posts) {
-    <a href="/posts/<%=$post->{slug}%>">
+%     my $url = "$base_url/posts/$post->{slug}";
-        <article><%
+%     my $title = $post->{title};
-    my $date_article = DateTime::Format::ISO8601->parse_datetime($post->{date});
+%     if (length($title) > 50) {
-    $date_article->set_time_zone('Europe/Madrid');
+%         $title = substr($title, 0, 47).'...'; 
-            %><div class="article-up-part">
+%     }
-                <p class="date"><%= ''.$date_article %></p><%
+    <div class="search-result">
-    my $title = $post->{title};
+        <div class="row-title-url-image">
-    if (length($title) > 50) {
+% if (defined $post->{image}) {
-        $title = substr($title, 0, 47).'...'; 
+            <img alt="" src="<%=$post->{image}%>">
-    }
+% }
-    if (defined $post->{image}) {
+            <div class="column-title-url">
-        %><div class="image-container">
+                <b><%=$post->{title}%></b><br/>
-                <img alt="Portada de <%=$title%>" src="<%=$post->{image}%>"/>
+                <a href="<%=$url%>"><%=$url%></a>
-          </div><%
+            </div>
-    }
+        </div>
-            %></div><div class="article-down-part"><div>
+%     my $xml = Mojo::DOM->new($post->{content});
-                <h3><%=$title%></h3><%
+%     my $text = $xml->all_text;
-    my $xml = Mojo::DOM->new($post->{content});
+%     if (length($text) > 120) {
-    my $text = $xml->all_text;
+%          $text = substr($text, 0, 117).'...';
-    if (length($text) > 50) {
+%     }
-        $text = substr($text, 0, 47).'...';
+        <p><%=$text%></p>
-    }
+    </div>
-                %><p><%=$text%></p><p class="author">Escrito por <%=$post->{author}%></p>
+% }
-            </div></div></article>
-    </a>
-%	}
-</div>

templates/page/_mobile_menu.html.ep

@@ -2,8 +2,4 @@
 <nav class="mobile-shortcuts">
     <a class="go-to-index" href="<%='/'.$categories->{index}{slug}%>"><%== $categories->{index}{menu_text} %></a>
 %= include 'page/_search_bar'
-    <a class="menu-expand" href="#">
-        <img class="open-menu-icon" src="/img/hamburger-menu-yellow.webp" alt="Expandir el menú."/>
-        <img class="open-menu-icon-hover" src="/img/hamburger-menu-purple.webp" alt="Expandir el menú."/>
-    </a>
 </nav>

templates/page/_search_bar.html.ep

@@ -1,8 +1,9 @@
+% my $search_term = stash 'search_term' // '';
 <div class="search">
     <a href="#" class="search-icon">
         <img alt="Buscar" src="/img/search.svg"/>
     </a>
     <div class="fake-text-box">
-        <input type="text"></input>
+        <input type="text" value="<%=$search_term%>"></input>
     </div>
 </div>

templates/page/_search_tutorial.html.ep

@@ -0,0 +1,4 @@
+<div class="tutorial-overlay-step-1 hidden">
+    <p class="explanation">Esta es la barra de busqueda</p>
+    <img class="arrow" src="/img/arrow-pointing-down.webp"/>
+</div>

templates/page/attribute.html.ep

@@ -11,10 +11,12 @@
 % my $description_og = '<div>'.$attribute->{description}.'</div>';
 % $description_og = Mojo::DOM->new($description_og)->all_text;
 % my $posts = stash 'posts';
-% layout 'default', current_category_slug => $category->{slug}, description_og => $description_og;
+% layout 'search_results', current_category_slug => $category->{slug}, description_og => $description_og, search_term => "#$category->{slug}:$attribute->{identifier}";
 % title $attribute->{title};
 <div class="description">
 	<h1><%= $attribute->{title} %></h1>
 	<%== $attribute->{description} %>
+</div>
+<div class="content">
 %= include 'page/_list_posts', posts => $posts; 
 </div>

templates/page/index.html.ep

@@ -7,30 +7,17 @@
 %
 % use BurguillosInfo::Posts;
 %
+% my $current_category = stash 'current_category';
 % my $description_og = '<div>'.$current_category->{description}.'</div>';
 % $description_og = Mojo::DOM->new($description_og)->all_text;
-% layout 'default', current_category_slug => $current_category->{slug}, description_og => $description_og;
+% layout 'search_results', current_category_slug => $current_category->{slug}, description_og => $description_og, search_term => "#$current_category->{slug}";
 % title $current_category->{title};
 <div class="description">
 	<h1><%= $current_category->{title} %></h1>
 	<%== $current_category->{description} %>
+</div>
+<div class="content">
 % my $children_categories = $current_category->{children};
-% my $attributes = $current_category->{attributes};
-% if (@$children_categories || %$attributes) {
-    <h2>Quizás te interese.</h2>
-%     for my $child_category (@$children_categories) {
-      <p><a href="/<%=$child_category->{slug}%>"><%==$child_category->{title}%></a></p>
-%     }
-%     for my $attribute_slug (keys %$attributes) {
-%         my $attribute = $attributes->{$attribute_slug};
-      <p><a href="<%="/$current_category->{slug}/atributo/$attribute->{identifier}"%>"><%==$attribute->{menu_text}%></a></p>
-%     }
-% }
 % my ($category_posts) = BurguillosInfo::Posts->new->RetrieveAllPostsForCategory($current_category->{slug});
 %= include 'page/_list_posts', posts => $category_posts; 
-	<h2>Suscribete a esta categoría.</h2>
-
-	<a class="suscribe-category-rss" href="/<%=$current_category->{slug}%>.rss">
-		<img src="/img/rss.svg" alt="Icono de suscripción rss"/>
-	</a>
 </div>