recursero-jekyll-theme 0.1.3 → 0.2.0

data/_data/layouts/menu.yml

@@ -0,0 +1,73 @@
+---
+title:
+  type: 'string'
+  required: true
+  label:
+    en: ''
+    es: 'Nombre del ítem'
+  help:
+    en: ''
+    es: 'Tal como aparece en el menú'
+post:
+  type: 'belongs_to'
+  label:
+    en: ''
+    es: 'Artículo'
+  help:
+    en: ''
+    es: 'Si el ítem lleva a un artículo fijo, asociarlo aquí'
+item:
+  type: 'belongs_to'
+  inverse: items
+  filter:
+    layout: menu
+  label:
+    en: ''
+    es: 'Ítem anterior'
+  help:
+    en: ''
+    es: 'Si es un sub ítem, asociar el ítem superior aquí'
+items:
+  type: 'has_many'
+  inverse: item
+  filter:
+    layout: menu
+  label:
+    en: ''
+    es: 'Sub ítemes'
+  help:
+    en: ''
+    es: 'Si el ítem tiene sub ítems, asociarlos aquí'
+link:
+  type: 'string'
+  label:
+    en: ''
+    es: 'Vínculo'
+  help:
+    en: ''
+    es: 'Si el ítem lleva a una página o sección especial, asociarla aquí'
+categories:
+  type: 'array'
+  label:
+    en: ''
+    es: 'Categorías'
+  help:
+    en: ''
+    es: 'Si el ítem lleva un sub menú de categorías, agregarlas aquí'
+draft:
+  type: 'boolean'
+  label:
+    es: 'Borrador'
+    en: 'Draft'
+  help:
+    es: 'Este artículo aun no está listo para publicar'
+    en: "This post isn't ready to be published yet"
+order:
+  type: 'order'
+  required: true
+  label:
+    es: 'Orden'
+    en: 'Order'
+  help:
+    es: 'La posición del artículo en la lista de artículos'
+    en: 'The post position in the posts list'

data/_includes/contact.html

@@ -1,15 +1,18 @@
 {% comment %}
-  Esta imagen obtiene una cookie desde la API de Sutty para autorizar el
-  envío del formulario.
+Esta imagen obtiene una cookie desde la API de Sutty para autorizar el
+envío del formulario.
 {% endcomment %}
-<img class="d-none" src="https://api.sutty.nl/v1/sites/{{ site.hostname }}/contact/cookie.png" />
+<img class="d-none invisible" src="https://api.sutty.nl/v1/sites/{{ site.hostname }}/contact/cookie.png" />
 
 {% comment %}
   El formulario se envía a la API.  La definición del formulario se
   encuentra en _data/forms/contacto.yml
 {% endcomment %}
-<form action="https://api.sutty.nl/v1/sites/{{ site.hostname }}/contact/contacto"
-      method="post">
+<form
+  data-controller="contact"
+  data-delay="60"
+  action="https://api.sutty.nl/v1/sites/{{ site.hostname }}/contact/{{ include.name }}"
+  method="post">
   {%- for field in include.form -%}
     {% assign template = field[1].type | append: '.html' %}
     <div class="col{{ field[1].col | default: 12 | prepend: '-' }}">

data/_includes/floating_alert.html

@@ -0,0 +1,6 @@
+<div
+  data-controller="floating-alert"
+  class="floating-alert floating-alert-bottom floating-alert-default"
+  role="status" aria-live="polite" aria-atomic="true">
+  <div data-target="toast.content" class="floating-alert-content white background-black-t4"></div>
+</div>

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/menu.html

