feat: 🎸 new element content-edit to add annotations in pages rel=#75

content/blog/2007/09/revue-de-dont-make-me-think.md

@@ -39,4 +39,4 @@ L'exemple de droite explique souvent comment nous <u><strong><em>Aimerions</em><
 J'ai l'intention de donner quelques trucs que l'<a href="https://sensible.com/about/" title="Steve Krug" target="_blank">auteur</a> a plaçé dans son ouvrage.  Étant un ouvrage en anglais, je prendrai soin de traduire pour que tous puissent en profiter.
 
 Pour ceux qui ont la chance de comprendre l'anglais, ça vaut la peine de se le procurer!
-<!--#TODO-inline-edit--> Il y a probablement aussi une version en Français.
+<rb-content-edit type="ins" date="2024-10-10">Il y a probablement aussi une version en Français.</rb-content-edit>

nuxt.config.ts

@@ -86,23 +86,9 @@ const main: NuxtConfig = {
       // <script src="https://myawesome-lib.js"></script>
       // { src: 'https://awesome-lib.js' },
       {
+        src: './main.mjs',
         type: 'module',
-        vmid: 'load-esm-modules-separately-please',
-        body: true,
         defer: true,
-        innerHTML: `
-/**
- * #WIP-Mingle-CustomElements-From-ESM-Modules: Added on 2024-09-18 during migration.
- */
-import { registerCustomElement } from 'https://renoirb.com/esm-modules/element-utils.mjs'
-import NoticeBoxElement from 'https://renoirb.com/esm-modules/notice-box-element.mjs'
-try {
-  registerCustomElement(window, 'rb-notice-box', NoticeBoxElement)
-} catch (e) {
-  // #XXX FIX ME because this gets loaded
-  console.log('Already loaded', e)
-}
-        `,
       },
     ],
     __dangerouslyDisableSanitizers: [

static/esm-modules/content-edition/0.1.0/index.mjs → static/esm-modules/element-content-edit/0.1.0/index.mjs

@@ -13,6 +13,58 @@ const classNameMap = new Map([
   ['tooltipVisible', 'opacity-100 visible translate-y-0'],
 ])
 
+
+const FALLBACK_TAILIND_DEPENDENCY = '<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">'
+/**
+ * Tailwind has many CSS variables, but none has its name in it. So we need to check for a specific one.
+ */
+const TAILWIND_CSS_CUSTOM_PROPERTY = '--color-primary'
+
+
+/**
+ * Check the current host document for a CSS variable that is set by TailwindCSS
+ *
+ * @example
+ * ```js
+ * window.getComputedStyle(document.body).getPropertyValue('--color-primary')
+ * ```
+ *
+ * Bookmarks:
+ * - https://broken-links.com/2014/08/28/css-variables-updating-custom-properties-javascript/
+ *
+ * @param {Document} hostDocument
+ * @returns {string}
+ */
+const checkDependencyExistence = (hostDocument) => {
+  let hasTailindEmptyCssVar = ''
+  let out = ''
+  try {
+    const maybe = hostDocument.defaultView.getComputedStyle(hostDocument.body).getPropertyValue(TAILWIND_CSS_CUSTOM_PROPERTY)
+    hasTailindEmptyCssVar = maybe
+  } catch (_e) {
+    // Ok
+  }
+  /**
+   * This is meant to check for existence for a CSS variable that's used by Tailwind.
+   *
+   * But after 2h finagling around, when not adding Tailwind dependency, despite the fact that it's
+   * there, the component doesn't style.
+   *
+   * So we'll probably have to load all the host document's link[rel=stylesheet] into this shadow DOM.
+   *
+   * rel=#75
+   *
+   * https://github.com/renoirb/site/issues/75
+   *
+   */
+  hasTailindEmptyCssVar = '' // For now, we'll just force it to load the fallback.
+  if (hasTailindEmptyCssVar === '') {
+    out = FALLBACK_TAILIND_DEPENDENCY
+  }
+
+  return out
+}
+
 class ContentEdit extends HTMLElement {
   constructor() {
     super()
@@ -22,13 +74,22 @@ class ContentEdit extends HTMLElement {
     this.showTimeout = null
     this.hideTimeout = null
     this.lastShowTime = 0
+    this.maybeCssDependency = ''
   }
 
   connectedCallback() {
-    const type = this.getAttribute('type') || 'ins'
+    this.maybeCssDependency = checkDependencyExistence(this.ownerDocument)
+
+    let type = this.getAttribute('type') || 'ins'
     const date = this.getAttribute('date')
     const hasComment = this.querySelector('[slot="comment"]')
 
+    if (type !== 'ins' && type !== 'del') {
+      type = 'ins'
+      const message = `For <${this.tagName.toLowerCase} type="..."> element, only "ins" and "del" are supported, defaulting to "ins".`
+      console.warn(message)
+    }
+
     const mainContent = document.createElement('span')
     mainContent.innerHTML = this.innerHTML
     const commentSlot = mainContent.querySelector('[slot="comment"]')
@@ -74,7 +135,7 @@ class ContentEdit extends HTMLElement {
     }
 
     this.shadowRoot.innerHTML = `
-            <link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
+            ${this.maybeCssDependency}
             ${html}
         `
 

static/main.mjs

@@ -0,0 +1,52 @@
+/**
+ * RenoirBoulanger.com client-side boostraptator. thing.
+ *
+ * #WIP-Mingle-CustomElements-From-ESM-Modules: Added on 2024-09-18 during migration.
+ */
+
+import { registerCustomElement } from 'https://renoirb.com/esm-modules/element-utils.mjs'
+
+const ELEMENTS = [
+  ['rb-notice-box', import('https://renoirb.com/esm-modules/notice-box-element.mjs')],
+]
+
+/**
+ * This should work for file:/// URLs
+ * (assuming it's supported, Safari does, not Chromium thus far 2023-02-03)
+ */
+const SITE_ROOT_BASE_URL = await import.meta.url?.replace('main.mjs', '')
+
+/**
+ * Do things here.
+ * rel=#WIP-Mingle-CustomElements-From-ESM-Modules
+ */
+const main = async () => {
+
+  ELEMENTS.push(
+    ['rb-content-edit', import(`${SITE_ROOT_BASE_URL}esm-modules/element-content-edit/0.1.0/index.mjs`)],
+  )
+
+  await Promise.resolve()
+  const errors = []
+  ELEMENTS.forEach(async ([elementName, importator]) => {
+    const closature = await importator
+    try {
+      registerCustomElement(window, elementName, closature.default)
+    } catch (_) {
+      const message = `Element ${elementName} is already loaded`
+      errors.push(message)
+    }
+  })
+
+  if (errors.length > 0) {
+    errors.forEach((msg) => {
+      console.error(msg)
+    })
+  }
+}
+
+
+// ----------------------------------------------------------------------------
+main().catch(e => {
+  console.error(`Something went wrong`, e)
+})