npm - instadash-embed - Versions diffs - 0.1.0 - Mend

instadash-embed 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2) hide show

package/embed.html +298 -0
package/package.json +20 -0

package/embed.html ADDED Viewed

@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<title>Instadash</title>
+<style>
+*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
+:root{
+  --bg:#1B1F24;--bg-1:#1F242A;--bg-2:#252B32;
+  --fg:#E8EAED;--fg-2:#9CA3AF;--fg-3:#6B7280;
+  --line:rgba(255,255,255,.07);
+  --accent:#00E5FF;--lime:#39D353;--warn:#F5A623;
+  --mono:'SF Mono','Fira Code','Consolas',monospace;
+}
+html,body{height:100%;overflow:hidden}
+body{background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,sans-serif;font-size:13px;display:flex;flex-direction:column}
+/* ── Header ─────────────────────────────────────────────────── */
+.bar{
+  display:flex;align-items:center;gap:8px;
+  padding:7px 12px;
+  background:var(--bg-1);
+  border-bottom:1px solid var(--line);
+  flex-shrink:0;
+}
+.mark{
+  width:18px;height:18px;
+  display:flex;align-items:center;justify-content:center;
+  border:1px solid var(--accent);border-radius:3px;
+  color:var(--accent);font-family:var(--mono);font-size:10px;font-weight:700;
+  flex-shrink:0;
+}
+.wordmark{font-size:12px;font-weight:700;letter-spacing:-.025em;color:var(--fg);flex-shrink:0}
+.wordmark span{color:var(--accent)}
+.grid-title{
+  font-size:12px;color:var(--fg-2);
+  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
+  flex:1;min-width:0;padding-left:4px;
+  font-family:var(--mono);
+}
+.open-link{
+  color:var(--accent);font-size:11px;font-family:var(--mono);
+  text-decoration:none;flex-shrink:0;white-space:nowrap;
+}
+.open-link:hover{text-decoration:underline}
+/* ── Status bar ─────────────────────────────────────────────── */
+.statusbar{
+  display:flex;align-items:center;
+  padding:3px 12px;
+  border-bottom:1px solid var(--line);
+  flex-shrink:0;
+}
+.rowcount{font-size:10px;color:var(--fg-3);font-family:var(--mono)}
+/* ── Table ──────────────────────────────────────────────────── */
+.wrap{flex:1;overflow:auto}
+table{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:12px}
+thead th{
+  background:var(--bg-1);
+  padding:7px 12px;
+  text-align:left;font-size:11px;font-weight:600;color:var(--fg-2);
+  border-bottom:1px solid var(--line);
+  position:sticky;top:0;z-index:1;
+  white-space:nowrap;cursor:pointer;user-select:none;
+}
+thead th:hover{color:var(--fg)}
+thead th.sorted{color:var(--accent)}
+thead th.num{text-align:right}
+tbody td{
+  padding:6px 12px;
+  border-bottom:1px solid rgba(255,255,255,.03);
+  max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
+}
+tbody tr:nth-child(even) td{background:var(--bg-1)}
+tbody tr:hover td{background:var(--bg-2)}
+td.num{text-align:right;color:var(--warn)}
+td.url a{color:var(--accent);text-decoration:none}
+td.url a:hover{text-decoration:underline}
+td.bool .t{color:var(--lime)}
+td.bool .f{color:var(--fg-3)}
+/* ── Chips ──────────────────────────────────────────────────── */
+.chip{
+  display:inline-block;
+  padding:1px 6px;border-radius:3px;
+  font-size:10px;border:1px solid;white-space:nowrap;
+}
+.c0{color:#00E5FF;border-color:rgba(0,229,255,.3);background:rgba(0,229,255,.06)}
+.c1{color:#39D353;border-color:rgba(57,211,83,.3);background:rgba(57,211,83,.06)}
+.c2{color:#F5A623;border-color:rgba(245,166,35,.3);background:rgba(245,166,35,.06)}
+.c3{color:#BF5AF2;border-color:rgba(191,90,242,.3);background:rgba(191,90,242,.06)}
+.c4{color:#FF6B6B;border-color:rgba(255,107,107,.3);background:rgba(255,107,107,.06)}
+.c5{color:#9CA3AF;border-color:rgba(156,163,175,.3);background:rgba(156,163,175,.06)}
+/* ── States ─────────────────────────────────────────────────── */
+.state{
+  position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
+  flex-direction:column;gap:8px;
+  background:var(--bg);color:var(--fg-3);font-family:var(--mono);font-size:12px;
+}
+.state .err{color:#FF6B6B}
+.state a{color:var(--accent);margin-top:8px}
+</style>
+</head>
+<body>
+<div class="bar">
+  <div class="mark">›</div>
+  <div class="wordmark">insta<span>dash</span></div>
+  <div class="grid-title" id="grid-title"></div>
+  <a class="open-link" id="open-link" href="#" target="_blank" rel="noopener">open grid ↗</a>
+</div>
+<div id="root"><div class="state">Loading…</div></div>
+<script>
+(function () {
+  var p = new URLSearchParams(location.search)
+  var handle = p.get('handle') || ''
+  var slug   = p.get('slug')   || ''
+  var base   = 'https://instadash.io'
+  var gridUrl = base + '/' + handle + '/' + slug
+  document.getElementById('open-link').href = gridUrl
+  if (!handle || !slug) {
+    setRoot('<div class="state"><span class="err">Missing ?handle= and ?slug= params</span></div>')
+    return
+  }
+  // ── Type detection ──────────────────────────────────────────
+  function detectType(values) {
+    var nonNull = values.filter(function(v){ return v !== null && v !== undefined && v !== '' })
+    if (!nonNull.length) return 'string'
+    if (nonNull.every(function(v){ return v === true || v === false || v === 'true' || v === 'false' })) return 'bool'
+    if (nonNull.every(function(v){
+      var s = String(v).replace(/[$,%]/g, '')
+      return !isNaN(parseFloat(s)) && isFinite(s)
+    })) return 'num'
+    if (nonNull.every(function(v){ return typeof v === 'string' && /^https?:\/\//.test(v) })) return 'url'
+    var distinct = unique(nonNull.map(function(v){ return String(v) }))
+    if (distinct.length <= 10 && distinct.every(function(v){ return v.length <= 28 })) return 'chip'
+    return 'string'
+  }
+  function unique(arr) {
+    return arr.filter(function(v, i, a){ return a.indexOf(v) === i })
+  }
+  // Per-column chip color maps
+  var colMaps = {}
+  function chipCls(col, val) {
+    if (!colMaps[col]) colMaps[col] = { m: {}, n: 0 }
+    var cm = colMaps[col], k = String(val).toLowerCase()
+    if (!(k in cm.m)) cm.m[k] = cm.n++ % 6
+    return 'chip c' + cm.m[k]
+  }
+  // ── Sort state ──────────────────────────────────────────────
+  var sortCol = null, sortDir = 'asc'
+  function esc(s) {
+    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;')
+  }
+  function renderTable(rows, meta) {
+    if (!rows.length) {
+      setRoot('<div class="state">No rows found</div>')
+      return
+    }
+    var cols = Object.keys(rows[0])
+    var types = {}
+    cols.forEach(function(col) {
+      types[col] = detectType(rows.map(function(r){ return r[col] }))
+    })
+    // Pre-seed chip colors for stable ordering
+    colMaps = {}
+    cols.forEach(function(col) {
+      if (types[col] === 'chip') {
+        unique(rows.map(function(r){ return String(r[col] ?? '') })).forEach(function(v){ chipCls(col, v) })
+      }
+    })
+    // Sort
+    var sorted = rows.slice()
+    if (sortCol && cols.indexOf(sortCol) >= 0) {
+      var t = types[sortCol]
+      sorted.sort(function(a, b) {
+        var va = a[sortCol] ?? '', vb = b[sortCol] ?? ''
+        if (t === 'num') {
+          va = parseFloat(String(va).replace(/[$,%]/g, '')) || 0
+          vb = parseFloat(String(vb).replace(/[$,%]/g, '')) || 0
+        } else {
+          va = String(va).toLowerCase()
+          vb = String(vb).toLowerCase()
+        }
+        return va < vb ? (sortDir === 'asc' ? -1 : 1) : va > vb ? (sortDir === 'asc' ? 1 : -1) : 0
+      })
+    }
+    // Header
+    var ths = cols.map(function(col) {
+      var isSorted = sortCol === col
+      var cls = (types[col] === 'num' ? ' num' : '') + (isSorted ? ' sorted' : '')
+      var icon = isSorted ? (sortDir === 'asc' ? ' ↑' : ' ↓') : ''
+      return '<th class="' + cls.trim() + '" data-col="' + esc(col) + '">' + esc(col) + '<span style="opacity:.5;margin-left:3px">' + (icon || ' ↕') + '</span></th>'
+    }).join('')
+    // Rows
+    var trs = sorted.map(function(row) {
+      var tds = cols.map(function(col) {
+        var v = row[col]
+        var t = types[col]
+        var s = v === null || v === undefined ? '' : String(v)
+        if (t === 'url' && s) {
+          return '<td class="url"><a href="' + esc(s) + '" target="_blank" rel="noopener">' + esc(s) + '</a></td>'
+        }
+        if (t === 'bool') {
+          var isTrue = v === true || v === 'true' || v === 1 || v === '1'
+          return '<td class="bool"><span class="' + (isTrue ? 't' : 'f') + '">' + (isTrue ? '✓' : '✗') + '</span></td>'
+        }
+        if (t === 'num') {
+          return '<td class="num">' + esc(s) + '</td>'
+        }
+        if (t === 'chip' && s) {
+          return '<td><span class="' + chipCls(col, s) + '">' + esc(s) + '</span></td>'
+        }
+        return '<td title="' + esc(s) + '">' + esc(s) + '</td>'
+      }).join('')
+      return '<tr>' + tds + '</tr>'
+    }).join('')
+    var title = meta ? (meta.title || (handle + '/' + slug)) : (handle + '/' + slug)
+    var total = meta ? meta.rows : rows.length
+    document.getElementById('grid-title').textContent = title
+    setRoot(
+      '<div class="statusbar"><span class="rowcount">' +
+        sorted.length + (sorted.length < total ? ' of ' + total : '') + ' rows · ' +
+        cols.length + ' columns · click header to sort' +
+      '</span></div>' +
+      '<div class="wrap"><table>' +
+        '<thead><tr>' + ths + '</tr></thead>' +
+        '<tbody>' + trs + '</tbody>' +
+      '</table></div>'
+    )
+    document.querySelectorAll('thead th').forEach(function(th) {
+      th.addEventListener('click', function() {
+        var col = th.dataset.col
+        if (sortCol === col) {
+          sortDir = sortDir === 'asc' ? 'desc' : 'asc'
+        } else {
+          sortCol = col; sortDir = 'asc'
+        }
+        renderTable(rows, meta)
+      })
+    })
+  }
+  function setRoot(html) {
+    document.getElementById('root').innerHTML = html
+  }
+  // ── Fetch ───────────────────────────────────────────────────
+  Promise.all([
+    fetch(gridUrl + '/rows?limit=2000').then(function(r) {
+      return r.ok ? r.json() : Promise.reject('HTTP ' + r.status)
+    }),
+    fetch(gridUrl + '/meta').then(function(r) {
+      return r.ok ? r.json() : null
+    }).catch(function() { return null }),
+  ])
+  .then(function(res) { renderTable(res[0].rows || [], res[1]) })
+  .catch(function(e) {
+    setRoot(
+      '<div class="state">' +
+        '<span class="err">Could not load grid</span>' +
+        '<span>' + esc(handle + '/' + slug) + ' · ' + esc(String(e)) + '</span>' +
+        '<a href="' + esc(gridUrl) + '" target="_blank" rel="noopener">open in instadash ↗</a>' +
+      '</div>'
+    )
+  })
+})()
+</script>
+</body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,20 @@
+{
+  "name": "instadash-embed",
+  "version": "0.1.0",
+  "description": "Self-contained grid embed widget for instadash.io — works in Claude.ai artifacts via cdn.jsdelivr.net",
+  "license": "MIT",
+  "files": [
+    "embed.html"
+  ],
+  "keywords": [
+    "instadash",
+    "embed",
+    "grid",
+    "data",
+    "mcp"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/instadash-io/embed"
+  }
+}