design-clone 2.1.0 → 3.0.0

package/src/post-process/fetch-images-unsplash-client.js

@@ -0,0 +1,123 @@
+/**
+ * Unsplash API Client
+ *
+ * Handles searching Unsplash for photos and triggering download attribution.
+ * Uses a module-level cache to avoid duplicate API calls within a session.
+ */
+
+const UNSPLASH_API = 'https://api.unsplash.com';
+
+// Cache for search results to avoid duplicate API calls
+const searchCache = new Map();
+
+/**
+ * Generate search keywords from image context.
+ * Prioritises alt text; falls back to surrounding text words.
+ * Translates common Japanese keywords for better Unsplash results.
+ * @param {{ alt: string, context: string }} imageContext
+ * @returns {string} Keyword string
+ */
+export function generateKeywords(imageContext) {
+  const { alt, context } = imageContext;
+  let keywords = alt;
+
+  if (!keywords || keywords.length < 3) {
+    const words = context
+      .toLowerCase()
+      .replace(/[^\w\s]/g, '')
+      .split(/\s+/)
+      .filter(w => w.length > 3)
+      .filter(w => !['http', 'https', 'www', 'html', 'class', 'style'].includes(w));
+    keywords = words.slice(0, 3).join(' ');
+  }
+
+  const translations = {
+    '会社': 'company office',
+    '仕事': 'work business',
+    '人': 'people team',
+    'サービス': 'service',
+    'ビジネス': 'business',
+    '技術': 'technology',
+    'オフィス': 'office',
+    'チーム': 'team',
+    'ミーティング': 'meeting',
+    '開発': 'development',
+    'デザイン': 'design',
+    'マーケティング': 'marketing',
+    '事例': 'case study business',
+    '導入': 'implementation',
+    'CTA': 'business success'
+  };
+
+  for (const [jp, en] of Object.entries(translations)) {
+    if (keywords.includes(jp)) keywords = keywords.replace(jp, en);
+  }
+
+  if (!keywords || keywords.length < 3) keywords = 'business professional';
+
+  return keywords.trim();
+}
+
+/**
+ * Search Unsplash for an image matching the keywords.
+ * Returns null if no API key or no results found.
+ * @param {string} keywords
+ * @param {'landscape'|'portrait'|'squarish'} orientation
+ * @returns {Promise<{ id, url, thumb, photographer, photographerUrl, downloadLocation }|null>}
+ */
+export async function searchUnsplash(keywords, orientation = 'landscape') {
+  const apiKey = process.env.UNSPLASH_ACCESS_KEY;
+  if (!apiKey) return null;
+
+  const cacheKey = `${keywords}-${orientation}`;
+  if (searchCache.has(cacheKey)) return searchCache.get(cacheKey);
+
+  try {
+    const params = new URLSearchParams({ query: keywords, orientation, per_page: '1' });
+    const response = await fetch(`${UNSPLASH_API}/search/photos?${params}`, {
+      headers: {
+        'Authorization': `Client-ID ${apiKey}`,
+        'Accept-Version': 'v1'
+      }
+    });
+
+    if (!response.ok) {
+      if (response.status === 403) console.warn('  ⚠ Unsplash rate limit reached');
+      return null;
+    }
+
+    const data = await response.json();
+    if (!data.results || data.results.length === 0) return null;
+
+    const photo  = data.results[0];
+    const result = {
+      id:                photo.id,
+      url:               photo.urls.regular,
+      thumb:             photo.urls.thumb,
+      photographer:      photo.user.name,
+      photographerUrl:   photo.user.links.html,
+      downloadLocation:  photo.links.download_location
+    };
+
+    searchCache.set(cacheKey, result);
+    return result;
+  } catch (error) {
+    console.warn(`  ⚠ Unsplash search failed: ${error.message}`);
+    return null;
+  }
+}
+
+/**
+ * Trigger download event for attribution (required by Unsplash API terms).
+ * Silently ignores failures — not critical.
+ * @param {string} downloadLocation
+ */
+export async function triggerDownload(downloadLocation) {
+  const apiKey = process.env.UNSPLASH_ACCESS_KEY;
+  if (!apiKey || !downloadLocation) return;
+  try {
+    await fetch(downloadLocation, {
+      headers: { 'Authorization': `Client-ID ${apiKey}` }
+    });
+  } catch { /* silently fail */ }
+}

package/src/post-process/fetch-images.js

