observatorio-jekyll-theme 0.1.2

data/_data/layouts/theme.yml

@@ -0,0 +1,266 @@
+---
+title:
+  type: string
+  required: true
+  label:
+    en: Title
+    es: Título
+  help:
+    en: 'The name you want to give to this customization'
+    es: 'El nombre que quieras darle a esta personalización'
+font_family_sans_serif:
+  type: predefined_value
+  label:
+    en: Select a typography for the site
+    es: Selecciona una tipografía para el sitio
+  help:
+    en: 'If you want us to add support for a typography, please send us an e-mail'
+    es: 'Si quieres que agreguemos una tipografía, por favor envíanos un e-mail'
+  default:
+    en: sans-serif
+    es: sans-serif
+  values:
+    en:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+    es:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+headings_font_family:
+  type: predefined_value
+  label:
+    en: Select a typography for the headings
+    es: Selecciona una tipografía para los títulos del sitio
+  help:
+    en: 'If you want us to add support for a typography, please send us an e-mail'
+    es: 'Si quieres que agreguemos una tipografía, por favor envíanos un e-mail'
+  default:
+    en: sans-serif
+    es: sans-serif
+  values:
+    en:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+    es:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+enable_rounded:
+  type: boolean
+  label:
+    en: 'Rounded corners'
+    es: 'Esquinas redondeadas'
+  help:
+    en: 'For buttons, form inputs, etc.'
+    es: 'De los botones, campos de formularios, etc.'
+  default:
+    es: false
+    en: false
+enable_shadows:
+  type: boolean
+  label:
+    en: 'Shadows'
+    es: 'Sombras'
+  help:
+    en: 'Shadows behind elements'
+    es: 'Sombras en los elementos'
+  default:
+    es: false
+    en: false
+body_bg:
+  type: color
+  label:
+    en: 'Background color'
+    es: 'Color de fondo'
+  help:
+    en: "Site's background color"
+    es: 'Color de fondo del sitio'
+  default:
+    es: '#FFFFFF'
+    en: '#FFFFFF'
+body_color:
+  type: color
+  label:
+    en: 'Text color'
+    es: 'Color del texto'
+  help:
+    en: ''
+    es: ''
+  default:
+    es: '#212529'
+    en: '#212529'
+primary:
+  type: color
+  label:
+    en: 'Primary color'
+    es: 'Color principal'
+  help:
+    en: 'Highlights certain elements'
+    es: 'Resalta algunos elementos'
+  default:
+    es: '#007bff'
+    en: '#007bff'
+secondary:
+  type: color
+  label:
+    en: 'Secondary color'
+    es: 'Color secundario'
+  help:
+    en: 'Highlights certain elements'
+    es: 'Resalta algunos elementos'
+  default:
+    es: '#6c757d'
+    en: '#6c757d'
+link_color:
+  type: color
+  label:
+    en: 'Link color'
+    es: 'Color de los vínculos'
+  help:
+    en: ''
+    es: ''
+  default:
+    es: '#007bff'
+    en: '#007bff'
+link_hover_color:
+  type: color
+  label:
+    en: 'Link color when selected'
+    es: 'Color de los vínculos al seleccionarlos'
+  help:
+    en: ''
+    es: ''
+  default:
+    es: '#0056b3'
+    en: '#0056b3'
+h1_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for first level headings'
+    es: 'Altura de los títulos de primer nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 2.5
+    en: 2.5
+h2_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for second level headings'
+    es: 'Altura de los títulos de segundo nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 2
+    en: 2
+h3_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for third level headings'
+    es: 'Altura de los títulos de tercer nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 1.75
+    en: 1.75
+h4_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for fourth level headings'
+    es: 'Altura de los títulos de cuarto nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 1.5
+    en: 1.5
+h5_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for fifth level headings'
+    es: 'Altura de los títulos de quinto nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 1.25
+    en: 1.25
+h6_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for sixth level headings'
+    es: 'Altura de los títulos de sexto nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 1
+    en: 1
+mark_bg:
+  type: color
+  label:
+    en: 'Highlight color'
+    es: 'Color de resaltado'
+  help:
+    en: 'Default color for highlighted text'
+    es: 'Color por defecto para el texto resaltado'
+  default:
+    es: '#fcf8e3'
+    en: '#fcf8e3'
+navbar_light_color:
+  type: color
+  label:
+    en: 'Navigation bar item color'
+    es: 'Color de ítem en la barra de navegación'
+  help:
+    en: 'Text and icons'
+    es: 'Texto e íconos'
+  default:
+    es: '#ced4da'
+    en: '#ced4da'
+navbar_light_hover_color:
+  type: color
+  label:
+    en: 'Navigation bar item color when selected'
+    es: 'Color de ítem seleccionado en la barra de navegación'
+  help:
+    en: 'Text and icons'
+    es: 'Texto e íconos'
+  default:
+    es: '#6c757d'
+    en: '#6c757d'
+navbar_light_active_color:
+  type: color
+  label:
+    en: 'Navigation bar item color when active'
+    es: 'Color de ítem activo en la barra de navegación'
+  help:
+    en: 'Text and icons'
+    es: 'Texto e íconos'
+  default:
+    es: '#212529'
+    en: '#212529'
+order:
+  type: order
+  label:
+    en: Order
+    es: Orden
+  help:
+    en: Position in articles list
+    es: La posición del artículo en la lista de artículos
+draft:
+  type: boolean
+  label:
+    en: Draft
+    es: Borrador
+  help:
+    en: This post isn't ready to be published yet
+    es: Este artículo aun no está listo para publicar

