radios-comunitarias-jekyll-theme 0.2.0 → 0.3.0rc1

data/_includes/activity_pub/toot_card.html

@@ -0,0 +1,95 @@
+{%- comment -%}
+  Toot card
+
+  @param :component_class [String] Las clases del componente
+  @param :profile [String]
+  @param :activity [String]
+{%- endcomment -%}
+
+{% assign extra_class = include.activity.attachment | size | equals: 1 | ternary: 'col', 'col-6' %}
+
+<div class="d-flex flex-column media {{ include.component_class }}">
+  <div class="d-flex">
+    {%
+      include embed_responsive.html
+      x=1
+      y=1
+      src=include.profile.icon.url
+      alt=include.profile.icon.name
+      width=40
+      embed_class="mr-2 align-self-center w-49px"
+      img_class="h-100 object-fit-cover"
+    %}
+
+    <div class="">
+      <p>{% include_cached activity_pub/actor.html actor=include.profile %}</p>
+      <p>{% include_cached activity_pub/actor_mention.html actor=include.profile %}</p>
+    </div>
+  </div>
+
+  <div class="media-body w-100">
+    {% capture content %}
+			<div class="content mt-2">
+				{{ include.activity.content | sanitize_html }}
+			</div>
+
+			{% unless include.activity.attachment == empty %}
+				<div class="row no-gutters mt-2">
+					{% for attachment in include.activity.attachment %}
+						{% if attachment.mediaType == "video/mp4" %}
+							{% include activity_pub/video_modal.html video=attachment extra=extra_class %}
+						{% else %}
+							{% include activity_pub/image_modal.html image=attachment extra=extra_class %}
+						{% endif %}
+					{% endfor %}
+				</div>
+			{% endunless %}
+		{% endcapture %}
+
+    {% if include.activity.sensitive %}
+      {% capture summary_title %}
+        <strong>{{ site.i18n.sensitive }}:</strong> {{ include.activity.summary }}
+      {% endcapture %}
+
+      {%
+        include details.html
+        element_title=summary_title
+        element_text=content
+        summary_class="align-items-center btn-lg btn-secondary p-2 text-left f-16"
+        component_class="my-3"
+        font_size="ml-3 lead"
+      %}
+    {% else %}
+      {{ content }}
+    {% endif %}
+
+    <div class="d-flex gray justify-content-between my-2 align-items-center">
+      {%- assign timestamp_field = include.activity.updated | ternary: 'updated', 'published' -%}
+      {%- assign timestamp = include.activity[timestamp_field] -%}
+
+      {%- capture timestamp -%}
+        {% include date.html date=timestamp format=site.i18n.date_time.format %}
+      {%- endcapture -%}
+
+      {%- capture uri -%}
+        {%- include_cached activity_pub/url.html activity=include.activity -%}
+      {%- endcapture -%}
+
+      {% include external_link.html href=uri text=timestamp %}
+
+      <div>
+        {% if include.activity.shares.totalItems %}
+          {%- include fa.html icon="retweet" class="px-1" description=site.i18n.total_shares content=include.activity.shares.totalItems -%}
+        {% endif %}
+
+        {% if include.activity.likes.totalItems %}
+          {%- include fa.html icon="star-o" class="px-1" description=site.i18n.total_likes content=include.activity.likes.totalItems -%}
+        {% endif %}
+      </div>
+
+      {%- include fa.html icon="globe" description=site.i18n.globe -%}
+    </div>
+
+    {% include activity_pub/button_bar.html uri=include.activity.id profile=include.profile %}
+  </div>
+</div>

data/_includes/activity_pub/url.html

@@ -0,0 +1,8 @@
+{%- comment -%}
+  Finds the URL
+
+  @param activity [ActivityDrop]
+{%- endcomment -%}
+
+{%- assign uri = include.activity.url | find: 'rel', 'canonical' -%}
+{{- uri.href | default: include.activity.url | default: include.activity.id | strip_html -}}

data/_includes/activity_pub/video_modal.html

@@ -0,0 +1,20 @@
+{%- comment -%}
+  Modal con imagen
+
+  @param :image [Image] la imagen que queremos en el modal, contiene url y alt text
+{%- endcomment -%}
+
+{% capture body %}
+  <video src="{{include.video.url}}" controls></video>
+{% endcapture %}
+
+<div class="{{ include.extra }} px-1" data-controller="modal">
+  <div class="embed-responsive embed-responsive-16by9">
+    <video
+      class="cursor-pointer min-w-100px w-100 embed-responsive-item object-fit-cover"
+      src="{{include.video.url}}"
+      data-action="click->modal#show"
+    ></video>
+  </div>
+  {% include activity_pub/generic_modal.html header_class="text-white" body=body body_class="d-flex justify-content-center" footer_class="d-none" content_class="background-transparent border-0" %}
+</div>

