radios-comunitarias-jekyll-theme 0.1.0

data/_includes/number.html

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

data/_includes/post.html

@@ -0,0 +1,118 @@
+{% comment %}
+Una plantilla que representa un artículo, podría ser un layout pero lo
+ponemos en includes para poder reutilizarlo en la portada.
+
+Ya tiene todos los metadatos para schema.org y microformats.org
+{% endcomment %}
+
+{% assign page = include.page %}
+
+<article class="h-entry mt-5" itemscope itemtype="http://schema.org/Article">
+  <header class="row no-gutters align-items-center mb-3">
+    <div class="p-name col-12 col-lg-9">
+      <h1 class="p-name" itemprop="name headline">
+        {{ page.title | escape }}
+      </h1>
+
+      {%- if page.description -%}
+        <p class="lead p-summary" itemprop="description">{{ page.description | escape }}</p>
+      {%- endif -%}
+    </div>
+
+    <div class="col-6">
+      <p class="m-0">
+        {%- for author in page.author -%}
+          <span itemprop="author" itemscope itemtype="http://schema.org/Person">
+            <span class="p-author h-card" itemprop="name">
+              {{ author | escape }}
+            </span>{% unless forloop.last %},{% endunless %}
+          </span>
+        {%- endfor -%}
+      </p>
+    </div>
+
+    <div class="col-6 col-lg-3 text-right">
+      <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 }}
+      </time>
+    </div>
+  </header>
+
+  {% comment %}
+    En responsive, el contenido pierde el espacio que lo separa de la
+    imagen a la derecha y las dos columnas invierten su orden, la imagen
+    se coloca encima.
+  {% endcomment %}
+  <div class="row no-gutters">
+    <div class="col-12 col-md-6 e-content pt-3 pr-md-3 order-1 order-md-0" itemprop="articleBody">
+      {{ page.content }}
+
+      {% comment %}
+        TODO: Estaría bueno tener una forma de extraer las imágenes
+        y videos y mandarlas a la barra del costado no?
+      {% endcomment %}
+    </div>
+
+    <div class="col-12 col-md-6 col-lg-3 order-0 order-md-1">
+      {%- if page.image.path -%}
+          <picture>
+            {% comment %}
+              Producir versiones de las imágenes para distintos tamaños
+              de pantalla, de forma que siempre se baje la resolución
+              justa.
+
+              TODO: Vincular a la imagen completa para que librenauta
+              pueda collagear :P
+            {% endcomment %}
+            {% for size in site.images.sizes %}
+              <source srcset="{{ page.image.path | thumbnail: size }}" media="(max-width: {{ size }}px)" />
+            {% endfor %}
+
+            <img
+              class="img-fluid"
+              src="{{ page.image.path | thumbnail: 1140 }}"
+              alt="{{ page.image.description | default: page.title }}" />
+          </picture>
+      {%- endif -%}
+
+      {%
+        include_cached
+          share_box.html
+          url=page.url
+          title=page.title
+          description=page.description
+          categories=page.categories
+      %}
+    </div>
+  </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 -%}
+
+    {%- if page.license.url -%}
+      <p itemprop="license" itemtype="http://schema.org/CreativeWork">
+        <a rel="license" itemprop="url" href="{{ page.license.url }}">
+          <span itemprop="articleBody">
+            {{ page.license.description }}
+          </span>
+        </a>
+      </p>
+    {%- endif -%}
+
+    {%- if page.tags %}
+      <span itemprop="keywords" hidden>{{ page.tags | join: ', ' }}</span>
+      {%- for tag in page.tags -%}
+        <span hidden class="h-category">{{ tag }}</span>
+      {%- endfor -%}
+    {%- endif -%}
+  </footer>
+</article>

data/_includes/predefined_array.html