data/_includes/archive.html

@@ -0,0 +1,14 @@
+<section class="row no-gutters justify-content-center">
+  <header class="col-10 mb-3">
+    <h1>{{ include.page.title }}</h1>
+  </header>
+
+  <div class="col-10 container">
+    <div class="row justify-content-start row-cols-1 row-cols-md-2 row-cols-lg-3">
+      {% for post in include.page.posts %}
+        {%- if site.ignored_layouts contains post.layout -%}{%- continue -%}{%- endif -%}
+        {%- include_cached post.html post=post -%}
+      {% endfor %}
+    </div>
+  </div>
+</section>

data/_includes/archive_layout_articulos.html

@@ -0,0 +1,14 @@
+<section class="row no-gutters justify-content-center">
+  <header class="col-10 mb-3">
+    <h1>{{ include.page.title }}</h1>
+  </header>
+
+  <div class="col-10 container">
+    <div class="row justify-content-start row-cols-1 row-cols-md-2 row-cols-lg-3">
+      {% for post in include.page.posts %}
+        {%- if site.ignored_layouts contains post.layout -%}{%- continue -%}{%- endif -%}
+        {%- include_cached post.html post=post -%}
+      {% endfor %}
+    </div>
+  </div>
+</section>

data/_includes/archive_layout_biblioteca.html

@@ -0,0 +1,16 @@
+{% comment %}
+Trae todos los archivos por biblioteca y categoria para mostrarlos como
+botones.
+{% endcomment %}
+{%- assign categorias = site.archives.layout-categories | where: '_layout', 'biblioteca' -%}
+
+<section id="biblioteca" class="d-flex flex-column background-blue justify-content-around p-5">
+  {% for post in categorias %}
+    {%- if site.ignored_layouts contains post.layout -%}{%- continue -%}{%- endif -%}
+    {% if post.categories.size == 0 %}{% continue %}{% endif %}
+    <a
+      href="{{ post.url }}"
+      class="btn btn-outline-light btn-lg btn-block font-weight-bold">
+      {{ post.categories }}</a>
+  {% endfor %}
+</section>

data/_includes/archive_layout_integrantes.html

@@ -0,0 +1,26 @@
+{%- assign integrantes = site.posts | where: 'layout', 'integrante' -%}
+{%- assign about = site.posts | find: 'layout', 'about' -%}
+
+<section id="integrantes" class="container" itemscope itemtype="https://schema.org/Organization">
+  <meta itemprop="name" content="{{ about.title }}" />
+  <meta itemprop="url" content="{{ site.url }}" />
+
+  <div class="row justify-content-center row-cols-1 row-cols-md-3">
+    {% for post in integrantes %}
+      <article
+        itemprop="member"
+        itemscope
+        itemtype="https://schema.org/Person"
+        id="{{ post.slug }}"
+        class="col text-center mb-3">
+
+        {%- include_cached picture.html image=post.image default_description=post.title height=15 width=15 extra='border border-white rounded-circle'-%}
+
+        <header class="mt-3">
+          <h1 class="f-3 text-uppercase p-author h-card" itemprop="name">{{ post.title }}</h1>
+          <div class="lead p-job-title" itemprop="jobTitle">{{ post.description | markdownify }}</div>
+        </header>
+      </article>
+    {% endfor %}
+  </div>
+</section>

