editorial-autogestiva-jekyll-theme 0.5.0rc0 → 0.5.0rc1

data/_includes/picture.html

@@ -1,23 +1,27 @@
-{% comment %}
-Imágenes responsive.  Esto logra que solo se carguen las versiones de
-las imágenes con el ancho máximo de la pantalla.
+{%- comment -%}
 
-TODO: Las imágenes en md y superior nunca llegan al ancho máximo así
-que tienen una resolución de más.
-{% endcomment %}
-{%- assign image = include.image.path | default: 'public/placeholder.png' %}
-{%- assign height = include.height | default: site.i18n.post.height -%}
-{%- assign width = include.width | default: '100' -%}
+Una imagen.
 
-<picture>
-  {% for size in site.images.sizes %}
-    <source srcset="{{ image | thumbnail: size }}" media="(max-width: {{ size }}px)" />
-  {% endfor %}
+@param :src [String] La url de la imagen
+@param :alt [String] La descripción de la imagen
+@param :width [Integer]
+@param :class [String] Las clases del componente picture
+@param :img_class [String] Las clases de la imagen
+{%- endcomment -%}
+
+<picture class="{{ include.class }}">
+  <source
+    srcset="
+      {%- for pixel_density in site.data.theme.pixel_densities %}
+        {%- assign w = include.width | times: pixel_density -%}
+        {{- include.src | thumbnail: w | component_escape }} {{ pixel_density }}x,
+      {% endfor -%}
+      " />
 
   <img
     class="u-photo w-{{ width }} {{ include.cover | equals: false | value_unless: 'fit-cover' }} h-{{ height }} {{ include.extra }}"
     loading="lazy"
     itemprop="{{ include.itemprop | default: 'image' }}"
-    src="{{ image | thumbnail: 1140 }}"
-    alt="{{ include.image.description | include.default_description }}" />
+    src="{{ image | thumbnail: 1140 | component_escape }}"
+    alt="{{ include.image.description | include.default_description | escape_once }}" />
 </picture>

data/_includes/postal_code.html

@@ -20,7 +20,7 @@
   <input
     name="{{ name }}"
     id="{{ id }}"
-    data-target="postal-code.code"
+    data-postal-code-target="code"
     {% if help %}
       aria-describedby="help-{{ id }}"
     {% endif %}

data/_includes/predefined_array.html

@@ -1,3 +1,11 @@
+{%- comment -%}
+
+Form: type predefined_array
+
+@param :field [Integer] El campo del formulario
+@param :array_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] -%}
@@ -22,11 +30,11 @@
     {% if autocomplete %}
       autocomplete="{{ autocomplete }}"
     {% endif %}
-    class="form-control">
+    class="form-control {{ include.array_class }}">
 
     <option value="" selected></option>
 
-    {%- for option in include.field[1].values -%}
+    {%- for option in include.field[1].values[site.locale] -%}
       <option value="{{ option }}">{{ option }}</option>
     {%- endfor -%}
   </select>

data/_includes/preload_font.html

@@ -1 +1 @@
-<link rel="preload" as="font" type="font/woff2" crossorigin href="{{ include.font }}" />
+<link rel="preload" as="font" type="font/woff2" crossorigin href="{{ include.font }}?{{ site.time | date: '%s' }}" />

data/_includes/script.html

@@ -0,0 +1,5 @@
+{% comment %}
+@param :src [String]
+{% endcomment %}
+
+<script defer src="{{ include.src | component_escape }}" data-turbo-track="reload"></script>

data/_includes/search.html

@@ -16,7 +16,7 @@
         id="{{ param }}_q"
         name="q"
         placeholder="{{ site.i18n.search.submit }}"
-        data-target="search.q"
+        data-search-target="q"
         autocomplete="off" />
     </div>
   </div>

data/_includes/share.html

@@ -1,11 +1,11 @@
 {% capture url %}{{ site.url }}{{ include.url }}{% endcapture %}
 
 {% unless include.share.url == '%url' %}
