wiki-plugin-shoppe 0.0.2 → 0.0.4

package/client/shoppe.js

@@ -0,0 +1,267 @@
+(function() {
+
+  window.plugins.shoppe = {
+    emit: function($item, item) {
+      const div = $item[0];
+      div.innerHTML = `
+        <div class="sw">
+          <style>
+            .sw { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 680px; margin: 0 auto; color: #1d1d1f; }
+            .sw h2 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
+            .sw h3 { font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px; }
+            .sw-section { margin-bottom: 24px; }
+            .sw-card { background: #f5f5f7; border-radius: 12px; padding: 18px 20px; margin-bottom: 10px; }
+            .sw-step { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
+            .sw-step:last-child { margin-bottom: 0; }
+            .sw-step-num { background: #0066cc; color: white; border-radius: 50%; width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
+            .sw-step-body { font-size: 14px; line-height: 1.5; color: #333; }
+            .sw-step-body strong { color: #1d1d1f; }
+            .sw-step-body code { background: #e8e8ed; border-radius: 4px; padding: 1px 5px; font-size: 12px; }
+            .sw-tree { font-family: monospace; font-size: 12px; background: #1d1d1f; color: #a8f0a8; border-radius: 8px; padding: 14px 16px; line-height: 1.7; white-space: pre; overflow-x: auto; margin-top: 8px; }
+            .sw-shoppe { display: flex; align-items: center; justify-content: space-between; background: white; border: 1px solid #e5e5ea; border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
+            .sw-shoppe-left { display: flex; flex-direction: column; gap: 2px; }
+            .sw-shoppe-name { font-weight: 600; font-size: 15px; }
+            .sw-shoppe-code { font-size: 18px; letter-spacing: 4px; }
+            .sw-link { font-size: 13px; color: #0066cc; text-decoration: none; white-space: nowrap; }
+            .sw-link:hover { text-decoration: underline; }
+            .sw-empty { font-size: 13px; color: #999; font-style: italic; }
+            .sw-drop { border: 2px dashed #ccc; border-radius: 12px; padding: 28px 20px; text-align: center; background: #fafafa; transition: border-color 0.2s, background 0.2s; cursor: pointer; }
+            .sw-drop.dragover { border-color: #0066cc; background: #e8f0fe; }
+            .sw-drop p { font-size: 13px; color: #888; margin: 6px 0 14px; }
+            .sw-btn { display: inline-block; padding: 9px 20px; border-radius: 18px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: background 0.15s; }
+            .sw-btn-blue  { background: #0066cc; color: white; }
+            .sw-btn-blue:hover  { background: #0055aa; }
+            .sw-btn-green { background: #10b981; color: white; }
+            .sw-btn-green:hover { background: #059669; }
+            .sw-register { display: flex; gap: 8px; margin-top: 10px; }
+            .sw-register input { flex: 1; padding: 9px 13px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; outline: none; }
+            .sw-register input:focus { border-color: #0066cc; }
+            .sw-status { margin-top: 12px; border-radius: 10px; padding: 13px 16px; font-size: 14px; line-height: 1.5; display: none; }
+            .sw-status.info    { background: #e8f0fe; color: #1a56db; display: block; }
+            .sw-status.success { background: #d1fae5; color: #065f46; display: block; }
+            .sw-status.error   { background: #fee2e2; color: #991b1b; display: block; }
+            .sw-status code { background: rgba(0,0,0,0.08); border-radius: 4px; padding: 1px 5px; font-size: 12px; }
+          </style>
+
+          <!-- Directory -->
+          <div class="sw-section">
+            <h2>🛍️ Shoppe</h2>
+            <p style="font-size:14px;color:#555;margin:4px 0 16px">A multi-tenant digital goods marketplace. Browse the shoppes below, or open one of your own.</p>
+            <h3>Shoppes on this server</h3>
+            <div id="sw-directory"><em class="sw-empty">Loading...</em></div>
+          </div>
+
+          <!-- How to join -->
+          <div class="sw-section">
+            <h3>How to open a shoppe</h3>
+            <div class="sw-card">
+              <div class="sw-step">
+                <div class="sw-step-num">1</div>
+                <div class="sw-step-body"><strong>Ask the wiki owner to register you.</strong> They'll use the form at the bottom of this page and give you a <code>uuid</code> and <code>emojicode</code> — your shoppe's identity.</div>
+              </div>
+              <div class="sw-step">
+                <div class="sw-step-num">2</div>
+                <div class="sw-step-body"><strong>Build your shoppe folder</strong> with this structure, then zip the whole thing:
+                  <div class="sw-tree">my-shoppe.zip
+  manifest.json       ← { "uuid": "…", "emojicode": "…", "name": "My Shoppe" }
+  books/              ← .epub  .pdf  .mobi
+  music/
+    My Album/         ← subfolder = album (add cover.jpg inside)
+      cover.jpg
+      01-track.mp3
+    standalone.mp3    ← file directly here = single track
+  posts/              ← .md files
+  albums/
+    Vacation 2025/    ← subfolder of images = photo album
+      photo1.jpg
+  products/
+    T-Shirt/          ← subfolder = physical product
+      cover.jpg
+      info.json       ← { "title": "…", "description": "…", "price": 25, "shipping": 5 }</div>
+                </div>
+              </div>
+              <div class="sw-step">
+                <div class="sw-step-num">3</div>
+                <div class="sw-step-body"><strong>Drag your .zip onto the upload zone below.</strong> Your goods will be registered and your shoppe will go live immediately.</div>
+              </div>
+              <div class="sw-step">
+                <div class="sw-step-num">4</div>
+                <div class="sw-step-body"><strong>To update your shoppe</strong>, just rebuild your folder and upload a new archive — existing items will be overwritten and new ones added.</div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Upload -->
+          <div class="sw-section">
+            <h3>Upload your archive</h3>
+            <div class="sw-drop" id="sw-drop">
+              <div style="font-size:40px">📦</div>
+              <p>Drag and drop your .zip here, or click to browse.<br>Your <code>manifest.json</code> must contain the <code>uuid</code> and <code>emojicode</code> you were given.</p>
+              <button class="sw-btn sw-btn-blue" id="sw-browse-btn">Choose Archive</button>
+              <input type="file" id="sw-file-input" accept=".zip" style="display:none">
+            </div>
+            <div id="sw-upload-status" class="sw-status"></div>
+          </div>
+
+          <!-- Owner: register -->
+          <div class="sw-section" id="sw-owner-section" style="display:none">
+            <h3>Register a new shoppe (owner only)</h3>
+            <div class="sw-register">
+              <input type="text" id="sw-name-input" placeholder="Shoppe name (e.g. Zach's Art Store)">
+              <button class="sw-btn sw-btn-green" id="sw-register-btn">Register</button>
+            </div>
+            <div id="sw-register-status" class="sw-status"></div>
+          </div>
+
+        </div>
+      `;
+
+      setupListeners(div);
+      loadDirectory(div);
+      checkOwner(div);
+    },
+
+    bind: function($item, item) {}
+  };
+
+  // ── Directory (public) ──────────────────────────────────────────────────────
+
+  async function loadDirectory(container) {
+    const el = container.querySelector('#sw-directory');
+    try {
+      const resp = await fetch('/plugin/shoppe/directory');
+      const result = await resp.json();
+      if (!result.success || result.shoppes.length === 0) {
+        el.innerHTML = '<em class="sw-empty">No shoppes yet — be the first!</em>';
+        return;
+      }
+      el.innerHTML = result.shoppes.map(s => `
+        <div class="sw-shoppe">
+          <div class="sw-shoppe-left">
+            <span class="sw-shoppe-name">${s.name}</span>
+            <span class="sw-shoppe-code">${s.emojicode}</span>
+          </div>
+          <a class="sw-link" href="${s.url}" target="_blank">Visit shoppe →</a>
+        </div>
+      `).join('');
+    } catch (err) {
+      el.innerHTML = '<em class="sw-empty">Could not load directory.</em>';
+    }
+  }
+
+  // ── Owner check ─────────────────────────────────────────────────────────────
+
+  async function checkOwner(container) {
+    try {
+      const resp = await fetch('/plugin/shoppe/tenants');
+      if (resp.ok) {
+        container.querySelector('#sw-owner-section').style.display = 'block';
+      }
+    } catch (err) { /* not owner, stay hidden */ }
+  }
+
+  // ── Listeners ───────────────────────────────────────────────────────────────
+
+  function setupListeners(container) {
+    const drop     = container.querySelector('#sw-drop');
+    const fileInput = container.querySelector('#sw-file-input');
+    const browseBtn = container.querySelector('#sw-browse-btn');
+    const registerBtn = container.querySelector('#sw-register-btn');
+    const nameInput = container.querySelector('#sw-name-input');
+
+    browseBtn.addEventListener('click', () => fileInput.click());
+    fileInput.addEventListener('change', e => {
+      if (e.target.files[0]) uploadArchive(e.target.files[0], container);
+    });
+
+    drop.addEventListener('dragover', e => { e.preventDefault(); drop.classList.add('dragover'); });
+    drop.addEventListener('dragleave', () => drop.classList.remove('dragover'));
+    drop.addEventListener('drop', e => {
+      e.preventDefault();
+      drop.classList.remove('dragover');
+      const file = e.dataTransfer.files[0];
+      if (file && file.name.endsWith('.zip')) {
+        uploadArchive(file, container);
+      } else {
+        showStatus(container, '#sw-upload-status', 'Please drop a .zip archive', 'error');
+      }
+    });
+
+    if (registerBtn) {
+      registerBtn.addEventListener('click', () => registerShoppe(container));
+    }
+  }
+
+  // ── Upload ──────────────────────────────────────────────────────────────────
+
+  async function uploadArchive(file, container) {
+    showStatus(container, '#sw-upload-status', `⏳ Uploading <strong>${file.name}</strong>…`, 'info');
+    const form = new FormData();
+    form.append('archive', file);
+    try {
+      const resp = await fetch('/plugin/shoppe/upload', { method: 'POST', body: form });
+      const result = await resp.json();
+      if (!result.success) throw new Error(result.error || 'Upload failed');
+
+      const r = result.results;
+      const counts = [
+        r.books.length    && `📚 ${r.books.length} book${r.books.length !== 1 ? 's' : ''}`,
+        r.music.length    && `🎵 ${r.music.length} music item${r.music.length !== 1 ? 's' : ''}`,
+        r.posts.length    && `📝 ${r.posts.length} post${r.posts.length !== 1 ? 's' : ''}`,
+        r.albums.length   && `🖼️ ${r.albums.length} album${r.albums.length !== 1 ? 's' : ''}`,
+        r.products.length && `📦 ${r.products.length} product${r.products.length !== 1 ? 's' : ''}`
+      ].filter(Boolean).join(' · ') || 'no items found';
+
+      showStatus(container, '#sw-upload-status',
+        `✅ <strong>${result.tenant.name}</strong> ${result.tenant.emojicode} updated — ${counts}<br>
+         <a href="/plugin/shoppe/${result.tenant.uuid}" target="_blank" class="sw-link" style="display:inline-block;margin-top:8px;">View your shoppe →</a>`,
+        'success');
+      loadDirectory(container);
+    } catch (err) {
+      showStatus(container, '#sw-upload-status', `❌ ${err.message}`, 'error');
+    }
+  }
+
+  // ── Register (owner) ────────────────────────────────────────────────────────
+
+  async function registerShoppe(container) {
+    const nameInput   = container.querySelector('#sw-name-input');
+    const registerBtn = container.querySelector('#sw-register-btn');
+    const name = nameInput.value.trim();
+    if (!name) { showStatus(container, '#sw-register-status', 'Enter a shoppe name first', 'error'); return; }
+
+    registerBtn.disabled = true;
+    registerBtn.textContent = 'Registering…';
+    try {
+      const resp = await fetch('/plugin/shoppe/register', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ name })
+      });
+      const result = await resp.json();
+      if (!result.success) throw new Error(result.error || 'Registration failed');
+
+      nameInput.value = '';
+      showStatus(container, '#sw-register-status',
+        `✅ Registered! Give these to the shoppe owner:<br>
+         UUID: <code>${result.tenant.uuid}</code><br>
+         Emojicode: <strong>${result.tenant.emojicode}</strong>`,
+        'success');
+      loadDirectory(container);
+    } catch (err) {
+      showStatus(container, '#sw-register-status', `❌ ${err.message}`, 'error');
+    } finally {
+      registerBtn.disabled = false;
+      registerBtn.textContent = 'Register';
+    }
+  }
+
+  // ── Helpers ─────────────────────────────────────────────────────────────────
+
+  function showStatus(container, selector, html, type) {
+    const el = container.querySelector(selector);
+    el.className = `sw-status ${type}`;
+    el.innerHTML = html;
+  }
+
+})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wiki-plugin-shoppe",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Multi-tenant digital goods shoppe for federated wiki, powered by Sanora",
   "keywords": [
     "wiki",

package/server/server.js

@@ -557,7 +557,7 @@ async function startServer(params) {
     }
   });
 
