@techninja/clearstack 0.3.41 → 0.3.43

package/lib/build-og-images.js

@@ -17,6 +17,8 @@ import { resolveTemplate, renderTemplate, buildContext, loadTokens, WIDTH, HEIGH
  * @property {string} [logo] - Path or URL to logo
  * @property {string} [siteName] - Site name for badge
  * @property {Record<string, unknown>} [context] - Extra interpolation data
+ * @property {(slug: string) => boolean} [filter] - Only render matching slugs
+ * @property {(slug: string, n: number, total: number) => void} [onProgress]
  */
 
 /**
@@ -25,7 +27,7 @@ import { resolveTemplate, renderTemplate, buildContext, loadTokens, WIDTH, HEIGH
  * @returns {Promise<{ images: number, routes: number }>}
  */
 export async function buildOGImages(opts) {
-  const { projectDir, outDir = 'dist', logo, siteName, context = {} } = opts;
+  const { projectDir, outDir = 'dist', logo, siteName, context = {}, filter, onProgress } = opts;
   const routes = loadRoutes(projectDir);
   if (!routes) {
     console.log('⚠ No routes config found. Create clearstack.routes.json');
@@ -37,7 +39,8 @@ export async function buildOGImages(opts) {
   const start = performance.now();
 
   const { chromium } = await import('playwright');
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({ executablePath: process.env.PLAYWRIGHT_EXECUTABLE_PATH });
+  console.log('  Browser ready, rendering...');
   const page = await browser.newPage({ viewport: { width: WIDTH, height: HEIGHT } });
   const out = resolve(projectDir, outDir);
   let images = 0;
@@ -47,6 +50,7 @@ export async function buildOGImages(opts) {
     const isDynamic = pattern.includes(':');
 
     if (!isDynamic) {
+      if (filter) continue;
       const data = { app: { name: siteName }, ...context };
       const ctx = buildContext(config, data, site);
       await screenshot(page, renderTemplate(template, ctx, projectDir), out, pattern);
@@ -57,11 +61,13 @@ export async function buildOGImages(opts) {
       for (const item of items) {
         const slug = item.slug || item.id || item.sku || item[paramName];
         if (!slug) continue;
+        if (filter && !filter(String(slug))) continue;
         const path = pattern.replace(`:${paramName}`, String(slug));
         const data = { [paramName]: item, item, app: { name: siteName }, ...context };
         const ctx = buildContext(config, data, site);
         await screenshot(page, renderTemplate(template, ctx, projectDir), out, path);
         images++;
+        if (onProgress) onProgress(String(slug), images, -1);
       }
     }
   }
@@ -85,7 +91,7 @@ export async function buildOneOGImage(opts) {
   const tokens = loadTokens(projectDir);
   const site = { tokens, logo, siteName };
   const { chromium } = await import('playwright');
-  const browser = await chromium.launch();
+  const browser = await chromium.launch({ executablePath: process.env.PLAYWRIGHT_EXECUTABLE_PATH });
   const page = await browser.newPage({ viewport: { width: WIDTH, height: HEIGHT } });
   const out = resolve(projectDir, outDir);
   let result = '';
@@ -113,7 +119,8 @@ export async function buildOneOGImage(opts) {
 
 /** Render HTML content and save screenshot to disk. */
 async function screenshot(page, html, outDir, routePath) {
-  await page.setContent(html, { waitUntil: 'networkidle' });
+  await page.setContent(html, { waitUntil: 'domcontentloaded' });
+  await page.waitForTimeout(html.includes('fonts.googleapis') ? 2500 : 800);
   const imgPath = routePath === '/'
     ? resolve(outDir, 'og-image.png')
     : resolve(outDir, routePath.slice(1) + '.png');

package/lib/build-og.js

@@ -114,7 +114,7 @@ function resolveMeta(config, data, baseUrl, path) {
 function writePage(outDir, routePath, shell, meta) {
   const filePath = routePath === '/'
     ? resolve(outDir, 'index.html')
-    : resolve(outDir, routePath.slice(1), 'index.html');
+    : resolve(outDir, routePath.slice(1) + '.html');
   mkdirSync(dirname(filePath), { recursive: true });
   writeFileSync(filePath, injectMeta(shell, meta));
 }

package/lib/og-image-template.js

@@ -75,6 +75,14 @@ export function buildContext(config, itemData, site) {
   const resolvedImage = image && !image.startsWith('http') ? `${baseUrl}${image}` : image;
   const item = itemData.item || {};
   const emoji = item.emoji || itemData.emoji || '';
+  const tags = item.tags || itemData.tags || [];
+  const tagsHtml = tags.map((t) => `<div class="tag">#${t}</div>`).join('');
+  const postTitle = item.title || item.caption || item.name || '';
+  const logoSrc = item.logo?.wordmark || item.logo?.mark || '';
+  const itemLogoHtml = logoSrc ? `<img src="${logoSrc}" alt="${postTitle}">` : '';
+  const dateFormatted = item.date ? new Date(item.date).toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }) : '';
+  const mediaUrl = resolvedImage || (item.files?.[0] ? `https://data.tn42.com/assets-media/${item.files[0]}` : '');
+  const isVideo = item.type === 'video' || (item.files?.[0] || '').endsWith('.mp4');
 
   return {
     ...itemData, ...item,
@@ -87,12 +95,18 @@ export function buildContext(config, itemData, site) {
     text: t['color-text'] || '#e2e8f0',
     textMuted: t['color-text-muted'] || '#a8b8cc',
     emoji, image: resolvedImage,
+    tagsHtml, postTitle, dateFormatted, mediaUrl,
+    logoHtml: itemLogoHtml,
+    noLogoMark: itemLogoHtml ? '' : '<div class="mark">42</div>',
+    mediaHtml: isVideo
+      ? `<video src="${mediaUrl}" autoplay muted playsinline style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover"></video>`
+      : mediaUrl ? `<img src="${mediaUrl}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">` : '',
     variantsFormatted: formatNum(item.expected_variants),
     uniqueFormatted: formatNum(item.estimated_unique_variants),
     priceFormatted: item.price ? `$${(item.price / 100).toFixed(2)}` : '',
     imageHtml: resolvedImage ? `<img class="hero" src="${resolvedImage}">` : '',
     cardClass: resolvedImage ? 'card-with-image' : '',
-    logoHtml: site.logo ? `<img class="logo" src="${site.logo}">` : '',
+    siteLogo: site.logo ? `<img class="logo" src="${site.logo}">` : '',
     badgeHtml: site.siteName ? `<div class="badge">${site.siteName}</div>` : '',
     emojiHtml: emoji ? `<div class="emoji">${emoji}</div>` : '',
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techninja/clearstack",
-  "version": "0.3.41",
+  "version": "0.3.43",
   "type": "module",
   "description": "A no-build web component framework specification — scaffold, validate, and evolve spec-compliant projects",
   "bin": {