editorial-autogestiva-jekyll-theme 0.2.8 → 0.3.0

data/_includes/editorial.html

@@ -1,19 +1,23 @@
-<article id="editorial" class="col h-card" itemscope itemtype="https://schema.org/Organization">
-  <div class="media">
-    <img
-      itemprop="logo"
-      class="u-photo"
-      src="{{ include.editorial.logo.path | thumbnail: 100 }}"
-      alt="{{ include.editorial.logo.description }}" />
-
-    <div class="media-body">
-      <h1 class="p-name" itemprop="name">{{ include.editorial.title }}</h1>
-      <p class="lead">{{ include.editorial.description }}</p>
+<article id="editorial" class="h-card" itemscope itemtype="https://schema.org/Organization">
+  <div class="row no-gutters mb-3">
+    <div class="col-12 col-md-4 mb-3 mb-md-0">
+      {%- include_cached
+            picture.html
+            image=include.editorial.logo
+            itemprop='logo' -%}
     </div>
 
+    <header class="col-12 col-md pl-3">
+      <h1 class="p-name" itemprop="name">
+        <a href="{{ include.editorial.title }}">
+          {{ include.editorial.title }}
+        </a>
+      </h1>
+      <p class="lead">{{ include.editorial.description }}</p>
+    </header>
   </div>
 
-  <div itemprop="location" itemscope itemtype="https://schema.org/PostalAddress">
+  <address itemprop="location" itemscope itemtype="https://schema.org/PostalAddress">
     {%- if include.editorial.address -%}
       <p class="p-street-address" itemprop="streetAddress">{{ include.editorial.address }}</p>
     {%- endif -%}
@@ -23,26 +27,16 @@
     {%- if include.editorial.country -%}
       <p class="p-country-name" itemprop="addressCountry">{{ include.editorial.country }}</p>
     {%- endif -%}
-  </div>
+  </address>
 
-  <ul>
+  <ul class="list-unstyled">
     {%- for social in include.editorial.social_networks -%}
-      <li><a rel="me" href="{{ social }}">
-        {% comment %}
-
-          Obtenemos la URL de la red social, eliminamos la www,
-          obtenemos el tercer elemento separando por / y el primero
-          separando por .
-
-          https://www.twitter.com/SuttyWeb
-          https://twitter.com/SuttyWeb
-          twitter.com
-          twitter
-          Twitter
-        {% endcomment %}
-        {% assign s = social | remove: 'www.' | split: '/' %}
-        {{ s[2] | split: '.' | first | capitalize }}
-      </a></li>
+      {% assign network = social | social_network %}
+      <li>
+        <a
+          target="_blank"
+          rel="noopener noreferrer me"
+          href="{{ social }}">{{ network.name | capitalize }}</a></li>
     {%- endfor -%}
   </ul>
 

data/_includes/file.html

@@ -0,0 +1,35 @@
+{%- assign name = include.field[0] -%}
+{%- assign id = include.field[1].id | default: name -%}
+{%- assign label = include.field[1]['path'].label[site.locale] -%}
+{%- assign help = include.field[1]['path'].help[site.locale] -%}
+{%- assign accept = include.field[1].accept -%}
+
+<label>{{ label }}</label>
+
+<div class="custom-file">
+  <input
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    type="{{ include.field[1].type }}"
+    name="{{ name }}[path]"
+    id="{{ id }}_path"
+    {% if accept %}
+    accept="{{ accept }}"
+    {% endif %}
+    class="custom-file-input" />
+
+  <label for="{{ id }}_path" class="custom-file-label">
+    {{ label }}
+    {% if include.field[1].required %}*{% endif %}
+  </label>
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/floating_alert.html

@@ -0,0 +1,6 @@
+<div
+  data-controller="floating-alert"
+  class="pointer-event-none floating-alert floating-alert-bottom d-flex justify-content-center w-100 position-fixed fade hide"
+  role="status" aria-live="polite" aria-atomic="true">
+  <div data-target="floating-alert.content" class="floating-alert-content white background-black-t4"></div>
+</div>