data/_includes/boolean.html

@@ -1,3 +1,11 @@
+{%- comment -%}
+
+Form: type boolean
+
+@param :field [Integer] El campo del formulario
+@param :boolean_class [String] Las clases del componente
+{%- endcomment -%}
+
 {%- assign name = include.field[0] -%}
 {%- assign id = include.field[1].id | default: name -%}
 {%- assign label = include.field[1].label[site.locale] -%}
@@ -18,7 +26,7 @@
     {% if autocomplete %}
       autocomplete="{{ autocomplete }}"
     {% endif %}
-    class="form-check-input" />
+    class="form-check-input {{ include.boolean_class }}" />
 
   <label class="form-check-label" for="{{ id }}">{{ label }}</label>
 

data/_includes/bootstrap/custom_select.html

@@ -0,0 +1,18 @@
+{% comment %}
+
+@param class [String] Extra classes
+@param extra [String] Extra attributes
+@param options [Array<Hash>] Options
+  @param selected [Boolean] Default option
+  @param extra [String] Extra attributes
+  @param value [String] Value
+  @param title [String] Title
+{% endcomment %}
+
+<select class="custom-select {{ include.class }}" {{ include.extra }}>
+  {% for options in include.options %}
+    <option {{ options.selected }} {{ options.extra }} value="{{ options.value | default: options.title | escape }}">
+      {{- options.title -}}
+    </option>
+  {% endfor %}
+</select>

data/_includes/buttons/button.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+Un botón interactivo. Utiliza la etiqueta `<button>`
+
+@param :class [String] Las clases del componente aparte de btn (colores, tipografía, etc)
+@param :content [String,HTML] El contenido del botón
+@param :extra [HTML] Atributos extra
+{%- endcomment -%}
+
+{%- include buttons/generic.html element="button" class=include.class content=include.content extra=include.extra -%}

data/_includes/buttons/copy.html

@@ -0,0 +1,28 @@
+{%- comment -%}
+
+Un botón con contenido copiable.  Si el
+link es externo, agregar el parámetro de seguridad noopener.
+
+@param :copy [String] El texto copiable
+@param :text [String] El contenido
+
+{%- endcomment -%}
+
+{% capture content %}
+  <span data-button-copy-target="text">{{- include.text -}}</span>
+  <span data-button-copy-target="icon" class="pl-2">
+    {%- include svg/copy-icon.svg -%}
+  </span>
+  <span data-button-copy-target="confirmationIcon" class="d-none pl-2">
+    {%- include svg/done-icon.svg -%}
+  </span>
+{% endcapture %}
+
+{% capture extra %}
+  data-controller="button-copy"
+  data-button-copy-text-value="{{ include.copy | escape_once }}"
+  data-button-copy-confirmation-value="{{ site.i18n.button_copy.confirmation | replace: "%s", include.copy | escape_once }}"
+  data-action="button-copy#copy"
+{% endcapture %}
+
+{% include buttons/button.html class="btn btn-primary" content=content extra=extra %}

data/_includes/buttons/generic.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+Un botón genérico. Se usa como base para crear los demás
+botones con distintas funcionalidades.
+
+@param :element [String] El elemento (p.e. `a` `button`)
+@param :class [String] Las clases del componente aparte de btn (colores, tipografía, etc)
+@param :content [String,HTML] El contenido del botón
+@param :extra [HTML] Atributos extra
+{%- endcomment -%}
+
+{%- assign element = include.element | default: "button" -%}
+
+<{{ element }} {{ include.extra }} class="btn {{ include.class }}">
+  {{- include.content -}}
+</{{ element }}>

data/_includes/buttons/link.html

@@ -0,0 +1,14 @@
+{%- comment -%}
+Un botón con link. Utiliza la etiqueta `<a>`
+
+@param :href [String] La URL destino
+@param :class [String] Las clases del componente aparte de btn (colores, tipografía, etc)
+@param :content [String,HTML] El contenido del botón
+@param :extra [HTML] Atributos extra
+{%- endcomment -%}
+
+{%- assign extra = include.href | start_with: "http://" | value_if: 'rel="noopener" target="_blank"' -%}
+{%- assign extra = include.href | start_with: "https://" | value_if: 'rel="noopener" target="_blank"' -%}
+{%- assign extra = include.href | uri_escape | prepend: 'href="' | append: '" ' | append: extra | append: " " | append: include.extra -%}
+
+{%- include buttons/generic.html element="a" class=include.class content=include.content extra=extra -%}

data/_includes/contact.html