@@ -20,8 +20,9 @@
 
 import fs from 'fs/promises';
 import path from 'path';
+import { parseArgs as parseRawArgs } from '../utils/helpers.js';
+import { generateKeywords, searchUnsplash, triggerDownload } from './fetch-images-unsplash-client.js';
 
-const UNSPLASH_API = 'https://api.unsplash.com';
 const PLACEHOLDER_PATTERNS = [
   /https?:\/\/placehold\.co\/[^"'\s)]+/gi,
   /https?:\/\/placeholder\.com\/[^"'\s)]+/gi,
@@ -29,272 +30,107 @@ const PLACEHOLDER_PATTERNS = [
   /https?:\/\/picsum\.photos\/[^"'\s)]+/gi
 ];
 
-// Cache for search results to avoid duplicate API calls
-const searchCache = new Map();
-
 /**
- * Parse command line arguments
+ * Parse command line arguments.
+ * @returns {{ html: string|null, output: string|null, verbose: boolean }}
  */
 function parseArgs() {
-  const args = process.argv.slice(2);
-  const options = {
-    html: null,
-    output: null,
-    verbose: false
+  const raw = parseRawArgs(process.argv.slice(2));
+  return {
+    html:    raw.html    || null,
+    output:  raw.output  || null,
+    verbose: raw.verbose === true || raw.verbose === 'true'
   };
-
-  for (let i = 0; i < args.length; i++) {
-    switch (args[i]) {
-      case '--html':
-        options.html = args[++i];
-        break;
-      case '--output':
-        options.output = args[++i];
-        break;
-      case '--verbose':
-        options.verbose = true;
-        break;
-    }
-  }
-
-  return options;
 }
 
 /**
- * Extract image contexts from HTML
- * Returns array of { placeholder, alt, context, orientation }
+ * Extract image contexts from HTML.
+ * @param {string} html
+ * @returns {Array<{ placeholder, alt, context, orientation, originalTag }>}
  */
-function extractImageContexts(html) {
+export function extractImageContexts(html) {
   const contexts = [];
   const imgRegex = /<img[^>]*>/gi;
-  const matches = html.matchAll(imgRegex);
 
-  for (const match of matches) {
+  for (const match of html.matchAll(imgRegex)) {
     const imgTag = match[0];
 
-    // Check if src is a placeholder
     let placeholderUrl = null;
     for (const pattern of PLACEHOLDER_PATTERNS) {
       const srcMatch = imgTag.match(pattern);
-      if (srcMatch) {
-        placeholderUrl = srcMatch[0];
-        break;
-      }
+      if (srcMatch) { placeholderUrl = srcMatch[0]; break; }
     }
-
     if (!placeholderUrl) continue;
 
-    // Extract alt text
     const altMatch = imgTag.match(/alt=["']([^"']*)["']/i);
-    const alt = altMatch ? altMatch[1] : '';
+    const alt      = altMatch ? altMatch[1] : '';
 
-    // Determine orientation from placeholder URL dimensions
     let orientation = 'landscape';
-    const dimMatch = placeholderUrl.match(/(\d+)x(\d+)/);
+    const dimMatch  = placeholderUrl.match(/(\d+)x(\d+)/);
     if (dimMatch) {
-      const width = parseInt(dimMatch[1]);
-      const height = parseInt(dimMatch[2]);
-      if (height > width) orientation = 'portrait';
-      else if (height === width) orientation = 'squarish';
+      const w = parseInt(dimMatch[1]);
+      const h = parseInt(dimMatch[2]);
+      if (h > w)      orientation = 'portrait';
+      else if (h === w) orientation = 'squarish';
     }
 
-    // Extract surrounding context (100 chars before/after)
-    const position = match.index;
+    const position     = match.index;
     const contextStart = Math.max(0, position - 100);
-    const contextEnd = Math.min(html.length, position + imgTag.length + 100);
+    const contextEnd   = Math.min(html.length, position + imgTag.length + 100);
     const surroundingText = html.slice(contextStart, contextEnd)
       .replace(/<[^>]+>/g, ' ')
       .replace(/\s+/g, ' ')
       .trim();
 
-    contexts.push({
-      placeholder: placeholderUrl,
-      alt: alt,
-      context: surroundingText,
-      orientation: orientation,
-      originalTag: imgTag
-    });
+    contexts.push({ placeholder: placeholderUrl, alt, context: surroundingText, orientation, originalTag: imgTag });
   }
 
   return contexts;
 }
 
-/**
- * Generate search keywords from image context
- */
-function generateKeywords(imageContext) {
-  const { alt, context } = imageContext;
-
-  // Priority: alt text > surrounding context
-  let keywords = alt;
-
-  if (!keywords || keywords.length < 3) {
-    // Extract meaningful words from context
-    const words = context
-      .toLowerCase()
-      .replace(/[^\w\s]/g, '')
-      .split(/\s+/)
-      .filter(w => w.length > 3)
-      .filter(w => !['http', 'https', 'www', 'html', 'class', 'style'].includes(w));
-
-    keywords = words.slice(0, 3).join(' ');
-  }
-
-  // Translate common Japanese keywords for better Unsplash results
-  const translations = {
-    '会社': 'company office',
-    '仕事': 'work business',
-    '人': 'people team',
-    'サービス': 'service',
-    'ビジネス': 'business',
-    '技術': 'technology',
-    'オフィス': 'office',
-    'チーム': 'team',
-    'ミーティング': 'meeting',
-    '開発': 'development',
-    'デザイン': 'design',
-    'マーケティング': 'marketing',
-    '事例': 'case study business',
-    '導入': 'implementation',
-    'CTA': 'business success'
-  };
-
-  for (const [jp, en] of Object.entries(translations)) {
-    if (keywords.includes(jp)) {
-      keywords = keywords.replace(jp, en);
-    }
-  }
-
-  // Default fallback
-  if (!keywords || keywords.length < 3) {
-    keywords = 'business professional';
-  }
-
-  return keywords.trim();
-}
-
-/**
- * Search Unsplash for images
- */
-async function searchUnsplash(keywords, orientation = 'landscape') {
-  const apiKey = process.env.UNSPLASH_ACCESS_KEY;
-
-  if (!apiKey) {
-    return null;
-  }
-
-  // Check cache
-  const cacheKey = `${keywords}-${orientation}`;
-  if (searchCache.has(cacheKey)) {
-    return searchCache.get(cacheKey);
-  }
-
-  try {
-    const params = new URLSearchParams({
-      query: keywords,
-      orientation: orientation,
-      per_page: '1'
-    });
-
-    const response = await fetch(`${UNSPLASH_API}/search/photos?${params}`, {
-      headers: {
-        'Authorization': `Client-ID ${apiKey}`,
-        'Accept-Version': 'v1'
-      }
-    });
-
-    if (!response.ok) {
-      if (response.status === 403) {
-        console.warn('  ⚠ Unsplash rate limit reached');
-      }
-      return null;
-    }
-
-    const data = await response.json();
-
-    if (data.results && data.results.length > 0) {
-      const photo = data.results[0];
-      const result = {
-        id: photo.id,
-        url: photo.urls.regular, // 1080px width
-        thumb: photo.urls.thumb,
-        photographer: photo.user.name,
-        photographerUrl: photo.user.links.html,
-        downloadLocation: photo.links.download_location
-      };
-
-      searchCache.set(cacheKey, result);
-      return result;
-    }
-
-    return null;
-  } catch (error) {
-    console.warn(`  ⚠ Unsplash search failed: ${error.message}`);
-    return null;
-  }
-}
-
-/**
- * Trigger download event for attribution (required by Unsplash API)
- */
-async function triggerDownload(downloadLocation) {
-  const apiKey = process.env.UNSPLASH_ACCESS_KEY;
-  if (!apiKey || !downloadLocation) return;
-
-  try {
-    await fetch(downloadLocation, {
-      headers: {
-        'Authorization': `Client-ID ${apiKey}`
-      }
-    });
-  } catch {
-    // Silently fail - not critical
-  }
+/** Build Unsplash attribution HTML comment block. */
+function addAttributionComment(html, attributions) {
+  if (attributions.length === 0) return html;
+  const lines = attributions.map(a => `  - "${a.keywords}": Photo by ${a.photographer} (${a.photographerUrl})`).join('\n');
+  const comment = `\n<!--\n  Image Credits (Unsplash)\n  ========================\n${lines}\n\n  Licensed under the Unsplash License: https://unsplash.com/license\n-->\n`;
+  return html.replace(/<head>/i, `<head>${comment}`);
 }
 
 /**
- * Replace placeholder URLs in HTML with Unsplash images
+ * Replace placeholder image URLs in HTML with Unsplash images.
+ * @param {string} html
+ * @param {boolean} verbose
+ * @returns {Promise<{ html: string, attributions: Array, replacedCount: number }>}
  */
 async function replaceImages(html, verbose = false) {
-  const contexts = extractImageContexts(html);
-  const attributions = [];
-  let updatedHtml = html;
-  let replacedCount = 0;
+  const contexts      = extractImageContexts(html);
+  const attributions  = [];
+  let updatedHtml     = html;
+  let replacedCount   = 0;
 
-  if (verbose) {
-    console.log(`  Found ${contexts.length} placeholder images`);
-  }
+  if (verbose) console.log(`  Found ${contexts.length} placeholder images`);
 
   for (const ctx of contexts) {
     const keywords = generateKeywords(ctx);
-
-    if (verbose) {
-      console.log(`  → Searching: "${keywords}" (${ctx.orientation})`);
-    }
+    if (verbose) console.log(`  → Searching: "${keywords}" (${ctx.orientation})`);
 
     const photo = await searchUnsplash(keywords, ctx.orientation);
 
     if (photo) {
-      // Replace placeholder URL with Unsplash URL
       updatedHtml = updatedHtml.replace(ctx.placeholder, photo.url);
       replacedCount++;
 
-      // Track attribution
       attributions.push({
-        keywords: keywords,
-        photoId: photo.id,
-        url: photo.url,
-        photographer: photo.photographer,
+        keywords,
+        photoId:         photo.id,
+        url:             photo.url,
+        photographer:    photo.photographer,
         photographerUrl: photo.photographerUrl,
-        license: 'Unsplash License'
+        license:         'Unsplash License'
       });
 
-      // Trigger download for attribution tracking
       await triggerDownload(photo.downloadLocation);
-
-      if (verbose) {
-        console.log(`    ✓ Found: ${photo.photographer}`);
-      }
+      if (verbose) console.log(`    ✓ Found: ${photo.photographer}`);
     } else if (verbose) {
       console.log(`    ✗ No results`);
     }
@@ -307,59 +143,32 @@ async function replaceImages(html, verbose = false) {
 }
 
 /**
- * Add attribution comment to HTML
+ * Main function — reads HTML, replaces images, writes results.
+ * @param {string} htmlPath
+ * @param {string} outputDir
+ * @param {boolean} verbose
+ * @returns {Promise<{ success: boolean, replacedCount?: number, attributions?: Array, skipped?: boolean }>}
  */
-function addAttributionComment(html, attributions) {
-  if (attributions.length === 0) return html;
-
-  const comment = `
-<!--
-  Image Credits (Unsplash)
-  ========================
-${attributions.map(a => `  - "${a.keywords}": Photo by ${a.photographer} (${a.photographerUrl})`).join('\n')}
-
-  Licensed under the Unsplash License: https://unsplash.com/license
--->
-`;
-
-  // Insert after <head> tag
-  return html.replace(/<head>/i, `<head>${comment}`);
-}
-
-/**
- * Main function
- */
-async function fetchImages(htmlPath, outputDir, verbose = false) {
+export async function fetchImages(htmlPath, outputDir, verbose = false) {
   const apiKey = process.env.UNSPLASH_ACCESS_KEY;
 
   if (!apiKey) {
     console.log('  → Skipping Unsplash (no UNSPLASH_ACCESS_KEY set)');
-    return {
-      success: true,
-      skipped: true,
-      message: 'No API key configured'
-    };
+    return { success: true, skipped: true, message: 'No API key configured' };
   }
 
-  // Read HTML
   const html = await fs.readFile(htmlPath, 'utf-8');
-
-  // Replace images
   const { html: updatedHtml, attributions, replacedCount } = await replaceImages(html, verbose);
 
   if (replacedCount > 0) {
-    // Add attribution comment
     const finalHtml = addAttributionComment(updatedHtml, attributions);
-
-    // Write updated HTML
     await fs.writeFile(htmlPath, finalHtml, 'utf-8');
 
-    // Write attribution JSON
     const attrPath = path.join(outputDir, 'attribution.json');
     await fs.writeFile(attrPath, JSON.stringify({
       generated: new Date().toISOString(),
-      source: 'Unsplash',
-      images: attributions
+      source:    'Unsplash',
+      images:    attributions
     }, null, 2), 'utf-8');
 
     console.log(`  ✓ Replaced ${replacedCount} images from Unsplash`);
@@ -367,32 +176,20 @@ async function fetchImages(htmlPath, outputDir, verbose = false) {
     console.log('  → No placeholder images found to replace');
   }
 
-  return {
-    success: true,
-    replacedCount,
-    attributions
-  };
+  return { success: true, replacedCount, attributions };
 }
 
 // CLI execution
 if (process.argv[1] === new URL(import.meta.url).pathname) {
-  const args = parseArgs();
+  const args      = parseArgs();
+  const outputDir = args.output || path.dirname(args.html);
 
   if (!args.html) {
     console.error('Usage: node fetch-images.js --html <path> --output <dir>');
     process.exit(1);
   }
 
-  const outputDir = args.output || path.dirname(args.html);
-
   fetchImages(args.html, outputDir, args.verbose)
-    .then(result => {
-      console.log(JSON.stringify(result, null, 2));
-    })
-    .catch(error => {
-      console.error('Error:', error.message);
-      process.exit(1);
-    });
+    .then(result => console.log(JSON.stringify(result, null, 2)))
+    .catch(error => { console.error('Error:', error.message); process.exit(1); });
 }
-
-export { fetchImages, extractImageContexts, generateKeywords };

package/src/post-process/inject-gosnap.js

@@ -0,0 +1,88 @@
+#!/usr/bin/env node
+/**
+ * GoSnap Widget Injector for Design Clone
+ *
+ * Injects gosnap-widget Web Component into generated HTML files.
+ * Scans pages/ directory and adds <go-snap> element before </body>.
+ * Idempotent -- skips files that already contain the widget.
+ *
+ * Usage:
+ *   node inject-gosnap.js --dir ./pages [--verbose]
+ */
+
+import fs from 'fs/promises';
+import path from 'path';
+
+const GOSNAP_TAG = 'go-snap';
+const GOSNAP_SNIPPET = `<script src="https://unpkg.com/gosnap-widget@1.0.1/dist/embed.global.js"></script>
+<go-snap position="bottom-right" theme="dark" persist></go-snap>`;
+
+/**
+ * Inject gosnap-widget into all HTML files in a directory
+ * @param {string} pagesDir - Path to directory containing HTML files
+ * @param {boolean} [verbose=false] - Show detailed progress
+ * @returns {Promise<{success: boolean, injectedCount: number, skippedCount: number}>}
+ */
+async function injectGosnap(pagesDir, verbose = false) {
+  // Guard: check directory exists
+  try {
+    await fs.access(pagesDir);
+  } catch {
+    throw new Error(`Directory not found: ${pagesDir}`);
+  }
+
+  const entries = await fs.readdir(pagesDir);
+  const htmlFiles = entries.filter(f => f.endsWith('.html'));
+
+  let injectedCount = 0;
+  let skippedCount = 0;
+
+  for (const file of htmlFiles) {
+    const filePath = path.join(pagesDir, file);
+    const content = await fs.readFile(filePath, 'utf-8');
+
+    if (content.includes(GOSNAP_TAG)) {
+      skippedCount++;
+      if (verbose) console.log(`  -> Skipped (already present): ${file}`);
+      continue;
+    }
+
+    if (!content.includes('</body>')) {
+      skippedCount++;
+      if (verbose) console.log(`  -> Skipped (no </body> tag): ${file}`);
+      continue;
+    }
+
+    const updated = content.replace('</body>', `\n${GOSNAP_SNIPPET}\n</body>`);
+    await fs.writeFile(filePath, updated, 'utf-8');
+    injectedCount++;
+    if (verbose) console.log(`  -> Injected: ${file}`);
+  }
+
+  console.log(`  Injected gosnap-widget into ${injectedCount} file(s), skipped ${skippedCount}`);
+
+  return { success: true, injectedCount, skippedCount };
+}
+
+// CLI execution
+if (process.argv[1] === new URL(import.meta.url).pathname) {
+  const args = process.argv.slice(2);
+  let dir = null;
+  let verbose = false;
+
+  for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--dir' && args[i + 1]) dir = args[++i];
+    else if (args[i] === '--verbose') verbose = true;
+  }
+
+  if (!dir) {
+    console.error('Usage: node inject-gosnap.js --dir <path> [--verbose]');
+    process.exit(1);
+  }
+
+  injectGosnap(dir, verbose)
+    .then(result => console.log(JSON.stringify(result, null, 2)))
+    .catch(error => { console.error('Error:', error.message); process.exit(1); });
+}
+
+export { injectGosnap };