data/_includes/footer.html

@@ -1,12 +1,14 @@
-<footer>
-  <div class="row align-items-end">
-    {%- if include.footer -%}
-      {% assign editorial = site.posts | where: 'layout', 'editorial' | first %}
-      {% include_cached editorial.html editorial=editorial %}
-    {%- endif -%}
+<footer class="border-top pt-3 container">
+  <div class="row">
+    <div class="col">
+      {%- if include.footer -%}
+        {% assign editorial = site.posts | where: 'layout', 'editorial' | first %}
+        {% include_cached editorial.html editorial=editorial %}
+      {%- endif -%}
+    </div>
 
-    <div class="col text-right">
-      <ul class="">
+    <div class="col d-flex flex-column align-items-end justify-content-end">
+      <ul class="list-unstyled">
         {%- for link in site.i18n.footer.links %}
           <li>
             <a href="{{ link.url }}">{{ link.text }}</a>

data/_includes/form/boolean.html

@@ -1 +1 @@
-.././boolean.html
+../boolean.html

data/_includes/form/content.html

@@ -0,0 +1 @@
+../content.html

data/_includes/form/email.html

@@ -1 +1 @@
-.././email.html
+../email.html

data/_includes/form/file.html

@@ -0,0 +1 @@
+../file.html

data/_includes/form/hidden.html

@@ -1 +1 @@
-.././hidden.html
+../hidden.html

data/_includes/form/image.html

@@ -0,0 +1 @@
+../image.html

data/_includes/form/input.html

@@ -1 +1 @@
-.././input.html
+../input.html

data/_includes/form/markdown_content.html

@@ -0,0 +1 @@
+../markdown_content.html

data/_includes/form/number.html

@@ -1 +1 @@
-.././number.html
+../number.html

data/_includes/form/predefined_array.html

@@ -1 +1 @@
-.././predefined_array.html
+../predefined_array.html

data/_includes/form/section.html

@@ -1 +1 @@
-.././section.html
+../section.html

data/_includes/form/separator.html

@@ -1 +1 @@
-.././separator.html
+../separator.html

data/_includes/form/string.html

@@ -1 +1 @@
-.././string.html
+../string.html

data/_includes/form/submit.html

@@ -1 +1 @@
-.././submit.html
+../submit.html

data/_includes/form/tel.html

@@ -0,0 +1 @@
+../tel.html

data/_includes/form/text.html

@@ -1 +1 @@
-.././text.html
+../text.html

data/_includes/form/url.html

@@ -1 +1 @@
-.././url.html
+../url.html

data/_includes/image.html

@@ -0,0 +1,32 @@
+{%- assign name = include.field[0] -%}
+{%- assign id = include.field[1].id | default: name -%}
+{%- assign label = include.field[1]['path'].label[site.locale] -%}
+{%- assign help = include.field[1]['path'].help[site.locale] -%}
+
+<label>{{ label }}</label>
+
+<div class="custom-file">
+  <input
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    type="{{ include.field[1].type }}"
+    name="{{ name }}[path]"
+    id="{{ id }}_path"
+    accept="image/*"
+    class="custom-file-input" />
+
+  <label for="{{ id }}_path" class="custom-file-label">
+    {{ label }}
+    {% if include.field[1].required %}*{% endif %}
+  </label>
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/input.html

@@ -1,7 +1,14 @@
-{%- assign name = include.field[0] -%}
-{%- assign id = include.field[1].id | default: name -%}
+{% if include.form %}
+  {%- assign name = include.field[0] | append: ']' | prepend: '[' | prepend: include.form -%}
+  {%- assign id = include.field[1].id | default: name | replace: '[', '_' | remove: ']' -%}
+{% else %}
+  {%- assign name = include.field[0] -%}
+  {%- assign id = include.field[1].id | default: name %}
+{% endif %}
+
 {%- assign label = include.field[1].label[site.locale] -%}
 {%- assign help = include.field[1].help[site.locale] -%}