@@ -1,15 +1,13 @@
-{% 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">
+<form
+  data-turbo="false"
+  data-controller="contact"
+  data-delay="60"
+  action="https://api.{{ site.hostname }}/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/content.html

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

data/_includes/device_detector.html

@@ -0,0 +1,30 @@
+<div
+  data-controller="device-detector"
+  data-action="resize@window->device-detector#resized"
+  class="position-fixed top-0 right-0 background-pink-t3 z-index-2050 pointer-event-none">
+  <div>
+    <button class="pointer-event-auto btn btn-sm" data-action="device-detector#toggleHelp">
+      {{ site.i18n.device_detector.get_help }}
+    </button>
+    <button class="pointer-event-auto btn btn-sm" data-action="device-detector#outline">
+      {{ site.i18n.device_detector.outline }}
+    </button>
+    <span data-device-detector-target="clientName"></span>
+    &nbsp;
+    <span data-device-detector-target="clientVersion"></span>
+    &nbsp;
+    (<span data-device-detector-target="deviceType"></span>)
+    &nbsp;
+    <span data-device-detector-target="osName"></span>
+    &nbsp;
+    <span data-device-detector-target="osVersion"></span>
+    &nbsp;
+    <span data-device-detector-target="viewportWidth"></span>
+    x <span data-device-detector-target="viewportHeight"></span>
+    x <span data-device-detector-target="devicePixelRatio"></span>
+  </div>
+
+  <div data-device-detector-target="help" hidden class="background-pink">
+    {{ site.i18n.device_detector.help | allow_inclusive_language_in_markdown | markdownify }}
+  </div>
+</div>

data/_includes/email.html

@@ -1 +1,9 @@
-{% include input.html field=field %}
+{%- comment -%}
+
+Form: type email
+
+@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/_includes/embed_responsive.html

@@ -0,0 +1,16 @@
+{%- comment -%}
+
+Embed responsive. Para imágenes con relación de aspecto.
+Se suele usar para las imágenes de grillas.
+
+@param :x [Integer] El ancho
+@param :y [Integer] El alto
+@param :src [String] La url de la imagen
+@param :alt [String] La descripción de la imagen
+@param :width [Integer] El ancho
+@param :component_class [String] Las clases del componente embed_responsive
+{%- endcomment -%}
+
+<div class="embed-responsive embed-responsive-{{ include.x }}by{{ include.y }} {{ include.component_class }}">
+  {%- include picture.html class="embed-responsive-item" img_class="w-100 h-100 fit-cover" src=include.src alt=include.alt width=include.width -%}
+</div>

data/_includes/external_link.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+
+Link externo.
+
+@param :href [String] La URL
+@param :class [String] Las clases del link
+{%- endcomment -%}
+
+<a
+	class="text-decoration-none {{ include.class }}"
+	href="{{ include.href | uri_escape }}"
+	{{ include.href | start_with: "https://" | value_if: 'rel="noopener" target="_blank"' }}
+	{{ include.href | start_with: "http://" | value_if: 'rel="noopener" target="_blank"' }}>
+	{{ include.text }}
+</a>

data/_includes/fa.html

@@ -0,0 +1,11 @@
+{%- comment -%}
+
+Un ícono
+
+@param :icon [String] El ícono
+@param :class [String] Las clases
+@param :description [String] La descripción
+{%- endcomment -%}
+
+<i title="{{ include.description | escape_once }}" aria-hidden="true" class="fa fa-{{ include.icon }} {{ include.class }}">{{ include.content }}</i>
+<span class="sr-only">{{ include.description }}</span>

data/_includes/file.html

@@ -1,3 +1,11 @@
+{%- comment -%}
+
+Form: type file
+
+@param :field [Integer] El campo del formulario
+@param :file_class [String] Las clases del componente
+{%- endcomment -%}
+
 {%- assign name = include.field[0] -%}
 {%- assign id = include.field[1].id | default: name -%}
 {%- assign label = include.field[1]['path'].label[site.locale] -%}
@@ -20,7 +28,7 @@
     {% if accept %}
     accept="{{ accept }}"
     {% endif %}
-    class="custom-file-input" />
+    class="custom-file-input {{ include.file_class }}" />
 
   <label for="{{ id }}_path" class="custom-file-label">
     {{ label }}

data/_includes/floating_alert.html

@@ -0,0 +1,6 @@
+<div
+  data-controller="floating-alert"
+  class="floating-alert floating-alert-bottom floating-alert-default hide"
+  role="status" aria-live="polite" aria-atomic="true">
+  <div data-floating-alert-target="content" class="floating-alert-content white background-black-t4"></div>
+</div>

data/_includes/footer.html

@@ -1,4 +1,4 @@
-{%- assign radio = site.posts | find: 'layout', 'radio' -%}
+{%- assign radio = site.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" -%}

data/_includes/headings/generic.html

@@ -0,0 +1,14 @@
+{%- comment -%}
+
+La base para un encabezado
+
+@param :level [Integer] El nivel
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- assign slug = include.text | slugify -%}
+
+<h{{ include.level }} id="{{ slug }}" class="{{ include.class }}">
+  {{- include.text -}}
+</h{{ include.level }}>

data/_includes/headings/h1.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de primer nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=1 text=include.text class=include.class -%}

