radios-comunitarias-jekyll-theme 0.3.0rc0 → 0.3.0rc1

data/_includes/toggler/toggler_label.html

@@ -0,0 +1,21 @@
+{% comment %}
+  Este label puede usarse para abrir y cerrar un elemento asociado a
+  toggler.html
+
+  Mientras compartan la misma ID puede colocarse el label en cualquier
+  lado del HTML.
+
+  @see toggler.html
+  @param :id [String] La ID del elemento
+  @param :class [String] CSS
+  @param :content [String] Contenido
+{% endcomment %}
+<label
+  data-controller="label"
+  tabindex="0"
+  aria-hidden="true"
+  id="{{ include.id }}-label"
+  for="{{ include.id }}"
+  class="{{ include.class }}">
+  {{ include.content }}
+</label>

data/_includes/toggler/toggler_related.html

@@ -0,0 +1,23 @@
+{% comment %}
+  Este label puede usarse para abrir y cerrar un elemento asociado a
+  toggler.html
+
+  Similar a toggler_label.html pero no comparte la misma ID, se puede
+  usar para botones de cierre o relacionados, pero que no aportan
+  descripción al elemento que se abre y cierra (especialmente para
+  lectores de pantalla).
+
+  @see togger_label.html
+  @param :id [String] La ID del elemento
+  @param :class [String] CSS
+  @param :content [HTML] Contenido
+{% endcomment %}
+<label
+  data-controller="label"
+  tabindex="0"
+  aria-hidden="true"
+  id="{{ include.id }}-label-related"
+  for="{{ include.id }}"
+  class="{{ include.class }}">
+  {{ include.content }}
+</label>

data/_includes/url.html

@@ -1 +1,9 @@
-{% include input.html field=field %}
+{%- comment -%}
+
+Form: type url
+
+@param :field [Integer] El campo del formulario
+@param :input_class [String] Las clases del componente
+{%- endcomment -%}
+
+{% include input.html field=field input_class=include.input_class %}

data/_layouts/default.html

@@ -9,14 +9,59 @@
     <meta name="color-scheme" content="light"/>
     <meta name="referrer" content="strict-origin-when-cross-origin"/>
 