+{%- assign error = include.field[1].error[site.locale] -%}
 {%- assign autocomplete = include.field[1].autocomplete -%}
 
 <div class="form-group">
@@ -11,6 +18,7 @@
   </label>
 
   <input
+    {{ include.field[1].extra.input }}
     {% if help %}
       aria-describedby="help-{{ id }}"
     {% endif %}
@@ -25,6 +33,10 @@
     {% endif %}
     class="form-control" />
 
+  {%- if error -%}
+    <div class="invalid-feedback">{{ error }}</div>
+  {%- endif -%}
+
   {%- if help -%}
     <small id="help-{{ id }}" class="form-text">
       {{ help }}

data/_includes/item.html

@@ -0,0 +1,38 @@
+{%- comment -%}
+El ítem tiene un dropdown si tiene sub ítems o si tiene categorías.
+{%- endcomment -%}
+{%- assign dropdown = include.item.items | present -%}
+{%- unless dropdown -%}
+{%- assign dropdown = include.item.categories | present -%}
+{%- endunless -%}
+
+<div class="nav-item w-100 w-lg-auto {{ dropdown | value_if: 'dropdown d-flex flex-wrap' }}">
+  {%- comment -%}
+  La URL del item puede ser:
+  * El artículo vinculado
+  * El vínculo escrito manualmente
+  * La primera categoría de la lista
+  * La dirección propia (en el caso de categorías)
+  {%- endcomment -%}
+  <a
+    href="{{ include.item.post.url | default: include.item.link | default: include.item.categories[0].url | default: include.item.url }}"
+    class="nav-link flex-grow-1 flex-grow-lg-0">
+    {{ include.item.title }}
+  </a>
+
+  {%- if dropdown -%}
+    <button class="dropdown-toggle border-0 background-white w-5 w-lg-auto pl-lg-3"></button>
+    <div class="dropdown-menu w-100 w-lg-auto flex-grow-1 flex-grow-lg-0">
+      {% for item in include.item.items %}
+        {%- include_cached item.html item=item -%}
+      {% endfor %}
+
+      {%- comment -%}
+      Esto necesita `replace` en sutty-archives
+      {%- endcomment -%}
+      {%- for item in include.item.categories offset: 1 -%}
+        {%- include_cached item.html item=item -%}
+      {%- endfor -%}
+    </div>
+  {%- endif -%}
+</div>

data/_includes/markdown_content.html

@@ -0,0 +1 @@
+{% include text.html field=field %}

data/_includes/menu.html

@@ -0,0 +1,27 @@
+{%- comment -%}
+Empezamos con los ítems que no dependen de otros e implementamos
+recursivamente.
+{%- endcomment -%}
+{%- assign items = site.posts | where: 'layout', 'menu' | where: 'item', nil -%}
+
+<nav class="navbar navbar-expand-lg navbar-light">
+  <button class="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#menu"
+          aria-label="{{ site.i18n.menu.title }}">
+    <span class="navbar-toggler-icon"></span>
+  </button>
+
+  <div class="collapse navbar-collapse" id="menu">
+    <div class="navbar-nav w-100 d-flex align-items-start justify-content-center">
+      {% for item in items %}
+        {%- include_cached item.html item=item -%}
+      {% endfor %}
+
+      <div class="nav-item w-100 w-lg-auto">
+        {%- include_cached search.html -%}
+      </div>
+    </div>
+  </div>
+</nav>

data/_includes/navbar.html

@@ -1,33 +1,37 @@
-{% assign editorial = site.posts | where: 'layout', 'editorial' | first %}
+{%- assign items = site.posts | where: 'layout', 'menu' | where: 'item', nil -%}
 