@@ -0,0 +1,23 @@
+{%- 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>
+  </div>
+</nav>

data/_includes/onboarding.html

@@ -0,0 +1,37 @@
+{% comment %}
+La barra de notificaciones, donde le pedimos a les usuaries que vayan
+haciendo varias cosas.  Quizás debería llamarse onboarding.
+
+Primero tenemos que poder salir del navegador interno de Facebook,
+Instagram, Telegram, etc.
+{% endcomment %}
+
+<aside
+  data-sw="{{ jekyll.production | ternary: site.data.assets['sw.js'], 'sw.js' }}"
+  data-controller="onboarding"
+  class="w-100 background-primary"
+  role="status"
+  aria-live="polite"
+  aria-atomic="true">
+  <div data-onboarding-target="internalBrowser" hidden>
+    <div class="h-20vh d-flex align-items-center">
+      {% comment %}
+      Con esta URL le decimos a Android y posible iOS que queremos abrir
+      este link en un navegador externo.
+
+      https://stackoverflow.com/a/58342222
+      {% endcomment %}
+      <a href="intent:{{ site.url }}#Intent;end" class="btn btn-block btn-primary">
+        {{ site.i18n.onboarding.internal_browser }}
+      </a>
+    </div>
+  </div>
+
+  <div data-onboarding-target="browser" hidden>
+    <div class="h-20vh d-flex align-items-center">
+      <button data-action="onboarding#install" class="btn btn-block btn-primary">
+        {{ site.i18n.onboarding.browser }}
+      </button>
+    </div>
+  </div>
+</aside>

data/_includes/pack.html

@@ -0,0 +1 @@
+<script defer src="{{ jekyll.production | ternary: site.data.assets['assets/js/pack.js'], 'assets/js/pack.js' }}"></script>

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="image"
+    src="{{ image | thumbnail: 1140 }}"
+    alt="{{ include.image.description | include.default_description }}" />
+</picture>

data/_includes/preload_font.html

@@ -0,0 +1 @@
+<link rel="preload" as="font" type="font/woff2" crossorigin href="{{ include.font }}?{{ site.time | date: '%s' }}" />

data/_includes/search.html

@@ -1,15 +1,16 @@
 {%- comment -%}
 Encabezado con buscador
 {%- endcomment -%}
+{%- assign param = include.param | default: 'search' -%}
 <section id="{{ site.i18n.search.id }}">
   <div class="jumbotron">
-    <form method="get" class="search" action="{{ site.i18n.search.url }}" data-controller="search">
+    <form method="get" class="search" action="{{ site.i18n.search.url }}" data-controller="search" data-action="search#search">
       <div class="form-group">
-        <label for="search" class="sr-only">{{ site.i18n.search.placeholder }}</label>
+        <label for="{{ param }}_q" class="sr-only">{{ site.i18n.search.placeholder }}</label>
         <input
           type="search"
           required
-          id="q"
+          id="{{ param }}_q"
           name="q"
           placeholder="{{ site.i18n.search.placeholder }}"
           class="form-control form-control-lg m-0"

data/_includes/share.html

@@ -5,6 +5,7 @@
 {% endunless %}
 {% assign title = include.title | default: '' | cgi_escape %}
 {% assign description = include.description | default: '' | cgi_escape %}
+{% assign tags = include.tags | join: ',' | default: '' | cgi_escape %}
 
 <a
   {% if include.share.url == '%url' %}
@@ -12,10 +13,10 @@
   {% else %}
     target="_blank"
   {% endif %}
-  rel="nofollow"
+  rel="noopener nofollow"
   title="{{ include.share.title }}"
   class="d-flex flex-column align-items-center p-3"
-  href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description }}">
+  href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description | replace: '%tags', tags }}">
   <i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
   <span>{{ include.share.title }}</span>
 </a>

data/_includes/submit.html

@@ -1 +1,5 @@
-<input type="submit" class="btn btn-success" value="{{ include.field[1].label[site.locale] }}" />
+<input
+  data-target="contact.submit"
+  type="submit"
+  class="btn btn-success"
+  value="{{ include.field[1].label[site.locale] }}" />

data/_layouts/about.html