-  {% assign url = url | default: '' | cgi_escape %}
+  {% assign url = url | default: '' | component_escape %}
 {% endunless %}
-{% assign title = include.title | default: '' | cgi_escape %}
-{% assign description = include.description | default: '' | cgi_escape %}
-{% assign tags = include.tags | join: ',' | default: '' | cgi_escape %}
+{% assign title = include.title | default: '' | component_escape %}
+{% assign description = include.description | default: '' | component_escape %}
+{% assign tags = include.tags | join: ',' | default: '' | component_escape %}
 
 <a
   {% if include.share.url == '%url' %}
@@ -13,7 +13,7 @@
   {% else %}
     target="_blank"
   {% endif %}
-  rel="noopener nofollow"
+  rel="noopener nofollow noreferrer"
   title="{{ include.share.title }}"
   class="d-flex flex-column align-items-center p-3"
   href="{{ include.share.url | replace: '%url', url | replace: '%title', title | replace: '%description', description | replace: '%tags', tags }}">

data/_includes/share_box.html

@@ -1,16 +1,31 @@
-<input type="checkbox" id="share" class="toggler" autocomplete="off" />
+{%- assign title = include.title | unescape -%}
+{%- assign text = include.description | strip_html | unescape -%}
+{%- assign url = site.url | append: "/" | append: include.url -%}
+{%- assign id = include.id | default: 'share' -%}
 
-<label class="share btn border btn-block" for="share">
+{% capture label %}
   {{ site.i18n.share.text }}
   <i class="fa fa-{{ site.i18n.share.icon }}"></i>
+{% endcapture %}
 
-  <div class="share-box toggled d-flex align-items-center justify-content-center">
-    <div class="box background-white color-redpink row no-gutters align-items-center justify-content-center p-3">
-      {% for share in site.i18n.share.items %}
-        <div class="col-4">
-          {% include_cached share.html share=share url=include.url title=include.title description=include.description %}
-        </div>
-      {% endfor %}
-    </div>
+{% include_cached toggler_label.html id=id content=label %}
+
+{%- capture extra -%}
+  data-controller="share"
+  data-action="share#share"
+  data-share-title-value="{{ title | escape }}"
+  data-share-text-value="{{ text | escape }}"
+  data-share-url-value="{{ url | escape }}"
+{%- endcapture -%}
+
+{%- include_cached toggler.html id=id extra=extra -%}
+
+<div class="share-box toggled d-flex align-items-center justify-content-center">
+  <div class="box background-white color-redpink row no-gutters align-items-center justify-content-center p-3">
+    {% for share in site.i18n.share.items %}
+      <div class="col-4">
+        {% include_cached share.html share=share url=include.url title=include.title description=text tags=include.tags %}
+      </div>
+    {% endfor %}
   </div>
-</label>
+</div>

data/_includes/state.html

@@ -17,10 +17,10 @@
     {% if include.field[1].required %}*{% endif %}
   </label>
 
-  <input data-target="state.id" type="hidden" name="{{ name }}" id="{{ id }}" value="" />
+  <input data-state-target="id" type="hidden" name="{{ name }}" id="{{ id }}" value="" />
 
   <input
-    data-target="state.name"
+    data-state-target="name"
     {% if help %}
       aria-describedby="help-{{ id }}"
     {% endif %}
@@ -47,7 +47,7 @@
     </small>
   {%- endif -%}
 
-  <datalist id="list-{{ id }}" data-target="state.list">
+  <datalist id="list-{{ id }}" data-state-target="list">
   </datalist>
 </div>
 

data/_includes/stretched_link.html

@@ -0,0 +1,15 @@
+{%- comment -%}
+
+Para asignar un enlace a un bloque contenedor.
+
+@param :href [String] La URL
+@param :alt [String] La descripción
+{%- endcomment -%}
+
+<a
+	class="stretched-link black hover-black text-decoration-none"
+	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"' }}>
+	<span class="sr-only">{{ include.alt }}</span>
+</a>

