editorial-autogestiva-jekyll-theme 0.5.0rc0 → 0.5.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
+      component_class="mr-2 align-self-center w-48px"
+      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 | component_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/cart_controller.html

@@ -1,5 +1,5 @@
 data-controller="cart"
-data-target="stock.product"
+data-stock-target="product"
 data-cart-url="{{ include.product.url }}"
 data-cart-variant-id="{{ include.product.variant_id }}"
 data-cart-image="{{ include.product.image.path | thumbnail: 212, 300 }}"

data/_includes/contact.html

@@ -1,15 +1,12 @@
-{% comment %}
-Esta imagen obtiene una cookie desde la API de Sutty para autorizar el
-envío del formulario.
-{% endcomment %}
-<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/{{ include.name }}"
+  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' %}

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

@@ -17,11 +17,11 @@
     {% if include.field[1].required %}*{% endif %}
   </label>
 
-  <input data-target="country.id" type="hidden" name="{{ name }}" id="{{ id }}" value="" />
-  <input data-target="country.iso" type="hidden" name="{{ include.form }}_ignore_{{ include.field[0] }}_iso" value="" />
+  <input data-country-target="id" type="hidden" name="{{ name }}" id="{{ id }}" value="" />
+  <input data-country-target="iso" type="hidden" name="{{ include.form }}_ignore_{{ include.field[0] }}_iso" value="" />
 
   <input
-    data-target="country.name"
+    data-country-target="name"
     {% if help %}
       aria-describedby="help-{{ id }}"
     {% endif %}
@@ -48,6 +48,6 @@
     </small>
   {%- endif -%}
 
-  <datalist id="list-{{ id }}" data-target="country.list">
+  <datalist id="list-{{ id }}" data-country-target="list">
   </datalist>
 </div>

data/_includes/date.html

@@ -0,0 +1,12 @@
+{% comment %}
+  La fecha de un artículo
+
+  @param :date [String] La fecha con formato
+  @param :extra [String] Atributos extra
+{% endcomment %}
+
+<time
+	datetime="{{ include.date | date_to_xmlschema }}"
+	{{ include.extra }}>
+	{{- include.date | date_local: include.format -}}
+</time>

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,17 @@
+{%- 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
+@param :img_class [String] Las clases de la imagen
+{%- endcomment -%}
+
+<div class="embed-responsive embed-responsive-{{ include.x }}by{{ include.y }} {{ include.component_class }}" {{ include.extra }}>
+  {%- include picture.html class="embed-responsive-item" img_class=include.img_class 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 | component_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

@@ -1,6 +1,6 @@
 <div
   data-controller="floating-alert"
-  class="pointer-event-none floating-alert floating-alert-bottom d-flex justify-content-center w-100 position-fixed fade hide"
+  class="floating-alert floating-alert-bottom floating-alert-default hide"
   role="status" aria-live="polite" aria-atomic="true">
-  <div data-target="floating-alert.content" class="floating-alert-content white background-black-t4"></div>
+  <div data-floating-alert-target="content" class="floating-alert-content white background-black-t4"></div>
 </div>

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,3 +1,12 @@
+{%- 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: ']' -%}
@@ -10,14 +19,20 @@
 {%- 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 }}"
@@ -31,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 error -%}
     <div class="invalid-feedback">{{ error }}</div>

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

@@ -31,7 +31,7 @@
     <span class="d-flex align-items-center justify-content-center" data-controller="cart-counter">
       <i class="fa fa-fw fa-2x fa-shopping-cart"></i>
       <span class="sr-only">{{ site.cart.title }}</span>
-      <span class="font-weight-bold ml-1" data-target="cart-counter.counter">0</span>
+      <span class="font-weight-bold ml-1" data-cart-counter-target="counter">0</span>
     </span>
   </a>
 </nav>

data/_includes/number.html

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

@@ -0,0 +1,10 @@
+{%- include_cached script.html src="assets/js/env.js" -%}
+{%- if jekyll.environment == "production" -%}
+  {%- for pack in site.data.manifest.outputs -%}
+    {%- unless pack[1].entryPoint -%}{%- continue -%}{%- endunless -%}
+    {%- assign src = pack[0] -%}
+    {%- include_cached script.html src=src -%}
+  {%- endfor -%}
+{%- else -%}
+  {%- include_cached script.html src="pack.js" -%}
+{%- endif -%}

data/_includes/password.html

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