[skip ci] Recompilar JS

¡Existe desde IE 4!

.woodpecker.yml

@@ -1,25 +1,27 @@
 pipeline:
   build:
-    image: registry.nulo.in/sutty/haini.sh:latest
+    image: registry.nulo.in/sutty/haini.sh:root
     commands:
-      - rm assets/js/*
+      - rm -f assets/js/*
       - make yarn hainish="sh -c"
       - make webpack hainish="sh -c"
-  commit:
-    image: registry.nulo.in/sutty/haini.sh:latest
-    commands:
+
       - mkdir ~/.ssh/
       - eval $(ssh-agent -s)
       - echo "$${GIT_BASE64_SSH_KEY}" | base64 -d | ssh-add -
-      - echo [nulo.in]:420 ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQCPfptutxU1zs6ATFn/kkqLrsXzsJRMNxrPd9hfsccE2TAPnbLtcqFydioyx5ww+dacFFQ8xb481yYuFMof24XwsNQG0tGmrGNm321ewt4fHihfu8cvzE0WPcfgGGg8YETLvkkFNVC9p3JOeC1+X9YU/QHaSv7NQ9AmEYxYUD/qeZRAsm9NtbmwDxLUQixD6AMMLVKiUGFRIbdrDkCrQgqCb+0d06vG1DyPzhOhD+MyRwKAqizBE0KmqOYaNmCBkHqopphny0wMpqpWVO2OQCNeTCWmqzVvDvxOFS5ToMbueModINZuV9jGmsXz9FO3F0TinejxPBENgBJ1MPTEgoV4M8XqCfqw0yLvpB676fjHvxqdTfZqICcv26GBYbVY0DcGXR2dM2Un4uNfx30Ml22DDlpCBPkEILvZc9zMO3nm0XK8/yJCF17oitZu0a+j32MjOovvtvdVuwxe0KdoUaFa833a+hO/UKMycwCk8HARoIO6YPakcsqy7a+FTOVgWNY6cRMjJ8trUR1Fwi1kYo1o+VkRnU/l62xPr+BTleueZQnlXh1OGYpMwiwbcPYoqxr2CQp3rohmcypgWkMJESIrPnKPDJaQuCYruqOVmU5nJW5FJ3HIUgf1TiRyp+LXbSdXvKt3mnpV4aQkG9GSKzNl19Dx3AYQyUPImfekFLrpfw== > ~/.ssh/known_hosts
-      - echo [nulo.in]:420 ecdsa-sha2-nistp256 AAAAE2VjZHNhLXNoYTItbmlzdHAyNTYAAAAIbmlzdHAyNTYAAABBBGPkgRVWYcVcgjI0xAjDgZQsYuXU9edcya8zna01ibyUMlfKHIMD9yOoq0R+fQPTCqwiol/2tKMPJ2hlKshc+H8= >> ~/.ssh/known_hosts
       - echo [nulo.in]:420 ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIHgHIbf5/jkeyLMndnWlEO12DPj41YPqkmz+aIreVOsP >> ~/.ssh/known_hosts
-      - git checkout ${DRONE_BRANCH} # Tenemos que hacer esto porque Woodpecker solo `git reset` ea el commit que quiere.
+
       - git config user.name Woodpecker
       - git config user.email ci@nulo.in
-      - git add assets/js/* _data/assets.json
-      - git commit -m "[skip ci] Recompilar JS"
       - git remote add nulo ssh://_gitea@nulo.in:420/Sutty/sutty-base-jekyll-theme.git
-      - git push -u nulo ${DRONE_BRANCH}
+      - git diff-index --quiet HEAD --ignore-submodules || ( git add assets/js/pack* && git commit assets/js/ _data/assets.json -m "[skip ci] Recompilar JS" && git push -u nulo HEAD:${DRONE_BRANCH} )
     secrets:
       - git_base64_ssh_key
+    when:
+      path:
+        include:
+          - _packs/*
+          - package.json
+          - yarn.lock
+          - webpack.*.js
+          - .woodpecker.yml

_data/assets.json

@@ -1,4 +1,4 @@
 {
-  "assets/js/pack.js": "assets/js/pack.d2c9fc926fed547c03f8.js",
-  "assets/js/pack.js.map": "assets/js/pack.d2c9fc926fed547c03f8.js.map"
+  "assets/js/pack.js": "assets/js/pack.83a8cdd48652c0acbf04.js",
+  "assets/js/pack.js.map": "assets/js/pack.83a8cdd48652c0acbf04.js.map"
 }

_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 }}

_packs/controllers/search_controller.js

@@ -16,7 +16,7 @@ export default class extends Controller {
   }
 
   connect () {
-    const q = new URLSearchParams(window.location.search).get('q').trim()
+    const q = new URLSearchParams(window.location.search).get('q')?.trim()
 
     if (q) {
       this.qTarget.value = q

_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
+const bot = window.bot_detector.parse(navigator.userAgent)
+
+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")
-Turbolinks.start()
+// Turbo acelera la navegación al no tener que recargar todo el JS y CSS
+// 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"
@@ -19,33 +37,17 @@ const application = Application.start()
 const context = require.context("./controllers", true, /\.js$/)
 application.load(definitionsFromContext(context))
 
-// 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
-// recargar la página
-document.addEventListener('turbolinks:load', event => {
-  window.location.hash = window.location.hash
+document.addEventListener('turbo:load', event => {
+  document.querySelectorAll("a[href^='http://'],a[href^='https://'],a[href^='//']").forEach(a => {
+    a.rel = "noopener"
+    a.target = "_blank"
+  })
 
   if (!window.axe) return
 

assets/css/styles.scss

@@ -118,9 +118,6 @@ $label-margin-bottom: 0;
 @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,9 +12,11 @@
     "@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",
     "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",
@@ -22,7 +24,6 @@
     "sassdoc-theme-herman": "^4.0.2",
     "stimulus": "^1.1.1",
     "svgo": "^2.5.0",
-    "turbolinks": "^5.2.0",
     "webpack": "^4.43.0",
     "webpack-assets-manifest": "~4",
     "webpack-cli": "^3.3.12",

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"
@@ -2514,6 +2519,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"
@@ -6378,11 +6388,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"