data/_includes/boolean.html

@@ -0,0 +1,30 @@
+{%- 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-check text-left">
+  <input
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    type="checkbox"
+    name="{{ name }}"
+    id="{{ id }}"
+    {% if autocomplete %}
+      autocomplete="{{ autocomplete }}"
+    {% endif %}
+    class="form-check-input" />
+
+  <label class="form-check-label" for="{{ id }}">{{ label }}</label>
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+</div>

data/_includes/cart_add.html

@@ -0,0 +1,8 @@
+<button
+  {{ include.product.in_stock | value_unless: 'disabled' }}
+  data-action="cart#add"
+  data-stock-add
+  class="btn btn-success btn-block btn-lg">
+  <span class="when-parent-disabled">{{ site.cart.out_of_stock }}</span>
+  <span class="when-parent-enabled">{{ site.cart.add }}</span>
+</button>

data/_includes/cart_controller.html

@@ -0,0 +1,11 @@
+data-controller="cart"
+data-target="stock.product"
+data-sku="{{ include.product.sku }}"
+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-cart-title="{{ include.product.title }}"
+data-cart-price="{{ include.product.price }}"
+data-cart-in-stock="{{ include.product.in_stock }}"
+data-cart-stock="{{ include.product.stock }}"
+data-cart-extra="{{ include.extra | join: '|' }}"

data/_includes/contact.html

@@ -0,0 +1,23 @@
+{% 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.{{ site.hostname }}/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
+  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: '-' }}">
+      {% include {{ template }} field=field %}
+    </div>
+  {%- endfor -%}
+</form>

data/_includes/content.html

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

data/_includes/country.html

