recursero-jekyll-theme 0.1.0

data/_sass/accessibility.scss

@@ -0,0 +1,13 @@
+* {
+  scroll-behavior: smooth;
+}
+
+/*
+ * Deshabilita animaciones si la usuaria las tiene deshabilitadas
+ */
+@media (prefers-reduced-motion: reduce) {
+  * {
+    scroll-behavior: auto;
+    animation: none !important;
+  }
+}

data/_sass/embed.scss

@@ -0,0 +1,5 @@
+iframe {
+  border: 0;
+  width: 100%;
+  min-height: 480px;
+}

data/_sass/helpers.scss

@@ -0,0 +1,54 @@
+$bezier: cubic-bezier(0.75, 0, 0.25, 1);
+
+/*
+ * Crea una propiedad con prefijos de navegador
+ */
+$vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
+@mixin vendor-prefix($property, $definition...) {
+  @each $prefix in $vendor-prefixes {
+    #{$prefix}$property: $definition;
+  }
+}
+
+/*
+ * Crea clases para asignar colores según la lista de colores.
+ */
+@each $color, $_ in $colors {
+  .background-#{$color} {
+    background-color: var(--#{$color});
+  }
+
+  .#{$color} {
+    color: var(--#{$color});
+
+    ::-moz-selection,
+    ::selection {
+      background: var(--#{$color});
+      color: white;
+    }
+
+    svg {
+      * {
+        fill: var(--#{$color});
+      }
+    }
+
+    .form-control {
+      border-color: var(--#{$color});
+    }
+
+    .btn {
+      background-color: var(--#{$color});
+      color: white;
+      border-color: var(--#{$color});
+    }
+
+    hr {
+      border-color: var(--#{$color});
+    }
+
+    a {
+      color: var(--#{$color});
+    }
+  }
+}

data/_sass/navbar.scss

@@ -0,0 +1,56 @@
+.navbar {
+  .navbar-brand {
+    svg {
+      height: 30px;
+    }
+  }
+
+  .toggler {
+    & + label {
+      .icon-open {
+        display: block;
+      }
+
+      .icon-close {
+        display: none;
+      }
+
+      @include media-breakpoint-down('md') {
+        .toggled {
+          display: none;
+        }
+      }
+
+      @include media-breakpoint-up('md') {
+        .toggled {
+          visibility: visible !important;
+        }
+      }
+    }
+
+    &:checked + label {
+      @include media-breakpoint-down('md') {
+        z-index: 2;
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        background-color: white;
+
+        .icon-open {
+          display: none;
+        }
+
+        .icon-close {
+          display: block;
+        }
+
+        .toggled {
+          display: block !important;
+          z-index: 1;
+        }
+      }
+    }
+  }
+}

data/_sass/share.html

@@ -0,0 +1,12 @@
+{% assign url = site.url | append: include.url | uri_escape %}
+{% assign title = include.title | default: site.title | uri_escape %}
+{% assign description = include.description | default: '' | uri_escape %}
+
+<a
+  target="_blank"
+  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 }}">
+  <i class="fa fa-fw fa-2x fa-{{ include.share.icon }}"></i>
+  <span>{{ include.share.title }}</span>
+</a>

data/_sass/share_box.html

@@ -0,0 +1,16 @@
+<input type="checkbox" id="share" class="toggler" autocomplete="off" />
+
+<label class="share btn border btn-block" for="share">
+  {{ site.i18n.share.text }}
+  <i class="fa fa-{{ site.i18n.share.icon }}"></i>
+
+  <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>
+  </div>
+</label>

data/_sass/share_box.scss

@@ -0,0 +1,26 @@
+input[type="checkbox"].toggler {
+  &:focus + label {
+    outline: none;
+  }
+}
+
+.share-box {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0,0,0,.5);
+
+  @include vendor-prefix(transition, all 0.2s $bezier);
+
+  a {
+    border: $border-width solid transparent;
+
+    &:focus,
+    &:hover {
+      text-decoration: none;
+      border: $border-width solid $border-color;
+    }
+  }
+}

data/_sass/toggler.scss

@@ -0,0 +1,39 @@
+/*
+ * Desplegar menúes sin javascript!
+ * 
+ * Inspirado en https://dev.to/cydstumpel/creating-a-fold-out-navigation-with-css-only-4g9k
+ */
+
+// Comenzamos con un input checkbox con la clase toggler
+input[type="checkbox"].toggler {
+  // Lo ocultamos pero todavía queremos que se le pueda dar foco con el
+  // teclado
+  opacity: 0;
+  position: absolute;
+
+  // Ocultamos el elemento colapsable
+  & + label {
+    .toggled {
+      z-index: 10;
+      visibility: hidden;
+    }
+  }
+
+  // Al tildar el input, mostramos el elemento
+  &:checked + label {
+    .toggled {
+      visibility: visible;
+    }
+  }
+
+  & + label {
+    border: none;
+    outline: none;
+    z-index: 11;
+  }
+
+  // Dar una guía visual de que estamos enfocando el input
+  &:focus + label {
+    outline: 1px dotted grey ;
+  }
+}

data/assets/css/styles.scss

@@ -0,0 +1,42 @@
+---
+# Ponemos un frontmatter porque queremos que Jekyll procese este archivo
+---
+
+$navbar-height: 86px;
+$enable-rounded: false;
+$theme-colors: (
+  "recursero": mediumorchid
+);
+
+/*
+ * XXX: Solo importar los archivos necesarios de bootstrap para
+ * facilitar la reducción de CSS.  Por ahora pedimos todo para poder
+ * empezar a trabajar en el HTML sin pensar en CSS.
+ *
+ * Los archivos se encuentran en node_modules/bootstrap/scss
+ */
+@import "bootstrap/scss/bootstrap";
+@import "fork-awesome/scss/fork-awesome";
+@import "accessibility";
+@import "helpers";
+@import "toggler";
+@import "share_box";
+@import "navbar";
+@import "embed";
+
+.navbar {
+  margin-bottom: -$navbar-height; /* El alto del navbar */
+}
+
+.jumbotron {
+  background: #ffc0cb;
+  background: linear-gradient(135deg,#ffc0cb -10%, #ffffff 50%, #00ffff 110%);
+  background: -webkit-linear-gradient(135deg,#ffc0cb -10%, #ffffff 50%, #00ffff 110%);
+  background: -moz-linear-gradient(135deg,#ffc0cb -10%, #ffffff 50%, #00ffff 110%);
+
+  /* Tomar en cuenta el alto del navbar */
+  padding-top: calc(#{$jumbotron-padding} + #{$navbar-height});
+  @include media-breakpoint-up(sm) {
+    padding-top: calc(#{($jumbotron-padding * 2)} + #{$navbar-height});
+  }
+}

data/assets/css/styles.scss.orig

@@ -0,0 +1,45 @@
+---
+# Ponemos un frontmatter porque queremos que Jekyll procese este archivo
+---
+
+$navbar-height: 86px;
+$enable-rounded: false;
+$theme-colors: (
+  "recursero": mediumorchid
+);
+
+/*
+ * XXX: Solo importar los archivos necesarios de bootstrap para
+ * facilitar la reducción de CSS.  Por ahora pedimos todo para poder
+ * empezar a trabajar en el HTML sin pensar en CSS.
+ *
+ * Los archivos se encuentran en node_modules/bootstrap/scss
+ */
+@import "bootstrap/scss/bootstrap";
+@import "fork-awesome/scss/fork-awesome";
+@import "accessibility";
+@import "helpers";
+@import "toggler";
+@import "share_box";
+<<<<<<< HEAD
+@import "navbar";
+
+.navbar {
+  margin-bottom: -$navbar-height; /* El alto del navbar */
+}
+
+.jumbotron {
+  background: #ffc0cb;
+  background: linear-gradient(135deg,#ffc0cb -10%, #ffffff 50%, #00ffff 110%);
+  background: -webkit-linear-gradient(135deg,#ffc0cb -10%, #ffffff 50%, #00ffff 110%);
+  background: -moz-linear-gradient(135deg,#ffc0cb -10%, #ffffff 50%, #00ffff 110%);
+
+  /* Tomar en cuenta el alto del navbar */
+  padding-top: calc(#{$jumbotron-padding} + #{$navbar-height});
+  @include media-breakpoint-up(sm) {
+    padding-top: calc(#{($jumbotron-padding * 2)} + #{$navbar-height});
+  }
+}
+=======
+@import "embed";
+>>>>>>> ae133915c865b686fcb7071e1cd2c8c580cb3b8c

data/assets/js/entry.js

@@ -0,0 +1,8 @@
+import lunr from 'lunr'
+import { Liquid } from 'liquidjs'
+
+const engine = new Liquid()
+
+engine.parseAndRender('', {name: 'alice'}).then(console.log)
+
+console.log(resultTemplate)

data/assets/js/script.js

@@ -0,0 +1,65 @@
+---
+---
+
+{% node_module lunr/lunr.js %}
+{% node_module lunr-languages/min/lunr.stemmer.support.min.js %}
+{% node_module lunr-languages/min/lunr.es.min.js %}
+{% node_module liquidjs/dist/liquid.browser.min.js %}
+
+const loadEvent = () => {
+  try {
+    if (Turbolinks) return 'turbolinks:load'
+  } catch {
+    return 'DOMContentLoaded'
+  }
+}
+
+const renderer = new window.liquidjs.Liquid();
+
+/*
+ * Buscar y mostrar los resultados
+ */
+const q = (_q) => {
+  if (!_q || _q === '') return;
+
+  const _results = document.querySelector('main');
+
+  document.querySelector('form.search')
+          .querySelector('input[name=q]')
+          .value = _q;
+
+  renderer.parseAndRender(
+    window.template,
+    { results: window.index.search(`${_q}~2`).map(r => window.data.find(a => a.id == r.ref)) })
+    .then(html => _results.innerHTML = html);
+}
+
+document.addEventListener(loadEvent(), () => {
+  /*
+   * Solo descargar los datos de búsqueda una vez
+   */
+  if (!window.data) {
+    fetch('data.json').then(res => {
+      res.json().then(data => window.data = data);
+      fetch('results.liquid').then(r => r.text()).then(t => window.template = t);
+      fetch('idx.json').then(res => res.json()).then(idx => window.index = lunr.Index.load(idx));
+    });
+  }
+
+  /*
+   * Buscar
+   */
+  document.querySelectorAll('form.search').forEach(form => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      q(form.querySelector('input[name=q]').value);
+    });
+  });
+
+  document.querySelectorAll("a[href^='http://'],a[href^='https://'],a[href^='//']").forEach(a => {
+    a.rel = "noopener";
+    a.target = "_blank";
+  });
+});

data/assets/js/script.js.orig

@@ -0,0 +1,72 @@
+---
+---
+
+<<<<<<< HEAD
+{% node_module lunr/lunr.js %}
+{% node_module lunr-languages/min/lunr.stemmer.support.min.js %}
+{% node_module lunr-languages/min/lunr.es.min.js %}
+{% node_module liquidjs/dist/liquid.browser.min.js %}
+=======
+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;
+>>>>>>> ae133915c865b686fcb7071e1cd2c8c580cb3b8c
+
+const renderer = new window.liquidjs.Liquid();
+
+/*
+ * Buscar y mostrar los resultados
+ */
+const q = (_q) => {
+  if (!_q || _q === '') return;
+
+  const _results = document.querySelector('main');
+
+  document.querySelector('form.search')
+          .querySelector('input[name=q]')
+          .value = _q;
+
+  renderer.parseAndRender(
+    window.template,
+    { results: window.index.search(`${_q}~2`).map(r => window.data.find(a => a.id == r.ref)) })
+    .then(html => _results.innerHTML = html);
+}
+
+document.addEventListener('{%- if site.turbolinks.enabled -%}turbolinks:load{%- else -%}DOMContentLoaded{%- endif -%}', () => {
+  /*
+   * Solo descargar los datos de búsqueda una vez
+   */
+  if (!window.data) {
+    fetch('data.json').then(res => {
+      res.json().then(data => window.data = data);
+      fetch('results.liquid').then(r => r.text()).then(t => window.template = t);
+      fetch('idx.json').then(res => res.json()).then(idx => window.index = lunr.Index.load(idx));
+    });
+  }
+
+  /*
+   * Buscar
+   */
+  document.querySelectorAll('form.search').forEach(form => {
+    form.addEventListener('submit', event => {
+      event.preventDefault();
+      event.stopPropagation();
+
+      q(form.querySelector('input[name=q]').value);
+    });
+  });
+
+  document.querySelectorAll("a[href^='http://'],a[href^='https://'],a[href^='//']").forEach(a => {
+    a.rel = "noopener";
+    a.target = "_blank";
+  });
+});