radios-comunitarias-jekyll-theme 0.2.0 → 0.3.0rc1

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

@@ -0,0 +1,10 @@
+{%- 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 %}

data/_includes/picture.html

@@ -0,0 +1,25 @@
+{%- comment -%}
+
+Una imagen.
+
+@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 | uri_escape }} {{ pixel_density }}x,
+      {% endfor -%}
+      " />
+
+  <img
+    class="{{ include.img_class }}"
+    src="{{ include.src | thumbnail: include.width | uri_escape }}"
+    alt="{{ include.alt | escape_once }}" />
+</picture>

data/_includes/post.html

@@ -5,11 +5,19 @@ ponemos en includes para poder reutilizarlo en la portada.
 Ya tiene todos los metadatos para schema.org y microformats.org
 {% endcomment %}
 
+{% assign license = site.posts | find: "layout", "license" %}
+{%- assign date_format = site.i18n.date.format | default: "%b %-d, %Y" -%}
+
 {% 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">
+
+      {% if page.activity.inReplyTo %}
+        {% include_cached activity_pub/replying_to.html activity=page.activity.inReplyTo %}
+      {% endif %}
+
       <h1 class="p-name" itemprop="name headline">
         {{ page.title | default: '' | escape }}
       </h1>
@@ -35,7 +43,6 @@ Ya tiene todos los metadatos para schema.org y microformats.org
       <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>
@@ -47,7 +54,7 @@ Ya tiene todos los metadatos para schema.org y microformats.org
     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">
+    <div class="col-12 col-md-6 e-content pt-3 pr-md-3 order-1 order-md-0 content" itemprop="articleBody">
       {{ page.content }}
 
       {% comment %}
@@ -89,25 +96,29 @@ Ya tiene todos los metadatos para schema.org y microformats.org
     </div>
   </div>
 
-  <footer>
+  <footer class="mt-5">
     <a class="u-url" itemprop="url" href="{{ page.url }}" hidden>
-      {{ site.url }}/{{ page.url }}
+      {{ page.url | absolute_url }}
     </a>
 
     {%- if page.uuid -%}
       <span hidden itemprop="identifier">{{ page.uuid }}</span>
     {%- endif -%}
 
-    {%- if page.license.url -%}
+    {%- if license -%}
       <p itemprop="license" itemtype="http://schema.org/CreativeWork">
-        <a rel="license" itemprop="url" href="{{ page.license.url }}">
+        <a rel="license" itemprop="url" href="{{ license.url }}">
           <span itemprop="articleBody">
-            {{ page.license.description }}
+            {{ license.description }}
           </span>
         </a>
       </p>
     {%- endif -%}
 
+    {% if page.activity %}
+      {% include activity_pub/interactions.html activity=page.activity profile=site.actor %}
+    {% endif %}
+
     {%- if page.tags %}
       <span itemprop="keywords" hidden>{{ page.tags | join: ', ' }}</span>
       {%- for tag in page.tags -%}

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

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

data/_includes/reproductor.html

@@ -1,4 +1,4 @@
-{%- assign radio = site.posts | find: 'layout', 'radio' -%}
+{%- assign radio = site.about -%}
 
 {% comment %}
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/audio
@@ -6,15 +6,32 @@ 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 %}
+{% unless radio.streams == empty %}
+  <div
+    data-controller="streaming"
+    data-action="window@online->streaming#restartIfPlaying"
+    data-streaming-sizes-value="192x192"
+    data-streaming-title-value="{{ radio.title | escape }}"
+    data-streaming-artist-value="{{ radio.artist | escape }}"
+    data-streaming-artwork-value="{{ radio.image.path | default: radio.logo.path | thumbnail: 192, 192 | component_escape }}"
+    data-streaming-type-value="image/{{ radio.image.path | default: radio.logo.path | extname }}"
+    class="w-100">
+    <audio
+      data-action="ended->streaming#restart"
+      data-streaming-target="transmission" controls preload="none" class="w-100">
+      {% for source in radio.streams %}
+        <source data-streaming-target="source" src="{{ source | component_escape }}" />
+      {% endfor %}
 
