Merge branch 'master' into tienda

Makefile

@@ -22,7 +22,7 @@ include .env
 export
 
 help: always ## Ayuda
-	@grep "^[^\t]\+:.*##" Makefile | sed -re "s/(.*):.*##(.*)/\1;\2/" | column -s ";" -t | sed -re "s/^([^ ]+) /\x1B[38;5;197m\1\x1B[0m/"
+	@grep "^[^[:space:]]\+:.*##" Makefile | sed -re "s/(.*):.*##(.*)/\1;\2/" | column -s ";" -t | sed -re "s/^([^ ]+) /\x1B[38;5;197m\1\x1B[0m/"
 
 all: install fa serve build ## Todas las tareas necesarias para desarrollar
 
@@ -64,6 +64,9 @@ fa-%: always ## Agregar un ícono de Fork Awesome (reemplazar % por el nombre)
 	@echo Agregando $* a la lista de íconos
 	@grep -q "$*" fa.txt || grep '^$$fa-var-$*: ' node_modules/fork-awesome/scss/_variables.scss | sed -re "s/^.*: \"\\\(.*)\";/\1 $*/" >> fa.txt
 
+fonts := $(patsubst %.otf,%-subset.woff2,$(wildcard assets/fonts/*))
+fonts: $(fonts) ## Minifica todas las tipografías
+
 gfont: ## Descarga tipografías de Google Fonts (css="url del css")
 	@test -n "$(css)"
 	wget "$(css)" -nv -kO /tmp/gfont
@@ -81,6 +84,11 @@ node_modules: package.json
 Gemfile.lock: Gemfile
 	$(MAKE) bundle args=install
 
+# Para poder optimizar los SVG necesitamos trabajar sobre el mismo
+# archivo, pero make no nos va a dejar, así que lo corremos siempre.
+%.svg: always ## Optimizar un archivo SVG (% = ubicación del archivo)
+	$(MAKE) hain args='./node_modules/.bin/svgo $@'
+
 # XXX: Cada vez que se reinicia el sistema, cambia la fecha de creación
 # del pid 1 y lo usamos como medida para saber si hay que iniciar nginx.
 # Si nginx se cae después de iniciarlo, no vamos a reiniciarlo así.

_config.yml

@@ -11,6 +11,7 @@ plugins:
 - jekyll-data
 - jekyll-seo-tag
 - jekyll-images
+- jekyll-embed-urls
 - sutty-liquid
 markdown: CommonMark
 commonmark:

_data/en.yml

@@ -1,5 +1,5 @@
 ---
-locale: English
+locale: 'English'
 countries:
   validation: 'Choose a country from the list'
 states:
@@ -70,6 +70,7 @@ layouts:
   email: Confirmation E-mail
   menu: Menu
   about: About this site
+  theme: Customize theme
 menu:
   title: Menu
 share:

_data/es.yml

@@ -70,6 +70,7 @@ layouts:
   email: Correo de confirmación
   menu: Menú
   about: Información del sitio
+  theme: Personalizar plantilla
 menu:
   title: Menú
 share:

_data/layouts/cuidado.yml

@@ -0,0 +1,26 @@
+---
+title:
+  type: string
+  required: true
+  label:
+    es: Título
+    en: Title
+  help:
+    es: ''
+    en: ''
+order:
+  type: order
+  label:
+    es: Orden
+    en: Order
+  help:
+    es: La posición del artículo en la lista de artículos
+    en: Position in articles list
+draft:
+  type: boolean
+  label:
+    es: Borrador
+    en: Draft
+  help:
+    es: Este artículo aun no está listo para publicar
+    en: This post isn't ready to be published yet

_data/layouts/libro.yml

@@ -0,0 +1,26 @@
+---
+title:
+  type: string
+  required: true
+  label:
+    es: Título
+    en: Title
+  help:
+    es: ''
+    en: ''
+order:
+  type: order
+  label:
+    es: Orden
+    en: Order
+  help:
+    es: La posición del artículo en la lista de artículos
+    en: Position in articles list
+draft:
+  type: boolean
+  label:
+    es: Borrador
+    en: Draft
+  help:
+    es: Este artículo aun no está listo para publicar
+    en: This post isn't ready to be published yet

_data/layouts/lugar.yml

@@ -0,0 +1,26 @@
+---
+title:
+  type: string
+  required: true
+  label:
+    es: Título
+    en: Title
+  help:
+    es: ''
+    en: ''
+order:
+  type: order
+  label:
+    es: Orden
+    en: Order
+  help:
+    es: La posición del artículo en la lista de artículos
+    en: Position in articles list
+draft:
+  type: boolean
+  label:
+    es: Borrador
+    en: Draft
+  help:
+    es: Este artículo aun no está listo para publicar
+    en: This post isn't ready to be published yet

_data/layouts/menu.yml

@@ -3,7 +3,7 @@ title:
   type: 'string'
   required: true
   label:
-    en: ''
+    en: 'Item name'
     es: 'Nombre del ítem'
   help:
     en: ''
@@ -11,21 +11,29 @@ title:
 post:
   type: 'belongs_to'
   label:
-    en: ''
+    en: 'Link to this post'
     es: 'Artículo'
   help:
     en: ''
     es: 'Si el ítem lleva a un artículo fijo, asociarlo aquí'
+link:
+  type: 'string'
+  label:
+    en: 'Link'
+    es: 'Vínculo'
+  help:
+    en: "If this item is a regular link, add it here"
+    es: 'Si el ítem lleva a una página o sección especial, asociarla aquí'
 item:
   type: 'belongs_to'
   inverse: items
   filter:
     layout: menu
   label:
-    en: ''
+    en: 'Main item'
     es: 'Ítem anterior'
   help:
-    en: ''
+    en: "If you're building a dropdown menu, add the main item here"
     es: 'Si es un sub ítem, asociar el ítem superior aquí'
 items:
   type: 'has_many'
@@ -33,19 +41,11 @@ items:
   filter:
     layout: menu
   label:
-    en: ''
+    en: 'Sub items'
     es: 'Sub ítemes'
   help:
-    en: ''
+    en: "If you're building a dropdown menu, add the sub items here"
     es: 'Si el ítem tiene sub ítems, asociarlos aquí'
-link:
-  type: 'string'
-  label:
-    en: ''
-    es: 'Vínculo'
-  help:
-    en: ''
-    es: 'Si el ítem lleva a una página o sección especial, asociarla aquí'
 categories:
   type: 'array'
   label:

_data/layouts/quienes_somos.yml

@@ -0,0 +1,26 @@
+---
+title:
+  type: string
+  required: true
+  label:
+    es: Título
+    en: Title
+  help:
+    es: ''
+    en: ''
+order:
+  type: order
+  label:
+    es: Orden
+    en: Order
+  help:
+    es: La posición del artículo en la lista de artículos
+    en: Position in articles list
+draft:
+  type: boolean
+  label:
+    es: Borrador
+    en: Draft
+  help:
+    es: Este artículo aun no está listo para publicar
+    en: This post isn't ready to be published yet

_data/layouts/theme.yml

@@ -0,0 +1,255 @@
+---
+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: true
+    en: true
+enable_shadows:
+  type: boolean
+  label:
+    en: 'Shadows'
+    es: 'Sombras'
+  help:
+    en: 'Shadows behind elements'
+    es: 'Sombras en los elementos'
+  default:
+    es: true
+    en: true
+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'
+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/layouts/video.yml

@@ -0,0 +1,26 @@
+---
+title:
+  type: string
+  required: true
+  label:
+    es: Título
+    en: Title
+  help:
+    es: ''
+    en: ''
+order:
+  type: order
+  label:
+    es: Orden
+    en: Order
+  help:
+    es: La posición del artículo en la lista de artículos
+    en: Position in articles list
+draft:
+  type: boolean
+  label:
+    es: Borrador
+    en: Draft
+  help:
+    es: Este artículo aun no está listo para publicar
+    en: This post isn't ready to be published yet

_includes/contact.html

@@ -9,6 +9,7 @@ envío del formulario.
   encuentra en _data/forms/contacto.yml
 {% endcomment %}
 <form
+  data-turbo="false"
   data-controller="contact"
   data-delay="60"
   action="https://api.sutty.nl/v1/sites/{{ site.hostname }}/contact/{{ include.name }}"

_includes/pack.html

@@ -1 +1 @@
-<script defer src="{{ jekyll.production | ternary: site.data.assets['assets/js/pack.js'], 'assets/js/pack.js' }}"></script>
+<script defer src="{{ jekyll.environment | equals: 'production' | ternary: site.data.assets['assets/js/pack.js'], 'assets/js/pack.js' }}"></script>

_includes/share_box.html

@@ -1,4 +1,17 @@
-<input type="checkbox" id="share" class="toggler" autocomplete="off" />
+{%- assign title = include.title | escape -%}
+{%- assign text = include.description | strip_html | escape -%}
+{%- assign url = site.url | append: include.url | escape -%}
+
+<input
+  data-controller="share"
+  data-action="share#share"
+  data-share-title-value="{{ title }}"
+  data-share-text-value="{{ text }}"
+  data-share-url-value="{{ url }}"
+  type="checkbox"
+  id="share"
+  class="toggler"
+  autocomplete="off" />
 
 <label class="share btn border btn-block" for="share">
   {{ site.i18n.share.text }}

_layouts/cuidado.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+

_layouts/libro.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+

_layouts/lugar.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+

_layouts/quienes_somos.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+

_layouts/video.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+

_packs/controllers/search_controller.js

@@ -12,14 +12,14 @@ export default class extends Controller {
     if (!this.hasQTarget) return
     if (!this.qTarget.value.trim().length === 0) return
 
-    return this.qTarget.value.trim().replace(':', '')
+    return this.qTarget.value.trim().replaceAll(/[:~\*\^\+\-]/gi, '')
   }
 
   connect () {
-    const q = window.location.search.match(/^\?q=(?<q>.*)&?/)
+    const q = new URLSearchParams(window.location.search).get('q')?.trim()
 
     if (q) {
-      this.qTarget.value = decodeURI(q.groups.q)
+      this.qTarget.value = q
       this.search()
     }
   }
@@ -52,8 +52,9 @@ export default class extends Controller {
     const template = await request.text()
     const html = await this.engine.parseAndRender(template, { q, site, results })
     const title = `${site.i18n.search.title} - ${q}`
+    const query = new URLSearchParams({ q })
 
-    window.history.pushState({ q }, title, `?q=${encodeURI(q)}`)
+    window.history.pushState({ q }, title, `?${query.toString()}`)
     document.title = title
 
     main.innerHTML = html

_packs/controllers/share_controller.js

@@ -0,0 +1,27 @@
+import { Controller } from 'stimulus'
+
+export default class extends Controller {
+  static values = {
+    title: String,
+    text: String,
+    url: String
+  }
+
+  async share (event = undefined) {
+    event?.preventDefault()
+    event?.stopPropagation()
+
+    const title = this.titleValue
+    const text = this.textValue
+    const url = this.urlValue
+    const data = { title, text, url }
+
+    if ('share' in navigator) {
+      if (navigator.canShare(data)) {
+        navigator.share(data)
+      } else {
+        console.error('No se puede compartir', data)
+      }
+    }
+  }
+}

_packs/entry.js

@@ -1,16 +1,34 @@
+import BotDetector from 'device-detector-js/dist/parsers/bot'
 import { Notifier } from '@airbrake/browser'
 
-window.airbrake = new Notifier({
+window.bot_detector = new BotDetector
-  projectId: window.env.AIRBRAKE_PROJECT_ID,
+const bot = window.bot_detector.parse(navigator.userAgent)
-  projectKey: window.env.AIRBRAKE_PROJECT_KEY,
+
-  host: 'https://panel.sutty.nl'
+if (!bot) {
-})
+  window.airbrake = new Notifier({
+    projectId: window.env.AIRBRAKE_PROJECT_ID,
+    projectKey: window.env.AIRBRAKE_PROJECT_KEY,
+    host: 'https://panel.sutty.nl'
+  })
+
+  console.originalError = console.error
+  console.error = (...e) => {
+    window.airbrake.notify(e.join(' '))
+    return console.originalError(...e)
+  }
+}
 
 import 'core-js/stable'
 import 'regenerator-runtime/runtime'
 
-const Turbolinks = require("turbolinks")
+// Turbo acelera la navegación al no tener que recargar todo el JS y CSS
-Turbolinks.start()
+// de la página, con lo que se siente más rápida y "nativa".
+//
+// Cambiamos de turbolinks a turbo porque turbo soporta la función
+// fetch(), que luego es interceptada por el SW para obtener las
+// direcciones localmente.
+import * as Turbo from "@hotwired/turbo"
+Turbo.start()
 
 import { Application } from 'stimulus'
 import { definitionsFromContext } from "stimulus/webpack-helpers"
@@ -25,33 +43,17 @@ import { Sutty } from './endpoints/sutty'
 window.spree = makeClient({ host: window.env.SPREE_URL })
 window.spree.sutty = new Sutty(window.spree.host)
 
-// Prevenir que Turbolinks interfiera con la navegación por anchors
-// https://github.com/turbolinks/turbolinks/issues/75#issuecomment-445325162
-document.addEventListener('turbolinks:click', event => {
-  const anchorElement = event.target
-  const isSamePageAnchor = (
-    anchorElement.hash &&
-    anchorElement.origin === window.location.origin &&
-    anchorElement.pathname === window.location.pathname
-  )
-
-  if (!isSamePageAnchor) return
-
-  Turbolinks.controller.pushHistoryWithLocationAndRestorationIdentifier(event.data.url, Turbolinks.uuid())
-
-  event.preventDefault()
-})
-
 try {
   window.axe = require('axe-core/axe')
 } catch(e) {}
 
 if (window.axe) window.axe.configure({ locale: require('axe-core/locales/es.json') })
 
-// Prevenir que Turbolinks interfiera la navegación a un anchor al
+document.addEventListener('turbo:load', event => {
-// recargar la página
+  document.querySelectorAll("a[href^='http://'],a[href^='https://'],a[href^='//']").forEach(a => {
-document.addEventListener('turbolinks:load', event => {
+    a.rel = "noopener"
-  window.location.hash = window.location.hash
+    a.target = "_blank"
+  })
 
   if (!window.axe) return
 

_sass/fonts.scss

@@ -0,0 +1,29 @@
+// https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOkCnqEu92Fr1Mu52xP-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOjCnqEu92Fr1Mu51TzBhc9-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOmCnqEu92Fr1Me5Q-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOlCnqEu92Fr1MmWUlvAw-subset.woff2) format('woff2');
+}

_sass/helpers.scss

@@ -13,6 +13,11 @@ $directions: (top, right, bottom, left);
   }
 }
 
+/// Los recursos que cargan a demanda muestran el espacio que ocupan.
+[loading="lazy"] {
+  background: linear-gradient(215deg, #{$white} 0%, #{$primary} 100%);
+}
+
 @each $breakpoint in map-keys($grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
 /// Obtiene el sufijo para cada clase responsive usando mixins de
@@ -302,7 +307,7 @@ $directions: (top, right, bottom, left);
       .hover-#{$color} {
         &:hover,
         &:focus-within {
-          color: var(--#{$color});
+          color: var(--#{$color}) !important;
         }
       }
 

assets/css/styles.scss

@@ -6,11 +6,41 @@
 /// @group Principal
 ////
 
-/// Traemos el primer artículo de tipo `about` para obtener los valores
+/// Traemos el primer artículo de tipo `theme` para obtener los valores
 /// personalizados.
-///
+
-/// @todo Mover a su propio SCSS
+{% comment %}
-{% assign about = site.posts | find: 'layout', 'about' %}
+  Los artículos con layout `theme` contienen variables utilizadas por
+  Bootstrap que pueden ser redefinidas por les usuaries de Sutty a través
+  del panel.
+{% endcomment %}
+{% assign theme = site.posts | find: 'layout', 'theme' %}
+{% assign theme_defaults = site.data.layouts.theme %}
+{% comment %}
+  Ignorar estos campos que no son variables.
+{% endcomment %}
+{% assign ignored_keys = 'title,draft,order,last_modified_at,uuid,layout,liquid,usuaries' | split: ',' %}
+{% comment %}
+  Cada variable de Bootstrap viene desde la definición de `theme`.  Por
+  convención usamos snake_case, pero Bootstrap usa guión medio, así que
+  las convertimos.
+
+  Utilizamos los valores que vengan del artículo y si no existen, usamos
+  los valores por defecto de sutty-base.  De lo contrario mantenemos los
+  de Bootstrap.
+{% endcomment %}
+{% for variable in theme_defaults %}
+{% assign key = variable[0] %}
+{% if ignored_keys contains key %}{% continue %}{% endif %}
+{% assign default_value = variable[1].default[site.locale] %}
+{% assign variable_name = key | replace: '_', '-' %}
+{% if theme[key] or default_value %}
+{% comment %}
+  Generamos una definición de variable de SASS
+{% endcomment %}
+${{ variable_name }}: {{ theme[key] | default: default_value }}{{ variable[1].unit }};
+{% endif %}
+{% endfor %}
 
 /// El modo debug se desactiva en producción
 $debug: {{ jekyll.environment | not: 'production' }};
@@ -22,21 +52,6 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 /// para generar animaciones.
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
-/// Redefinir la tipografía aquí, o borrar si usamos las de Bootstrap
-$font-family-sans-serif: sans-serif;
-/// El color primario de la paleta, se trae desde el `about` o sea usa
-/// el color por defecto.
-///
-/// @link _data/layouts/about.yml
-$primary: {{ about.primary | default: site.data.layouts.about.primary.default[site.locale] }};
-
-/// El color secundario de la paleta, se trae desde el `about` o sea usa
-/// el color por defecto.
-///
-/// @link _data/layouts/about.yml
-$secondary: {{ about.secondary | default: site.data.layouts.about.secondary.default[site.locale] }};
-
-
 /// Agregamos los colores propios de la plantilla aquí.  Bootstrap los
 /// agrega a su propia paleta de colores.  Si usamos el mismo nombre
 /// podemos redefinir el color.
@@ -53,8 +68,33 @@ $colors: (
 $theme-colors: (
 );
 
+$spacer: 1rem !default;
+$spacers: (
+  6: ($spacer * 4),
+  7: ($spacer * 5),
+  8: ($spacer * 6),
+  9: ($spacer * 7),
+  10: ($spacer * 8),
+  11: ($spacer * 9),
+  12: ($spacer * 10),
+  13: ($spacer * 11), 
+  14: ($spacer * 12),  
+  15: ($spacer * 13),
+);
+
 /// Tamaños (anchos y altos) redefinidos desde Bootstrap.
 $sizes: (
+  10: 10%,
+  20: 20%,
+  30: 30%,
+  40: 40%,
+  50: 50%,
+  60: 60%,
+  70: 70%,
+  80: 80%,
+  90: 90%,
+  50vh: 50vh,
+  75vh: 75vh,
   100vh: 100vh,
   100vw: 100vw
 );
@@ -69,6 +109,11 @@ $opacities: (
   5: 0%
 );
 
+/// Resetear algunos margins y paddings por defecto a cero
+$paragraph-margin-bottom: 0;
+$headings-margin-bottom: 0;
+$label-margin-bottom: 0;
+
 /// Redefinir variables de Boostrap acá.  Se las puede ver en
 /// node_modules/bootstrap/scss/_variables.scss
 ///
@@ -88,9 +133,6 @@ $opacities: (
 @import "editor";
 @import "menu";
 
-/// La barra de progreso de Turbolinks tiene el color primario
-/// de la paleta, definido por Bootstrap o por nosotres.
-.turbolinks-progress-bar { background-color: $primary; }
 /// La barra de progreso de Turbo tiene el color primario
 /// de la paleta, definido por Bootstrap o por nosotres.
 .turbo-progress-bar { background-color: $primary; }

assets/js/script.js

@@ -1,44 +0,0 @@
----
----
-
-const loadEvent = () => {
-  try {
-    if (Turbolinks) return 'turbolinks:load'
-  } catch {
-    return 'DOMContentLoaded'
-  }
-}
-
-document.addEventListener(loadEvent(), () => {
-  document.querySelectorAll('.share').forEach(share => {
-    share.addEventListener('click', event => {
-      if (!Navigator.share) return;
-
-      event.preventDefault();
-      event.stopPropagation();
-
-      const title = document.querySelector('title').text;
-
-      try {
-        const text = document.querySelector('meta[property="og:description"]').content;
-      } catch {
-        const text = '';
-      }
-
-      try {
-        const url = document.querySelector('link[rel=canonical]').href;
-      } catch {
-        const url = document.location.href;
-      }
-
-      const data = { title: title, text: text, url: url };
-
-      if (Navigator.canShare(data)) Navigator.share(data).then();
-    });
-  });
-
-  document.querySelectorAll("a[href^='http://'],a[href^='https://'],a[href^='//']").forEach(a => {
-    a.rel = "noopener";
-    a.target = "_blank";
-  });
-});

package.json

@@ -12,17 +12,19 @@
     "@babel/core": "^7.10.4",
     "@babel/plugin-proposal-class-properties": "^7.10.4",
     "@babel/preset-env": "^7.10.4",
+    "@hotwired/turbo": "^7.0.0-rc.4",
     "@spree/storefront-api-v2-sdk": "~4.4",
     "axe-core": "^4.1.2",
     "babel-loader": "^8.1.0",
     "core-js": "^3.6.5",
+    "device-detector-js": "^2.2.10",
     "dotenv-webpack": "^6.0.0",
     "liquidjs": "^9.14.0",
     "regenerator-runtime": "^0.13.5",
     "sassdoc": "^2.7.3",
     "sassdoc-theme-herman": "^4.0.2",
     "stimulus": "^1.1.1",
-    "turbolinks": "^5.2.0",
+    "svgo": "^2.5.0",
     "webpack": "^4.43.0",
     "webpack-assets-manifest": "~4",
     "webpack-cli": "^3.3.12",

sutty-base-jekyll-theme.gemspec

@@ -71,6 +71,7 @@ Gem::Specification.new do |spec|
   spec.add_runtime_dependency 'jekyll-spree-client', '~> 0'
   spec.add_runtime_dependency 'jekyll-write-and-commit-changes', '~> 0'
   spec.add_runtime_dependency 'jekyll-ignore-layouts', '~> 0'
+  spec.add_runtime_dependency 'jekyll-embed-urls', '~> 0'
 
   # Dependencias de desarrollo
   spec.add_development_dependency 'bundler', '~> 2.1'

yarn.lock

@@ -880,6 +880,11 @@
     "@babel/helper-validator-identifier" "^7.14.0"
     to-fast-properties "^2.0.0"
 
+"@hotwired/turbo@^7.0.0-rc.4":
+  version "7.0.0-rc.4"
+  resolved "https://registry.yarnpkg.com/@hotwired/turbo/-/turbo-7.0.0-rc.4.tgz#d3ab9555544534f5ec649613553e72ff6c7d7122"
+  integrity sha512-4qx+6O6mUN+cSN+ZLGCOGc+2MxNrs7cFbmnWD6LIfiHAQyuNiIuB87Y5IAtOo8xj16fOBd2CdU1WRJya4Wkw0A==
+
 "@sindresorhus/is@^0.14.0":
   version "0.14.0"
   resolved "https://registry.yarnpkg.com/@sindresorhus/is/-/is-0.14.0.tgz#9fb3a3cf3132328151f353de4632e01e52102bea"
@@ -925,6 +930,11 @@
   dependencies:
     defer-to-connect "^1.0.1"
 
+"@trysound/sax@0.1.1":
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/@trysound/sax/-/sax-0.1.1.tgz#3348564048e7a2d7398c935d466c0414ebb6a669"
+  integrity sha512-Z6DoceYb/1xSg5+e+ZlPZ9v0N16ZvZ+wYMraFue4HYrE4ttONKtsvruIRf6t9TBR0YvSOfi1hUU0fJfBLCDYow==
+
 "@types/caseless@*":
   version "0.12.2"
   resolved "https://registry.yarnpkg.com/@types/caseless/-/caseless-0.12.2.tgz#f65d3d6389e01eeb458bd54dc8f52b95a9463bc8"
@@ -2045,6 +2055,11 @@ colorette@^1.2.2:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94"
   integrity sha512-MKGMzyfeuutC/ZJ1cba9NqcNpfeqMUcYmyF1ZFY6/Cn7CNSAKx6a+s48sqLqyAiZuaP2TcqMhoo+dlwFnVxT9w==
 
+colorette@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.3.0.tgz#ff45d2f0edb244069d3b772adeb04fed38d0a0af"
+  integrity sha512-ecORCqbSFP7Wm8Y6lyqMJjexBQqXSF7SSeaTyGGphogUjBlFP9m9o08wy86HL2uB7fMTxtOUzLMk7ogKcxMg1w==
+
 combined-stream@^1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -2074,6 +2089,11 @@ commander@^5.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
+commander@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
+  integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
+
 commander@~2.19.0:
   version "2.19.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
@@ -2319,6 +2339,25 @@ css-select@^4.1.2:
     domutils "^2.6.0"
     nth-check "^2.0.0"
 
+css-select@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.1.3.tgz#a70440f70317f2669118ad74ff105e65849c7067"
+  integrity sha512-gT3wBNd9Nj49rAbmtFHj1cljIAOLYSX1nZ8CB7TBO3INYckygm5B7LISU/szY//YmdiSLbJvDLOx9VnMVpMBxA==
+  dependencies:
+    boolbase "^1.0.0"
+    css-what "^5.0.0"
+    domhandler "^4.2.0"
+    domutils "^2.6.0"
+    nth-check "^2.0.0"
+
+css-tree@^1.1.2, css-tree@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.1.3.tgz#eb4870fb6fd7707327ec95c2ff2ab09b5e8db91d"
+  integrity sha512-tRpdppF7TRazZrjJ6v3stzv93qxRcSsFmW6cX0Zm2NVKpxE1WV1HblnghVv9TreireHkqI/VDEsfolRF1p6y7Q==
+  dependencies:
+    mdn-data "2.0.14"
+    source-map "^0.6.1"
+
 css-what@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad"
@@ -2329,6 +2368,13 @@ cssesc@^3.0.0:
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee"
   integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
 
+csso@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
+  integrity sha512-wvlcdIbf6pwKEk7vHj8/Bkc0B4ylXZruLvOgs9doS5eOsOpuodOV2zJChSpkp+pRpYQLQMeF04nr3Z68Sta9jA==
+  dependencies:
+    css-tree "^1.1.2"
+
 cyclist@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
@@ -2489,6 +2535,11 @@ detect-node@^2.0.4:
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
 
+device-detector-js@^2.2.10:
+  version "2.2.10"
+  resolved "https://registry.yarnpkg.com/device-detector-js/-/device-detector-js-2.2.10.tgz#a8fd47837ce89024d7647a4ddf18154d7a920538"
+  integrity sha512-zLcDSU10WIqbARXecaVJJxx0ZuGWq+MVhj9f9qehdBCFr9RMa5mQGTt2IZNIgKuCIind/j/DzRDViEdc2FfBGQ==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.yarnpkg.com/diffie-hellman/-/diffie-hellman-5.0.3.tgz#40e8ee98f55a2149607146921c63e1ae5f3d2875"
@@ -4368,6 +4419,11 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
+mdn-data@2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
+  integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
+
 mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -6018,6 +6074,11 @@ ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
+stable@^0.1.8:
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/stable/-/stable-0.1.8.tgz#836eb3c8382fe2936feaf544631017ce7d47a3cf"
+  integrity sha512-ji9qxRnOVfcuLDySj9qzhGSEFVobyt1kIOSkj1qZzYLzq7Tos/oUUWvotUPQLlrsidqsK6tBH89Bc9kL5zHA6w==
+
 stackframe@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.0.tgz#52429492d63c62eb989804c11552e3d22e779303"
@@ -6179,6 +6240,19 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+svgo@^2.5.0:
+  version "2.5.0"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-2.5.0.tgz#3c9051b606d85a02fcb59f459b19970d2cc2c9bf"
+  integrity sha512-FSdBOOo271VyF/qZnOn1PgwCdt1v4Dx0Sey+U1jgqm1vqRYjPGdip0RGrFW6ItwtkBB8rHgHk26dlVr0uCs82Q==
+  dependencies:
+    "@trysound/sax" "0.1.1"
+    colorette "^1.3.0"
+    commander "^7.2.0"
+    css-select "^4.1.3"
+    css-tree "^1.1.3"
+    csso "^4.2.0"
+    stable "^0.1.8"
+
 tapable@^1.0, tapable@^1.0.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -6351,11 +6425,6 @@ tty-browserify@0.0.0:
   resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6"
   integrity sha1-oVe6QC2iTpv5V/mqadUk7tQpAaY=
 
-turbolinks@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/turbolinks/-/turbolinks-5.2.0.tgz#e6877a55ea5c1cb3bb225f0a4ae303d6d32ff77c"
-  integrity sha512-pMiez3tyBo6uRHFNNZoYMmrES/IaGgMhQQM+VFF36keryjb5ms0XkVpmKHkfW/4Vy96qiGW3K9bz0tF5sK9bBw==
-
 type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"