recursero-jekyll-theme 0.1.3 → 0.3.0

data/_data/layouts/theme.yml

@@ -0,0 +1,295 @@
+---
+title:
+  type: "string"
+  required: true
+  label:
+    en: "Title"
+    es: "Título"
+  help:
+    en: "The name you want to give to this customization"
+    es: "El nombre que quieras darle a esta personalización"
+font_family_sans_serif:
+  type: "predefined_value"
+  label:
+    en: "Select a typography for the site"
+    es: "Selecciona una tipografía para el sitio"
+  help:
+    en: "If you'd like us to add support for a typography, please send us an e-mail"
+    es: "Si quieres que agreguemos una tipografía, por favor envíanos un e-mail"
+  default:
+    en: ""
+    es: ""
+  values:
+    en:
+      "": "Default"
+      Roboto: "Roboto"
+      Saira: "Saira"
+    es:
+      "": "Default"
+      Roboto: "Roboto"
+      Saira: "Saira"
+font_family_monospace:
+  type: "predefined_value"
+  label:
+    en: "Select a monospace typography for the site"
+    es: "Selecciona una tipografía monospace para el sitio"
+  help:
+    en: ""
+    es: ""
+  default:
+    en: ""
+    es: ""
+  values:
+    en:
+      "": "Default"
+      Roboto Mono: "Roboto Mono"
+      Liberation Mono: "Liberation Mono"
+    es:
+      "": "Default"
+      Roboto Mono: "Roboto Mono"
+      Liberation Mono: "Liberation Mono"
+headings_font_family:
+  type: "predefined_value"
+  label:
+    en: "Select a typography for headings"
+    es: "Selecciona una tipografía para los títulos del sitio"
+  help:
+    en: "If you'd us to add support for a typography, please send us an e-mail"
+    es: "Si quieres que agreguemos una tipografía, por favor envíanos un e-mail"
+  default:
+    en: ""
+    es: ""
+  values:
+    en:
+      "": "Default"
+      Roboto: "Roboto"
+      Saira: "Saira"
+    es:
+      "": "Default"
+      Roboto: "Roboto"
+      Saira: "Saira"
+enable_rounded:
+  type: "boolean"
+  label:
+    en: "Rounded corners"
+    es: "Esquinas redondeadas"
+  help:
+    en: "For buttons, form inputs, etc."
+    es: "De los botones, campos de formularios, etc."
+  default:
+    es: false
+    en: false
+enable_shadows:
+  type: "boolean"
+  label:
+    en: "Shadows"
+    es: "Sombras"
+  help:
+    en: "Shadows behind elements"
+    es: "Sombras en los elementos"
+  default:
+    es: false
+    en: false
+body_bg:
+  type: "color"
+  label:
+    en: "Background color"
+    es: "Color de fondo"
+  help:
+    en: "Site's background color"
+    es: "Color de fondo del sitio"
+  default:
+    es: "#FFFFFF"
+    en: "#FFFFFF"
+body_color:
+  type: "color"
+  label:
+    en: "Text color"
+    es: "Color del texto"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "#212529"
+    en: "#212529"
+primary:
+  type: "color"
+  label:
+    en: "Primary color"
+    es: "Color principal"
+  help:
+    en: "Highlights certain elements"
+    es: "Resalta algunos elementos"
+  default:
+    es: "#f206f9"
+    en: "#f206f9"
+secondary:
+  type: "color"
+  label:
+    en: "Secondary color"
+    es: "Color secundario"
+  help:
+    en: "Highlights certain elements"
+    es: "Resalta algunos elementos"
+  default:
+    es: "#13fefe"
+    en: "#13fefe"
+link_color:
+  type: "color"
+  label:
+    en: "Link color"
+    es: "Color de los vínculos"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "#007bff"
+    en: "#007bff"
+link_hover_color:
+  type: "color"
+  label:
+    en: "Link color when selected"
+    es: "Color de los vínculos al seleccionarlos"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "#0056b3"
+    en: "#0056b3"
+h1_font_size:
+  type: "string"
+  label:
+    en: "Height for first level headings"
+    es: "Altura de los títulos de primer nivel"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "2.5rem"
+    en: "2.5rem"
+h2_font_size:
+  type: "string"
+  label:
+    en: "Height for second level headings"
+    es: "Altura de los títulos de segundo nivel"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "2rem"
+    en: "2rem"
+h3_font_size:
+  type: "string"
+  label:
+    en: "Height for third level headings"
+    es: "Altura de los títulos de tercer nivel"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "1.75rem"
+    en: "1.75rem"
+h4_font_size:
+  type: "string"
+  label:
+    en: "Height for fourth level headings"
+    es: "Altura de los títulos de cuarto nivel"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "1.5rem"
+    en: "1.5rem"
+h5_font_size:
+  type: "string"
+  label:
+    en: "Height for fifth level headings"
+    es: "Altura de los títulos de quinto nivel"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "1.25rem"
+    en: "1.25rem"
+h6_font_size:
+  type: "string"
+  label:
+    en: "Height for sixth level headings"
+    es: "Altura de los títulos de sexto nivel"
+  help:
+    en: ""
+    es: ""
+  default:
+    es: "1rem"
+    en: "1rem"
+mark_bg:
+  type: "color"
+  label:
+    en: "Highlight color"
+    es: "Color de resaltado"
+  help:
+    en: "Default color for highlighted text"
+    es: "Color por defecto para el texto resaltado"
+  default:
+    es: "#fcf8e3"
+    en: "#fcf8e3"
+navbar_light_color:
+  type: "color"
+  label:
+    en: "Navigation bar item color"
+    es: "Color de ítem en la barra de navegación"
+  help:
+    en: "Text and icons"
+    es: "Texto e íconos"
+  default:
+    es: "#ced4da"
+    en: "#ced4da"
+navbar_light_hover_color:
+  type: "color"
+  label:
+    en: "Navigation bar item color when selected"
+    es: "Color de ítem seleccionado en la barra de navegación"
+  help:
+    en: "Text and icons"
+    es: "Texto e íconos"
+  default:
+    es: "#6c757d"
+    en: "#6c757d"
+navbar_light_active_color:
+  type: "color"
+  label:
+    en: "Navigation bar item color when active"
+    es: "Color de ítem activo en la barra de navegación"
+  help:
+    en: "Text and icons"
+    es: "Texto e íconos"
+  default:
+    es: "#212529"
+    en: "#212529"
+testing:
+  type: "boolean"
+  label:
+    en: "Testing"
+    es: "Testeo"
+  help:
+    en: "When activated, shows screen information for testing"
+    es: "Al activar se muestra información de la pantalla para testing"
+  default:
+    es: false
+    en: false
+draft:
+  type: "boolean"
+  label:
+    es: "Borrador"
+    en: "Draft"
+  help:
+    es: "Al activar \"Borrador\" este contenido se mantendrá disponible en el panel, pero no se publica en el sitio como los demás contenidos al tocar \"Publicar todos los cambios\""
+    en: "By activating \"Draft\", this content will remain available on the dashboard, but will not be published on the site when you tap \"Publish all changes\" (other content which does not have this option selected will)."
+order:
+  type: "order"
+  label:
+    es: "Orden"
+    en: "Order"
+  help:
+    es: "La posición del artículo en la lista de artículos"
+    en: "Position in list of posts"

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

