@digital-ai/dot-illustrations 2.0.36 → 2.0.38

package/demo/demo.css

@@ -1,95 +1,19 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
-  margin: 0 auto;
-  height: 100%;
-  text-align: center;
-}
+/* dot-illustrations demo — custom styles
+   Tailwind handles layout; this file fills the gaps. */
 
-img {
-  align-items: center;
-  height: 160px;
-  width: 160px;
-  max-width: 160px;
-  max-height: 160px;
-  min-width: 92px;
-  min-height: 92px;
-  margin: auto;
-}
+*, *::before, *::after { box-sizing: border-box; }
 
-span {
-  margin: 0 auto;
-  display: flex;
-  flex-wrap: wrap;
-  font-family: 'Lato', sans-serif;
-  font-size: 14px;
-  margin-top: 8px;
-  text-align: center;
-  color: #667385;
-  z-index: 0;
-}
+/* ── Prevent legacy img rule from overriding card images ─────────────────── */
+/* Only illustration img elements inside .dot-illustration get size treatment */
+.dot-illustration img { display: block; }
 
-.copy-container{}
+/* ── Hidden clipboard source ────────────────────────────────────────────── */
+.codeBlock { display: none !important; }
 
-/* Tooltip for copy buttons */
-.tooltiptext {
-  visibility: hidden;
-  background-color: black;
-  color: #fff;
-  text-align: center;
-  border-radius: 5px;
-  padding: 5px;
-  position: absolute;
-  z-index: 1;
-  bottom: 125%;
-  left: 50%;
-  transform: translateX(-50%);
-  opacity: 0;
-  transition: opacity 0.3s;
-  white-space: nowrap;
-}
-
-.button:hover .tooltiptext {
-  visibility: visible;
-  opacity: 1;
-}
-
-.codeBlock {
-  visibility: hidden;
-  white-space: pre-wrap;
-  background-color: #f4f4f4;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  max-width: 300px;
-  overflow: auto;
-}
-
-.codeInclude {
-  color: rgb(43, 50, 55);
-  white-space: pre-wrap;
-  background-color: #f4f4f4;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  max-width: 300px;
-  overflow: auto;
-}
-
-/* When dark mode is active */
-body.dark-mode .dot-illustration img.light {
-  display: none;
-}
-
-body.dark-mode .dot-illustration img.dark {
-  display: block;
-  background-color: #232E40;
-  border-radius: 8px;
-}
+/* ── Tooltip (legacy compat — kept for copyText/copyCode) ───────────────── */
+.tooltiptext { display: none; }
 
+/* ── Floating bar — hidden off-screen, slides in on scroll ─────────────── */
 #floating-bar {
   pointer-events: none;
   opacity: 0;
@@ -99,110 +23,40 @@ body.dark-mode .dot-illustration img.dark {
   pointer-events: auto;
   opacity: 1;
   transform: translateY(0);
-  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s cubic-bezier(0.4,0,0.2,1);
-}
-.floating-search {
-  min-width: 0;
-  width: 120px;
-  max-width: 200px;
-}
-@media (min-width: 640px) {
-  .floating-search {
-    width: 200px;
-    max-width: 320px;
-  }
-}
-.floating-tab {
-  min-width: 60px;
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
-  font-size: 0.85rem;
+  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
+              opacity   0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-/* Modal styles */
-#illustration-modal {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  background: rgba(0,0,0,0.5);
-}
-#illustration-modal.active {
-  display: flex;
-}
-#illustration-modal .modal-content {
-  background: white;
-  border-radius: 1rem;
-  box-shadow: 0 10px 40px rgba(0,0,0,0.2);
-  max-width: 90vw;
-  max-height: 90vh;
-  overflow-y: auto;
-  padding: 2rem;
-  position: relative;
-}
-#illustration-modal .modal-image img {
-  width: 220px;
-  height: 220px;
-  object-fit: contain;
-  border-radius: 0.75rem;
-  background: #f3f4f6;
-  margin-bottom: 1rem;
-}
-#illustration-modal .iconID {
-  font-size: 1.2rem;
-  font-weight: 600;
-}
-#illustration-modal .button-group {
-  margin-bottom: 1rem;
-}
-#illustration-modal #modal-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  background: none;
-  border: none;
-  font-size: 2rem;
-  color: #aaa;
-  cursor: pointer;
-  z-index: 10;
-  transition: color 0.2s;
+/* ── Scrollable navs (no scrollbar) ─────────────────────────────────────── */
+#illus-sub-tabs,
+#floating-tabs,
+#section-switcher {
+  overflow-x: auto;
+  scrollbar-width: none;
 }