data/_includes/headings/h2.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de segundo nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=2 text=include.text class=include.class -%}

data/_includes/headings/h3.html

@@ -0,0 +1,9 @@
+{%- comment -%}
+
+Encabezado de tercer nivel
+
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- include headings/generic.html level=3 text=include.text class=include.class -%}

data/_includes/headings/with_link.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+
+La base para un encabezado con enlace
+
+@param :level [Integer] El nivel
+@param :text [String] El contenido
+@param :class [String] Clases para aplicar a títulos
+{%- endcomment -%}
+
+{%- assign slug = include.text | slugify -%}
+<h{{ include.level }} id="{{ slug }}">
+  <a class="{{ include.class }}" href="#{{ slug }}" data-turbo="false">
+    {{- include.text -}}
+  </a>
+</h{{ include.level }}>

data/_includes/image.html

@@ -1,3 +1,11 @@
+{%- comment -%}
+
+Form: type image
+
+@param :field [Integer] El campo del formulario
+@param :image_class [String] Las clases del componente
+{%- endcomment -%}
+
 {%- assign name = include.field[0] -%}
 {%- assign id = include.field[1].id | default: name -%}
 {%- assign label = include.field[1]['path'].label[site.locale] -%}
@@ -17,7 +25,7 @@
     name="{{ name }}[path]"
     id="{{ id }}_path"
     accept="image/*"
-    class="custom-file-input" />
+    class="custom-file-input {{ include.image_class }}" />
 
   <label for="{{ id }}_path" class="custom-file-label">
     {{ label }}

data/_includes/input.html

@@ -1,16 +1,39 @@
-{%- assign name = include.field[0] -%}
-{%- assign id = include.field[1].id | default: name -%}
+{%- comment -%}
+
+Form: type input
+
+@param :form [String] El formulario
+@param :field [Integer] El campo del formulario
+@param :input_class [String] Las clases del componente
+{%- endcomment -%}
+
+{% if include.form %}
+  {%- assign name = include.field[0] | append: ']' | prepend: '[' | prepend: include.form -%}
+  {%- assign id = include.field[1].id | default: name | replace: '[', '_' | remove: ']' -%}
+{% else %}
+  {%- assign name = include.field[0] -%}
+  {%- assign id = include.field[1].id | default: name %}
+{% endif %}
+
 {%- assign label = include.field[1].label[site.locale] -%}
 {%- assign help = include.field[1].help[site.locale] -%}
+{%- assign error = include.field[1].error[site.locale] -%}
 {%- assign autocomplete = include.field[1].autocomplete -%}
+{%- assign placeholder = include.field[1].placeholder[site.locale] -%}
 
 <div class="form-group">
-  <label for="{{ id }}">
-    {{ label }}
-    {% if include.field[1].required %}*{% endif %}
-  </label>
+  {% if include.field[1].label %}
+    <label for="{{ id }}">
+      {{ label }}
+      {% if include.field[1].required %}*{% endif %}
+    </label>
+  {% endif %}
 
   <input
+    {% if include.field[1].placeholder %}
+      placeholder="{{ placeholder }}"
+    {% endif %}
+    {{ include.field[1].extra.input }}
     {% if help %}
       aria-describedby="help-{{ id }}"
     {% endif %}
@@ -23,7 +46,11 @@
     {% if autocomplete %}
       autocomplete="{{ autocomplete }}"
     {% endif %}
-    class="form-control" />
+    class="form-control {{ include.input_class }}" />
+
+  {%- if error -%}
+    <div class="invalid-feedback">{{ error }}</div>
+  {%- endif -%}
 
   {%- if help -%}
     <small id="help-{{ id }}" class="form-text">

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

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

data/_includes/markdown_content.html

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

data/_includes/menu.html

@@ -0,0 +1,27 @@
+{%- 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 class="nav-item w-100 w-lg-auto">
+        {%- include_cached search.html -%}
+      </div>
+    </div>
+  </div>
+</nav>

data/_includes/navbar.html

@@ -17,12 +17,16 @@
   entre navegaciones internas.  Necesita un ID para funcionar.
 {% endcomment %}
 <nav
-  data-turbolinks-permanent
+  data-turbo-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 }}">
 
+  <a href="#content" data-turbo="false" class="sr-only sr-only-focusable">
+    {{ site.i18n.accessibility.skip_to_content }}
+  </a>
+
   {% comment %}
     Para que la barra se alinee con el contenido, tenemos que darle el
     mismo ancho.

data/_includes/notification.html

@@ -0,0 +1,5 @@
+<div
+  data-controller="notification"
+  data-notification-templates="assets/templates/"
+  class="notification fixed-top w-100 fade collapse hide">
+</div>