data/_includes/string.html

@@ -1,3 +1,12 @@
+{%- comment -%}
+
+Form: type string
+
+@param :field [Integer] El campo del formulario
+@param :input_class [String] Las clases del componente
+{%- endcomment -%}
+
 {% assign f = field %}
 {% assign f.type = 'text' %}
-{% include input.html field=f %}
+
+{% include input.html field=f input_class=include.input_class %}

data/_includes/submit.html

@@ -1 +1,13 @@
-<input type="submit" class="btn btn-block btn-success" value="{{ include.field[1].label[site.locale] }}" />
+{%- comment -%}
+
+Form: type submit
+
+@param :field [Integer] El campo del formulario
+@param :submit_class [String] Las clases del componente
+{%- endcomment -%}
+
+<input
+  {{ include.field[1].extra }}
+  type="submit"
+  class="btn btn-success {{ include.submit_class }}"
+  value="{{ include.field[1].label[site.locale] }}" />

data/_includes/svg/copy-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>

data/_includes/svg/done-icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="18px" viewBox="0 0 24 24" width="18px" fill="#ffffff"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z"/></svg>

data/_includes/svg/menu.svg

@@ -0,0 +1,9 @@
+<svg
+	class="{{ include.class }}"
+	viewBox="0 0 16 14"
+	fill="white"
+	xmlns="http://www.w3.org/2000/svg">
+<line x1="1" y1="1" x2="15" y2="1" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="1" y1="6.81836" x2="15" y2="6.81836" stroke="black" stroke-width="2" stroke-linecap="round"/>
+<line x1="1" y1="12.6362" x2="15" y2="12.6362" stroke="black" stroke-width="2" stroke-linecap="round"/>
+</svg>

data/_includes/svg/x.svg

@@ -0,0 +1,3 @@
+<svg class="{{ include.class }}" viewBox="0 0 13 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.656874 0.000938353C0.373797 0.0285864 0.132829 0.218575 0.0399914 0.487445C-0.0530995 0.756315 0.0194448 1.05461 0.22516 1.25095L5.15691 6.19413L0.22516 11.1259C-0.0604506 11.4115 -0.0604506 11.8744 0.22516 12.16C0.51077 12.4457 0.973668 12.4457 1.25932 12.16L6.2025 7.21686L11.1342 12.16C11.4199 12.4457 11.8828 12.4457 12.1681 12.16C12.4538 11.8744 12.4538 11.4115 12.1684 11.1259L7.22522 6.19413L12.1684 1.25095C12.3853 1.04143 12.4505 0.719549 12.332 0.442055C12.2133 0.164562 11.9358 -0.0109708 11.6342 0.000951234C11.4458 0.00551695 11.2667 0.0828794 11.1343 0.217061L6.20251 5.14882L1.25933 0.217061C1.12134 0.0773015 0.932629 -0.00057474 0.736551 0.000951234C0.709917 -0.000317078 0.683538 -0.000317078 0.656902 0.000951234L0.656874 0.000938353Z" fill="white"/>
+</svg>

data/_includes/tel.html

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

@@ -1,3 +1,12 @@
+{%- comment -%}
+
+Form: type text
+
+@param :field [Integer] El campo del formulario
+@param :text_class [String] Las clases del componente
+@param :rows [String] La cantidad de filas que muestra el campo
+{%- endcomment -%}
+
 {%- assign name = include.field[0] -%}
 {%- assign id = include.field[1].id | default: name -%}
 {%- assign label = include.field[1].label[site.locale] -%}
@@ -6,8 +15,8 @@
 
 <div class="form-group">
   <label for="{{ id }}">
-    {% if include.field[1].required %}*{% endif %}
     {{ label }}
+    {% if include.field[1].required %}*{% endif %}
   </label>
 
   <textarea
@@ -22,7 +31,8 @@
     {% if autocomplete %}
       autocomplete="{{ autocomplete }}"
     {% endif %}