-#illustration-modal #modal-close:hover {
-  color: #333;
+#illus-sub-tabs::-webkit-scrollbar,
+#floating-tabs::-webkit-scrollbar,
+#section-switcher::-webkit-scrollbar { display: none; }
+
+/* ── GitHub user badge ──────────────────────────────────────────────────── */
+#gh-user-badge { display: none; }
+#gh-user-badge.connected { display: flex; }
+
+/* ── Card grid items — slide-up action bar ──────────────────────────────── */
+.copy-container { position: relative; }
+.copy-container .action-bar {
+  transform: translateY(100%);
+  transition: transform 0.15s ease-out;
 }
-@media (max-width: 600px) {
-  #illustration-modal .modal-content {
-    padding: 1rem;
-    max-width: 98vw;
-  }
-  #illustration-modal .modal-image img {
-    width: 140px;
-    height: 140px;
-  }
+.copy-container:hover .action-bar {
+  transform: translateY(0);
 }
 
 /* ── Alphabet strip ─────────────────────────────────────────────────────── */
 #alphabet-strip {
   display: flex;
   flex-wrap: wrap;
-  justify-content: center;
-  gap: 0.25rem;
-}
-
-/* ── Tab nav horizontal scroll ──────────────────────────────────────────── */
-#main-tabs {
-  overflow-x: auto;
-  scrollbar-width: none;
-}
-#main-tabs::-webkit-scrollbar { display: none; }
-#floating-tabs { scrollbar-width: none; }
-#floating-tabs::-webkit-scrollbar { display: none; }
-
-/* ── GitHub user badge flex ─────────────────────────────────────────────── */
-#gh-user-badge[style*="flex"] { display: flex !important; }
-
-/* ── Integration card image sizing ─────────────────────────────────────── */
-.dot-integration img {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
+  align-items: center;
+  gap: 0.125rem;
+  row-gap: 0.25rem;
 }

package/demo/github-upload.js

@@ -15,20 +15,54 @@ const GITHUB_UPLOAD_CONFIG = {
   REPO_NAME: 'dot-illustrations',
   BASE_BRANCH: 'main',
   SCOPES: 'public_repo',
+  LOCAL_PROXY: 'http://localhost:3001', // run: node demo/local-proxy.js
 };
 
-// ─── In-memory token (never persisted — cleared when page closes) ────────────
+// ─── In-memory only — never stored, cleared on page close ────────────────────
 
-let _ghToken = null;
-let _ghUser  = null;
+let _ghToken    = null;
+let _ghUser     = null;
+let _usingProxy = false;
 
 function ghGetToken()  { return _ghToken; }
 function ghSetToken(t) { _ghToken = t; }
-function ghClearToken() { _ghToken = null; _ghUser = null; }
+function ghClearToken() { _ghToken = null; _ghUser = null; _usingProxy = false; }
+
+// ─── Auto-connect via local proxy ────────────────────────────────────────────
+// Called once on page load. If `node demo/local-proxy.js` is running, the user
+// is authenticated automatically using their existing `gh auth` credentials —
+// no token input required.
+
+async function ghTryLocalProxy() {
+  try {
+    const resp = await fetch(`${GITHUB_UPLOAD_CONFIG.LOCAL_PROXY}/whoami`, {
+      signal: AbortSignal.timeout(900),
+    });
+    if (!resp.ok) return null;
+    const data = await resp.json();
+    if (data.login) {
+      _usingProxy = true;
+      _ghToken    = '__proxy__'; // sentinel; actual auth lives in the proxy process
+      return data;
+    }
+  } catch { /* proxy not running */ }
+  return null;
+}
 
 // ─── GitHub API helpers ──────────────────────────────────────────────────────
 
 async function ghApi(path, opts = {}) {
+  // Route through local proxy when available (no token exposed to browser)
+  if (_usingProxy) {
+    const resp = await fetch(`${GITHUB_UPLOAD_CONFIG.LOCAL_PROXY}${path}`, {
+      ...opts,
+      headers: { 'Content-Type': 'application/json', ...(opts.headers || {}) },
+    });
+    const data = await resp.json();
+    if (!resp.ok) throw new Error(data.message || `GitHub API error ${resp.status}`);
+    return data;
+  }
+
   const token = ghGetToken();
   const resp = await fetch(`https://api.github.com${path}`, {
     ...opts,
@@ -279,6 +313,7 @@ window.GitHubUpload = {
   setToken:              ghSetToken,
   clearToken:            ghClearToken,
   getUser:               ghGetUser,
+  tryLocalProxy:         ghTryLocalProxy,
   startDeviceFlow:       ghStartDeviceFlow,
   pollForToken:          ghPollForToken,
   createIllustrationPR:  ghCreateIllustrationPR,