Taglist (eddiesigner#228)

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 {{post_class}}">
-  {{else}}
-    <article class="m-article-card no-picture {{post_class}}">
-  {{/if}}
+  <article class="m-article-card {{#unless feature_image}}no-picture{{/unless}} {{post_class}}">
     <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