-  <p>
-    {{ site.i18n.no_audio_support }}
-    <a href="{{ radio.streams | first }}">
-      {{ radio.streams | first }}
-    </a>
-  </p>
-</audio>
+      <p>
+        {{ site.i18n.no_audio_support }}
+        <a
+          target="_blank"
+          rel="noopener"
+          href="{{ radio.streams | first }}">
+          {{ radio.streams | first }}
+        </a>
+      </p>
+    </audio>
+  </div>
+{% endunless %}

data/_includes/script.html

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

data/_includes/search.html

@@ -0,0 +1,25 @@
+{%- assign param = include.param | default: 'search' -%}
+
+<form method="get" action="" class="form-inline" data-controller="search" data-action="search#search">
+  <div class="form-group">
+    <label for="{{ param }}_q" class="sr-only">{{ site.i18n.search.label }}</label>
+
+    <div class="input-group flex-nowrap">
+      <div class="input-group-prepend">
+        <span class="input-group-text fa fa-search border-0 pt-2"></span>
+      </div>
+
+      <input
+        class="border-0 form-control"
+        type="search"
+        required
+        id="{{ param }}_q"
+        name="q"
+        placeholder="{{ site.i18n.search.submit }}"
+        data-search-target="q"
+        autocomplete="off" />
+    </div>
+  </div>
+
+  <input class="sr-only" type="submit" value="{{ site.i18n.search.submit }}" />
+</form>

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 hashtag = include.categories | first | capitalize | remove: ' ' %}
+{% 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="nofollow"
+  rel="noopener nofollow noreferrer"
   title="{{ include.share.title }}"
   class="d-flex flex-column align-items-center"
   href="{{
@@ -21,8 +21,8 @@
     | replace: '%url', url
     | replace: '%title', title
     | replace: '%description', description
-    | replace: '%hashtag', hashtag
+    | replace: '%tags', tags
     }}">
-  <i class="fa fa-fw fa-{{ include.share.icon }}"></i>
-  <span class="sr-only">{{ include.share.title }}</span>
+  <i class="fa fa-fw fa-{{ include.share.icon }}" aria-hidden="true"></i>
+  {{ include.share.title }}
 </a>

data/_includes/share_box.html

@@ -1,13 +1,42 @@
-<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 %}
+{%- 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' -%}
+
+{% capture label %}
+  {{ site.i18n.share.text }}
+  <i class="fa fa-{{ site.i18n.share.icon }}"></i>
+{% endcapture %}
+
+{% include_cached toggler/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 -%}
+
+{% capture toggler_related %}
+  <span aria-hidden="true">&times;</span>
+  <span class="sr-only">{{ site.i18n.close }}</span>
+{% endcapture %}
+
+{% capture toggled %}
+<div class="share-box 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">
+    <div class="col-12 text-right">
+      {% include_cached toggler/toggler_related.html id=id content=toggler_related %}
+    </div>
+
+    {% 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>
 </div>
+{% endcapture %}
+
+{%- include_cached toggler/toggler.html id=id extra=extra toggled_content=toggled -%}

data/_includes/social_networks.html

@@ -0,0 +1,6 @@
+{% assign social_networks = 'fediverse,facebook,instagram,twitter,youtube,internet_archive' | split: ',' %}
+{% for social_network in social_networks %}
+  {% if site.about[social_network] %}
+    <link rel="me" href="{{ site.about[social_network] }}" />
+  {% endif %}
+{% endfor %}

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 | uri_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-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,11 @@
+{%- comment -%}
+
+Form: type text
+
+@param :field [Integer] El campo del formulario
+@param :text_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,7 +30,7 @@
     {% if autocomplete %}
       autocomplete="{{ autocomplete }}"
     {% endif %}
-    class="form-control"></textarea>
+    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 %}
+  </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>