-    class="form-control"></textarea>
+    rows="{{ include.rows | default: "3" }}"
+    class="form-control {{ include.text_class }}"></textarea>
 
   {%- if .help -%}
     <small id="help-{{ id }}" class="form-text">

data/_includes/theme/button_with_copy.html

@@ -0,0 +1 @@
+{% include buttons/copy.html copy="https://sutty.nl" text="Text" %}

data/_includes/theme/button_with_link.html

@@ -0,0 +1,5 @@
+{% include buttons/link.html href="#" content="Become a subscriber" class="btn-primary" %}
+
+{% include headings/with_link.html level=2 text="Botón con link externo" %}
+
+{% include buttons/link.html href="https://sutty.nl/" content="Find out more about Sutty" class="btn-primary" %}

data/_includes/theme/buttons.html

@@ -0,0 +1,33 @@
+<div class="content">
+  {%- include headings/h2.html text="Botones" -%}
+
+  {%- include headings/h3.html text="Botón con link" -%}
+
+  {%- include buttons/link.html href="#" class="btn-primary" content="Click me" -%}
+
+  {%- include headings/h3.html text="Botón con link externo" -%}
+
+  {%- include buttons/link.html href="https://sutty.nl/" class="btn-primary" content="Click me" -%}
+
+  {%- include headings/h3.html text="Botón con atributos extra" -%}
+
+  {%- assign extra = 'data-extra="Inspeccióname"' -%}
+
+  <p>Inspeccionar para encontrar el atributo <code>{{ extra }}</code></p>
+
+  {%- include buttons/link.html href="#" class="btn-primary" content="Click me" extra=extra -%}
+
+  {%- include headings/h3.html text="Botones de todos los colores" -%}
+
+  {%- for color in site.data.theme.colors -%}
+    {%- assign class = color[0] | replace: "_", "-" | prepend: "btn-" -%}
+
+    {%- include buttons/link.html href="#" class=class content=class -%}
+  {%- endfor -%}
+
+  {%- include headings/h3.html text="Botón sin link" -%}
+
+  <p>Los botones <code>&lt;button&gt;</code> se usan para interacciones JavaScript</p>
+
+  {%- include buttons/button.html class="btn-primary" content="Click me" -%}
+</div>

data/_includes/theme/colors.html

