recursero-jekyll-theme 0.1.5 → 0.2.0

data/_data/layouts/page.yml

@@ -27,7 +27,7 @@ description:
       topics, we invite you to use it as a content warning, so that others
       may decide when they want to read it.
 author:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Autores'
     en: 'Authors'
@@ -59,7 +59,7 @@ image:
         Describe the main image for the visually impaired and
         search engines
 content:
-  type: 'new_content'
+  type: 'content'
   label:
     es: 'Contenido del artículo'
     en: 'Post content'
@@ -67,7 +67,7 @@ content:
     es: 'Escribe aquí el artículo'
     en: 'Write your post here'
 permalink:
-  type: 'permalink'
+  type: 'string'
   label:
     es: 'Enlace'
     en: 'Permalink'
@@ -79,7 +79,7 @@ permalink:
       If you want to use link format for this post other than the default, 
       change it here.
 categories:
-  type: 'new_has_and_belongs_to_many'
+  type: 'has_and_belongs_to_many'
   filter:
     layout: 'category'
   inverse: 'posts'
@@ -90,7 +90,7 @@ categories:
     es: 'Ayudan a organizar los artículos en temas'
     en: 'Use categories to order posts by theme'
 tags:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Etiquetas'
     en: 'Tags'
@@ -98,7 +98,7 @@ tags:
     es: 'Usa etiquetas para resaltar palabras clave'
     en: 'Tags are helpful as keywords'
 posts:
-  type: 'new_has_many'
+  type: 'related_posts'
   label:
     es: 'Artículos relacionados'
     en: ''
@@ -122,7 +122,7 @@ order:
     es: 'La posición del artículo en la lista de artículos'
     en: 'Post position in list'
 notes:
-  type: 'new_html'
+  type: 'markdown'
   private: true
   label:
     es: 'Notas'

data/_data/layouts/place.yml

@@ -50,7 +50,7 @@ image:
         Describe the main image for the visually impaired and
         search engines
 content:
-  type: 'new_content'
+  type: 'content'
   label:
     es: 'Contenido del artículo'
     en: 'Post content'
@@ -58,7 +58,7 @@ content:
     es: 'Escribe aquí el artículo'
     en: 'Write your post here'
 permalink:
-  type: 'permalink'
+  type: 'string'
   label:
     es: 'Enlace'
     en: 'Permalink'
@@ -70,7 +70,7 @@ permalink:
       If you want to use link format for this post other than the default,
       change it here.
 categories:
-  type: 'new_has_and_belongs_to_many'
+  type: 'has_and_belongs_to_many'
   filter:
     layout: 'category'
   inverse: 'posts'
@@ -81,7 +81,7 @@ categories:
     es: 'Ayudan a organizar los artículos en temas'
     en: 'Use categories to order posts by theme'
 tags:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Etiquetas'
     en: 'Tags'
@@ -89,7 +89,7 @@ tags:
     es: 'Las etiquetas son términos ad-hoc para agrupar información, pueden ser lugares, especialidades, tipos de cirugía, alertas de contenido, etc.'
     en: 'Tags are helpful as keywords'
 posts:
-  type: 'new_has_many'
+  type: 'related_posts'
   label:
     es: 'Artículos relacionados'
     en: ''
@@ -122,7 +122,7 @@ coordenadas:
     help:
       es: ''
 email:
-  type: 'email'
+  type: 'string'
   label:
     es: 'Correo electrónico'
     en: 'E-mail address'
@@ -130,7 +130,7 @@ email:
     es: 'Dirección de correo electrónico para comunicarse'
     en: 'E-mail address to contact'
 transporte_publico:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Transporte público'
     en: 'Public transportation'
@@ -138,7 +138,7 @@ transporte_publico:
     es: 'Líneas de colectivos, trenes y subtes que pasan cerca'
     en: 'Buses, trains and subways nearby'
 telefonos:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Teléfonos'
     en: 'Phone numbers'