@@ -0,0 +1,39 @@
+{%- 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>
+
+  <select
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    name="{{ name }}"
+    id="{{ id }}"
+    {% if autocomplete %}
+      autocomplete="{{ autocomplete }}"
+    {% endif %}
+    class="form-control">
+
+    <option value="" selected></option>
+
+    {%- for option in include.field[1].values -%}
+      <option value="{{ option }}">{{ option }}</option>
+    {%- endfor -%}
+  </select>
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/reproductor.html

@@ -0,0 +1,20 @@
+{%- assign radio = site.posts | find: 'layout', 'radio' -%}
+
+{% comment %}
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
+
+Le indicamos al navegador que no empiece a cargar hasta que le damos
+play porque sino vamos a escuchar la radio con retraso.
+{% endcomment %}
+<audio controls preload="none" class="w-100" id="transmission">
+  {% for source in radio.streams %}
+    <source src="{{ source }}" />
+  {% endfor %}
+
+  <p>
+    {{ site.i18n.no_audio_support }}
+    <a href="{{ radio.streams | first }}">
+      {{ radio.streams | first }}
+    </a>
+  </p>
+</audio>

data/_includes/section.html

@@ -0,0 +1 @@
+<h2 id="{{ include.field[0] }}">{{ include.field[1].title }}</h2>

data/_includes/separator.html

@@ -0,0 +1 @@
+<hr/>

data/_includes/share.html

@@ -0,0 +1,28 @@
+{% capture url %}{{ site.url }}{{ include.url }}{% endcapture %}
+
+{% unless include.share.url == '%url' %}
+  {% assign url = url | cgi_escape %}
+{% endunless %}
+{% assign title = include.title | cgi_escape %}
+{% assign description = include.description | default: '' | cgi_escape %}
+{% assign hashtag = include.categories | first | capitalize | remove: ' ' %}
+
+<a
+  {% if include.share.url == '%url' %}
+    download
+  {% else %}
+    target="_blank"
+  {% endif %}
+  rel="nofollow"
+  title="{{ include.share.title }}"
+  class="d-flex flex-column align-items-center"
+  href="{{
+    include.share.url
+    | replace: '%url', url
+    | replace: '%title', title
+    | replace: '%description', description
+    | replace: '%hashtag', hashtag
+    }}">
+  <i class="fa fa-fw fa-{{ include.share.icon }}"></i>
+  <span class="sr-only">{{ include.share.title }}</span>
+</a>

data/_includes/share_box.html

@@ -0,0 +1,13 @@
+<div class="d-flex align-items-center justify-content-between mt-3">
+  {% for share in site.i18n.share.items %}
+    {%
+      include_cached
+        share.html
+        share=share
+        url=include.url
+        title=include.title
+        description=include.description
+        categories=include.categories
+    %}
+  {% endfor %}
+</div>

data/_includes/string.html

@@ -0,0 +1,3 @@
+{% assign f = field %}
+{% assign f.type = 'text' %}
+{% include input.html field=f %}

data/_includes/submit.html

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

data/_includes/tel.html

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

data/_includes/text.html

