living-documentation 3.8.0 → 4.1.0

package/dist/src/frontend/diagram.html

@@ -265,10 +265,10 @@
     <header
       class="flex items-center gap-1 px-2 h-12 shrink-0 border-b border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900 shadow-sm z-10"
     >
-      <a
-        href="/"
+      <button
+        onclick="history.back()"
         class="tool-btn !w-auto px-2 text-xs font-medium text-gray-500 dark:text-gray-400"
-        >← Docs</a
+        >← Back</button
       >
       <div class="w-px h-6 bg-gray-200 dark:bg-gray-700 mx-0.5"></div>
       <button id="btnSidebar" class="tool-btn" title="Mes diagrammes">
@@ -685,6 +685,16 @@
           >
             ✎
           </button>
+          <button
+            id="btnNodeLink"
+            class="tool-btn !w-6 !h-6"
+            title="Ajouter / modifier un lien"
+          >
+            <svg width="13" height="13" viewBox="0 0 13 13" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M5 7.5a3.5 3.5 0 0 0 5 0l1.5-1.5a3.5 3.5 0 0 0-5-5L5 2.5"/>
+              <path d="M8 5.5a3.5 3.5 0 0 0-5 0L1.5 7a3.5 3.5 0 0 0 5 5L8 10.5"/>
+            </svg>
+          </button>
           <div class="panel-sep"></div>
           <button
             id="btnNodeFontDecrease"
@@ -924,6 +934,74 @@
             </svg>
             PNG
           </button>
+
+          <div class="panel-sep"></div>
+
+          <!-- Group -->
+          <button
+            id="btnGroup"
+            class="tool-btn !w-8 !h-7"
+            title="Grouper la sélection"
+          >
+            <svg width="22" height="14" viewBox="0 0 22 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="0.7" y="1" width="20.6" height="12" rx="2" stroke-dasharray="2.5,1.5"/>
+              <rect x="4" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
+              <rect x="15" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
+            </svg>
+          </button>
+
+          <!-- Ungroup -->
+          <button
+            id="btnUngroup"
+            class="tool-btn !w-8 !h-7"
+            title="Dégrouper"
+          >
+            <svg width="26" height="14" viewBox="0 0 26 14" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round">
+              <rect x="0.7" y="1" width="9" height="12" rx="2" stroke-dasharray="2.5,1.5"/>
+              <rect x="3" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
+              <rect x="16.3" y="1" width="9" height="12" rx="2" stroke-dasharray="2.5,1.5"/>
+              <rect x="19" y="4.5" width="3" height="5" rx="1" fill="currentColor"/>
+            </svg>
+          </button>
+        </div>
+
+        <!-- Link panel -->
+        <div id="linkPanel" class="float-panel hidden" style="min-width:260px; flex-direction:column; align-items:stretch; gap:0.5rem; padding:0.75rem;">
+          <div class="text-xs font-semibold text-gray-500 dark:text-gray-400 mb-1">Lien sur cette forme</div>
+
+          <label class="flex items-center gap-2 text-xs cursor-pointer">
+            <input type="radio" name="linkType" id="linkTypeUrl" value="url" class="accent-orange-500"/>
+            URL externe
+          </label>
+          <div id="linkUrlRow">
+            <input id="linkUrlInput" type="url" placeholder="https://…"
+              class="w-full text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-orange-400"/>
+          </div>
+
+          <label class="flex items-center gap-2 text-xs cursor-pointer">
+            <input type="radio" name="linkType" id="linkTypeDiagram" value="diagram" class="accent-orange-500"/>
+            Diagramme existant
+          </label>
+          <div id="linkDiagramRow" class="hidden">
+            <select id="linkDiagramSelect"
+              class="w-full text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-orange-400">
+            </select>
+          </div>
+
+          <label class="flex items-center gap-2 text-xs cursor-pointer">
+            <input type="radio" name="linkType" id="linkTypeNew" value="new" class="accent-orange-500"/>
+            Nouveau diagramme
+          </label>
+          <div id="linkNewRow" class="hidden">
+            <input id="linkNewName" type="text" placeholder="Nom du diagramme…"
+              class="w-full text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-1 focus:ring-orange-400"/>
+          </div>
+
+          <div class="flex gap-1 mt-1">
+            <button id="btnLinkSave"   class="flex-1 text-xs bg-orange-500 hover:bg-orange-600 text-white rounded px-2 py-1">Enregistrer</button>
+            <button id="btnLinkRemove" class="text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 hover:bg-red-50 dark:hover:bg-red-900/20 hover:text-red-600">Retirer</button>
+            <button id="btnLinkCancel" class="text-xs border border-gray-300 dark:border-gray-600 rounded px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-700">✕</button>
+          </div>
         </div>
 
         <!-- Edge panel -->