@@ -0,0 +1,14 @@
+<div class="row row-cols-2 row-cols-md-4">
+  {% for color in site.data.theme.colors %}
+    <div class="col">
+      <div class="w-100 embed-responsive embed-responsive-1by1">
+        <div class="embed-responsive-item background-{{ color[0] | replace: "_", "-" }} d-flex align-items-center justify-content-center">
+          <div>
+            <p>{{ color[0] | replace: "_", "-" }}</p>
+            <p>{{ color[1] }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>

data/_includes/theme/content.html

@@ -0,0 +1,41 @@
+<div class="content">
+  <h2>Título 2</h2>
+  <h3>Título 3</h3>
+  <h4>Título 4</h4>
+  <h5>Título 5</h5>
+  <h6>Título 6</h6>
+
+  <p class="display-1">Display 1</p>
+  <p class="display-2">Display 2</p>
+  <p class="display-3">Display 3</p>
+  <p class="display-4">Display 4</p>
+
+  <p class="lead">Párrafo resaltado</p>
+
+  <p class="lead-md">
+    <strong>Lorem ipsum dolor sit amet</strong>, consectetur adipiscing
+    elit, sed do eiusmod tempor incididunt ut labore et dolore magna
+    aliqua. <a href="#">Ut enim ad minim veniam</a>, quis nostrud
+    exercitation ullamco laboris nisi ut aliquip ex ea commodo
+    consequat. <em>Duis aute irure dolor</em> in reprehenderit in
+    voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+    Excepteur <mark>sint occaecat cupidatat non proident</mark>, sunt in
+    culpa qui officia <small>deserunt mollit anim id est laborum</small>.
+  </p>
+
+  <ul>
+    <li>Lorem ipsum dolor sit amet</li>
+    <li>consectetur adipiscing elit</li>
+    <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
+  </ul>
+
+  <ol>
+    <li>Lorem ipsum dolor sit amet</li>
+    <li>consectetur adipiscing elit</li>
+    <li>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li>
+  </ol>
+
+  <blockquote>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </blockquote>
+</div>

data/_includes/theme/embed_responsive.html

@@ -0,0 +1,10 @@
+{% for embed_responsive_aspect_ratio in site.data.theme.embed_responsive_aspect_ratios %}
+  {% assign x = embed_responsive_aspect_ratio | split: " " | first | remove: "(" %}
+  {% assign y = embed_responsive_aspect_ratio | split: " " | last | remove: ")" %}
+  {% assign text = x | append: "by" | append: y %}
+
+  <div class="mb-3">
+    {% include headings/with_link.html level=2 text=text %}
+    {% include embed_responsive.html src="public/placeholder.png" width=576 x=x y=y img_class="w-100 h-100 fit-cover" %}
+  </div>
+{% endfor %}

data/_includes/theme/font_sizes.html

@@ -0,0 +1,18 @@
+{% for font_size in site.data.theme.font_sizes %}
+  <div class="mb-3">
+    {% assign title = "Tipografía f-" | append: font_size[0] %}
+    {% include headings/with_link.html level=2 text=title %}
+
+    <p class="f-{{ font_size[0] }}">
+      <strong>Lorem ipsum dolor sit amet</strong>, consectetur
+      adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+      dolore magna aliqua. <a href="#">Ut enim ad minim veniam</a>, quis
+      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. <em>Duis aute irure dolor</em> in reprehenderit in
+      voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur <mark>sint occaecat cupidatat non proident</mark>, sunt
+      in culpa qui officia <small>deserunt mollit anim id est
+        laborum</small>.
+    </p>
+  </div>
+{% endfor %}

data/_includes/theme/footer.html

@@ -0,0 +1 @@
+{% include footer.html %}

data/_includes/theme/letter_spacing.html

@@ -0,0 +1,3 @@
+{% for letter_spacing in site.data.theme.letter_spacings %}
+  <p class="letter-spacing-{{ letter_spacing[0] }}">Letter spacing {{ letter_spacing[0] }}</p>
+{% endfor %}

data/_includes/theme/picture.html

@@ -0,0 +1,5 @@
+<div class="content">
+  <p>Una imagen de 100px</p>
+</div>
+
+{% include picture.html src="public/placeholder.png" width=100 %}

data/_includes/toggler/toggler.html

@@ -0,0 +1,21 @@
+{% comment %}
+  Este elemento colocado en el mismo nivel que un elemento con la clase
+  toggled permite ocultarlo o mostrarlo.
+
+  @see toggler_label.html
+  @param :id [String] La ID
+  @param :toggled_class [String] Las clases del elemento toggled
+  @param :toggled_content [String] El contenido del elemento toggled
+{% endcomment %}
+<input
+  type="checkbox"
+  class="toggler sr-only"
+  data-action="body-scroll#toggle"
+  autocomplete="off"
+  id="{{ include.id }}"
+  name="{{ include.id }}"
+  aria-labelledby="{{ include.id }}-label" />
+
+<div class="toggled position-absolute {{ include.toggled_class }}">
+	{{ include.toggled_content }}
+</div>

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

@@ -37,7 +37,7 @@ layout: default
         </div>
       </div>
 
-      <div class="col-12" data-target="order.cart">
+      <div class="col-12" data-order-target="cart">
       </div>
     </div>
 
@@ -57,7 +57,7 @@ layout: default
           </div>
 
           <div class="col-6 col-lg text-center">
-            <p class="font-weight-bold" data-target="order.subtotal">0</p>
+            <p class="font-weight-bold" data-order-target="subtotal">0</p>
           </div>
 
           <div class="col-lg-2"></div>