radios-comunitarias-jekyll-theme 0.1.0

data/_data/layouts/radio.yml

@@ -0,0 +1,165 @@
+---
+title:
+  type: 'string'
+  required: true
+  label:
+    es: 'Nombre de la radio'
+    en: "Radio's name"
+  help:
+    es: ''
+    en: ''
+description:
+  type: 'text'
+  required: true
+  label:
+    es: 'Descripción corta de la radio'
+    en: "Radio's short description"
+  help:
+    es: ''
+    en: ''
+logo:
+  type: 'image'
+  path:
+    label:
+      es: 'Logo'
+      en: 'Logo'
+    help:
+      es: ''
+      en: ''
+  description:
+    label:
+      es: 'Descripción del logo'
+      en: 'Logo description'
+    help:
+      es: Describe el logo para usuaries no videntes y buscadores
+      en: |
+        Describe the logo for blind or partially sighted users and
+        search engines
+content:
+  type: 'markdown_content'
+  label:
+    es: 'Presentación de la radio'
+    en: 'Radio presentation'
+  help:
+    es: 'Historia, trasfondo, principios políticos, etc.'
+    en: 'History, context, political principles, etc.'
+streams:
+  type: 'array'
+  label:
+    es: 'Direcciones de la transmisión'
+    en: 'Transmission addresses'
+  help:
+    es: 'Las direcciones de la transmisión de Icecast, pueden ser varias para tener opciones o tener varios formatos para soportar distintos navegadores (ogg para todos, mp3 para Safari).'
+    en: 'Icecast addresses, could be several for backup or have different formats (ogg for all browsers, mp3 for Safari).'
+fediverse:
+  type: 'url'
+  label:
+    es: 'Fediverso'
+    en: 'Fediverse'
+  help:
+    es: 'Dirección completa al perfil'
+    en: 'Full address to the profile'
+facebook:
+  type: 'url'
+  label:
+    es: 'Facebook'
+    en: 'Facebook'
+  help:
+    es: 'Dirección completa al perfil'
+    en: 'Full address to the profile'
+instagram:
+  type: 'url'
+  label:
+    es: 'Instagram'
+    en: 'Instagram'
+  help:
+    es: 'Dirección completa al perfil'
+    en: 'Full address to the profile'
+twitter:
+  type: 'url'
+  label:
+    es: 'Twitter'
+    en: 'Twitter'
+  help:
+    es: 'Dirección completa al perfil'
+    en: 'Full address to the profile'
+youtube:
+  type: 'url'
+  label:
+    es: 'Youtube'
+    en: 'Youtube'
+  help:
+    es: 'Dirección completa al perfil'
+    en: 'Full address to the profile'
+internet_archive:
+  type: 'url'
+  label:
+    es: 'Internet Archive'
+    en: 'Internet Archive'
+  help:
+    es: 'Dirección completa al archivo de la radio'
+    en: "Full address to the radio's archive"
+email:
+  type: 'email'
+  label:
+    es: 'Correo electrónico'
+    en: 'E-mail'
+  help:
+    es: ''
+    en: ''
+background_color:
+  type: 'color'
+  label:
+    es: 'Color de fondo del sitio'
+    en: ''
+  help:
+    es: 'Si tenés dudas seleccionando colores, te recomendamos contactar a le diseñadore [librenauta](https://copiona.com/), o elegir colores con [criterio de accesibilidad](https://randoma11y.com/).'
+    en: "If you're in doubt while selecting colors, we invite you to contact the designer [librenauta](https://copiona.com/) or pick color using [accessibility criteria](https://randoma11y.com/)."
+foreground_color:
+  type: 'color'
+  label:
+    es: 'Color del texto del sitio'
+    en: ''
+  help:
+    es: ''
+    en: ''
+navbar_background_color:
+  type: 'color'
+  label:
+    es: 'Color de fondo del reproductor de la radio y de los vínculos en el sitio'
+    en: ''
+  help:
+    es: ''
+    en: ''
+navbar_foreground_color:
+  type: 'color'
+  label:
+    es: 'Color del texto del reproductor de la radio'
+    en: ''
+  help:
+    es: ''
+    en: ''
+social_foreground_color:
+  type: 'color'
+  label:
+    es: 'Color de los botones de redes sociales'
+    en: ''
+  help:
+    es: ''
+    en: ''
+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'
+  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/boolean.html