@@ -146,7 +146,7 @@ telefonos:
     es: 'Los números de teléfono para comunicarse, entre paréntesis los horarios u otra información útil, ej. "12345678 (de 10 a 17hs)"'
     en: 'Phone numbers to call, with opening hours or other useful information in between parentheses, for example "12345678 (de 10 a 17hs)"'
 horarios_de_atencion:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Horarios de atención'
     en: 'Working hours'
@@ -154,7 +154,7 @@ horarios_de_atencion:
     es: 'En el formato 09:00-17:00'
     en: 'Use the format 09:00-17:00'
 redes_sociales:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Sitio web y redes sociales'
     en: 'Social networks'
@@ -186,7 +186,7 @@ order:
     es: 'La posición del artículo en la lista de artículos'
     en: 'Post position in list'
 notes:
-  type: 'new_html'
+  type: 'markdown'
   private: true
   label:
     es: 'Notas'
@@ -194,3 +194,5 @@ notes:
   help:
     es: 'Comentarios internos, recordatorios, información privada.  ¡No se publica en el sitio!'
     en: "Internal comments, reminders, private information. This won't be published to the website and will appear encrypted in source code"
+ 
+

data/_data/layouts/post.yml

@@ -27,7 +27,7 @@ description:
       topics, we invite you to use it as a content warning, so that others
       may decide when they want to read it.
 author:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Autores'
     en: 'Authors'
@@ -59,7 +59,7 @@ image:
         Describe the main image for the visually impaired and
         search engines
 content:
-  type: 'new_content'
+  type: 'content'
   label:
     es: 'Contenido del artículo'
     en: 'Post content'
@@ -67,7 +67,7 @@ content:
     es: 'Escribe aquí el artículo'
     en: 'Write your post here'
 permalink:
-  type: 'permalink'
+  type: 'string'
   label:
     es: 'Enlace'
     en: 'Permalink'
@@ -79,7 +79,7 @@ permalink:
       If you want to use link format for this post other than the default,
       change it here.
 categories:
-  type: 'new_has_and_belongs_to_many'
+  type: 'has_and_belongs_to_many'
   filter:
     layout: 'category'
   inverse: 'posts'
@@ -90,7 +90,7 @@ categories:
     es: 'Ayudan a organizar los artículos en temas'
     en: 'Use categories to order posts by theme'
 tags:
-  type: 'new_array'
+  type: 'array'
   label:
     es: 'Etiquetas'
     en: 'Tags'
@@ -98,7 +98,7 @@ tags:
     es: 'Usa etiquetas para resaltar palabras clave'
     en: 'Tags are helpful as keywords'
 posts:
-  type: 'new_has_many'
+  type: 'related_posts'
   label:
     es: 'Artículos relacionados'
     en: ''
@@ -122,7 +122,7 @@ order:
     es: 'La posición del artículo en la lista de artículos'
     en: 'Post position in list'
 notes:
-  type: 'new_html'
+  type: 'markdown'
   private: true
   label:
     es: 'Notas'

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);
+  }
+}

data/_sass/editor.scss

@@ -0,0 +1,17 @@
+////
+/// Estilos del editor de Sutty
+/// @group Editor
+///
+
+/// Alineaciones soportadas.  No soportamos justificado porque es
+/// difícil que quede bien en web.
+$aligns: (left,center,right);
+
+/// Recorrer las alineaciones.
+/// @name Alineaciones
+@each $align in $aligns {
+  /// El editor coloca la alineación en un atributo data-align,
+  /// recorriendo cada una de las alineaciones disponibles.
+  /// @todo Lograr que SassDoc muestre el código completo.
+  div[data-align="#{$align}"] { text-align: $align; }
+}

data/_sass/embed.scss

@@ -1,3 +1,11 @@
+////
+/// Recursos externos
+/// @group Recursos externos
+///
+
+/// Los `<iframe>` ocupan todo el ancho del contenedor y tienen un alto
+/// mínimo de 480px.
+/// @link jekyll-embed-urls
 iframe {
   border: 0;
   width: 100%;