package/dist/src/frontend/index.html

@@ -17,6 +17,8 @@
 
     <!-- WordCloud2.js — vendored from npm, no CDN dependency -->
     <script src="/vendor/wordcloud2.js"></script>
+    <!-- Word Cloud logic — stop words, browser, rendering -->
+    <script src="/wordcloud.js"></script>
 
     <script>
       tailwind.config = {
@@ -281,7 +283,7 @@
           <article id="doc-view" class="hidden max-w-4xl mx-auto px-6 py-8">
             <!-- Doc header -->
             <header
-              class="mb-8 pb-6 border-b border-gray-100 dark:border-gray-800"
+              class="sticky top-0 z-10 bg-gray-50 dark:bg-gray-950 -mx-6 px-6 pt-8 mb-8 pb-6 border-b border-gray-300 dark:border-gray-800"
             >
               <div class="flex items-start justify-between gap-4 flex-wrap">
                 <div class="flex-1 min-w-0">
@@ -348,14 +350,16 @@
                   </div>
                 </div>
               </div>
+              <!-- Search match notice (inside sticky header) -->
+              <div
+                id="search-notice"
+                class="hidden mt-4 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-sm text-yellow-800 dark:text-yellow-300 overflow-hidden"
+              >
+                <div id="search-notice-title" class="px-3 py-2 font-medium border-b border-yellow-200 dark:border-yellow-800"></div>
+                <ol id="search-notice-list" class="max-h-40 overflow-y-auto divide-y divide-yellow-100 dark:divide-yellow-900/40 list-none m-0 p-0"></ol>
+              </div>
             </header>
 
-            <!-- Search match notice -->
-            <div
-              id="search-notice"
-              class="hidden mb-4 px-3 py-2 rounded-lg bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 text-sm text-yellow-800 dark:text-yellow-300"
-            ></div>
-
             <!-- Rendered markdown -->
             <div
               id="doc-content"
@@ -391,6 +395,73 @@
           &#10005; Close
         </button>
       </div>
+      <!-- Search root toolbar -->
+      <div class="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900 shrink-0">
+        <!-- Row 1: path + browse + launch -->
+        <div class="flex items-center gap-3 px-6 py-3">
+          <label class="text-xs font-medium text-gray-500 dark:text-gray-400 shrink-0">Search root</label>
+          <input
+            id="wc-root"
+            type="text"
+            readonly
+            spellcheck="false"
+            class="flex-1 px-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 font-mono cursor-default focus:outline-none"
+          />
+          <button
+            onclick="wcToggleBrowser()"
+            class="text-sm px-3 py-1.5 rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors shrink-0"
+          >
+            &#128193; Browse
+          </button>
+          <button
+            onclick="launchWordCloud()"
+            class="text-sm px-4 py-1.5 rounded-lg bg-blue-600 hover:bg-blue-700 text-white font-semibold transition-colors shrink-0"
+          >
+            &#9654; Launch
+          </button>
+        </div>
+        <!-- Row 2: extension checkboxes -->
+        <div class="flex items-center gap-x-4 gap-y-2 px-6 pb-3 flex-wrap">
+          <span class="text-xs font-medium text-gray-500 dark:text-gray-400 shrink-0">Extensions</span>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="md" checked /> .md</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="txt" /> .txt</label>
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="ts" /> .ts</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="tsx" /> .tsx</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="js" /> .js</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="jsx" /> .jsx</label>
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="java" /> .java</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="kt" /> .kt</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="py" /> .py</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="go" /> .go</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="rs" /> .rs</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="cs" /> .cs</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="swift" /> .swift</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="rb" /> .rb</label>
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="html" /> .html</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="css" /> .css</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="scss" /> .scss</label>
+          <span class="text-gray-200 dark:text-gray-700 text-xs">|</span>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="yml" /> .yml</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="yaml" /> .yaml</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="json" /> .json</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="xml" /> .xml</label>
+          <label class="flex items-center gap-1.5 text-xs text-gray-700 dark:text-gray-300 cursor-pointer"><input type="checkbox" class="wc-ext" value="toml" /> .toml</label>
+        </div>
+        <!-- Row 3: inline folder browser (collapsed by default) -->
+        <div id="wc-browser" class="hidden border-t border-gray-200 dark:border-gray-700">
+          <div class="flex items-center gap-2 px-3 py-2 bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
+            <button id="wc-browse-up" onclick="wcBrowseUp()"
+              class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-30 disabled:pointer-events-none shrink-0">
+              &#8593; Up
+            </button>
+            <span id="wc-browse-path" class="font-mono text-xs text-gray-400 dark:text-gray-500 truncate flex-1 text-right"></span>
+          </div>
+          <div id="wc-browse-list" class="divide-y divide-gray-100 dark:divide-gray-800 max-h-52 overflow-y-auto"></div>
+        </div>
+      </div>
       <div
         id="wc-body"
         class="flex-1 relative overflow-hidden flex items-center justify-center"
@@ -419,6 +490,7 @@
         applyDarkMode(loadDarkPref());
         setupDarkToggle();
         setupSearch();
+        wcRestorePrefs();
         await loadConfig();
         await loadDocuments();
 
@@ -622,8 +694,8 @@
           // Highlight search matches in content
           const notice = document.getElementById("search-notice");
           if (searchQuery) {
-            highlightMatches(contentEl, searchQuery);
-            notice.textContent = `Showing matches for "${searchQuery}"`;
+            const matches = highlightMatches(contentEl, searchQuery);
+            buildSearchNotice(matches, searchQuery);
             notice.classList.remove("hidden");
           } else {
             notice.classList.add("hidden");
@@ -685,7 +757,10 @@
       }
 
       // ── Edit mode ──────────────────────────────────────────────
+      let _editScrollTop = 0;
+
       function enterEditMode() {
+        _editScrollTop = document.getElementById("content-area").scrollTop;
         const editor = document.getElementById("doc-editor");
         editor.value = currentDocContent;
         document.getElementById("doc-content").classList.add("hidden");
@@ -704,6 +779,7 @@
         document.getElementById("edit-actions").classList.add("hidden");
         document.getElementById("view-actions").classList.remove("hidden");
         document.getElementById("edit-save-msg").textContent = "";
+        document.getElementById("content-area").scrollTop = _editScrollTop;
       }
 
       async function handleEditorPaste(e) {
@@ -816,16 +892,50 @@
         const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
         const nodes = [];
         while (walker.nextNode()) nodes.push(walker.currentNode);
-        const re = new RegExp(
-          `(${q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`,
-          "gi",
-        );
+        const re = new RegExp(`(${q.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")})`, "gi");
+        let idx = 0;
         nodes.forEach((node) => {
           if (!node.textContent.toLowerCase().includes(q.toLowerCase())) return;
           const span = document.createElement("span");
-          span.innerHTML = node.textContent.replace(re, "<mark>$1</mark>");
+          span.innerHTML = node.textContent.replace(re, (m) => `<mark id="match-${idx++}">${m}</mark>`);
           node.parentNode.replaceChild(span, node);
         });
+        // Build snippet list from inserted marks
+        const matches = [];
+        el.querySelectorAll("mark[id^='match-']").forEach((mark) => {
+          const block = mark.closest("p, li, td, h1, h2, h3, h4, h5, h6, pre") || mark.parentElement;
+          const full  = block.textContent.trim();
+          const pos   = full.toLowerCase().indexOf(q.toLowerCase());
+          const start = Math.max(0, pos - 40);
+          const end   = Math.min(full.length, pos + q.length + 40);
+          const snippet = (start > 0 ? "…" : "") + full.slice(start, end) + (end < full.length ? "…" : "");
+          matches.push({ id: mark.id, snippet });
+        });
+        return matches;
+      }
+
+      function buildSearchNotice(matches, q) {
+        document.getElementById("search-notice-title").textContent =
+          `Showing ${matches.length} match${matches.length === 1 ? "" : "es"} for "${q}"`;
+        const list = document.getElementById("search-notice-list");
+        list.innerHTML = matches.map((m, i) =>
+          `<li>
+            <button onclick="scrollToMatch('${m.id}')"
+              class="w-full text-left px-3 py-1.5 hover:bg-yellow-100 dark:hover:bg-yellow-900/30 transition-colors">
+              <span class="text-yellow-600 dark:text-yellow-500 font-mono text-xs mr-2">${i + 1}.</span
+              ><span class="text-xs">${esc(m.snippet)}</span>
+            </button>
+          </li>`
+        ).join("");
+      }
+
+      function scrollToMatch(id) {
+        const mark      = document.getElementById(id);
+        const container = document.getElementById("content-area");
+        if (!mark || !container) return;
+        const markTop      = mark.getBoundingClientRect().top;
+        const containerTop = container.getBoundingClientRect().top;
+        container.scrollTop += markTop - containerTop - container.clientHeight / 3;
       }
 
       function esc(str) {
@@ -837,244 +947,6 @@
           .replace(/'/g, "&#39;");
       }
 
-      // ── Word Cloud ─────────────────────────────────────────────
-      const WC_STOP_WORDS = new Set([
-        // English
-        "the",
-        "and",
-        "for",
-        "are",
-        "but",
-        "not",
-        "you",
-        "all",
-        "this",
-        "that",
-        "with",
-        "have",
-        "from",
-        "they",
-        "will",
-        "one",
-        "been",
-        "can",
-        "has",
-        "was",
-        "more",
-        "also",
-        "when",
-        "there",
-        "their",
-        "what",
-        "about",
-        "which",
-        "would",
-        "into",
-        "than",
-        "then",
-        "each",
-        "just",
-        "over",
-        "after",
-        "such",
-        "here",
-        "its",
-        "your",
-        "our",
-        "some",
-        "were",
-        "very",
-        "only",
-        "out",
-        "had",
-        "she",
-        "his",
-        "her",
-        "him",
-        "who",
-        "how",
-        "any",
-        "other",
-        "these",
-        "those",
-        "being",
-        "may",
-        "use",
-        "used",
-        "using",
-        "should",
-        "could",
-        "would",
-        "shall",
-        "must",
-        "need",
-        "via",
-        "per",
-        "like",
-        // French
-        "les",
-        "des",
-        "une",
-        "pour",
-        "pas",
-        "sur",
-        "par",
-        "est",
-        "qui",
-        "que",
-        "dans",
-        "avec",
-        "sont",
-        "plus",
-        "tout",
-        "aux",
-        "mais",
-        "comme",
-        "vous",
-        "nous",
-        "leur",
-        "lui",
-        "elle",
-        "ils",
-        "elles",
-        "ces",
-        "ses",
-        "mon",
-        "ton",
-        "son",
-        "mes",
-        "tes",
-        "ainsi",
-        "donc",
-        "alors",
-        "car",
-        "peut",
-        "fait",
-        "encore",
-        "bien",
-        "aussi",
-        "très",
-        "même",
-        "entre",
-        "vers",
-        "dont",
-        "sans",
-        "sous",
-      ]);
-
-      async function openWordCloud() {
-        const overlay = document.getElementById("wc-overlay");
-        const status = document.getElementById("wc-status");
-        const canvas = document.getElementById("wc-canvas");
-        overlay.classList.remove("hidden");
-        status.textContent = "Loading documents…";
-        status.classList.remove("hidden");
-        canvas.classList.add("hidden");
-
-        try {
-          const docs = allDocs.length
-            ? allDocs
-            : await fetch("/api/documents").then((r) => r.json());
-          status.textContent = `Analyzing ${docs.length} documents…`;
-
-          const results = await Promise.all(
-            docs.map((doc) =>
-              fetch("/api/documents/" + doc.id)
-                .then((r) => (r.ok ? r.json() : null))
-                .catch(() => null),
-            ),
-          );
-
-          const freq = {};
-          for (const doc of results) {
-            console.log("doc = ", doc);
-            if (!doc?.content) continue;
-            for (const w of extractWordsFromMarkdown(doc.content)) {
-              freq[w] = (freq[w] || 0) + 1;
-            }
-          }
-
-          const list = Object.entries(freq)
-            .filter(([, n]) => n >= 2)
-            .sort((a, b) => b[1] - a[1])
-            .slice(0, 150);
-
-          if (!list.length) {
-            status.textContent = "Not enough words found.";
-            return;
-          }
-
-          renderWordCloud(list);
-        } catch (err) {
-          status.textContent = "Error: " + err.message;
-        }
-      }
-
-      function extractWordsFromMarkdown(text) {
-        return text
-          .replace(/```[\s\S]*?```/g, "")
-          .replace(/`[^`\n]+`/g, "")
-          .replace(/\[([^\]]*)\]\([^)]*\)/g, "$1")
-          .replace(/https?:\/\/\S+/g, "")
-          .replace(/[#*_~>`|!\[\](){}=\-+]/g, " ")
-          .toLowerCase()
-          .split(/[^a-zàâäéèêëïîôùûü']+/)
-          .map((w) => w.replace(/^'+|'+$/g, ""))
-          .filter((w) => w.length > 3 && !WC_STOP_WORDS.has(w));
-      }
-
-      function renderWordCloud(list) {
-        const canvas = document.getElementById("wc-canvas");
-        const body = document.getElementById("wc-body");
-        canvas.width = body.clientWidth;
-        canvas.height = body.clientHeight;
-
-        const isDark = document.documentElement.classList.contains("dark");
-        const colors = isDark
-          ? [
-              "#60a5fa",
-              "#34d399",
-              "#f9a8d4",
-              "#a78bfa",
-              "#fbbf24",
-              "#6ee7b7",
-              "#93c5fd",
-              "#fb923c",
-            ]
-          : [
-              "#1d4ed8",
-              "#047857",
-              "#7c3aed",
-              "#b45309",
-              "#be123c",
-              "#0369a1",
-              "#4338ca",
-              "#c2410c",
-            ];
-
-        const maxFreq = list[0][1];
-        const wordList = list.map(([w, n]) => [
-          w,
-          Math.max(10, Math.round((72 * n) / maxFreq)),
-        ]);
-
-        document.getElementById("wc-status").classList.add("hidden");
-        canvas.classList.remove("hidden");
-
-        WordCloud(canvas, {
-          list: wordList,
-          gridSize: Math.round((8 * canvas.width) / 1024),
-          fontFamily: "ui-sans-serif, system-ui, sans-serif",
-          color: () => colors[Math.floor(Math.random() * colors.length)],
-          backgroundColor: isDark ? "#030712" : "#ffffff",
-          rotateRatio: 0.3,
-          minSize: 10,
-        });
-      }
-
-      function closeWordCloud() {
-        document.getElementById("wc-overlay").classList.add("hidden");
-      }
 
       // Browser back/forward
       window.addEventListener("popstate", (e) => {