nowebcli 0.2.10 → 0.2.11

package/lib/customizations.ts

@@ -2,6 +2,7 @@ export type ScalarType =
   | "text"
   | "markdown"
   | "image"
+  | "file"
   | "icon"
   | "color"
   | "number"
@@ -37,7 +38,7 @@ export type TemplateCustomization = FieldOptions & {
 };
 
 const SCALAR_TYPES: ScalarType[] = [
-  "text", "markdown", "image", "icon", "color",
+  "text", "markdown", "image", "file", "icon", "color",
   "number", "range", "boolean", "select",
 ];
 

package/lib/template-cover.ts

@@ -0,0 +1,25 @@
+export function validateTemplateCover(bytes: Uint8Array) {
+  if (bytes.length > 5 * 1024 * 1024) throw new Error("public/cover.jpg must be at most 5 MB.");
+  if (bytes[0] !== 0xff || bytes[1] !== 0xd8) throw new Error("public/cover.jpg must be a valid JPEG.");
+  const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
+  let offset = 2;
+  while (offset + 4 <= bytes.length) {
+    if (bytes[offset++] !== 0xff) break;
+    while (bytes[offset] === 0xff) offset++;
+    const marker = bytes[offset++];
+    if (marker === 0xda || marker === 0xd9 || offset + 2 > bytes.length) break;
+    const length = view.getUint16(offset);
+    if (length < 2 || offset + length > bytes.length) break;
+    if ([0xc0, 0xc1, 0xc2, 0xc3, 0xc5, 0xc6, 0xc7, 0xc9, 0xca, 0xcb, 0xcd, 0xce, 0xcf].includes(marker)) {
+      if (length < 8) break;
+      const height = view.getUint16(offset + 3);
+      const width = view.getUint16(offset + 5);
+      if (!width || !height || width * 9 !== height * 16) {
+        throw new Error(`public/cover.jpg must have a 16:9 aspect ratio (received ${width}×${height}).`);
+      }
+      return;
+    }
+    offset += length;
+  }
+  throw new Error("public/cover.jpg must be a valid JPEG with readable dimensions.");
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nowebcli",
-  "version": "0.2.10",
+  "version": "0.2.11",
   "description": "Create, preview and publish community templates for Noweb",
   "license": "MIT",
   "repository": {
@@ -9,6 +9,7 @@
   },
   "files": [
     "lib/customizations.ts",
+    "lib/template-cover.ts",
     "public/fonts/templates",
     "scripts/noweb.mjs",
     "templates/compileTailwind.ts",
@@ -45,6 +46,7 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1055.0",
     "@heroicons/react": "^2.2.0",
+    "@lucasmarkes/hairline": "^0.3.0",
     "@monaco-editor/react": "^4.7.0",
     "@polar-sh/better-auth": "^1.8.4",
     "@polar-sh/nextjs": "^0.9.6",

package/scripts/noweb.mjs

@@ -33,6 +33,7 @@ function usage() {
   setup           install local React and TypeScript dependencies
   dev             preview at http://127.0.0.1:4173
   check           validate and compile this template
+  cover           create public/cover.jpg locally (1920×1080; --force to replace)
   login           connect the CLI to your Noweb account
   list            list your uploaded templates
   download <slug>    restore one into the current folder
@@ -57,7 +58,7 @@ async function createTemplate(value) {
     writeFile(join(directory, "public/.gitkeep"), ""),
   ]);
   await setupWorkspace(shouldInstall);
-  console.log(`Created ${validSlug} in ${directory}`);
+  console.log(`Created ${validSlug} in ${directory}. Add a 16:9 public/cover.jpg (JPEG, up to 5 MB).`);
 }
 
 async function setupWorkspace(install = true) {
@@ -94,7 +95,7 @@ async function checkProject(quiet = false) {
   return result;
 }
 
-async function buildTemplate(directory, slugOverride, assetBase = "/assets") {
+async function buildTemplate(directory, slugOverride, assetBase = "/assets", requireCover = true) {
   const [metadataSource, source, customizationsSource] = await Promise.all([
     readFile(join(directory, "template.json"), "utf8"),
     readFile(join(directory, "Template.tsx"), "utf8"),
@@ -120,12 +121,74 @@ async function buildTemplate(directory, slugOverride, assetBase = "/assets") {
   for (const match of source.matchAll(/\bcustom\(\s*(\d+)\s*\)/g)) {
     if (!ids.includes(Number(match[1]))) throw new Error(`${currentSlug}: custom(${match[1]}) has no customization.`);
   }
+  const coverPath = join(directory, "public", "cover.jpg");
+  let cover = null;
+  if (requireCover) {
+    if (!existsSync(coverPath)) throw new Error("Add a required 16:9 public/cover.jpg before uploading (run `noweb cover`).");
+    cover = await readFile(coverPath);
+    const { validateTemplateCover } = await load("lib/template-cover.ts");
+    validateTemplateCover(cover);
+  }
   const assetFiles = await findAssetFiles(join(directory, "public"));
   const assetHash = createHash("sha256");
   for (const file of assetFiles) assetHash.update(file.path).update(file.body);
   const { js, css } = await compileTemplateAssets(source, customizations, assetBase);
   const versionedJs = assetFiles.length ? `${js}\n/* template-assets:${assetHash.digest("hex")} */` : js;
-  return { ...metadata, assetFiles, css, customizations, fields: customizations.length, js: versionedJs, slug: currentSlug, source };
+  return { ...metadata, assetFiles, cover, css, customizations, fields: customizations.length, js: versionedJs, slug: currentSlug, source };
+}
+
+async function createCover() {
+  const coverPath = join(root, "public", "cover.jpg");
+  const force = cliArgs.includes("--force");
+  if (!force && existsSync(coverPath)) throw new Error("public/cover.jpg already exists. Use `noweb cover --force` to replace it.");
+  const template = await buildTemplate(root, undefined, "/assets", false);
+  const server = createServer(async (request, response) => {
+    try {
+      const pathname = new URL(request.url || "/", "http://127.0.0.1").pathname;
+      if (pathname === "/") {
+        response.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
+        response.end(previewHtml(template));
+      } else {
+        await servePublic(pathname, response);
+      }
+    } catch (error) {
+      response.writeHead(500).end(error instanceof Error ? error.message : String(error));
+    }
+  });
+  const { chromium } = await import("playwright");
+  let browser;
+  try {
+    await new Promise((resolve, reject) => {
+      server.once("error", reject);
+      server.listen(0, "127.0.0.1", resolve);
+    });
+    browser = await chromium.launch({ headless: true, args: ["--enable-unsafe-swiftshader", "--use-angle=swiftshader"] });
+    const page = await browser.newPage({ viewport: { width: 1920, height: 1080 }, deviceScaleFactor: 1 });
+    const errors = [];
+    page.on("pageerror", (error) => errors.push(error.message));
+    page.on("console", (message) => { if (message.type() === "error") errors.push(message.text()); });
+    await page.goto(`http://127.0.0.1:${server.address().port}`, { waitUntil: "load" });
+    await page.waitForFunction(() => document.getElementById("root")?.childElementCount, undefined, { timeout: 15_000 }).catch(() => {
+      throw new Error(`Template did not render: ${errors.slice(0, 3).join("; ") || "empty preview"}`);
+    });
+    await page.evaluate(async () => {
+      await Promise.race([
+        Promise.all([document.fonts.ready, ...Array.from(document.images, (image) => image.decode().catch(() => undefined))]),
+        new Promise((resolve) => setTimeout(resolve, 10_000)),
+      ]);
+    });
+    await page.waitForTimeout(5000);
+    const bytes = await page.screenshot({ type: "jpeg", quality: 90, fullPage: false });
+    const { validateTemplateCover } = await load("lib/template-cover.ts");
+    validateTemplateCover(bytes);
+    await mkdir(join(root, "public"), { recursive: true });
+    await writeFile(coverPath, bytes, { flag: force ? "w" : "wx" });
+    console.log("Created public/cover.jpg (1920×1080, 16:9). Check the image before uploading.");
+  } finally {
+    await browser?.close();
+    server.closeAllConnections();
+    await new Promise((resolve) => server.close(resolve));
+  }
 }
 
 async function dev() {
@@ -172,6 +235,7 @@ async function upload() {
   form.set("source", template.source);
   form.set("customizations", JSON.stringify(template.customizations));
   form.set("assetPaths", JSON.stringify(template.assetFiles.map((file) => file.path)));
+  form.set("cover", new Blob([template.cover], { type: "image/jpeg" }), "cover.jpg");
   for (const file of template.assetFiles) {
     form.append("assets", new Blob([file.body]), basename(file.path));
   }
@@ -406,41 +470,45 @@ async function publish(value) {
   const sql = postgres(databaseUrl, { connect_timeout: 10, max: 1 });
 
   try {
-    for (const template of templates) {
-      await uploadTemplateAssets(template, storageApi.createObjectStorageClient(storage), storage.bucketName);
-      const [published] = await sql`
-        INSERT INTO templates (
-          slug, type, component, compiled_js, compiled_css, customizations, author_id, is_published
-        ) VALUES (
-          ${template.slug}, ${template.type}, ${template.source}, ${template.js},
-          ${template.css}, ${sql.json(template.customizations)}, 'github', true
-        )
-        ON CONFLICT (slug) DO UPDATE SET
-          type = EXCLUDED.type,
-          component = EXCLUDED.component,
-          compiled_js = EXCLUDED.compiled_js,
-          compiled_css = EXCLUDED.compiled_css,
-          customizations = EXCLUDED.customizations,
-          is_published = true
-        WHERE templates.type IS DISTINCT FROM EXCLUDED.type
-          OR templates.component IS DISTINCT FROM EXCLUDED.component
-          OR templates.compiled_js IS DISTINCT FROM EXCLUDED.compiled_js
-          OR templates.compiled_css IS DISTINCT FROM EXCLUDED.compiled_css
-          OR templates.customizations::jsonb IS DISTINCT FROM EXCLUDED.customizations::jsonb
-          OR templates.is_published IS DISTINCT FROM true
-        RETURNING id
-      `;
+    for (const original of templates) {
+      const published = await sql.begin(async (transaction) => {
+        await transaction`SELECT pg_advisory_xact_lock(hashtextextended(${original.slug}, 0))`;
+        let [reserved] = await transaction`SELECT id FROM templates WHERE slug = ${original.slug} FOR UPDATE`;
+        if (!reserved) {
+          [reserved] = await transaction`
+            INSERT INTO templates (slug, type, component, compiled_js, compiled_css, customizations, author_id, is_published)
+            VALUES (${original.slug}, ${original.type}, ${original.source}, '', '', ${transaction.json(original.customizations)}, 'github', false) RETURNING id
+          `;
+        }
+        const { rewriteProjectAssetReferences } = await load("lib/project-template-snapshot.ts");
+        const template = { ...original, ...rewriteProjectAssetReferences(
+          { js: original.js, css: original.css, source: original.source, customizations: original.customizations },
+          new Map([[`${publicUrl}/template-assets/${original.slug}`, `${publicUrl}/templates/${reserved.id}`]]),
+        ) };
+        await uploadTemplateAssets(template, storageApi.createObjectStorageClient(storage), storage.bucketName, reserved.id);
+        const [updated] = await transaction`
+          UPDATE templates SET
+            type = ${template.type}, component = ${template.source},
+            compiled_js = ${template.js}, compiled_css = ${template.css},
+            customizations = ${transaction.json(template.customizations)}, is_published = true
+          WHERE id = ${reserved.id} AND (
+            type IS DISTINCT FROM ${template.type}
+            OR component IS DISTINCT FROM ${template.source}
+            OR compiled_js IS DISTINCT FROM ${template.js}
+            OR compiled_css IS DISTINCT FROM ${template.css}
+            OR customizations::jsonb IS DISTINCT FROM ${transaction.json(template.customizations)}::jsonb
+            OR is_published IS DISTINCT FROM true
+          )
+          RETURNING id
+        `;
+        return updated;
+      });
       if (!published) {
-        console.log(`Unchanged ${template.slug}`);
+        console.log(`Unchanged ${original.slug}`);
         continue;
       }
-      const screenshot = spawnSync(
-        process.execPath,
-        ["--import", "tsx", "scripts/generate-template-screenshots.ts", String(published.id)],
-        { cwd: root, env: process.env, stdio: "inherit" },
-      );
-      if (screenshot.status !== 0) throw new Error(`Could not generate preview for ${template.slug}.`);
-      console.log(`Published ${template.slug} as template ${published.id}`);
+      await (await load("lib/template-screenshot.ts")).generateTemplatePreview(Number(published.id));
+      console.log(`Published ${original.slug} as template ${published.id}`);
     }
   } finally {
     await sql.end({ timeout: 5 });
@@ -527,18 +595,21 @@ function resolveAssetValue(value, assetBase) {
   return value;
 }
 
-async function uploadTemplateAssets(template, client, bucketName) {
-  if (!template.assetFiles.length) return;
+async function uploadTemplateAssets(template, client, bucketName, templateId) {
   const { PutObjectCommand } = await import("@aws-sdk/client-s3");
   for (const file of template.assetFiles) {
     await client.send(new PutObjectCommand({
       Bucket: bucketName,
-      Key: `template-assets/${template.slug}/${file.path}`,
+      Key: `templates/${templateId}/${file.path}`,
       Body: file.body,
       CacheControl: "public, max-age=0, must-revalidate",
       ContentType: mimeTypes[extname(file.path).toLowerCase()] || "application/octet-stream",
     }));
   }
+  await client.send(new PutObjectCommand({
+    Bucket: bucketName, Key: `template-previews/${templateId}.jpg`, Body: template.cover,
+    CacheControl: "public, max-age=0, must-revalidate", ContentType: "image/jpeg",
+  }));
 }
 
 function previewHtml(template) {
@@ -657,6 +728,7 @@ try {
   else if (command === "setup") await setupWorkspace(shouldInstall);
   else if (command === "check") await (slug && engineRoot === root ? checkRepositoryTemplates(slug) : checkProject());
   else if (command === "dev") await dev();
+  else if (command === "cover") await createCover();
   else if (command === "login") await login();
   else if (command === "list") await listTemplates();
   else if (command === "download") await downloadTemplate(slug);