-    <link href="assets/css/styles.css" rel="stylesheet">
-    <script defer type="text/javascript" src="assets/js/script.js"></script>
+    {% 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?{{ site.time | date: '%s' }}" rel="stylesheet" data-turbo-track="reload">
+
+    {% 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">
 
     {% seo %}
     {% feed_meta %}
 
+    {% if page.url == '/' %}
+      {% for locale in site.locales %}
+        <link rel="alternate" hreflang="{{ locale }}" href="../{{ locale }}/" />
+      {% endfor %}
+
+      <link rel="alternate" hreflang="x-default" href="../{{ site.default_locale }}/" />
+    {% else %}
+      {% for locale in page.locales %}
+        <link rel="alternate" hreflang="{{ locale.collection }}" href="../{{ locale.url }}" />
+
+        {% if locale.collection == site.default_locale %}
+          <link rel="alternate" hreflang="x-default" href="../{{ locale.url }}" />
+        {% endif %}
+      {% endfor %}
+
+      {% if site.locale == site.default_locale %}
+        <link rel="alternate" hreflang="x-default" href="../{{ page.url }}" />
+      {% endif %}
+    {% endif %}
+
+    {% include_cached social_networks.html %}
+
     {%- if page.activity -%}
-      <link href="{{ page.activity.url | absolute_url }}" rel="alternate" type="application/activity+json" />
+      <link href="{{ page.activity.id | absolute_url }}" rel="alternate" type="application/activity+json" />
     {%- endif -%}
 
     {%- if site.activity_pub_profile -%}
@@ -24,24 +69,7 @@
     {%- endif -%}
 
     {%- if site.actor -%}
-      <link rel="me" href="{{ site.actor.url | absolute_url }}" />
-    {%- endif -%}
-
-    {%- if page.locales -%}
-      {% for locale in page.locales %}
-        <link
-          rel="alternate"
-          hreflang="{{ locale.collection }}"
-          href="{{ site.url }}{{ locale.collection }}/{{ locale.url }}" />
-      {% endfor %}
-    {%- else -%}
-      {% for locale in site.locales %}
-        {% if locale == site.locale %}{% continue %}{% endif %}
-        <link
-          rel="alternate"
-          hreflang="{{ locale }}"
-          href="{{ site.url }}{{ locale }}/" />
-      {% endfor %}
+      <link rel="me" href="{{ site.actor.id | absolute_url }}" />
     {%- endif -%}
   </head>
   {% comment %}
@@ -57,7 +85,7 @@
       El espacio principal se expande para ocupar todo el alto
       disponible y empuja el pie al fondo.
     {% endcomment %}
-    <main class="flex-grow-1">
+    <main tabindex="-1" role="main" id="content" class="flex-grow-1">
       <div class="row no-gutters align-items-center justify-content-center d-print-block">
         <div class="col-10">
           {{ content }}

data/_layouts/home.html

@@ -13,17 +13,19 @@ layout: default
 
   {% include_cached post.html page=post %}
 
-  <footer>
+  <footer class="mt-5">
     <div class="row no-gutters">
       <div class="col-12 col-md-6">
         <h2>{{ site.i18n.other_posts }}</h2>
         <div>
           {% for post in posts offset: 1 %}
-            <h3>
-              <a href="{{ post.url }}">{{ post.title }}</a>
-            </h3>
+            <article class="content">
+              <h3>
+                <a href="{{ post.url }}">{{ post.title }}</a>
+              </h3>
 
-            <p class="lead">{{ post.description }}</p>
+              <p class="lead">{{ post.description }}</p>
+            </article>
           {% endfor %}
         </div>
       </div>

data/_layouts/page.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{{ content }}

data/_layouts/theme.html

@@ -0,0 +1,60 @@
+---
+layout: default
+---
+
+{% capture components %}
+  {% for component in site.data.components %}
+    {% assign component_include = "theme/" | append: component | append: ".html" %}
+    {% assign title = component | replace: "_", " " | capitalize %}
+
+    <section id="{{ component | replace: "_", "-" }}" class="mb-5">
+      <header>
+        {% include headings/with_link.html level=1 text=title %}
+      </header>
+
+      {% include {{ component_include }} %}
+    </section>
+  {% endfor %}
+{% endcapture %}
+
+{% capture full_width_components %}
+  {% for component in site.data.full_width_components %}
+    {% assign component_include = "theme/" | append: component | append: ".html" %}
+    {% assign title = component | replace: "_", " " | capitalize %}
+
+    <section id="{{ component | replace: "_", "-" }}" class="mb-5">
+      <header>
+        {% include headings/with_link.html level=1 text=title %}
+      </header>
+
+      {% include {{ component_include }} %}
+    </section>
+  {% endfor %}
+{% endcapture %}
+
+<div class="container-fluid">
+  <div class="row">
+    <aside class="col-12 col-md-3">
+      <ol class="list-unstyled">
+        {%- assign toc_full_width = full_width_components | table_of_contents: 1 -%}
+        {%- assign toc = components | table_of_contents: 1 | concat: toc_full_width -%}
+
+        {% for item in toc %}
+          <li>
+            <a href="#{{ item.id }}" data-turbo="false">
+              {{- item.title -}}
+            </a>
+          </li>
+        {% endfor %}
+      </ol>
+    </aside>
+
+    <section class="col-12 col-md">
+      {{ components }}
+    </section>
+  </div>
+</div>
+
+<section class="w-100">
+  {{ full_width_components }}
+</section>

data/_sass/accessibility.scss

@@ -1,13 +1,46 @@
-* {
-  scroll-behavior: smooth;
-}
+////
+/// Accesibilidad
+/// @group Accesibilidad
+////
 
-/*
- * 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/content.scss

@@ -0,0 +1,28 @@
+.content {
+  p { min-height: $font-size-base * $line-height-base; }
+  h1 { min-height: $h1-font-size * $headings-line-height; }
+  h2 { min-height: $h2-font-size * $headings-line-height; }
+  h3 { min-height: $h3-font-size * $headings-line-height; }
+  h4 { min-height: $h4-font-size * $headings-line-height; }
+  h5 { min-height: $h5-font-size * $headings-line-height; }
+  h6 { min-height: $h6-font-size * $headings-line-height; }
+
+  iframe { border: 0; }
+
+  audio { width: 100%; }
+
+  img,
+  video,
+  iframe {
+    @extend .img-fluid;
+    height: auto;
+  }
+
+  & > * {
+    margin-bottom: 1rem;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}

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%;

data/_sass/floating_alert.scss

@@ -0,0 +1,48 @@
+////
+/// Alertas flotantes
+/// @group Alertas flotantes
+////
+
+/// Posiciones posibles
+$positions: (top, right, bottom, left);
+
+/// Las alertas flotantes son notificaciones emergentes que desaparecen
+/// por su cuenta, como los "Toast" de Android.  Tienen opciones de
+/// accesibilidad para que los lectores de pantalla también las
+/// notifiquen.
+/// @link _packs/controllers/notification_controller.js
+/// @link _includes/floating_alert.html
+/// @example html
+///   <div class="floating-alert floating-alert-default floating-alert-bottom">
+///     <div class="floating-alert-content"></div>
+///   </div>
+.floating-alert {
+  /// No se puede interactuar
+  @extend .pointer-event-none;
+
+  /// El estilo por defecto las coloca centradas y con una transición al
+  /// aparecer o desaparecer.  Si no usamos esta clase podemos darle
+  /// nuestro propio estilo.
+  &.floating-alert-default {
+    @extend .d-flex;
+    @extend .justify-content-center;
+    @extend .w-100;
+    @extend .position-fixed;
+    @extend .fade;
+    @extend .hide;
+  }
+
+  @each $position in $positions {
+    /// Pueden tener una posición fija
+    &.floating-alert-#{$position} {
+      #{$position}: 2rem;
+    }
+  }
+
+  /// Tienen un borde redondeado y un padding para parecerse a un toast.
+  /// El color de fondo se lo da una clase background-*
+  .floating-alert-content {
+    border-radius: 2rem;
+    padding: .5rem 1rem;
+  }
+}

data/_sass/fonts.scss

@@ -0,0 +1,29 @@
+// https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOkCnqEu92Fr1Mu52xP-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOjCnqEu92Fr1Mu51TzBhc9-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOmCnqEu92Fr1Me5Q-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOlCnqEu92Fr1MmWUlvAw-subset.woff2) format('woff2');
+}

data/_sass/menu.scss

@@ -0,0 +1,36 @@
+/// El menú hamburguesa se expande cuando obtiene el foco y se oculta
+/// cuando lo pierde.  Esto nos permite tener un menú dinámico sin
+/// necesidad de JS.
+/// 
+/// @group Menú
+/// @link _includes/menu.html
+/// @todo En realidad el evento del foco está puesto en toda la navbar
+/// en lugar de solo en el ícono de hamburguesa.
+/// @example html
+///   <nav class="navbar">
+///     <button class="navbar-toggler">
+///       <span class="navbar-toggler-icon"></span>
+///     </button>
+///   
+///     <div class="collapse navbar-collapse" id="menu"></div>
+///   </nav>
+.navbar {
+  &:focus-within {
+    .navbar-collapse {
+      @extend .d-block;
+    }
+  }
+
+  .dropdown {
+    .dropdown-menu {
+      @extend .d-none;
+    }
+
+    &:hover,
+    &:focus-within {
+      .dropdown-menu {
+        @extend .d-block;
+      }
+    }
+  }
+}

data/_sass/snap.scss

@@ -0,0 +1,60 @@
+////
+/// @group Snap
+////
+
+/// _Snap_ es una forma de hacer que los elementos se alineen
+/// automáticamente a partes de su contenedor durante el _scroll_.  Si le
+/// usuarie _scrollea_ hasta la mitad, el navegador continua el _scroll_
+/// hasta que se alinee.  Es útil para presentaciones de diapositivas
+/// (como el sitio de Sutty) o _banners_ con navegación horizontal
+/// (_sliders_).
+///
+/// @link https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Scroll_Snap
+$snap-types: (none, mandatory, proximity);
+/// Ejes
+$snap-directions: (y, x);
+/// Puntos de alineación
+$snap-points: (start, end, center, none);
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+/// Obtiene el sufijo para cada clase responsive usando mixins de
+/// Bootstrap.  Valores posibles:
+/// `""` (nada, aplica a todas las resoluciones), `-xs`, `-sm`,
+/// `-md`, `-lg`, `-xl`.
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    @each $snap-type in $snap-types {
+      @each $snap-direction in $snap-directions {
+/// El contenedor indica la dirección y obligatoriedad del snap
+///
+/// @example html
+///   <div class="snap-mandatory-y snap-proximity-md-y"></div>
+        .snap-#{$snap-type}#{$infix}-#{$snap-direction} {
+          scroll-snap-points-#{$snap-direction}: repeat(100%);
+          scroll-snap-destination: 0 0;
+
+          @each $prefix in $vendor-prefixes {
+            #{$prefix}scroll-snap-type: #{$snap-direction} #{$snap-type};
+            #{$prefix}scroll-snap-type: #{$snap-type};
+          }
+
+          @each $snap-point in $snap-points {
+/// Los elementos que son descendientes directos se alinean a
+/// su contenedor
+///
+/// @example html
+///   <div class="snap-mandatory-y snap-proximity-md-y">
+///     <div class="snap-start"></div>
+///     <div class="snap-center"></div>
+///     <div class="snap-end"></div>
+///   </div>
+            & > .snap-#{$snap-point} {
+              scroll-snap-align: #{$snap-point};
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/_sass/toggler.scss

@@ -1,39 +1,20 @@
-/*
- * Desplegar menúes sin javascript!
- * 
- * Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
- */
+////
+/// @group Toggler
+////
 
-// Comenzamos con un input checkbox con la clase toggler
-input[type="checkbox"].toggler {
-  // Lo ocultamos pero todavía queremos que se le pueda dar foco con el
-  // teclado
-  opacity: 0;
-  position: absolute;
-
-  // Ocultamos el elemento colapsable
-  & ~ label {
-    .toggled {
-      z-index: 10;
-      visibility: hidden;
-    }
-  }
-
-  // Al tildar el input, mostramos el elemento
-  &:checked ~ label {
-    .toggled {
-      visibility: visible;
-    }
-  }
-
-  & + label {
-    border: none;
-    outline: none;
-    z-index: 11;
+/// Desplegar menúes sin javascript!
+///
+/// Comenzamos con un `<input type="checkbox"/>` con la clase
+/// `.toggler`.
+///
+/// @link https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
+/// @see toggler.html
+.toggler {
+  & + .toggled {
+    visibility: hidden;
   }
 
-  // Dar una guía visual de que estamos enfocando el input
-  &:focus + label {
-    outline: 1px dotted grey ;
+  &:checked + .toggled {
+    visibility: visible;
   }
 }