Widget generador de secciones por etiquetas

/*!
 * wjs-section v2.0.0
 * Copyright 2020 zkreations
 * Licensed under MIT (github.com/zkreations/wjs-sections/blob/master/LICENSE)
 */
/*! Core (No modificar) {{*/
LinkList201,.widget#LinkList201{background:0 0;margin:0;padding:0;position:relative;-webkit-box-shadow:0 0 transparent;box-shadow:0 0 transparent;outline:0;border:0;display:block}.wjs-section__more{display:inline-block}.wjs-section{font-size:14px;margin-left:-.5em;margin-right:-.5em;display:-ms-flexbox;display:-webkit-box;display:flex;-ms-flex-align:start;-webkit-box-align:start;align-items:start;-ms-flex-wrap:wrap;flex-wrap:wrap}.wjs1-card{padding-right:.5em;padding-left:.5em;padding-bottom:1em;width:100%}.wjs1-card__image{overflow:hidden;display:block;-webkit-transform:translateZ(0);transform:translateZ(0)}.wjs1-card__image img{width:100%;transition:-webkit-transform .3s;-webkit-transition:-webkit-transform .3s;-o-transition:transform .3s;transition:transform .3s;transition:transform .3s,-webkit-transform .3s;-webkit-transform:scale(1) rotate(0) translateZ(0);transform:scale(1) rotate(0) translateZ(0);will-change:transform}.wjs1-card__image:hover img{-webkit-transform:scale(1.05) rotate(-2deg) translateZ(0);transform:scale(1.05) rotate(-2deg) translateZ(0)}.wjs1-card__content{overflow:hidden}@media (min-width:576px){.wjs1-card{width:50%}}@media (min-width:768px){.wjs1-card{width:33.333333%}}/*! Material Design Spinner | codepen.io/zkreations/pen/JwjpMV */.circular{-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;height:84px;position:relative;width:84px}.circular .path{-webkit-animation:dash 1.5s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite;cx:42px;cy:42px;fill:none;r:16.8px;stroke:#141414;stroke-dasharray:1%,200%;stroke-dashoffset:0;stroke-linecap:round;stroke-width:4}@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes dash{0%{stroke-dasharray:1%,200%;stroke-dashoffset:0}50%{stroke-dasharray:90%,200%;stroke-dashoffset:-35%}100%{stroke-dasharray:90%,200%;stroke-dashoffset:-124%}}@keyframes dash{0%{stroke-dasharray:1%,200%;stroke-dashoffset:0}50%{stroke-dasharray:90%,200%;stroke-dashoffset:-35%}100%{stroke-dasharray:90%,200%;stroke-dashoffset:-124%}}
/*}} Fin del core */

/*! Personalización */
/* Card
-------------------------------------*/
.wjs1-card__content {
    box-shadow: 0 2px 2px 0 rgba(0,0,0,.05),0 1px 5px 0 rgba(0,0,0,.05),
                0 2px 3px -2px rgba(0,0,0,.4); /* sombra */
    border-radius: 4px; /* borde redondeado */
    background-color: #fff; /* color de fondo */
}
.wjs1-card__meta {
    padding: 1.5em; /* Naruto, digo relleno */
}
.wjs1-card__title {
    font-size: 1.2em; /* tamaño de los títulos */
}
.wjs1-card__title a {
    color: #262626; /* color de los títulos */
}
.wjs1-card__date {
    color: #AAA; /* color de la fecha */
    font-size: .9em; /* tamaño de los títulos */
}
.wjs1-card__snippet {
    padding-top: .5em; /* separación */
    color: #757575; /* color del resumen */
    font-size: 1.1em; /* tamaño de los títulos */
}
/* Botón "Mostrar todo"
-------------------------------------*/
.wjs-section__more {
     margin-top: 1rem; /* separación */
     padding: .8rem 1.5rem; /* relleno */
     background: #f1f1f1; /* color de fondo */
     font-size: 14px; /* tamaño del texto */
     font-weight: 400; /* densidad del texto */
     color: #757575; /* color */
     border-radius: 3px; /* borde redondeado */
}

