traer mejoras desde otros proyectos

.env

@@ -0,0 +1 @@
+# Colocar variables de entorno

Makefile

@@ -1,27 +1,46 @@
+SHELL := bash
 .DEFAULT_GOAL := all
 
-JEKYLL_ENV ?= production
+site ?= $(patsubst %-jekyll-theme,%,$(notdir $(PWD)))
+domain ?= $(site).sutty.local
+env ?= production
+JEKYLL_ENV ?= $(env)
+
+include .env
 
 export
 
-all: fa build serve
+all: fa build ## Todo
 
-build:
+build: ## Compilar el sitio
 	bundle exec jekyll build --profile --trace
 
-# La ubicación de serve va a un directorio temporal fuera del directorio
+serve: /etc/hosts ## Servidor de prueba
-# actual para hacerlo compatible con jekyll-locales.
+	@echo "Iniciando servidor web"
-serve:
+	@if ! ss -lnp | grep -q :8080 ; then nghttpd -d _site/ 8080 ../sutty.local/domain/sutty.local.{key,crt} & echo $$! > /tmp/nghttpd.pid ; fi
-	bundle exec jekyll serve --destination /tmp/_site
+	@if ! ss -lnp | grep -q :4000 ; then nghttpx -b "127.0.0.1,9095;/assets/js/" -b "$(domain),8080;/;proto=h2;tls" -f "0.0.0.0,4000" -L FATAL --no-ocsp ../sutty.local/domain/sutty.local.{key,crt} & echo $$! > /tmp/nghttpx.pid ; fi
+
+kill-servers: /tmp/nghttpd.pid /tmp/nghttpx.pid /tmp/webpack.pid ## Cerrar el servidor
+
+webpack-dev-server: ## Servidor de prueba de Webpack
+	./node_modules/.bin/webpack-dev-server --public $(domain):9095 & echo $$! > /tmp/webpack.pid
 
 # Tomar los códigos de los íconos de este archivo y copiarlos a fa.txt
 # node_modules/font-awesome/scss/_variables.scss
+whitelist = $(shell grep -v "^#" $< | sed "s/^/U+/" | tr "\n" ",")
 assets/fonts/forkawesome-webfont.woff2: fa.txt
 	which glyphhanger || npm i -g glyphhanger
-	glyphhanger \
+	glyphhanger --subset=node_modules/fork-awesome/fonts/forkawesome-webfont.ttf --formats=woff2 --whitelist=$(whitelist)
-		--subset=node_modules/fork-awesome/fonts/forkawesome-webfont.ttf \
-		--formats=woff2 \
-		--whitelist=$(shell grep -v "^#" $< | sed "s/^/U+/" | tr "\n" "," )
 	mv node_modules/fork-awesome/fonts/forkawesome-webfont-subset.woff2 $@
 
-fa: assets/fonts/forkawesome-webfont.woff2
+fa: assets/fonts/forkawesome-webfont.woff2 ## Fork Awesome
+
+/etc/hosts: always
+	@echo "Chequeando si es necesario agregar el dominio local $(domain)"
+	@grep -q " $(domain)$$" $@ || echo -e "127.0.0.1 $(domain)\n::1 $(domain)" | sudo tee -a $@
+
+%.pid: always
+	@test -f $@ && cat $@ | xargs -r kill &>/dev/null || :
+	@rm -f $@
+
+.PHONY: always

README.md

@@ -4,32 +4,83 @@ CAMBIAME: Esta es una plantilla base para comenzar cualquier plantilla
 relacionada con Sutty, con el entorno de desarrollo que usamos según
 nuestro flujo de trabajo.
 
-La instalación de esta gema se realiza bifurcando el desarrollo de esta
-usando git, por ejemplo:
-
 ```bash
-# Hacer un fork local desde sutty-base-jekyll-theme a nuestra plantilla
+# Desde el directorio de trabajo
-git clone https://0xacab.org/sutty/jekyll/sutty-base-jekyll-theme.git \
+cd ~/Sutty
-  CAMBIAME-jekyll-theme
+# Instalar sutty-cli antes de empezar
+gem install sutty-cli
+# Iniciar una plantilla
+sutty-cli theme CAMBIAME
+# Se creó el repositorio
 cd CAMBIAME-jekyll-theme
-
-# Sutty-base ahora es el proyecto base, desde el que podemos tomar
-# cambios, pero no enviamos para no mezclar las cosas
-git remote rename origin upstream
-
-# Agregamos el repositorio donde vamos a enviar y publicar cambios
-git remote add origin \
-  git@0xacab.org:sutty/jekyll/CAMBIAME-jekyll-theme.git
-
-# Configuramos git para que envíe siempre los cambios al repositorio
-# nuevo
-git push --set-upstream origin master
 ```
 
 Para empezar, hay que buscar y reemplazar en todos los archivos donde
 diga `CAMBIAME`.
 