@@ -0,0 +1,32 @@
+{%- 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 }}">
+    {% if include.field[1].required %}*{% endif %}
+    {{ label }}
+  </label>
+
+  <textarea
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    name="{{ name }}"
+    id="{{ id }}"
+    {% if autocomplete %}
+      autocomplete="{{ autocomplete }}"
+    {% endif %}
+    class="form-control"></textarea>
+
+  {%- if .help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/url.html

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

data/_layouts/default.html

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="{{ site.lang }}" dir="{{ site.dir }}">
+  <head>
+    <meta charset="UTF-8">
+    <base href="{% base %}" />
+    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
+    <meta content="width=device-width, initial-scale=1.0" name="viewport">
+    <meta name="theme-color" content="white"/>
+    <meta name="color-scheme" content="light"/>
+
+    <link href="assets/css/styles.css" rel="stylesheet">
+    <script defer type="text/javascript" src="assets/js/script.js"></script>
+
+    {% seo %}
+    {% feed_meta %}
+  </head>
+  {% comment %}
+    El sitio es una columna grande y el pie está siempre al final, para
+    imprimirlo lo mostramos como un bloque.
+
+    El alto mínimo del sitio es el alto de la pantalla.
+  {% endcomment %}
+  <body class="d-flex flex-column justify-content-between d-print-block min-vh-100">
+    {% include_cached navbar.html %}
+
+    {% comment %}
+      El espacio principal se expande para ocupar todo el alto
+      disponible y empuja el pie al fondo.
+    {% endcomment %}
+    <main class="flex-grow-1">
+      <div class="row no-gutters align-items-center justify-content-center d-print-block">
+        <div class="col-10">
+          {{ content }}
+        </div>
+      </div>
+    </main>
+
+    {% include_cached footer.html %}
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,30 @@
+---
+layout: default
+---
+
+{% comment %}
+  Traer el primer artículo en la portada y permitir navegar el resto
+  a continuación.
+{% endcomment %}
+
+<section>
+  {%- assign post = site.posts | find: 'layout', 'post' -%}
+  {% include_cached post.html page=post %}
+
+  <footer>
+    <div class="row no-gutters">
+      <div class="col-12 col-md-6">
+        <h2>{{ site.i18n.other_posts }}</h2>
+        <div>
+          {% for post in site.posts offset: 2 %}
+            <h3>
+              <a href="{{ post.url }}">{{ post.title }}</a>
+            </h3>
+
+            <p class="lead">{{ post.description }}</p>
+          {% endfor %}
+        </div>
+      </div>
+    </div>
+  </footer>
+</section>

data/_layouts/post.html

@@ -0,0 +1,5 @@
+---
+layout: default
+---
+
+{% include_cached post.html page=page %}

data/_layouts/radio.html

@@ -0,0 +1,49 @@
+---
+layout: default
+---
+
+{% comment %}
+  Metadatos para reconocer organizaciones
+{% endcomment %}
+<article class="h-card mt-5" itemscope itemtype="https://schema.org/Organization">
+  <header class="row no-gutters align-items-center mb-3">
+    <div class="col-12 col-lg-9">
+      <h1 class="p-name" itemprop="name">{{ page.title }}</h1>
+      <p class="lead">{{ page.description }}</p>
+    </div>
+  </header>
+
+  <div class="row no-gutters">
+    <div class="col-12 col-md-6 e-content pt-3 pr-md-3 order-1 order-md-0" itemprop="articleBody">
+      {{ page.content }}
+    </div>
+
+    <div class="col-12 col-md-6 col-lg-3 order-0 order-md-1">
+      {%- if page.logo.path -%}
+          <picture>
+            {% for size in site.images.sizes %}
+              <source srcset="{{ page.logo.path | thumbnail: size }}" media="(max-width: {{ size }}px)" />
+            {% endfor %}
+
+            <img
+              class="img-fluid"
+              src="{{ page.logo.path | thumbnail: 1140 }}"
+              alt="{{ page.logo.description | default: page.title }}" />
+          </picture>
+      {%- endif -%}
+
+      {%
+        include_cached
+          share_box.html
+          url=page.url
+          title=page.title
+          description=page.description
+          categories=page.categories
+      %}
+    </div>
+  </div>
+
+  {% comment %}
+    TODO: Formulario de contacto
+  {% endcomment %}
+</article>

data/_sass/accessibility.scss

@@ -0,0 +1,13 @@
+* {
+  scroll-behavior: smooth;
+}
+
+/*
+ * Deshabilita animaciones si la usuaria las tiene deshabilitadas
+ */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    scroll-behavior: auto;
+    animation: none !important;
+  }
+}

data/_sass/helpers.scss

@@ -0,0 +1,54 @@
+$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+
+/*
+ * Crea una propiedad con prefijos de navegador
+ */
+$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+@mixin vendor-prefix($property, $definition...) {
+  @each $prefix in $vendor-prefixes {
+    #{$prefix}$property: $definition;
+  }
+}
+
+/*
+ * Crea clases para asignar colores según la lista de colores.
+ */
+@each $color, $_ in $colors {
+  .background-#{$color} {
+    background-color: var(--#{$color});
+  }
+
+  .#{$color} {
+    color: var(--#{$color});
+
+    ::-moz-selection,
+    ::selection {
+      background: var(--#{$color});
+      color: white;
+    }
+
+    svg {
+      * {
+        fill: var(--#{$color});
+      }
+    }
+
+    .form-control {
+      border-color: var(--#{$color});
+    }
+
+    .btn {
+      background-color: var(--#{$color});
+      color: white;
+      border-color: var(--#{$color});
+    }
+
+    hr {
+      border-color: var(--#{$color});
+    }
+
+    a {
+      color: var(--#{$color});
+    }
+  }
+}