-  // List all tenants (owner only)
+  // List all tenants (owner only — includes uuid for management)
   app.get('/plugin/shoppe/tenants', owner, (req, res) => {
     const tenants = loadTenants();
     const safe = Object.values(tenants).map(({ uuid, emojicode, name, createdAt }) => ({
@@ -567,6 +567,16 @@ async function startServer(params) {
     res.json({ success: true, tenants: safe });
   });
 
+  // Public directory — name, emojicode, and shoppe URL only
+  app.get('/plugin/shoppe/directory', (req, res) => {
+    const tenants = loadTenants();
+    const listing = Object.values(tenants).map(({ uuid, emojicode, name }) => ({
+      name, emojicode,
+      url: `/plugin/shoppe/${uuid}`
+    }));
+    res.json({ success: true, shoppes: listing });
+  });
+
   // Upload goods archive (auth via manifest uuid+emojicode)
   app.post('/plugin/shoppe/upload', upload.single('archive'), async (req, res) => {
     try {

package/client/client.js

@@ -1,207 +0,0 @@
-(function() {
-
-  window.plugins.shoppe = {
-    emit: function($item, item) {
-      const div = $item[0];
-      div.innerHTML = `
-        <div class="shoppe-widget">
-          <style>
-            .shoppe-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; max-width: 700px; margin: 0 auto; }
-            .shoppe-drop { border: 2px dashed #ccc; border-radius: 14px; padding: 40px 24px; text-align: center; cursor: pointer; transition: border-color 0.2s, background 0.2s; background: #fafafa; }
-            .shoppe-drop.dragover { border-color: #0066cc; background: #e8f0fe; }
-            .shoppe-drop-icon { font-size: 48px; margin-bottom: 12px; }
-            .shoppe-drop h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; color: #1d1d1f; }
-            .shoppe-drop p { font-size: 13px; color: #888; margin-bottom: 16px; }
-            .shoppe-btn { display: inline-block; padding: 10px 22px; border-radius: 20px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: background 0.15s; }
-            .shoppe-btn-blue { background: #0066cc; color: white; }
-            .shoppe-btn-blue:hover { background: #0055aa; }
-            .shoppe-btn-green { background: #10b981; color: white; }
-            .shoppe-btn-green:hover { background: #059669; }
-            .shoppe-section { margin-top: 20px; }
-            .shoppe-section h4 { font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; }
-            .shoppe-tenant { display: flex; align-items: center; justify-content: space-between; background: white; border: 1px solid #eee; border-radius: 10px; padding: 12px 16px; margin-bottom: 8px; }
-            .shoppe-tenant-info { display: flex; flex-direction: column; gap: 2px; }
-            .shoppe-tenant-name { font-weight: 600; font-size: 14px; }
-            .shoppe-tenant-code { font-size: 16px; letter-spacing: 3px; }
-            .shoppe-tenant-link { font-size: 13px; color: #0066cc; text-decoration: none; }
-            .shoppe-tenant-link:hover { text-decoration: underline; }
-            .shoppe-status { margin-top: 14px; border-radius: 10px; padding: 14px 18px; font-size: 14px; }
-            .shoppe-status.info    { background: #e8f0fe; color: #1a56db; }
-            .shoppe-status.success { background: #d1fae5; color: #065f46; }
-            .shoppe-status.error   { background: #fee2e2; color: #991b1b; }
-            .shoppe-register { display: flex; gap: 8px; margin-top: 12px; }
-            .shoppe-register input { flex: 1; padding: 9px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; }
-            .shoppe-result-counts { margin-top: 8px; font-size: 13px; opacity: 0.8; }
-          </style>
-
-          <!-- Drop zone -->
-          <div class="shoppe-drop" id="shoppe-drop">
-            <div class="shoppe-drop-icon">🛍️</div>
-            <h3>Drop your shoppe archive here</h3>
-            <p>Drag and drop a .zip archive, or click to browse.<br>Archive must contain manifest.json with your uuid and emojicode.</p>
-            <button class="shoppe-btn shoppe-btn-blue" id="shoppe-browse-btn">Choose Archive</button>
-            <input type="file" id="shoppe-file-input" accept=".zip" style="display:none">
-          </div>
-
-          <!-- Register section -->
-          <div class="shoppe-section">
-            <h4>Register New Shoppe</h4>
-            <div class="shoppe-register">
-              <input type="text" id="shoppe-name-input" placeholder="Shoppe name (e.g. Zach's Art Store)">
-              <button class="shoppe-btn shoppe-btn-green" id="shoppe-register-btn">Register</button>
-            </div>
-          </div>
-
-          <!-- Tenant list -->
-          <div class="shoppe-section" id="shoppe-tenants-section">
-            <h4>Active Shoppes</h4>
-            <div id="shoppe-tenants-list"><em style="font-size:13px;color:#999">Loading...</em></div>
-          </div>
-
-          <!-- Status -->
-          <div id="shoppe-status" style="display:none"></div>
-        </div>
-      `;
-
-      setupShoppeListeners(div);
-      loadTenants(div);
-    },
-
-    bind: function($item, item) {}
-  };
-
-  function setupShoppeListeners(container) {
-    const drop = container.querySelector('#shoppe-drop');
-    const fileInput = container.querySelector('#shoppe-file-input');
-    const browseBtn = container.querySelector('#shoppe-browse-btn');
-    const registerBtn = container.querySelector('#shoppe-register-btn');
-    const nameInput = container.querySelector('#shoppe-name-input');
-
-    // Browse button
-    browseBtn.addEventListener('click', () => fileInput.click());
-
-    // File selected via browser
-    fileInput.addEventListener('change', e => {
-      const file = e.target.files[0];
-      if (file) uploadArchive(file, container);
-    });
-
-    // Drag and drop
-    drop.addEventListener('dragover', e => {
-      e.preventDefault();
-      drop.classList.add('dragover');
-    });
-    drop.addEventListener('dragleave', () => drop.classList.remove('dragover'));
-    drop.addEventListener('drop', e => {
-      e.preventDefault();
-      drop.classList.remove('dragover');
-      const file = e.dataTransfer.files[0];
-      if (file && file.name.endsWith('.zip')) {
-        uploadArchive(file, container);
-      } else {
-        showStatus(container, 'Please drop a .zip archive', 'error');
-      }
-    });
-
-    // Register
-    registerBtn.addEventListener('click', async () => {
-      const name = nameInput.value.trim();
-      if (!name) { showStatus(container, 'Enter a shoppe name first', 'error'); return; }
-      registerBtn.disabled = true;
-      registerBtn.textContent = 'Registering...';
-      try {
-        const resp = await fetch('/plugin/shoppe/register', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ name })
-        });
-        const result = await resp.json();
-        if (result.success) {
-          nameInput.value = '';
-          showStatus(container,
-            `✅ Registered! UUID: <code>${result.tenant.uuid}</code><br>Emojicode: <strong>${result.tenant.emojicode}</strong><br>Put these in your manifest.json`,
-            'success');
-          loadTenants(container);
-        } else {
-          throw new Error(result.error || 'Registration failed');
-        }
-      } catch (err) {
-        showStatus(container, `❌ ${err.message}`, 'error');
-      } finally {
-        registerBtn.disabled = false;
-        registerBtn.textContent = 'Register';
-      }
-    });
-  }
-
-  async function uploadArchive(file, container) {
-    showStatus(container, `⏳ Uploading and processing <strong>${file.name}</strong>...`, 'info');
-
-    const form = new FormData();
-    form.append('archive', file);
-
-    try {
-      const resp = await fetch('/plugin/shoppe/upload', { method: 'POST', body: form });
-      const result = await resp.json();
-
-      if (result.success) {
-        const r = result.results;
-        const counts = [
-          r.books.length    && `📚 ${r.books.length} book${r.books.length !== 1 ? 's' : ''}`,
-          r.music.length    && `🎵 ${r.music.length} music item${r.music.length !== 1 ? 's' : ''}`,
-          r.posts.length    && `📝 ${r.posts.length} post${r.posts.length !== 1 ? 's' : ''}`,
-          r.albums.length   && `🖼️ ${r.albums.length} album${r.albums.length !== 1 ? 's' : ''}`,
-          r.products.length && `📦 ${r.products.length} product${r.products.length !== 1 ? 's' : ''}`
-        ].filter(Boolean).join(', ') || 'nothing uploaded';
-
-        showStatus(container,
-          `✅ Uploaded for <strong>${result.tenant.name}</strong> ${result.tenant.emojicode}<br>
-           <div class="shoppe-result-counts">${counts}</div>
-           <a href="/plugin/shoppe/${result.tenant.uuid}" target="_blank" style="display:inline-block;margin-top:10px;color:#0066cc;">View shoppe →</a>`,
-          'success');
-        loadTenants(container);
-      } else {
-        throw new Error(result.error || 'Upload failed');
-      }
-    } catch (err) {
-      showStatus(container, `❌ ${err.message}`, 'error');
-    }
-  }
-
-  async function loadTenants(container) {
-    const list = container.querySelector('#shoppe-tenants-list');
-    if (!list) return;
-    try {
-      const resp = await fetch('/plugin/shoppe/tenants');
-      if (!resp.ok) {
-        list.innerHTML = '<em style="font-size:13px;color:#999">Not available (owner only)</em>';
-        return;
-      }
-      const result = await resp.json();
-      if (!result.success || result.tenants.length === 0) {
-        list.innerHTML = '<em style="font-size:13px;color:#999">No shoppes registered yet.</em>';
-        return;
-      }
-      list.innerHTML = result.tenants.map(t => `
-        <div class="shoppe-tenant">
-          <div class="shoppe-tenant-info">
-            <span class="shoppe-tenant-name">${t.name}</span>
-            <span class="shoppe-tenant-code">${t.emojicode}</span>
-            <code style="font-size:11px;color:#888">${t.uuid}</code>
-          </div>
-          <a class="shoppe-tenant-link" href="${t.url}" target="_blank">View shoppe →</a>
-        </div>
-      `).join('');
-    } catch (err) {
-      list.innerHTML = '<em style="font-size:13px;color:#999">Could not load tenants.</em>';
-    }
-  }
-
-  function showStatus(container, html, type) {
-    const el = container.querySelector('#shoppe-status');
-    el.className = `shoppe-status ${type}`;
-    el.innerHTML = html;
-    el.style.display = 'block';
-  }
-
-})();