feat: 🎸 load image from remote fallback, and content revision

assets/styles/nuxt-content.css

@@ -11,18 +11,18 @@
     @apply border rounded-lg shadow-md;
     border-color: var(--color-container);
   }
-}
-
-.nuxt-content {
-  @apply break-words font-light; /* cannot put overflow-hidden */
-
-  & a {
+  & a:not(.no-underline) {
     @apply underline;
     color: var(--color-container-text-link);
   }
   & a:hover {
+    @apply no-underline;
     color: var(--color-container-text-link-hover);
   }
+}
+
+.nuxt-content {
+  @apply break-words font-light; /* cannot put overflow-hidden */
 
   /* Horizontal margin before and after alert-box and/or code block */
   & .app-alert-box,
@@ -40,6 +40,16 @@
     @apply w-full !important;
   }
 
+  & table {
+    @apply table-auto;
+    & tbody td {
+      @apply border;
+    }
+    & thead th {
+      @apply px-4 py-2;
+    }
+  }
+
   & .page-title {
     @apply text-xl;
     color: var(--color-title);
@@ -83,13 +93,21 @@
 
   /** ***** **/
 
+  & table,
+  & p,
+  & iframe,
+  & ul,
+  & ol {
+    @apply mb-5;
+  }
+
   & h1,
   & h2,
   & h3,
   & h4,
   & h5,
   & h6 {
-    @apply mt-5 mb-2 italic font-serif;
+    @apply my-5 italic font-serif;
 
     color: var(--color-subtitle);
   }

assets/styles/vars.css

@@ -29,8 +29,8 @@
   --color-backdrop: #000;
   --bg: var(--color-backdrop);
   --color: #f4f7f3;
-  --color-title: #262626;
-  --color-subtitle: #262626;
+  --color-title: var(--color-sandwich-text);
+  --color-subtitle: var(--color-sandwich-text);
   --color-primary: #577f79;
   --color-secondary: #fdf9f3;
   --bg-secondary: #214761;
@@ -39,6 +39,6 @@
   --color-taxonomy-bg-hover: #959595;
   --color-taxonomy-text-hover: #fff;
   --color-taxonomy-text: #313131;
-  --color-container-text-link: var(--bg-secondary);
-  --color-container-text-link-hover: var(--color-secondary);
+  --color-container-text-link: var(--color-sandwich-text);
+  --color-container-text-link-hover: var(--color-sandwich-text);
 }

components/AppArticleTags.vue

@@ -20,7 +20,12 @@
         <!-- eslint-disable vue/no-v-html -->
         <span v-if="link === false" v-html="abbreviatize(tag)" />
         <!-- eslint-disable vue/no-v-html -->
-        <NuxtLink v-else :to="`/blog/tag/${tag}`" v-html="abbreviatize(tag)" />
+        <NuxtLink
+          v-else
+          :to="`/blog/tag/${String(tag).toLocaleLowerCase()}`"
+          class="no-underline"
+          v-html="abbreviatize(tag)"
+        />
       </li>
     </ul>
     <span v-else class="taxonomy-items text-xs">(...)</span>

components/blog/BlogListModelByYear.vue

@@ -3,14 +3,15 @@
     <div v-for="inThatYear in byYears" :key="`buckets-year-${inThatYear[0]}`">
       <NuxtLink
         v-if="showYear"
+        class="no-underline"
         :to="{
           path: `/blog/${inThatYear[0]}`,
           query: { q: q ? q : undefined },
         }"
       >
         <h2 class="my-4 font-serif text-2xl italic">{{ inThatYear[0] }}</h2>
       </NuxtLink>
-      <ul>
+      <ul v-if="Array.isArray(inThatYear)">
         <li v-for="content in inThatYear[1]" :key="content.slug" class="mb-8">
           <!-- eslint-disable vue/no-v-html -->
           <NuxtLink
@@ -22,7 +23,7 @@
                 date: content.date,
               },
             }"
-            class="font-serif text-xl italic"
+            class="font-serif text-xl italic no-underline"
             v-html="abbreviatize(content.title)"
           />
           <div

components/global/AppImage.vue

@@ -12,8 +12,9 @@
       v-if="!!imageSource"
       ref="img"
       :src="imageSource"
-      class="object-cover w-full"
-      @load="onLoad"
+      class="object-cover w-full rounded"
+      :data-remote="imageSiteDistSrc"
+      @load.once="onLoad"
     />
     <!-- eslint-disable vue/no-v-html -->
     <figcaption
@@ -31,14 +32,26 @@
 
 <script lang="ts">
   import Vue from 'vue'
-  import { abbreviatize, IAbbreviatize, trimText } from '~/lib'
+  import {
+    abbreviatize,
+    FALLBACK_BLANK_IMAGE,
+    IAbbreviatize,
+    PUBLIC_SITE_ASSETS_ORIGIN,
+  } from '~/lib'
   // const images = require.context('~assets/', false, /\.(?:png|jpg|svg|gif)$/i)
   const RE_WEBPACK_ASSETS = /^[@~]\/assets\//
