Better counters that fix forward refs using js on client

twitwi · twitwi · commit e9ab5e8d1e0c · 2025-10-13T18:38:20.000+02:00
diff --git a/src/components/numbering/Counter.astro b/src/components/numbering/Counter.astro
@@ -7,5 +7,5 @@ incrementCounter(type, name)
 const counterText = getCounterText(type, name)
 ---
 
-<span id={counterId}>{counterText}</span>
+<span id={counterId} class={`counter--${type}`} data-type={type} data-name={name} data-text={counterText}>{counterText}</span>
 
diff --git a/src/components/numbering/CountersTools.ts b/src/components/numbering/CountersTools.ts
@@ -32,4 +32,27 @@ export function resetCounters() {
 
 export function resetCounter(type: string) {
   delete counters[type];
-}
+}
+
+
+
+////
+
+export const jsSetupCounteurs = function(type: string) {
+  const texts = {} as Record<string, string>;
+  document.querySelectorAll(`.counter--${type}`).forEach(el => {
+    const label = `${el.getAttribute('data-type')}:${el.getAttribute('data-name')}`;
+    texts[label] = el.getAttribute('data-text') || '';
+  });
+  document.querySelectorAll(`.counter-ref--${type}`).forEach(el => {
+    const label = `${el.getAttribute('data-type')}:${el.getAttribute('data-name')}`;
+    if (texts[label]) {
+      el.textContent = texts[label];
+      el.setAttribute('data-text', texts[label]);
+    }
+  });
+}
+
+export const jsOnLoadSetupCounters = function(type: string) {
+  return `window.addEventListener('load', () => { (${jsSetupCounteurs.toString()})('${type}') })`;
+}
diff --git a/src/components/numbering/Ref.astro b/src/components/numbering/Ref.astro
@@ -6,5 +6,5 @@ const counterId = getCounterId(type, name);
 const counterText = getCounterText(type, name);
 ---
 
-<a href={'#' + counterId}>{counterText}</a>
+<a href={'#' + counterId} class={`counter-ref--${type}`} data-type={type} data-name={name}>{counterText}</a>
 
diff --git a/src/layouts/LessonLayout.astro b/src/layouts/LessonLayout.astro
@@ -7,13 +7,14 @@ import FormattedDate from '../components/FormattedDate.astro';
 import Header from '../components/Header.astro';
 
 import '../styles/diffusion.css';
-import { resetCounters } from '../components/numbering/CountersTools';
+import { resetCounters, jsOnLoadSetupCounters } from '../components/numbering/CountersTools';
 
 type Props = CollectionEntry<'blog'>['data'];
 
 const { title, description, pubDate, updatedDate, heroImage } = Astro.props;
 
 resetCounters();
+const onload = jsOnLoadSetupCounters('fig');
 ---
 
 <html lang="en">
@@ -63,6 +64,7 @@ resetCounters();
 	<body>
 		<Header />
 		<main>
+			<script set:html={onload}></script>
 			<article>
 				<div class="hero-image">
 					{heroImage && <Image width={1020} height={510} src={heroImage} alt="" />}