@@ -0,0 +1,30 @@
+{%- assign name = include.field[0] -%}
+{%- assign id = include.field[1].id | default: name -%}
+{%- assign label = include.field[1].label[site.locale] -%}
+{%- assign help = include.field[1].help[site.locale] -%}
+{%- assign autocomplete = include.field[1].autocomplete -%}
+
+<div class="form-check text-left">
+  <input
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    type="checkbox"
+    name="{{ name }}"
+    id="{{ id }}"
+    {% if autocomplete %}
+      autocomplete="{{ autocomplete }}"
+    {% endif %}
+    class="form-check-input" />
+
+  <label class="form-check-label" for="{{ id }}">{{ label }}</label>
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/contact.html

@@ -0,0 +1,19 @@
+{% comment %}
+  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" />
+
+{% 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">
+  {%- for field in include.form -%}
+    {% assign template = field[1].type | append: '.html' %}
+    <div class="col{{ field[1].col | default: 12 | prepend: '-' }}">
+      {% include {{ template }} field=field %}
+    </div>
+  {%- endfor -%}
+</form>

data/_includes/content.html

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

data/_includes/email.html

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

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

@@ -0,0 +1,28 @@
+{%- assign radio = site.posts | find: 'layout', 'radio' -%}
+
+<footer>
+  {% comment %}
+    Acá sale una mejora adhoc de la referencia
+  {% endcomment %}
+  <div class="container text-center text-md-left">
+    <p class="m-0 font-weight-bold">
+      <a href="{{ radio.url }}">
+        {{ radio.title }}
+      </a>
+    </p>
+
+    {%- for social in site.i18n.menu.items -%}
+      {%- unless radio[social.type] -%}{% continue %}{%- endunless -%}
+      <a
+        rel="me"
+        target="_blank" href="{{ radio[social.type] }}">
+        <i class="fa fa-fw fa-x2 fa-{{ social.icon }}"></i>
+        <span class="sr-only">{{ social.text }}</span>
+      </a>
+    {%- endfor -%}
+  </div>
+
+  <div class="text-center">
+    {{ site.i18n.footer.credits | markdownify }}
+  </div>
+</footer>

data/_includes/form/boolean.html

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

data/_includes/form/content.html

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

data/_includes/form/email.html

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

data/_includes/form/file.html

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

data/_includes/form/hidden.html

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

data/_includes/form/image.html

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

data/_includes/form/input.html

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

data/_includes/form/markdown_content.html

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

data/_includes/form/number.html

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

data/_includes/form/predefined_array.html

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

data/_includes/form/section.html

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

data/_includes/form/separator.html

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

data/_includes/form/string.html

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

data/_includes/form/submit.html

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

data/_includes/form/tel.html

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

data/_includes/form/text.html

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

data/_includes/form/url.html

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

data/_includes/hidden.html

@@ -0,0 +1,5 @@
+{%- assign name = include.field[0] -%}
+{%- assign id = include.field[1].id | default: name -%}
+{%- assign value = include.field[1].value -%}
+
+<input type="hidden" value="{{ value }}" name="{{ name }}" id="{{ id }}" />

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

@@ -0,0 +1,33 @@
+{%- assign name = include.field[0] -%}
+{%- assign id = include.field[1].id | default: name -%}
+{%- assign label = include.field[1].label[site.locale] -%}
+{%- assign help = include.field[1].help[site.locale] -%}
+{%- assign autocomplete = include.field[1].autocomplete -%}
+
+<div class="form-group">
+  <label for="{{ id }}">
+    {{ label }}
+    {% if include.field[1].required %}*{% endif %}
+  </label>
+
+  <input
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    type="{{ include.field[1].type }}"
+    name="{{ name }}"
+    id="{{ id }}"
+    {% if autocomplete %}
+      autocomplete="{{ autocomplete }}"
+    {% endif %}
+    class="form-control" />
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/logo.html

@@ -0,0 +1,5 @@
+{%- assign radio = site.posts | find: 'layout', 'radio' -%}
+<img
+  loading="lazy"
+  src="{{ radio.logo.path | thumbnail: 50 }}"
+  alt="{{ radio.logo.description | default: radio.title }}" />

data/_includes/markdown_content.html

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

data/_includes/navbar.html

@@ -0,0 +1,78 @@
+{%- assign radio = site.posts | find: 'layout', 'radio' -%}
+
+{% comment %}
+  La posición sticky permite que la barra ocupe el alto adecuado en el
+  sitio y se "despegue" cuando estamos escroleando hacia abajo.
+  Funciona bien pero si escroleamos rápido se detecta el microsegundo
+  donde el navegador tardó en decidir qué hacía con la barra y se ve una
+  franja del fondo.
+
+  Si usamos fixed tenemos que incorporar el alto de la barra como margen
+  superior del sitio para que no se coma la parte de arriba.
+
+  TODO: Incorporar el hack para que no se coma el destino de la
+  navegación interna al saltar a un elemento (un título por ejemplo).
+
+  Evitamos que turbolinks descargue este elemento, o sea que se mantenga
+  entre navegaciones internas.  Necesita un ID para funcionar.
+{% endcomment %}
+<nav
+  data-turbolinks-permanent
+  id="navbar"
+  class="navbar sticky-top navbar-expand-lg navbar-theme d-print-block row no-gutters justify-content-center pl-0 pr-0"
+  role="navigation"
+  aria-label="{{ site.i18n.menu.title }}">
+
+  {% comment %}
+    Para que la barra se alinee con el contenido, tenemos que darle el
+    mismo ancho.
+  {% endcomment %}
+  <div class="col-10">
+    <div class="row no-gutters align-items-center">
+      {% comment %}
+        La columna del logo tiene el mismo ancho que la imagen principal
+        de un artículo.
+      {% endcomment %}
+      <a class="navbar-brand col col-md-3 flex-grow-0" href="">
+        {% include_cached logo.html %}
+
+        {% comment %}
+          XXX: En pantallas pequeñas el nombre de la radio ocupa mucho espacio
+        {% endcomment %}
+        <span class="d-none d-md-inline">
+          {{ radio.title }}
+        </span>
+      </a>
+
+      {% comment %}
+        El reproductor crece cuando la pantalla es chica y abarca todo el
+        espacio disponible.
+
+        Tiene el mismo ancho que el ancho de un artículo.
+      {% endcomment %}
+      <div class="col col-md-6 flex-grow-1 d-flex align-items-center">
+        {% include_cached reproductor.html %}
+      </div>
+
+      {% comment %}
+        La lista de botones de redes sociales no se muestra en celulares.
+
+        Los botones ocupan el espacio sobrante, a la derecha de la imagen.
+      {% endcomment %}
+      <ul class="navbar-nav d-print-none col d-none d-lg-flex">
+        {%- for social in site.i18n.menu.items -%}
+          {%- unless radio[social.type] -%}{% continue %}{%- endunless -%}
+          <li class="nav-item">
+            <a
+              rel="me"
+              class="nav-link social-theme"
+              target="_blank" href="{{ radio[social.type] }}">
+              <i class="fa fa-fw fa-x2 fa-{{ social.icon }}"></i>
+              <span class="sr-only">{{ social.text }}</span>
+            </a>
+          </li>
+        {%- endfor -%}
+      </ul>
+    </div>
+  </div>
+</nav>