@@ -1,4 +1,8 @@
 {%- assign about = site.posts | find: 'layout', 'about' -%}
+{%- assign license = site.posts | find: "layout", "license" -%}
+{%- assign code_of_conduct = site.posts | find: "layout", "code_of_conduct" -%}
+{%- assign privacy_policy = site.posts | find: "layout", "privacy_policy" -%}
+
 <footer class="d-flex align-items-center justify-content-center mt-5 pt-3 pb-3 background-gray-dark">
   {%- if about.email -%}
     <a class="gray" href="mailto:{{ about.email }}" rel="me" title="{{ site.title }}">{{ about.email }}</a>
@@ -11,4 +15,23 @@
       <span class="sr-only">{{ n.name }}</span>
     </a>
   {%- endfor -%}
+
+  <ul class="list-unstyled">
+  {% if license %}
+    <li>
+      <a href="{{ license.url }}" rel="license">{{ license.title }}</a>
+    </li>
+  {% endif %}
+
+  {% if code_of_conduct %}
+    <li>
+      <a href="{{ code_of_conduct.url }}" rel="code-of-conduct">{{ code_of_conduct.title }}</a>
+    </li>
+  {% endif %}
+
+  {% if privacy_policy %}
+    <li>
+      <a href="{{ privacy_policy.url }}" rel="privacy-policy">{{ privacy_policy.title }}</a>
+    </li>
+  {% endif %}
 </footer>

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

@@ -0,0 +1,45 @@
+---
+layout: default
+---
+
+{% assign date_format = site.i18n.date.format | default: "%b %-d, %Y" %}
+
+<article class="h-entry" itemscope itemtype="http://schema.org/Article">
+  <header>
+    <h1 class="p-name" itemprop="name headline">{{ page.title | default: '' | escape }}</h1>
+
+    {%- if page.description -%}
+      <p class="lead p-summary" itemprop="description">{{ page.description | default: '' | escape }}</p>
+    {%- endif -%}
+
+    <p>
+      {{ site.i18n.published_at }}
+
+      <time class="dt-published" datetime="{{ page.date | date_to_xmlschema }}" itemprop="datePublished">
+        {{ page.date | date_local: date_format }}
+      </time>
+
+      {% if page.last_modified_at %}
+        {{ site.i18n.last_modified_at }}
+
+        <time class="dt-published" datetime="{{ page.last_modified_at | date_to_xmlschema }}" itemprop="datePublished">
+          {{ page.last_modified_at | date_local: date_format }}
+        </time>
+      {% endif %}
+    </p>
+  </header>
+
+  <div class="e-content" itemprop="articleBody">
+    {{ content }}
+  </div>
+
+  <footer>
+    <a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
+      {{ site.url }}{{ page.url }}
+    </a>
+
+    {%- if page.uuid -%}
+      <span hidden itemprop="identifier">{{ page.uuid }}</span>
+    {%- endif -%}
+  </footer>
+</article>

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">