add: solid-app-template scaffold + new-app script

Cuts new-app boilerplate from ~30 min to ~2 min.

  npm run new-app -- contacts AddressBook 📒 "An address book"

Generates <slug>/{index.html, app.json, <slug>-view-pane.js} from
template/, then prints the 6-repo checklist. Existing apps still hand-
written; this is opt-in for the next one.

build.js: skip template/ from the apps catalog.

Author: melvincarvalho

package.json

@@ -5,7 +5,8 @@
   "type": "module",
   "scripts": {
     "validate": "node scripts/validate.js",
-    "build": "node scripts/build.js"
+    "build": "node scripts/build.js",
+    "new-app": "node scripts/new-app.js"
   },
   "devDependencies": {
     "ajv": "^8.17.0",

scripts/build.js

@@ -7,7 +7,7 @@ const ROOT = path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), ".."
 
 const RESERVED = new Set([
   "schema", "scripts", "node_modules", ".github", ".git", ".claude",
-  "assets", "vendor", "spec", "demo"
+  "assets", "vendor", "spec", "demo", "template"
 ]);
 
 const isAppDir = (name) => {

scripts/new-app.js

@@ -0,0 +1,76 @@
+#!/usr/bin/env node
+// Scaffold a new app from template/.
+//
+// Usage:
+//   npm run new-app -- <slug> <Type> <icon> <description>
+//   npm run new-app -- contacts AddressBook 📒 "An address book"
+//
+// Creates <slug>/{index.html, app.json, <slug>-view-pane.js} from
+// template/, substituting placeholders. Then prints a 6-repo checklist.
+
+import fs from "node:fs";
+import path from "node:path";
+import url from "node:url";
+
+const ROOT = path.resolve(path.dirname(url.fileURLToPath(import.meta.url)), "..");
+const TEMPLATE = path.join(ROOT, "template");
+
+const args = process.argv.slice(2);
+if (args.length < 4) {
+  console.error("Usage: npm run new-app -- <slug> <Type> <icon> <description>");
+  console.error('Example: npm run new-app -- contacts AddressBook 📒 "An address book"');
+  process.exit(1);
+}
+
+const [slug, type, icon, description] = args;
+
+if (!/^[a-z][a-z0-9-]*$/.test(slug)) {
+  console.error("slug must be lowercase, alphanumeric + dashes (e.g. 'address-book')");
+  process.exit(1);
+}
+if (!/^[A-Z][A-Za-z0-9]*$/.test(type)) {
+  console.error("type must be PascalCase (e.g. 'AddressBook')");
+  process.exit(1);
+}
+
+const dest = path.join(ROOT, slug);
+if (fs.existsSync(dest)) {
+  console.error(`${slug}/ already exists — refusing to overwrite`);
+  process.exit(1);
+}
+
+const today = new Date().toISOString().slice(0, 10);
+const label = type.replace(/([A-Z])/g, ' $1').trim();
+
+const subst = (s) => s
+  .replaceAll("{{SLUG}}", slug)
+  .replaceAll("{{TYPE}}", type)
+  .replaceAll("{{LABEL}}", label)
+  .replaceAll("{{ICON}}", icon)
+  .replaceAll("{{DESCRIPTION}}", description)
+  .replaceAll("{{TODAY}}", today);
+
+fs.mkdirSync(dest);
+
+const writes = [
+  ["index.html", "index.html"],
+  ["app.json", "app.json"],
+  ["view-pane.js", `${slug}-view-pane.js`],
+];
+
+for (const [src, out] of writes) {
+  const content = subst(fs.readFileSync(path.join(TEMPLATE, src), "utf8"));
+  fs.writeFileSync(path.join(dest, out), content);
+  console.log(`  wrote ${slug}/${out}`);
+}
+
+console.log(`\n  ${slug}/ scaffolded for urn:solid:${type}\n`);
+console.log("Next — make sure these are in place across the 6 repos:");
+console.log(`  1. urn-solid:    Class term ${type}/index.json (+ any new properties)`);
+console.log(`  2. solid-schema: ${type}/index.json (JSON Schema)`);
+console.log(`  3. solid-shapes: npm run build  (auto-derives from solid-schema)`);
+console.log(`  4. solid-ui:     npm run build  (auto-derives from solid-schema)`);
+console.log(`  5. solid-panes:  ${type}/index.json manifest`);
+console.log(`  6. solid-apps:   edit ${slug}/index.html — replace the sample data`);
+console.log(`                   then npm run build && commit + push`);
+console.log("\nIf any of 1-5 are missing the Edit/View tabs will not appear.\n");

template/app.json

@@ -0,0 +1,10 @@
+{
+  "name": "{{LABEL}}",
+  "description": "{{DESCRIPTION}}",
+  "entry": "./index.html",
+  "types": ["urn:solid:{{TYPE}}"],
+  "icon": "{{ICON}}",
+  "author": "Melvin Carvalho",
+  "status": "stable",
+  "added": "{{TODAY}}"
+}

template/index.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{LABEL}} — solid-apps</title>
+<style>
+  * { margin: 0; box-sizing: border-box; }
+  body { font-family: 'Inter', -apple-system, sans-serif; background: #fafaf8; }
+  #losos { max-width: 100% !important; }
+  #losos > div { max-width: 100% !important; width: 100% !important; }
+</style>
+</head>
+<body>
+
+<!-- Sample data: edit this to fit your type. See the JSON Schema at
+     https://solid-schema.github.io/{{TYPE}}/index.json for the field list. -->
+<script type="application/ld+json">
+{
+  "@context": { "@vocab": "urn:solid:" },
+  "@id": "#this",
+  "@type": "{{TYPE}}",
+  "title": "Edit me"
+}
+</script>
+
+<!-- Login: Nostr + Solid in one tag. -->
+<script src="https://unpkg.com/xlogin"></script>
+
+<!-- Panes — bespoke {{LABEL}} view first, then schema-driven. -->
+<script type="module" data-pane src="./{{SLUG}}-view-pane.js"></script>
+<script type="module" data-pane src="https://solid-ui.github.io/ui-pane.js"></script>
+<script type="module" data-pane src="https://losos.org/panes/schema-pane.js"></script>
+<script type="module" data-pane src="https://solid-panes.github.io/schema-view.js"></script>
+<script type="module" data-pane src="https://losos.org/panes/source-pane.js"></script>
+
+<div id="losos"></div>
+
+<!-- Boot: autoSchema patches $schema, then shell -->
+<script type="module">
+  import { autoSchema } from 'https://solid-panes.github.io/auto-schema.js'
+  const result = await autoSchema()
+  console.log('[{{SLUG}}] autoSchema patched', result.patched, 'island(s),', result.skipped, 'skipped')
+  await import('https://losos.org/losos/shell.js')
+</script>
+
+</body>
+</html>

template/view-pane.js

@@ -0,0 +1,63 @@
+/**
+ * {{LABEL}} view pane — bespoke renderer for urn:solid:{{TYPE}}.
+ *
+ * Reads the JSON-LD data island and renders a custom view. Drop in
+ * alongside ui-pane (Inline) and schema-pane (Edit) — LOSOS shows them
+ * all as tabs.
+ *
+ * AGPL-3.0 — part of solid-apps
+ */
+
+import { html, render } from 'https://losos.org/losos/html.js'
+
+export default {
+  label: '{{LABEL}}',
+  icon: '{{ICON}}',
+
+  canHandle(subject, store) {
+    const node = store.get(subject.value)
+    if (!node) return false
+    const t = store.type(node)
+    if (!t) return false
+    return Array.isArray(t)
+      ? t.some(x => /{{TYPE}}/i.test(x))
+      : /{{TYPE}}/i.test(t)
+  },
+
+  render(subject, lionStore, container, rawData) {
+    let data = rawData
+    if (!data) {
+      const dataEl = document.querySelector('script[type="application/ld+json"]')
+      try { data = JSON.parse(dataEl.textContent) } catch { return }
+    }
+
+    const title = data.title || data.name || data['@id'] || '{{LABEL}}'
+
+    render(container, html`
+      <style>
+        .v-bg {
+          min-height: 100vh;
+          background: linear-gradient(180deg, #fafaf8 0%, #f0efeb 100%);
+          padding: 56px 24px 96px;
+        }
+        .v-card {
+          max-width: 640px; margin: 0 auto;
+          background: #fff;
+          border: 1px solid #e5e3de;
+          border-radius: 16px;
+          padding: 40px 36px;
+        }
+        .v-title {
+          font: 500 28px/1.2 Georgia, serif;
+          color: #1a1a1a; margin: 0;
+        }
+      </style>
+      <div class="v-bg">
+        <div class="v-card">
+          <h1 class="v-title">${title}</h1>
+          <!-- TODO: add fields from your data here -->
+        </div>
+      </div>
+    `)
+  }
+}