@digital-ai/dot-illustrations 2.0.40 → 2.0.42

package/demo/github-upload.js

@@ -295,14 +295,26 @@ async function ghCreateIntegrationPR(id, svgBuf) {
 // ─── Utility: append an ID to a JS array in source text ──────────────────────
 
 function appendToJsArray(source, arrayName, id) {
-  // Find the last entry in the named array and insert after it
+  // Insert id alphabetically into the named array
   const re = new RegExp(`(const ${arrayName} = \\[)([\\s\\S]*?)(\\s*\\];)`, 'm');
   const match = source.match(re);
   if (!match) return source;
+
   const body   = match[2];
-  const indent = (body.match(/\n(\s+)"/) || body.match(/\n(\s+)/) || ['', '    '])[1];
-  const newEntry = `\n${indent}"${id}",`;
-  return source.replace(re, `$1$2${newEntry}$3`);
+  const indent = (body.match(/\n(\s+)"/) || ['', '    '])[1];
+
+  // Extract existing entries
+  const entries = [];
+  const entryRe = /"([^"]+)"/g;
+  let m;
+  while ((m = entryRe.exec(body)) !== null) entries.push(m[1]);
+
+  // Insert in alphabetical position
+  entries.push(id);
+  entries.sort((a, b) => a.localeCompare(b));
+
+  const newBody = '\n' + entries.map(e => `${indent}"${e}",`).join('\n') + '\n  ';
+  return source.replace(re, `$1${newBody}$3`);
 }
 
 // ─── Export ──────────────────────────────────────────────────────────────────

package/demo/index.html

@@ -318,5 +318,12 @@
       </div>
     </div>
 
+    <!-- Toast — pre-defined so Tailwind CDN scans the classes -->
+    <div id="toast-message" role="status" aria-live="polite"
+      style="display:none;position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:9999;
+             background:#111827;color:#fff;padding:.625rem 1.25rem;border-radius:.5rem;
+             font-size:.875rem;box-shadow:0 4px 12px rgba(0,0,0,.35);white-space:nowrap;">
+    </div>
+
   </body>
 </html>

package/demo/script.js

@@ -33,19 +33,15 @@ function hideTooltip(button) {
 
 // Toast logic
 function showToast(message) {
-  let toast = document.getElementById('toast-message');
-  if (!toast) {
-    toast = document.createElement('div');
-    toast.id = 'toast-message';
-    toast.className = 'fixed bottom-6 left-1/2 -translate-x-1/2 z-50 bg-gray-900 text-white px-6 py-3 rounded-lg shadow-lg flex items-center gap-2 text-base animate-fade-in';
-    document.body.appendChild(toast);
-  }
+  // Uses the pre-defined #toast-message element in index.html.
+  // Inline styles only — Tailwind CDN does not generate styles for
+  // dynamically-injected class names so we never rely on it here.
+  const toast = document.getElementById('toast-message');
+  if (!toast) return;
   toast.textContent = message;
-  toast.style.display = 'flex';
+  toast.style.display = 'block';
   clearTimeout(window._toastTimeout);
-  window._toastTimeout = setTimeout(() => {
-    toast.style.display = 'none';
-  }, 2000);
+  window._toastTimeout = setTimeout(() => { toast.style.display = 'none'; }, 2400);
 }
 
 // Patch copyCode and copyText to show toast
@@ -321,7 +317,7 @@ document.addEventListener('DOMContentLoaded', () => {
     "dynatrace","edge","essential-app-protection","explorer","f5","firefox",
     "flux-cd","fortify","fortify-on-demand","free-marker","git-ops","github",
     "github-actions","gitlab","google","google-cloud","google-cloud-functions",
-    "hashi-corp-vault","helm","ibm","ingress","inteligence","jboss","jenkins",
+    "grafana","hashi-corp-vault","helm","ibm","ingress","inteligence","jboss","jenkins",
     "jfrog","jira","key","kubernetes","linux","mailhog","microsoft-iis",
     "microsoft-teams","mysql","netscaler","new-relic","octopus-deploy",
     "open-policy-agent","openid","openshift","opsgenie","oracle","parasoft",
@@ -330,7 +326,6 @@ document.addEventListener('DOMContentLoaded', () => {
     "sonarcloud","sonarqube","sonatype","svn","team-forge","teamcity","terraform",
     "testlink","topaz","travis-ci","urbancode-deploy","vmware","webhook",
     "windows","xray","zendesk",
-    "grafana",
   ];
 
   // --- FAVOURITES LOGIC ---
@@ -380,11 +375,11 @@ document.addEventListener('DOMContentLoaded', () => {
     const themeClass = root.classList.contains('dark') ? 'dark' : 'light';
     const isInteg    = type === 'integration' || (integrationsList.includes(item) && !illustrations.includes(item));
 
-    // Toggle field visibility
+    // Toggle field visibility — use style.display (more reliable than Tailwind hidden class)
     const illusFields = document.getElementById('modal-illus-fields');
     const integFields = document.getElementById('modal-integ-fields');
-    if (illusFields) illusFields.classList.toggle('hidden', isInteg);
-    if (integFields) integFields.classList.toggle('hidden', !isInteg);
+    if (illusFields) illusFields.style.display = isInteg  ? 'none'  : 'block';
+    if (integFields) integFields.style.display = !isInteg ? 'none'  : 'block';
 
     if (isInteg) {
       // Integration modal — single usage field
@@ -529,7 +524,7 @@ document.addEventListener('DOMContentLoaded', () => {
         div.dataset.itemId   = item;
         div.dataset.itemType = 'integration';
         div.innerHTML = `
-          <button class="fav-btn absolute top-2.5 right-2.5 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
+          <button class="fav-btn absolute top-2.5 right-2.5 z-20 ${isFav ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
             <svg class="w-3.5 h-3.5" fill="${isFav ? '#FBBF24' : 'none'}" viewBox="0 0 24 24" stroke="${isFav ? '#FBBF24' : '#9CA3AF'}" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/></svg>
           </button>
           <div class="flex items-center justify-center h-36 px-4">
@@ -555,7 +550,7 @@ document.addEventListener('DOMContentLoaded', () => {
         div.dataset.itemId   = item;
         div.dataset.itemType = 'illustration';
         div.innerHTML = `
-          <button class="fav-btn absolute top-2.5 right-2.5 z-20 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
+          <button class="fav-btn absolute top-2.5 right-2.5 z-20 ${isFav ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'} transition-opacity p-1 rounded-lg bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm shadow-sm" onclick="event.stopPropagation();window.toggleFavourite('${item}')">
             <svg class="w-3.5 h-3.5" fill="${isFav ? '#FBBF24' : 'none'}" viewBox="0 0 24 24" stroke="${isFav ? '#FBBF24' : '#9CA3AF'}" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l2.036 6.29a1 1 0 00.95.69h6.631c.969 0 1.371 1.24.588 1.81l-5.37 3.905a1 1 0 00-.364 1.118l2.036 6.29c.3.921-.755 1.688-1.54 1.118l-5.37-3.905a1 1 0 00-1.176 0l-5.37 3.905c-.784.57-1.838-.197-1.54-1.118l2.036-6.29a1 1 0 00-.364-1.118L2.342 11.717c-.783-.57-.38-1.81.588-1.81h6.631a1 1 0 00.95-.69l2.036-6.29z"/></svg>
           </button>
           <div class="flex items-center justify-center h-36 px-4 dot-illustration">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digital-ai/dot-illustrations",
-  "version": "2.0.40",
+  "version": "2.0.42",
   "description": "A central place for the design team to keep illustrations and for dev teams to find them.",
   "main": "./index.css",
   "scripts": {