@@ -22,7 +22,7 @@ layout: default
 
     <p>
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-        {%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
         {{ page.date | date: date_format }}
       </time>
       {%- for author in page.author -%}

data/_layouts/default.html

@@ -9,14 +9,46 @@
     <meta name="color-scheme" content="light"/>
     <meta name="referrer" content="strict-origin-when-cross-origin"/>
 
+    {% comment %}
+    No tenemos forma de hashear SASS aún, por lo que renovamos la caché
+    aplicando la hora de compilación del sitio.  Es importante que los
+    CSS se renueven cuando se regenera el sitio, porque pueden contener
+    variables dinámicas (como personalización de colores y tipografía) o
+    minificarse distinto dependiendo del contenido.
+    {% endcomment %}
     <link href="assets/css/styles.css" rel="stylesheet">
-    <script defer type="text/javascript" src="assets/js/pack.js"></script>
+
+    {% comment %}
+    Webpack.  La configuración se pasa por variables de entorno, en
+    desarrollo hay que evitar el archivo .env (copiarlo de .env.example
+    si no existe.
+    {% endcomment %}
+    <link rel="preload" as="script" type="text/javascript" href="env.js" />
+    <script type="text/javascript" src="env.js"></script>
+    {% include_cached pack.html %}
+
+    {% comment %}
+    Agregar otras tipografías.  Esto hace que las tipografías se carguen
+    lo más rápido posible y minimizar el tiempo en que se ven las del
+    navegador.  En Firefox todavía no está soportado.
+
+    Fork Awesome lleva la hora de generación para poder renovarlo si
+    agregamos íconos nuevos, de lo contrario puede quedar cacheado para
+    siempre y les visitantes van a ver íconos rotos.
+    {% endcomment %}
+    {% include_cached preload_font.html font='assets/fonts/forkawesome-webfont.woff2' %}
+
+    <link rel="icon" type="image/svg+xml" href="public/favicon.svg">
+    <link rel="alternate icon" href="public/favicon.ico">
+    <link rel="mask-icon" href="public/favicon.svg" color="white">
+    <link rel="manifest" href="manifest.json">
 
     {% seo %}
     {% feed_meta %}
   </head>
   <body class="d-flex flex-column justify-content-between d-print-block min-vh-100">
-    {% include navbar.html %}
+    {%- include_cached onboarding.html -%}
+    {%- include_cached menu.html active_cache_key=page.layout %}
     {% include_cached search.html %}
 
     <main class="flex-grow-1 container-fluid d-flex flex-column justify-content-start">

data/_layouts/page.html

@@ -28,7 +28,7 @@ layout: default
 
     <p>
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-        {%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
         {{ page.date | date: date_format }}
       </time>
       {%- for author in page.author -%}

data/_layouts/place.html

@@ -28,7 +28,7 @@ layout: default
 
     <p>
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-        {%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
         {{ page.date | date: date_format }}
       </time>
       {%- for author in page.author -%}

data/_layouts/post.html

@@ -28,8 +28,8 @@ layout: default
 
     <p>
       <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
-        {%- assign date_format = site.i18n.date | default: "%b %-d, %Y" -%}
-        {{ page.date | date: date_format }}
+        {%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
+        {{ page.date | date_local: date_format }}
       </time>
       {%- for author in page.author -%}
         •

data/_sass/accessibility.scss

@@ -1,13 +1,54 @@
-* {
-  scroll-behavior: smooth;
-}
+////
+/// Accesibilidad
+/// @group Accesibilidad
+////
+
+/// La navegación es suave.  Esto hace que al navegar a elementos dentro
+/// de la misma página no haga un salto, sino que haya una transición.
+///
+/// Es especialmente útil en sliders.
+///
+/// Sin embargo puede producir mareos a algunas personas.
+* { scroll-behavior: smooth; }
 
-/*
- * Deshabilita animaciones si la usuaria las tiene deshabilitadas
- */
+/// Aquí se aplica la opción `prefers-reduced-motion: reduce`, pero
+/// SassDoc no la estaría mostrando.
 @media (prefers-reduced-motion: reduce) {
+/// Si les usuaries prefirieron reducir las animaciones de los sitios,
+/// deshabilitamos la navegación suavizada y las animaciones.
   * {
-    scroll-behavior: auto;
+    scroll-behavior: auto !important;
     animation: none !important;
   }
 }
+
+/// Utilizamos Axe para poder marcarnos cuáles elementos no cumplen con
+/// parámetros de accesibilidad durante el desarrollo.  Esta clase
+/// muestra un borde rojo alrededor de los elementos inaccesibles y al
+/// obtener el foco, muestra los mensajes de error generados por Axe.js.
+///
+/// @link _packs/entry.js
+.inaccesible {
+  outline: $red 1px solid;
+
+  @extend .position-relative;
+
+  &:focus::after {
+    @extend .position-fixed;
+    @extend .background-red;
+    @extend .white;
+    @extend .p-3;
+
+    left: 0;
+    bottom: 0;
+    width: 100vw;
+    font-size: 1rem;
+
+    word-wrap: normal;
+    line-break: auto;
+    white-space: pre-line;
+
+    /// El contenido se trae desde el ariaLabel del elemento.
+    content: attr(aria-label);
+  }
+}