Generar la personalización dinámicamente

_data/en.yml

@@ -65,6 +65,7 @@ layouts:
   post: Article
   menu: Menu
   about: About this site
+  theme: Customize theme
 menu:
   title: Menu
 share:

_data/es.yml

@@ -51,6 +51,7 @@ layouts:
   post: Artículo
   menu: Menú
   about: Información del sitio
+  theme: Personalizar plantilla
 menu:
   title: Menú
 share:

_data/layouts/theme.yml

@@ -6,144 +6,195 @@ title:
     en: Title
     es: Título
   help:
-    en: ''
+    en: 'The name you want to give to this customization'
-    es: ''
+    es: 'El nombre que quieras darle a esta personalización'
 enable_rounded:
   type: boolean
   label:
-    en: 'Yes'
+    en: 'Rounded corners'
-    es: Sí
+    es: 'Esquinas redondeadas'
   help:
-    en: Enable or disable this option
+    en: 'For buttons, form inputs, etc.'
-    es: Habilita o deshabilita esta opción
+    es: 'De los botones, campos de formularios, etc.'
+  default:
+    es: true
+    en: true
 enable_shadows:
   type: boolean
   label:
-    en: 'Yes'
+    en: 'Shadows'
-    es: Sí
+    es: 'Sombras'
   help:
-    en: Enable or disable this option
+    en: 'Shadows behind elements'
-    es: Habilita o deshabilita esta opción
+    es: 'Sombras en los elementos'
+  default:
+    es: true
+    en: true
 body_bg:
   type: color
   label:
-    en: Color
+    en: 'Background color'
-    es: Color
+    es: 'Color de fondo'
   help:
-    en: Pick a color
+    en: "Site's background color"
-    es: Elige un color
+    es: 'Color de fondo del sitio'
+  default:
+    es: '#FFFFFF'
+    en: '#FFFFFF'
 body_color:
   type: color
   label:
-    en: Color
+    en: 'Text color'
-    es: Color
+    es: 'Color del texto'
   help:
-    en: Pick a color
+    en: ''
-    es: Elige un color
+    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: Color
+    en: 'Link color'
-    es: Color
+    es: 'Color de los vínculos'
   help:
-    en: Pick a color
+    en: ''
-    es: Elige un color
+    es: ''
+  default:
+    es: '#007bff'
+    en: '#007bff'
 link_hover_color:
   type: color
   label:
-    en: Color
+    en: 'Link color when selected'
-    es: Color
+    es: 'Color de los vínculos al seleccionarlos'
   help:
-    en: Pick a color
+    en: ''
-    es: Elige un color
+    es: ''
-component_active_color:
+  default:
-  type: color
+    es: '#0056b3'
-  label:
+    en: '#0056b3'
-    en: Color
-    es: Color
-  help:
-    en: Pick a color
-    es: Elige un color
 h1_font_size:
   type: number
   label:
-    en: Number
+    en: 'Height for first level headings'
-    es: Número
+    es: 'Altura de los títulos de primer nivel'
   help:
-    en: ''
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
-    es: ''
+    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: number
   label:
-    en: Number
+    en: 'Height for second level headings'
-    es: Número
+    es: 'Altura de los títulos de segundo nivel'
   help:
-    en: ''
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
-    es: ''
+    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: number
   label:
-    en: Number
+    en: 'Height for third level headings'
-    es: Número
+    es: 'Altura de los títulos de tercer nivel'
   help:
-    en: ''
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
-    es: ''
+    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: number
   label:
-    en: Number
+    en: 'Height for fourth level headings'
-    es: Número
+    es: 'Altura de los títulos de cuarto nivel'
   help:
-    en: ''
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
-    es: ''
+    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: number
   label:
-    en: Number
+    en: 'Height for fifth level headings'
-    es: Número
+    es: 'Altura de los títulos de quinto nivel'
   help:
-    en: ''
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
-    es: ''
+    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: number
   label:
-    en: Number
+    en: 'Height for sixth level headings'
-    es: Número
+    es: 'Altura de los títulos de sexto nivel'
   help:
-    en: ''
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
-    es: ''
+    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: Color
+    en: 'Highlight color'
-    es: Color
+    es: 'Color de resaltado'
   help:
-    en: Pick a color
+    en: 'Default color for highlighted text'
-    es: Elige un color
+    es: 'Color por defecto para el texto resaltado'
+  default:
+    es: '#fcf8e3'
+    en: '#fcf8e3'
 navbar_light_color:
   type: color
   label:
-    en: Color
+    en: 'Navigation bar item color'
-    es: Color
+    es: 'Color de ítem en la barra de navegación'
   help:
-    en: Pick a color
+    en: 'Text and icons'
-    es: Elige un color
+    es: 'Texto e íconos'
+  default:
+    es: '#ced4da'
+    en: '#ced4da'
 navbar_light_hover_color:
   type: color
   label:
-    en: Color
+    en: 'Navigation bar item color when selected'
-    es: Color
+    es: 'Color de ítem seleccionado en la barra de navegación'
   help:
-    en: Pick a color
+    en: 'Text and icons'
-    es: Elige un color
+    es: 'Texto e íconos'
+  default:
+    es: '#6c757d'
+    en: '#6c757d'
 navbar_light_active_color:
   type: color
   label:
-    en: Color
+    en: 'Navigation bar item color when active'
-    es: Color
+    es: 'Color de ítem activo en la barra de navegación'
   help:
-    en: Pick a color
+    en: 'Text and icons'
-    es: Elige un color
+    es: 'Texto e íconos'
+  default:
+    es: '#212529'
+    en: '#212529'
 order:
   type: order
   label:

assets/css/styles.scss

@@ -6,31 +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' | 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.
 
-$enable-rounded: {{ theme.enable_rounded }};
+  Utilizamos los valores que vengan del artículo y si no existen, usamos
-$enable-shadows: {{ theme.enable_shadows }};
+  los valores por defecto de sutty-base.  De lo contrario mantenemos los
-$body-bg: {{ theme.body_bg }};
+  de Bootstrap.
-$body-color: {{ theme.body_color }};
+{% endcomment %}
-$link-color: {{ theme.link_color }};
+{% for variable in theme_defaults %}
-$link-hover-color: {{ theme.link_hover_color }};
+{% assign key = variable[0] %}
-$component-active-color: {{ theme.component_active_color }};
+{% if ignored_keys contains key %}{% continue %}{% endif %}
-$h1-font-size: {{ theme.h1_font_size }}rem;
+{% assign default_value = variable[1].default[site.locale] %}
-$h2-font-size: {{ theme.h2_font_size }}rem;
+{% assign variable_name = key | replace: '_', '-' %}
-$h3-font-size: {{ theme.h3_font_size }}rem;
+{% if theme[key] or default_value %}
-$h4-font-size: {{ theme.h4_font_size }}rem;
+{% comment %}
-$h5-font-size: {{ theme.h5_font_size }}rem;
+  Generamos una definición de variable de SASS
-$h6-font-size: {{ theme.h6_font_size }}rem;
+{% endcomment %}
-$mark-bg: {{ theme.mark_bg }};
+${{ variable_name }}: {{ theme[key] | default: default_value }};
-$navbar-light-color: {{ theme.navbar_light_color }};
+{% endif %}
-$navbar-light-hover-color: {{ theme.navbar_light_hover_color }};
+{% endfor %}
-$navbar-light-active-color: {{ theme.navbar_light_active_color }};
 
 /// El modo debug se desactiva en producción
 $debug: {{ jekyll.environment | not: 'production' }};
@@ -44,18 +54,6 @@ $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