-<nav class="navbar navbar-expand-lg navbar-light bg-light d-print-block" role="navigation" aria-label="{{ site.i18n.menu.title }}">
-  <a class="navbar-brand" href="">
+<nav class="navbar navbar-expand-lg navbar-light d-print-block" role="navigation" aria-label="{{ site.i18n.menu.title }}">
+  <a class="navbar-brand w-100 w-lg-auto" href="?">
     {{ site.title }}
   </a>
 
-  {% comment %}
-    TODO: Add CSS-only hamburger menu.
-  {% endcomment %}
-  <ul class="navbar-nav d-print-none">
-    {%- for item in site.i18n.menu.items -%}
-      {% comment %}
-        This makes it hard to just cache the whole navbar, but we prefer
-        to mark the active item in code rather than with JS.
-      {% endcomment %}
+  <button class="navbar-toggler"
+          type="button"
+          data-toggle="collapse"
+          data-target="#menu"
+          aria-label="{{ site.i18n.menu.title }}">
+    <span class="navbar-toggler-icon"></span>
+  </button>
 
-      {% assign url = item.url | liquify %}
+  <div class="collapse navbar-collapse order-last order-md-2" id="menu">
+    <div class="navbar-nav w-100 d-flex align-items-start justify-content-center">
+      {% for item in items %}
+        {%- include_cached item.html item=item -%}
+      {% endfor %}
 
-      <li class="nav-item">
-        <a class="nav-link{% if page.url == url %} active{% endif %}" href="{{ url }}">
-          {{ item.text }}
+      {% comment %}
+      <div class="nav-item w-100 w-lg-auto">
+        {%- include_cached search.html -%}
+      </div>
+      {% endcomment %}
+    </div>
+  </div>
 
-          {%- if page.url == url -%}
-            <span class="sr-only">
-              {{ site.i18n.menu.active | default: '(current)' }}
-            </span>
-          {%- endif -%}
-        </a>
-      </li>
-    {%- endfor -%}
-  </ul>
+  <a class="black pr-lg-3 pl-lg-3 order-md-last" href="{{ site.cart.url }}">
+    <span class="d-flex align-items-center justify-content-center" data-controller="cart-counter">
+      <i class="fa fa-fw fa-2x fa-shopping-cart"></i>
+      <span class="sr-only">{{ site.cart.title }}</span>
+      <span class="font-weight-bold ml-1" data-target="cart-counter.counter">0</span>
+    </span>
+  </a>
 </nav>

data/_includes/notification.html

@@ -0,0 +1,5 @@
+<div
+  data-controller="notification"
+  data-notification-templates="assets/templates/"
+  class="notification fixed-top w-100 fade collapse hide">
+</div>

data/_includes/password.html

@@ -0,0 +1 @@
+{% include input.html field=include.field form=include.form %}

data/_includes/picture.html

@@ -0,0 +1,23 @@
+{% comment %}
+Imágenes responsive.  Esto logra que solo se carguen las versiones de
+las imágenes con el ancho máximo de la pantalla.
+
+TODO: Las imágenes en md y superior nunca llegan al ancho máximo así
+que tienen una resolución de más.
+{% endcomment %}
+{%- assign image = include.image.path | default: 'public/placeholder.png' %}
+{%- assign height = include.height | default: site.i18n.post.height -%}
+{%- assign width = include.width | default: '100' -%}
+
+<picture>
+  {% for size in site.images.sizes %}
+    <source srcset="{{ image | thumbnail: size }}" media="(max-width: {{ size }}px)" />
+  {% endfor %}
+
+  <img
+    class="u-photo w-{{ width }} {{ include.cover | equals: false | value_unless: 'fit-cover' }} h-{{ height }} {{ include.extra }}"
+    loading="lazy"
+    itemprop="{{ include.itemprop | default: 'image' }}"
+    src="{{ image | thumbnail: 1140 }}"
+    alt="{{ include.image.description | include.default_description }}" />
+</picture>