<b:widget cond='data:view.isHomepage' id='LinkList201' title='WJS Sections' type='LinkList'>
   <b:includable id='main'>
      <b:loop values='data:links' var='section'>
        <b:with expr:value='"{" + data:section.target + "}"' var='category'>
          <div class='widget'>
            <b:include name='sections-title'/>
            <b:include name='content'/>
          </div>
        </b:with>
      </b:loop>
      <b:include name='js'/>
    </b:includable>
   <b:includable id='sections-title'>
      <b:tag expr:name='data:widgets ? "h3" : "h2"' class='widget-title'>
        <span class='widget-name'><data:section.name/></span>
      </b:tag>
   </b:includable>
   <b:includable id='content'>
      <div class='widget-content'>
        <div class='wjs-section' expr:data-category="data:category.tag">
          <b:attr cond='data:category.results' name='data-max-results' expr:value='data:category.results'/>
          <svg class='circular' xmlns='http://www.w3.org/2000/svg'><circle class='path'/></svg>
        </div>
        <a class='wjs-section__more' expr:href='+("/search/label/",data:category.tag)'>
          <data:messages.showAll/>
        </a>
      </div><!-- .widget-content -->
   </b:includable>
   <b:includable id='js'>
      <script>//<![CDATA[
         /*!
          * wjs-section v2.0.0
          * Copyright 2018 zkreations
          * Developed by José Gregorio (fb.com/JGMateran)
          * Licensed under MIT (github.com/zkreations/wjs-sections/blob/master/LICENSE)
          */
         'use strict';
         var callbacks = {};
         var defaults = {
             homeUrl: window.location.protocol + '//' + window.location.hostname, // Url blog
             image: 'img/no-img-blogger.png', // Imagen por defecto
             className: '.wjs-section',
             snippet: 100, // Cantidad texto para el resumen
             imgSize: 'w300-h168-p-k-no-nu', // Cantidad texto para el resumen
         };
         //! Core (No modificar) {{
         var section = {'category': null,'max-results': 6,template:{default:'<div class="wjs1-card"><div class="wjs1-card__content"><div class="wjs1-card__header"><a class="wjs1-card__image" href="URL"><img src="IMG" /></a></div><div class="wjs1-card__meta"><h2 class="wjs1-card__title"><a href="URL">TITLE</a></h2><time class="wjs1-card__date">TIME</time><p class="wjs1-card__snippet">SNIPPET</p></div></div></div>',empty:'<p class="wjs1-alert">No se han encontrado entradas</p>'}};function forEach(items,callback){var i,item;for(i=0;item=items[i++];)if(false===callback.call(item,i,item))break;return items}function getCurrentData(element){var name,value;var obj={};for(name in section){value=element.getAttribute("data-"+name);if(value)obj[name]=value}return obj}function temp(content,data){var name;for(name in data)content=content.replace(new RegExp(name, "g"),data[name]);return content}function getLabel(element,data){var name;var category=data.category;var script=document.createElement("script");var src=defaults.homeUrl+"/feeds/posts/default?alt=json-in-script&callback=callbacks."+category.replace(/[^A-Z0-9]/ig, '');callbacks[category.replace(/[^A-Z0-9]/ig, '')]=function(json){var i,post;var html="";var entry=json.feed.entry;if(entry)for(i=0;post=entry[i++];){var content=post.content;var summary=post.summary;var body=content?content.$t:summary.$t;var img=post.media$thumbnail;var tempHtml=document.createElement("div");tempHtml.innerHTML=body;var imgHtml=tempHtml.querySelector("img");html+=temp(data.template,{IMG:(img?img.url:imgHtml?imgHtml.src:defaults.image).replace(/s\B\d{2,4}-c/,defaults.imgSize),TITLE:post.title.$t,TIME:(new Date(post.published.$t)).toLocaleDateString("es-ES",{month:"long",day:"2-digit"}),SNIPPET:body.replace(/<[^>]*>?/g,"").substring(0,defaults.snippet)+"...",URL:function(){var i,link;for(i=0;link=post.link[i++];)if(link.rel==="alternate")return link.href}})}else html+=section.template.empty;element.innerHTML=html};for(name in data)if(name!=="template")src+="&"+name+"="+data[name];script.src=src;document.body.appendChild(script)}forEach(document.querySelectorAll(defaults.className),function(index,element){var currentData=getCurrentData(element);if(currentData.category){if(!currentData["max-results"])currentData["max-results"]=section["max-results"];currentData.template=section.template["default"];getLabel(element,currentData)}});
         //!}} Fin del core
      //]]></script>
   </b:includable>
</b:widget>