Taglist (#228)

assets/css/tags.css

@@ -0,0 +1 @@
+@media only screen and (min-width:48rem){.l-tags-container{display:flex;flex-wrap:wrap;justify-content:center;margin:0 auto;max-width:720px}}@media only screen and (min-width:64rem){.l-tags-container{max-width:1080px}}.m-tag-card{height:180px;margin:0 0 20px;position:relative;border-radius:10px;border:1px solid var(--secondary-border-color);transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-tag-card:hover{transform:translateY(-5px)}.m-tag-card:hover:before{box-shadow:var(--article-shadow-hover),0 0 0 transparent}@media only screen and (min-width:48rem){.m-tag-card{width:320px;margin:0 20px 40px}}.m-tag-card:before{content:"";position:absolute;top:10px;right:10px;bottom:0;left:10px;border-radius:10px;z-index:1;box-shadow:var(--article-shadow-normal),0 0 0 transparent;transition:all .25s cubic-bezier(.02,.01,.47,1)}.m-tag-card__link{display:block;width:100%;height:100%;border-radius:10px;overflow:hidden;position:relative;background-color:#000;z-index:2}.m-tag-card__link.no-picture{background-color:var(--secondary-subtle-color)}.m-tag-card__picture{position:absolute;top:0;left:0;width:100%;height:100%;border-radius:10px;-o-object-fit:cover;object-fit:cover;opacity:.7;z-index:1}.m-tag-card__info{position:absolute;left:15px;bottom:15px;color:#fff;z-index:2}.m-tag-card__info.no-picture{color:var(--titles-color)}.m-tag-card__name{letter-spacing:.3px;line-height:1.3;font-size:1.25rem;font-weight:600;margin:0 0 5px}.m-tag-card__counter{display:block;letter-spacing:.2px;font-size:.875rem}

assets/js/helpers.js

@@ -1 +1 @@
-(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return c})),n.d(t,"adjustImageGallery",(function(){return s})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},l=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),c="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=c}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},12:function(e,t,n){n(1),n(22),n(27),n(29),n(31),n(33),e.exports=n(35)},22:function(e,t){},27:function(e,t){},29:function(e,t){},31:function(e,t){},33:function(e,t){},35:function(e,t){}},[[12,0,1]]]);
+(window.webpackJsonp=window.webpackJsonp||[]).push([[3],{1:function(e,t,n){"use strict";n.r(t),n.d(t,"isRTL",(function(){return a})),n.d(t,"isMobile",(function(){return o})),n.d(t,"isDarkMode",(function(){return r})),n.d(t,"formatDate",(function(){return i})),n.d(t,"getParameterByName",(function(){return c})),n.d(t,"adjustImageGallery",(function(){return s})),n.d(t,"managePostImages",(function(){return u})),n.d(t,"makeImagesZoomable",(function(){return l}));var a=function(){var e=document.querySelector("html");return["ar","he","fa"].includes(e.getAttribute("lang"))},o=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"768px";return window.matchMedia("(max-width: ".concat(e,")")).matches},r=function(){var e=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)");return e&&e.matches},i=function(e){return e?new Date(e).toLocaleDateString(document.documentElement.lang,{year:"numeric",month:"long",day:"numeric"}):""},c=function(e,t){t||(t=window.location.href),e=e.replace(/[\[\]]/g,"\\$&");var n=new RegExp("[?&]".concat(e,"(=([^&#]*)|&|#|$)")).exec(t);return n?n[2]?decodeURIComponent(n[2].replace(/\+/g," ")):"":null},s=function(){for(var e=document.querySelectorAll(".kg-gallery-image img"),t=0,n=e.length;t<n;t++){var a=e[t].closest(".kg-gallery-image"),o=e[t].attributes.width.value/e[t].attributes.height.value;a.style.flex="".concat(o," 1 0%")}},u=function(e){e(".js-post-content").find("img").each((function(){e(this).closest("figure").hasClass("kg-bookmark-card")||e(this).parent().is("a")||e(this).addClass("js-zoomable");var t=e(this).parent().find("figcaption");t?e(this).attr("alt",t.text()):e(this).attr("alt","")}))},l=function(e,t){var n=t(".js-zoomable");n.on("open",(function(t){o()&&e(t.target).parent().hasClass("kg-gallery-image")&&setTimeout((function(){var t=e(".medium-zoom-image--opened"),n=t[0].style.transform,a=n.substr(0,n.indexOf(" ")),o=parseFloat(a.substr(a.indexOf("(")+1).split(")")[0]),r=n.substr(n.indexOf(" ")+1),i=parseFloat(r.split(",")[1]),c="scale(1) translate3d(0, ".concat(i<0?o*i+i:o*i-i,"px, 0)");t.addClass("medium-zoom-image-mobile"),t[0].style.transform=c}),10)})),n.on("close",(function(){o()&&e(event.target).parent().hasClass("kg-gallery-image")&&e(".medium-zoom-image").removeClass("medium-zoom-image-mobile")}))}},12:function(e,t,n){n(1),n(22),n(27),n(29),n(31),n(33),n(35),e.exports=n(37)},22:function(e,t){},27:function(e,t){},29:function(e,t){},31:function(e,t){},33:function(e,t){},35:function(e,t){},37:function(e,t){}},[[12,0,1]]]);

locales/en.json

@@ -2,7 +2,7 @@
   "% min read": "% min read",
   "% posts": "% posts",
   "1 min read": "1 min read",
-  "1 post": "One post",
+  "1 post": "1 post",
   "Among with": "<br>Among with ",
   "Among with no break line": "Among with ",
   "Apparently there are no posts at the moment, check again later.": "Apparently there are no posts at the moment, check again later.",

locales/es.json

@@ -2,7 +2,7 @@
   "% min read": "% min de lectura",
   "% posts": "% artículos",
   "1 min read": "1 min de lectura",
-  "1 post": "Un artículo",
+  "1 post": "1 artículo",
   "Among with": "<br>Junto con ",
   "Among with no break line": "Junto con ",
   "Apparently there are no posts at the moment, check again later.": "Aparentemente no hay artículos en este momento, revisa más tarde.",

package.json

@@ -54,5 +54,5 @@
     "desktop": "assets/screenshot-desktop.jpg",
     "mobile": "assets/screenshot-mobile.jpg"
   },
-  "version": "0.7.6"
+  "version": "0.7.7"
 }

page-tags.hbs

@@ -0,0 +1,61 @@
+{{!--
+This template is used for the tags page.
+You must first create a page called Tags in the dashboard to enable it.
+--}}
+
+{{!-- This block loads specific styles for the authors page --}}
+{{#contentFor "styles"}}
+  <link rel="preload" href="{{asset "css/tags.css"}}" as="style" />
+
+  <link rel="stylesheet" type="text/css" href="{{asset "css/tags.css"}}" media="screen" />
+{{/contentFor}}
+
+{{!-- The tag below means: insert everything in this file
+into the {body} of the default.hbs template --}}
+{{!< default}}
+
+{{!-- Special header.hbs partial to generate the <header> tag --}}
+{{#post}}
+  {{> header background=feature_image}}
+{{/post}}
+
+<main class="main-wrap">
+  {{#post}}
+    {{!-- Inject styles of the hero image to make it responsive --}}
+    {{> hero background=feature_image}}
+    <div class="m-hero__content" data-aos="fade-down">
+      <h1 class="m-hero-title bigger">{{title}}</h1>
+      {{#if custom_excerpt}}
+        <p class="m-hero-description">{{custom_excerpt}}</p>
+      {{/if}}
+    </div>
+    </section>
+  {{/post}}
+  <div class="l-content">
+    <div class="l-wrapper" data-aos="fade-up" data-aos-delay="300">
+      <div class="l-tags-container">
+        {{#get 'tags' limit='all' include='count.posts'}}
+          {{#foreach tags}}
+            <div class="m-tag-card">
+              <a href="{{url}}" class="m-tag-card__link {{#unless feature_image}}no-picture{{/unless}}" aria-label="{{name}}">
+                {{#if feature_image}}
+                  <img class="m-tag-card__picture" src="{{img_url feature_image size="m"}}" loading="lazy" alt="">
+                {{/if}}
+                <div class="m-tag-card__info {{#unless feature_image}}no-picture{{/unless}}">
+                  <h4 class="m-tag-card__name">{{name}}</h4>
+                  <span class="m-tag-card__counter">
+                    {{plural count.posts empty=(t "No posts") singular=(t "1 post") plural=(t "% posts")}}
+                  </span>
+                </div>
+              </a>
+            </div>
+            {{else}}
+              <p class="m-not-found">
+                {{t "No tags found :("}}
+              </p>
+          {{/foreach}}
+        {{/get}}
+      </div>
+    </div>
+  </div>
+</main>

partials/loop.hbs

@@ -4,11 +4,7 @@
   {{#is "post"}}
     <div class="m-recommended-slider__item glide__slide">
   {{/is}}
-  {{#if feature_image}}
+  <article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}">
-    <article class="m-article-card {{post_class}}">
-  {{else}}
-    <article class="m-article-card no-picture {{post_class}}">
-  {{/if}}
     <div class="m-article-card__picture">
       <a href="{{url}}" class="m-article-card__picture-link" aria-hidden="true" tabindex="-1"></a>
       {{#if feature_image}}

src/sass/components/tags/_tag-card.scss

@@ -0,0 +1,87 @@
+.m-tag-card {
+  height: 180px;
+  margin: 0 0 20px;
+  position: relative;
+  border-radius: 10px;
+  border: 1px solid var(--secondary-border-color);
+  @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+
+  &:hover {
+    @include transform(translateY(-5px));
+
+    &:before {
+      @include bs(var(--article-shadow-hover));
+    }
+  }
+
+  @include respond-to('medium') {
+    width: 320px;
+    margin: 0 20px 40px;
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    bottom: 0;
+    left: 10px;
+    border-radius: 10px;
+    z-index: 1;
+    @include bs(var(--article-shadow-normal));
+    @include transition(all .25s cubic-bezier(.02,.01,.47,1));
+  }
+}
+
+.m-tag-card__link {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  overflow: hidden;
+  position: relative;
+  background-color: $black;
+  z-index: 2;
+
+  &.no-picture {
+    background-color: var(--secondary-subtle-color);
+  }
+}
+
+.m-tag-card__picture {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 10px;
+  object-fit: cover;
+  opacity: 0.7;
+  z-index: 1;
+}
+
+.m-tag-card__info {
+  position: absolute;
+  left: 15px;
+  bottom: 15px;
+  color: $white;
+  z-index: 2;
+
+  &.no-picture {
+    color: var(--titles-color);
+  }
+}
+
+.m-tag-card__name {
+  letter-spacing: 0.3px;
+  line-height: 1.3;
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin: 0 0 5px;
+}
+
+.m-tag-card__counter {
+  display: block;
+  letter-spacing: 0.2px;
+  font-size: 0.875rem;
+}

src/sass/layouts/_tags-container.scss

@@ -0,0 +1,13 @@
+.l-tags-container {
+  @include respond-to('medium') {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin: 0 auto;
+    max-width: 720px;
+  }
+
+  @include respond-to('large') {
+    max-width: 1080px;
+  }
+}

src/sass/tags.scss

@@ -0,0 +1,6 @@
+@import "common/mixins";
+@import "common/variables";
+
+@import "layouts/tags-container";
+
+@import "components/tags/tag-card";

src/webpack.mix.js

@@ -29,6 +29,7 @@ mix.js('js/helpers.js', 'js/')
   .sass('sass/listing.scss', 'css/')
   .sass('sass/post.scss', 'css/')
   .sass('sass/newsletter.scss', 'css/')
+  .sass('sass/tags.scss', 'css/')
   .sass('sass/404.scss', 'css/')
   .options({
     processCssUrls: false