@@ -0,0 +1,53 @@
+{% 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 -%}
+
+<div class="form-group" data-controller="country" data-country-group="{{ include.field[1].group }}">
+  <label for="{{ id }}">
+    {{ label }}
+    {% 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-target="country.name"
+    {% if help %}
+      aria-describedby="help-{{ id }}"
+    {% endif %}
+    {% if include.field[1].required %}
+      required
+    {% endif %}
+    type="{{ include.field[1].type }}"
+    {% if autocomplete %}
+      autocomplete="{{ autocomplete }}"
+    {% endif %}
+    name="{{ include.form }}_ignore_{{ include.field[0] }}"
+    id="{{ include.form }}_ignore_{{ include.field[0] }}"
+    disabled
+    list="list-{{ id }}"
+    class="form-control" />
+
+  {%- if error -%}
+    <div class="invalid-feedback">{{ error }}</div>
+  {%- endif -%}
+
+  {%- if help -%}
+    <small id="help-{{ id }}" class="form-text">
+      {{ help }}
+    </small>
+  {%- endif -%}
+
+  <datalist id="list-{{ id }}" data-target="country.list">
+  </datalist>
+</div>

data/_includes/device_detector.html

@@ -0,0 +1,15 @@
+<div data-controller="device-detector" class="position-fixed top-0 right-0 background-pink-t3 pointer-event-none">
+  <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>

data/_includes/donacion.html

@@ -0,0 +1,125 @@
+{% comment %}
+Traer la donación pasada como parámetro o la que se haya establecido por
+defecto para el layout correspondiente.
+
+product = producto
+page  = post que incluye esta donación
+icon  = ícono del botón
+class = clases extra para el botón
+boton = texto opcional para el botón
+{% endcomment %}
+{%- assign product = include.product | default: include.page -%}
+{%- assign donacion = include.page.donacion | default: product.donacion -%}
+
+<input data-controller="open" data-action="donacion" type="checkbox" id="donacion" class="d_toggler sr-only">
+<label class="btn-block" for="donacion">
+  <span class="btn {{ include.class }} btn-block">
+    {{ include.boton | default: donacion.boton }}
+
+    {% if include.icon %}
+      <i class="{{ include.icon }}"></i>
+    {% endif %}
+  </span>
+
+  <div class="telon d_share-box"></div>
+</label>
+
+<form
+  data-pay-what-you-can-target="form"
+  {% include_cached pay_what_you_can_controller.html product=product url=include.page.pdf.path %}
+  style="z-index: 1011"
+  class="d_share-box pointer-event-none d_toggled d-flex align-items-center justify-content-center"
+  itemscope
+  itemtype="https://schema.org/Offer">
+  <meta itemprop="sku" content="{{ product.sku }}" />
+  <meta itemprop="availableDeliveryMethod" content="http://purl.org/goodrelations/v1#DirectDownload" />
+  <meta itemprop="acceptedPaymentMethod" content="http://purl.org/goodrelations/v1#PayPal" />
+
+  <div class="box inside background-white pointer-event-auto row no-gutters align-items-center justify-content-center p-5">
+    <div class="row">
+      <div class="col-md-9 black font-weight-light lead text-md-justify hyphens-md e-content">
+        {{ donacion.content | markdownify }}
+      </div>
+
+      <div class="col-md-3 d-flex justify-content-center">
+        {% if include.page.image.path %}
+          <picture>
+            <source srcset="{{ include.page.image.path | thumbnail: nil, 370 }}" media="(max-width: 767px)" />
+            <img class="cover shadow w-200px" src="{{ include.page.image.path | thumbnail: nil, 300 }}" loading="lazy" />
+          </picture>
+        {% else %}
+          {% include_cached logo_horizontal.svg %}
+        {% endif %}
+      </div>
+
+      <div class="col-md-3 mb-3 mb-md-0">
+        <h2>{{ site.i18n.donacion.monto }}</h2>
+
+        <label class="sr-only" for="price">{{ site.i18n.donacion.monto }}</label>
+        <input id="price" name="price" type="number" class="form-control" min="1" value="1" data-name="price" data-action="pay-what-you-can#store" required/>
+      </div>
+
+      <div class="col-md-3 mb-3 mb-md-0">
+        <div class="row">
+          <div class="col-6">
+            <input id="currency-ars" type="radio" class="sr-only" name="currency" value="ARS" data-name="currency" data-action="pay-what-you-can#store" required/>
+            <label for="currency-ars" itemprop="priceCurrency" class="d-flex flex-column justify-content-center">
+              <span class="btn border mb-3">ARS</span>
+
+              {% include mp-logo.svg %}
+            </label>
+          </div>
+
+          <div class="col-6">
+            <input id="currency-usd" type="radio" class="sr-only" name="currency" value="USD" data-name="currency" data-action="pay-what-you-can#store" required/>
+            <label for="currency-usd" itemprop="priceCurrency" class="d-flex flex-column justify-content-center">
+              <span class="btn border mb-3">USD</span>
+
+              {% include pp-logo.svg %}
+            </label>
+          </div>
+
+          <div class="col-12 text-center">
+            {% comment %}
+            Este input invisible es para que Bootstrap pueda mostrar el
+            error si querés mandar el formulario sin elegir una moneda.
+            {% endcomment %}
+            <input type="radio" class="d-none" name="currency" value="" />
+            <div class="invalid-feedback">
+              {{ site.i18n.donacion.currency }}
+            </div>
+
+            <p data-controller="cart-paypal-confirmation"></p>
+          </div>
+        </div>
+      </div>
+
+      <div class="col-md-3">
+        <button class="btn btn-primary btn-block mb-2" data-action="pay-what-you-can#pay">
+          <span class="hide-when-disabled">{{ donacion.boton }}</span>
+          <span class="show-when-disabled">
+            <span class="sr-only">{{ site.i18n.donacion.espera }}</span>
+            <i class="fa fa-fw fa-spinner fa-spin"></i>
+          </span>
+        </button>
+
+        {% if include.page.pdf.path %}
+          <div class="d-flex align-items-center justify-content-between">
+            <a
+              download
+              href="{{ include.page.pdf.path | uri_escape }}"
+              class="btn btn-transparent border black btn-block">
+              {{ site.i18n.libro.download }}
+              </a>
+          </div>
+        {% endif %}
+      </div>
+
+      <div class="col-md-3"></div>
+
+      <div class="col-12">
+        {{ site.i18n.donacion.medios | markdownify | replace: '<p>', '<p class="mb-0 mt-3"><small>' | replace: '</p>', '</small></p>' }}
+      </div>
+    </div>
+  </div>
+</form>

data/_includes/email.html

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