-También hay que instalar las dependencias de CSS y JS con `yarn`.
+También hay que instalar
+[sutty.local](https://0xacab.org/sutty/sutty.local/):
+
+```bash
+# Desde el directorio de trabajo
+cd ~/Sutty
+# Clonar el repositorio
+git clone https://0xacab.org/sutty/sutty.local.git
+cd sutty.local
+make all domain domain=sutty.local
+cd .. # Volver al directorio de trabajo
+```
+
+Esto genera un certificado a nivel local que luego va a usar el
+servidor de desarrollo.
+
+## Desarrollo
+
+Siempre trabajamos desde el directorio raíz del repositorio:
+
+```bash
+cd ~/Sutty/CAMBIAME-jekyll-theme
+```
+
+Primero hay que iniciar los servidores, antes hay que instalar el
+paquete `nghttp2`.
+
+```bash
+make serve
+```
+
+A partir de este momento podemos editar los archivos.  Para probar lo
+que estamos haciendo, compilamos el sitio.
+
+```bash
+make build
+```
+
+Hay que hacer esto cada vez que queremos probar cambios.
+
+**Nota:** No usamos `jekyll serve` porque entra en conflicto con algunos
+de nuestros complementos y los sitios grandes tardan en compilarse de
+todas formas.
+
+## Actualizar
+
+Podemos traer cambios de la base:
+
+```bash
+git pull upstream master
+```
+
+Si hubiera conflictos, los podemos resolver con:
+
+```bash
+# Esto se hace una sola vez, cambiar vimdiff por la herramienta que
+# queramos usar
+git config --global mergetool.tool vimdiff
+git config --global mergetool.keepBackup false
+
+# Resolver los conflictos
+git mergetool
+```
 
 ## Publicación
 

_includes/navbar.html

@@ -1,23 +1,31 @@
 <nav class="navbar navbar-expand-lg navbar-light bg-light d-print-block" role="navigation" aria-label="{{ site.i18n.menu.title }}">
   <a class="navbar-brand" href="">
-    {% include_cached logo.html %}
+    {% include_cached logo.svg %}
   </a>
 
-  {% comment %}
-    TODO: Add CSS-only hamburger menu.
-  {% endcomment %}
   <ul class="navbar-nav d-print-none">
     {%- for item in site.i18n.menu.items -%}
       {% comment %}
-        This makes it hard to just cache the whole navbar, but we prefer
+      Algunos items del menú tienen layouts para indicar que
-        to mark the active item in code rather than with JS.
+      queremos el primero de esos artículos independientemente de
-      {% endcomment %}
+      la URL.
 
+      XXX: Como las asignaciones sobreviven a este archivo hay que
+      convertirlas a nil cuando se las deja de usar.
+      {% endcomment %}
+      {%- if item.layout -%}
+        {%- assign post = site.posts | find: 'layout', item.layout -%}
+      {%- else -%}
+        {%- assign post = nil -%}
+      {%- endif -%}
+
+      {%- assign href = post.url | default: item.href -%}
+      {%- assign active = include.active_cache_key | equals: href -%}
       <li class="nav-item">
-        <a class="nav-link{% if page.url == item.href %} active{% endif %}" href="{{ item.href }}">
+        <a class="nav-link {{ active | ternary: 'active', '' }}" href="{{ href }}">
           {{ item.title }}
 
-          {%- if page.url == item.href -%}
+          {%- if active -%}
             <span class="sr-only">
               {{ site.i18n.menu.active | default: '(current)' }}
             </span>

_includes/packs.html

@@ -0,0 +1,4 @@
+<script
+  defer
+  type="text/javascript"
+  src="{{ jekyll.environment | equals: 'production' | ternary: 'assets/js/pack.js', 'https://sutty.local:9095/assets/js/pack.js' }}"></script>

_includes/preload_font.html

@@ -0,0 +1 @@
+<link rel="preload" as="font" type="font/woff2" crossorigin href="{{ include.font }}" />

_layouts/default.html

@@ -10,18 +10,34 @@
     <meta name="referrer" content="strict-origin-when-cross-origin"/>
 
     <link href="assets/css/styles.css" rel="stylesheet">
-    <script defer type="text/javascript" src="assets/js/script.js"></script>
+
+    {% comment %}
+    Webpack
+    {% endcomment %}
+    {% include_cached packs.html %}
+
+    {% comment %}
+    Agregar otras tipografías.  Esto hace que las tipografías se carguen
+    lo más rápido posible y minimizar el tiempo en que se ven las del
+    navegador.  En Firefox todavía no está soportado.
+    {% endcomment %}
+    {% include_cached preload_font.html font='assets/fonts/forkawesome-webfont.woff2' %}
+
+    <link rel="icon" type="image/svg+xml" href="public/favicon.svg">
+    <link rel="alternate icon" href="public/favicon.ico">
+    <link rel="mask-icon" href="public/favicon.svg" color="white">
 
     {% seo %}
     {% feed_meta %}
   </head>
   <body>
-    <main class="container">
+    {%- assign active_cache_key = page.url | menu_active_item | default: 'none' -%}
-      <div class="row justify-content-center d-print-block">
+    {%- include_cached navbar.html active_cache_key=active_cache_key %}
-        <div class="col">
+
-          {{ content }}
+    <main>
-        </div>
+      {{ content }}
-      </div>
     </main>
+
+    {% include_cached footer.html %}
   </body>
 </html>

_packs/controllers/search_controller.js

@@ -0,0 +1,84 @@
+import 'core-js/stable'
+import 'regenerator-runtime/runtime'
+import { Controller } from 'stimulus'
+import { Liquid } from 'liquidjs'
+
+const lunr = require("lunr")
+require("lunr-languages/lunr.stemmer.support")(lunr)
+require("lunr-languages/lunr.es")(lunr)
+
+export default class extends Controller {
+  static targets = [ 'q' ]
+
+  connect () {
+    this.element.addEventListener('submit', async event => {
+      event.stopPropagation()
+      event.preventDefault()
+
+      this.search()
+    })
+
+    const q = window.location.search.match(/^\?q=(?<q>.*)&?/)
+    if (q) this.qTarget.value = decodeURI(q.groups.q)
+
+    // There can only be one
+    if (!window.search_fetching) this.fetch()
+  }
+
+  async search () {
+    const q = this.qTarget.value
+
+    if (!q || q === '') return
+
+    const main = document.querySelector('main')
+    const results = window.index.search(q).map(r => window.data.find(a => a.id == r.ref))
+    const site = await this.site()
+    const request = await fetch('assets/templates/results.html')
+    const template = await request.text()
+    const html = await this.engine.parseAndRender(template, { q, site, results })
+    const title = `${site.i18n.search.title} - ${q}`
+
+    window.history.pushState({ q }, title, `?q=${encodeURI(q)}`)
+    document.title = title
+
+    main.innerHTML = html
+  }
+
+  async fetch () {
+    window.search_fetching = true
+    let response
+
+    if (!window.data) {
+      response = await fetch('data.json')
+      window.data = await response.json()
+    }
+
+    if (!window.index) {
+      response = await fetch('idx.json')
+      const idx = await response.json()
+      window.index = lunr.Index.load(idx)
+    }
+
+    if (this.qTarget.value !== '') this.search()
+  }
+
+  /*
+   * Liquid renderer
+   *
+   * @return Liquid
+   */
+  get engine () {
+    if (!window.liquid) window.liquid = new Liquid()
+
+    return window.liquid
+  }
+
+  async site () {
+    if (!window.site) {
+      const data = await fetch('assets/data/site.json')
+      window.site = await data.json()
+    }
+
+    return window.site
+  }
+}

_packs/entry.js

@@ -0,0 +1,6 @@
+import { Application } from 'stimulus'
+import { definitionsFromContext } from "stimulus/webpack-helpers"
+
+const application = Application.start()
+const context = require.context("./controllers", true, /\.js$/)
+application.load(definitionsFromContext(context))

assets/templates/results.html

@@ -0,0 +1,17 @@
+<section class="row no-gutters justify-content-center">
+  <div class="col-10">
+    {% for item in results %}
+      <article id="{{ item.slug }}">
+        <header>
+          <h2>
+            <a href="{{ item.url }}">
+              {{ item.title }}
+            </a>
+          </h2>
+        </header>
+
+        <p class="lead">{{ item.description }}</p>
+      </article>
+    {% endfor %}
+  </div>
+</section>

package.json

@@ -1,6 +1,21 @@
 {
   "dependencies": {
+    "@babel/core": "^7.10.4",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/preset-env": "^7.10.4",
+    "babel-loader": "^8.1.0",
     "bootstrap": "~4.4",
-    "fork-awesome": "^1.1.7"
+    "core-js": "^3.6.5",
+    "fork-awesome": "^1.1.7",
+    "liquidjs": "^9.14.0",
+    "lunr": "^2.3.9",
+    "lunr-languages": "^1.4.0",
+    "purgecss": "~1",
+    "regenerator-runtime": "^0.13.5",
+    "stimulus": "^1.1.1",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-merge": "^5.0.9"
   }
 }

webpack.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  entry: './_packs/entry.js',
+  output: {
+    path: __dirname,
+    filename: './assets/js/pack.js'
+  },
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    port: 9095
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?js$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: ['@babel/plugin-proposal-class-properties']
+          }
+        }
+      }
+    ]
+  }
+};

webpack.prod.js

@@ -0,0 +1,7 @@
+const merge = require('webpack-merge');
+const common = require('./webpack.config');
+
+module.exports = merge.merge(common, {
+  mode: 'production',
+  devtool: 'source-map'
+});