+  const PUBLIC_SITE_ASSETS_ORIGIN_ASSETS =
+    PUBLIC_SITE_ASSETS_ORIGIN + '/assets/'
   export interface Data {
     errored: boolean
     loaded: boolean
     fallbackSrc: string
     lostImage: boolean
+    /**
+     * Flip this to true if we replaced local images
+     * to use GitHub renoirb/site-assets asset URL.
+     */
+    hasSrcBeenRewritten: boolean
   }
   export interface Methods {
     abbreviatize: IAbbreviatize
@@ -47,17 +60,13 @@
   export interface Computed {
     imageSource: any
     imageFigcaption: string
+    imageSiteDistSrc: string
   }
   export interface Props {
     src: string
     alt: string | ''
     figcaption: string | ''
   }
-  const fallbackSrc = trimText`
-    data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMA
-    AAAl21bKAAAAA1BMVEUhR2EbeJkBAAAAAXRSTlPM0jRW/QAAAApJREFUeJ
-    xjYgAAAAYAAzY3fKgAAAAASUVORK5CYII=
-  `
   export default Vue.extend<Data, Methods, Computed, Props>({
     name: 'AppImage' /* app-image */,
     props: {
@@ -82,10 +91,17 @@
         errored: false,
         loaded: false,
         lostImage,
-        fallbackSrc,
+        hasSrcBeenRewritten: false,
+        fallbackSrc: FALLBACK_BLANK_IMAGE,
       }
     },
     computed: {
+      imageSiteDistSrc(): string {
+        const src = String(this.src)
+        let out = src.replace(RE_WEBPACK_ASSETS, '') as string
+        out = PUBLIC_SITE_ASSETS_ORIGIN_ASSETS + out
+        return out
+      },
       imageFigcaption(): string {
         let figcaption = this.figcaption
         if (this.lostImage) {
@@ -120,13 +136,14 @@
         try {
           return require(`@/assets/${rewrittenSrc}`)
         } catch (err) {
-          return fallbackSrc
+          return this.fallbackSrc
         }
       },
     },
     methods: {
       abbreviatize,
       onLoad(evt: HTMLElementEventMap['load']): void {
+        let currentTarget: HTMLImageElement
         // @ts-ignore
         const { currentSrc = '' } = evt.srcElement
         if (currentSrc.startsWith('data')) {
@@ -135,6 +152,22 @@
         } else {
           this.loaded = true
         }
+        /**
+         * Load from remote fallback.
+         *
+         * Bookmarks:
+         * - https://github.com/PivaleCo/nuxt-image-loader-module/blob/master/src/plugin.template.js
+         * - https://github.com/vuejs/vue-cli/issues/2099
+         */
+        if (evt.currentTarget) {
+          currentTarget = evt.currentTarget as HTMLImageElement
+          if (this.errored && currentTarget) {
+            currentTarget.setAttribute('data-remote-replaced-src', this.src)
+            currentTarget.setAttribute('src', this.imageSiteDistSrc)
+            currentTarget.classList.add('is-data-remote-replaced')
+            this.hasSrcBeenRewritten = true
+          }
+        }
       },
     },
   })

components/global/AppSideBar.vue

@@ -5,6 +5,7 @@
       class="zone__sandwich__top container flex items-center justify-between py-4 mx-auto"
     >
       <inline-svg
+        v-if="isDecorationVisible"
         :src="require('~/assets/images/42357.svg')"
         width="500"
         height="500"
@@ -106,6 +107,7 @@
   export interface Data {
     appTitle: string
     isOpen: boolean
+    isDecorationVisible: boolean
   }
   export interface Methods {
     onKeyDown(evt: HTMLBodyElementEventMap['keydown']): void
@@ -145,6 +147,7 @@
       return {
         appTitle,
         isOpen: false,
+        isDecorationVisible: true,
       }
     },
     watch: {

content/blog/2005/09/first-post.md

@@ -11,11 +11,11 @@ createdAt: *createdAt
 ---
 
 Mon premier billet. Je ne sais pas si je réussirai a sortir un contenu qui
-risquerait d'intéresser les gens. Voyons ce que cela va donner!
+risquerait d’intéresser les gens. Voyons ce que cela va donner!
 
-Ca y est! le saut est fait. Je commence a faire mon premier blog! J'ai installé
-le thème et j'ai même invité du monde a éditer dans le truc.
+Ca y est! le saut est fait. Je commence a faire mon premier blog! J’ai installé
+le thème et j’ai même invité du monde a éditer dans le truc.
 
-J'ai commencé aujourd'hui a sortir quelques catégories qui me tiennent a coeur!
+J’ai commencé aujourd’hui a sortir quelques catégories qui me tiennent a coeur!
 
 Au plaisir tous!

content/blog/2005/12/detection-langue.md

@@ -18,8 +18,9 @@ preamble:
 ---
 
 Lorsqu’on travaille sur un site qui doit avoir plusieurs langues... il m’arrive
-souvent de devoir détecter la langue du visiteur. Ce bout de code permet de
-détecter la langue selon les données fournies dans
+souvent de devoir détecter la langue du visiteur.
+
+Ce bout de code permet de détecter la langue selon les données fournies dans
 <strong>HTTP_ACCEPT_LANGUAGE</strong> <em>et</em>
 <strong>HTTP_USER_AGENT</strong>. Il faut comprendre que ce n’est pas une
 solution absolue, mais un bout de code qui peut s'avérer utile!

content/blog/2006/07/transactions-carte-credit.md

@@ -25,20 +25,20 @@ date: &createdAt '2006-07-14T12:25:45-04:00'
 createdAt: *createdAt
 ---
 
-Ajourd'hui je me suis mis a lire sur mes prochaines étapes de développement.
-Idéalement j'aimerai un jour pouvoir développer mon logiciel
+Ajourd’hui je me suis mis a lire sur mes prochaines étapes de développement.
+Idéalement j’aimerai un jour pouvoir développer mon logiciel
 ([Géranium][geranium]) assez bien pour pouvoir le faire vivre de lui même... en
 accélérant le processus de paiement par carte de crédit.
 
 Je dis cela car depuis maintenant 3 ans je développe sur mon propre temps un
 logiciel de gestion et un moment donné, une fois le produit stable, je pourrai
-le louer mensuellement avec processus d'importation/exportation pour les petites
-entreprises qui n'ont pas les moyens d'avoir un logiciel programmé par une firme
+le louer mensuellement avec processus d’importation/exportation pour les petites
+entreprises qui n’ont pas les moyens d’avoir un logiciel programmé par une firme
 qui ne veut que faire du profit avec. Étant donné que ma solution aura été un
 long processus de programmation a temps plus ou moins perdu (meme avec
-sacrifices) je me sens bien d'apporter a la collectivité en me targuant
-fièrement d'avoir au moins réussi a faire un produit digne de confiance... que
-c'est beau le rêve.
+sacrifices) je me sens bien d’apporter a la collectivité en me targuant
+fièrement d’avoir au moins réussi a faire un produit digne de confiance... que
+c’est beau le rêve.
 
 - [Particletree -- Processing Online Credit Card Transactions][0]
 

content/blog/2007/01/le-futur-du-pc.md

@@ -63,8 +63,8 @@ pour déplacer, de conserver la «pression» en déplaceant le «curseur».
 
 </app-image>
 
-Ma surprise a été lorsque j'ai entendu parler d'un nouveau type de moniteur
-touch-screen évolué qui a la possibilité de considérer plus qu'un seul pointeur.
+Ma surprise a été lorsque j’ai entendu parler d’un nouveau type de moniteur
+touch-screen évolué qui a la possibilité de considérer plus qu’un seul pointeur.
 Imaginez les possibilités!
 
 <iframe width="560" height="315" src="https://www.youtube.com/embed/M0ODskdEPnQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

content/blog/2007/02/une-machine-virtuelle-gentoo.md

@@ -82,8 +82,8 @@ nano -w /etc/conf.d/keymaps
 ```
 
 Changer la variable `KEYMAP="us"` pour `KEYMAP="cf"` "`cf`" est le clavier
-_Canadien Français_ avec le SHIFT+3 pour "`/`" et dièse "`#`" a coté du chiffre
-"1" au clavier. Mon keymap favori quoi!
+_Canadien Français_ avec le <kbd>SHIFT</kbd>+<kbd>3</kbd> pour "`/`" et dièse
+"`#`" a coté du chiffre "`1`" au clavier. Mon keymap favori quoi!
 
 ```ini{}[/etc/conf.d/keymaps]
 KEYMAP="cf"
@@ -124,7 +124,7 @@ routes_eth0=( "default gw 192.168.1.1" )
 
 ## Démarer le réseau par défaut
 
-Cette commande ajuste la configuration interne pour s'assurer que l'interface
+Cette commande ajuste la configuration interne pour s’assurer que l’interface
 réseau `eth0` est active durant le processus de démarrage.
 
 ```bash
@@ -141,8 +141,7 @@ nano -w /etc/hosts
 192.168.1.83 gentoo-vm
 ```
 
-Ce peut être une bonne idée d'utiliser le fichier \> renoir-hosts.txt selon
-l'adressage IP du bureau
+Ce peut être une bonne idée d’utiliser le fichier selon l’adressage IP du bureau
 
 ## Installer VIM, mon éditeur favori