loopwind 0.15.0 → 0.17.0

package/test-font-files.mjs

@@ -0,0 +1,72 @@
+/**
+ * Test for font files in SDK StyleConfig
+ * Run with: node test-font-files.mjs
+ */
+
+import { defineTemplate, renderImage } from './dist/sdk/index.js';
+import React from 'react';
+
+const { createElement: h } = React;
+
+console.log('📝 Testing font files in StyleConfig...\n');
+
+// Test with external URL (Google Fonts mirror)
+const config = {
+  colors: {
+    text: '#000000',
+  },
+  fonts: {
+    sans: {
+      family: ['Inter', 'sans-serif'],
+      files: [
+        {
+          path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff',
+          weight: 400,
+        },
+        {
+          path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff',
+          weight: 700,
+        },
+      ],
+    },
+  },
+};
+
+const template = defineTemplate({
+  name: 'test-font-files',
+  size: { width: 600, height: 400 },
+  config,
+  render: ({ tw }) =>
+    h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white p-8') },
+      h('h1', { style: tw('font-sans text-6xl font-bold text-text') }, 'Bold Text'),
+      h('p', { style: tw('font-sans text-3xl font-normal text-text') }, 'Normal Text')
+    ),
+});
+
+try {
+  console.log('⏳ Rendering with external font URLs...');
+  const svg = await renderImage(template, {}, { format: 'svg' });
+
+  console.log('✅ SUCCESS: Font files loaded from URLs');
+  console.log(`✅ Generated SVG: ${svg.length} bytes`);
+
+  // Also test PNG to ensure fonts render correctly
+  console.log('\n⏳ Testing PNG rendering with fonts...');
+  const png = await renderImage(template, {}, { format: 'png' });
+
+  if (png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47) {
+    console.log('✅ SUCCESS: PNG generated with fonts');
+    console.log(`✅ PNG size: ${png.length} bytes`);
+  } else {
+    console.error('❌ FAIL: Invalid PNG signature');
+    process.exit(1);
+  }
+
+  console.log('\n🎉 All font file tests passed!');
+  console.log('\n✨ Font files with URLs work correctly in SDK StyleConfig');
+
+} catch (error) {
+  console.error('❌ ERROR:', error.message);
+  console.error(error.stack);
+  process.exit(1);
+}

package/test-sdk-config.mjs

@@ -0,0 +1,397 @@
+/**
+ * Integration tests for SDK StyleConfig
+ * Run with: node test-sdk-config.mjs
+ */
+
+import { defineTemplate, renderImage, renderVideo } from './dist/sdk/index.js';
+import React from 'react';
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const { createElement: h } = React;
+
+// Test utilities
+let testsPassed = 0;
+let testsFailed = 0;
+
+function assert(condition, message) {
+  if (!condition) {
+    console.error(`❌ FAIL: ${message}`);
+    testsFailed++;
+    throw new Error(message);
+  } else {
+    console.log(`✅ PASS: ${message}`);
+    testsPassed++;
+  }
+}
+
+async function test(name, fn) {
+  console.log(`\n📝 Test: ${name}`);
+  try {
+    await fn();
+  } catch (error) {
+    console.error(`Error in test "${name}":`, error.message);
+  }
+}
+
+// Helper to check if SVG contains specific color
+function svgContainsColor(svg, color) {
+  // Normalize color format (remove # if present)
+  const normalizedColor = color.replace('#', '');
+  return svg.includes(normalizedColor) || svg.includes(color);
+}
+
+// Test 1: Config in defineTemplate (image)
+await test('Config in defineTemplate - Image', async () => {
+  const config = {
+    colors: {
+      primary: '#ff0000',
+      background: '#00ff00',
+    },
+  };
+
+  const template = defineTemplate({
+    name: 'test-config-template',
+    size: { width: 400, height: 400 },
+    config,
+    render: ({ tw, title }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-background') },
+        h('h1', { style: tw('text-4xl font-bold text-primary') }, title)
+      ),
+  });
+
+  assert(template.config, 'Template should have config');
+  assert(template.config.colors.primary === '#ff0000', 'Config colors should match');
+
+  const svg = await renderImage(template, { title: 'Test' }, { format: 'svg' });
+  const svgString = svg.toString();
+
+  assert(svgContainsColor(svgString, '#ff0000'), 'SVG should contain primary color');
+  assert(svgContainsColor(svgString, '#00ff00'), 'SVG should contain background color');
+});
+
+// Test 2: Config in renderImage options
+await test('Config in renderImage options', async () => {
+  const template = defineTemplate({
+    name: 'test-render-config',
+    size: { width: 400, height: 400 },
+    render: ({ tw, title }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
+        h('h1', { style: tw('text-4xl font-bold text-accent') }, title)
+      ),
+  });
+
+  const svg = await renderImage(
+    template,
+    { title: 'Test' },
+    {
+      format: 'svg',
+      config: {
+        colors: {
+          accent: '#0000ff',
+          secondary: '#ffff00',
+        },
+      },
+    }
+  );
+
+  const svgString = svg.toString();
+  assert(svgContainsColor(svgString, '#0000ff'), 'SVG should contain accent color from options');
+  assert(svgContainsColor(svgString, '#ffff00'), 'SVG should contain secondary color from options');
+});
+
+// Test 3: Config override (options override template)
+await test('Config override - Options override template', async () => {
+  const template = defineTemplate({
+    name: 'test-override',
+    size: { width: 400, height: 400 },
+    config: {
+      colors: {
+        brand: '#111111',
+      },
+    },
+    render: ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
+        h('h1', { style: tw('text-4xl font-bold') }, 'Override Test')
+      ),
+  });
+
+  const svg = await renderImage(
+    template,
+    {},
+    {
+      format: 'svg',
+      config: {
+        colors: {
+          brand: '#222222',
+        },
+      },
+    }
+  );
+
+  const svgString = svg.toString();
+  assert(svgContainsColor(svgString, '#222222'), 'SVG should contain overridden brand color');
+  assert(!svgContainsColor(svgString, '#111111'), 'SVG should NOT contain original template brand color');
+});
+
+// Test 4: PNG format with config
+await test('PNG format with config', async () => {
+  const template = defineTemplate({
+    name: 'test-png',
+    size: { width: 200, height: 200 },
+    render: ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-primary') },
+        h('h1', { style: tw('text-2xl font-bold text-white') }, 'PNG')
+      ),
+  });
+
+  const png = await renderImage(
+    template,
+    {},
+    {
+      format: 'png',
+      config: {
+        colors: {
+          primary: '#ff00ff',
+        },
+      },
+    }
+  );
+
+  assert(Buffer.isBuffer(png), 'PNG should be a Buffer');
+  assert(png.length > 0, 'PNG buffer should not be empty');
+  // PNG signature check
+  assert(png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47, 'Should be valid PNG');
+});
+
+// Test 5: Video with config
+await test('Video with config', async () => {
+  const template = defineTemplate({
+    name: 'test-video',
+    type: 'video',
+    size: { width: 400, height: 400 },
+    video: { fps: 30, duration: 0.5 },
+    config: {
+      colors: {
+        primary: '#ff6600',
+      },
+    },
+    render: ({ tw, progress }) => {
+      const opacity = progress;
+      return h('div', { style: tw('flex items-center justify-center w-full h-full bg-white') },
+        h('h1', { style: { ...tw('text-4xl font-bold text-primary'), opacity } }, 'Video')
+      );
+    },
+  });
+
+  const mp4 = await renderVideo(template, {});
+
+  assert(Buffer.isBuffer(mp4), 'MP4 should be a Buffer');
+  assert(mp4.length > 0, 'MP4 buffer should not be empty');
+  // MP4 signature check (ftyp)
+  const signature = mp4.toString('ascii', 4, 8);
+  assert(signature === 'ftyp', 'Should be valid MP4');
+});
+
+// Test 6: Video with config override
+await test('Video with config override', async () => {
+  const template = defineTemplate({
+    name: 'test-video-override',
+    type: 'video',
+    size: { width: 400, height: 400 },
+    video: { fps: 30, duration: 0.5 },
+    config: {
+      colors: {
+        brand: '#333333',
+      },
+    },
+    render: ({ tw, progress }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-brand') },
+        h('h1', { style: { ...tw('text-4xl font-bold'), opacity: progress } }, 'Video')
+      ),
+  });
+
+  const mp4 = await renderVideo(template, {}, {
+    config: {
+      colors: {
+        brand: '#444444',
+      },
+    },
+  });
+
+  assert(Buffer.isBuffer(mp4), 'MP4 should be a Buffer');
+  assert(mp4.length > 0, 'MP4 buffer should not be empty');
+});
+
+// Test 7: Multiple custom colors
+await test('Multiple custom colors', async () => {
+  const config = {
+    colors: {
+      brand: '#8b5cf6',
+      'brand-light': '#a78bfa',
+      'brand-dark': '#7c3aed',
+      accent: '#f59e0b',
+      success: '#10b981',
+    },
+  };
+
+  const template = defineTemplate({
+    name: 'test-multi-colors',
+    size: { width: 600, height: 400 },
+    config,
+    render: ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-brand-light p-8') },
+        h('h1', { style: tw('text-4xl font-bold text-brand') }, 'Brand'),
+        h('p', { style: tw('text-2xl text-brand-dark') }, 'Brand Dark'),
+        h('p', { style: tw('text-xl text-accent') }, 'Accent'),
+        h('p', { style: tw('text-lg text-success') }, 'Success')
+      ),
+  });
+
+  const svg = await renderImage(template, {}, { format: 'svg' });
+  const svgString = svg.toString();
+
+  assert(svgContainsColor(svgString, '#8b5cf6'), 'SVG should contain brand color');
+  assert(svgContainsColor(svgString, '#a78bfa'), 'SVG should contain brand-light color');
+  assert(svgContainsColor(svgString, '#7c3aed'), 'SVG should contain brand-dark color');
+  assert(svgContainsColor(svgString, '#f59e0b'), 'SVG should contain accent color');
+  assert(svgContainsColor(svgString, '#10b981'), 'SVG should contain success color');
+});
+
+// Test 8: Fonts in config
+await test('Fonts in config', async () => {
+  const config = {
+    colors: {
+      text: '#000000',
+    },
+    fonts: {
+      sans: ['Inter', 'system-ui', 'sans-serif'],
+      mono: ['JetBrains Mono', 'monospace'],
+    },
+  };
+
+  const template = defineTemplate({
+    name: 'test-fonts',
+    size: { width: 400, height: 400 },
+    config,
+    render: ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white') },
+        h('h1', { style: tw('font-sans text-4xl text-text') }, 'Sans Font'),
+        h('p', { style: tw('font-mono text-xl text-text') }, 'Mono Font')
+      ),
+  });
+
+  const svg = await renderImage(template, {}, { format: 'svg' });
+  const svgString = svg.toString();
+
+  assert(svg.length > 0, 'SVG should be generated with fonts');
+  // Fonts are embedded in the SVG rendering, no need to check for specific strings
+});
+
+// Test 9: Empty config (should work with defaults)
+await test('Empty config - should work with defaults', async () => {
+  const template = defineTemplate({
+    name: 'test-no-config',
+    size: { width: 400, height: 400 },
+    render: ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-white') },
+        h('h1', { style: tw('text-4xl font-bold text-black') }, 'No Config')
+      ),
+  });
+
+  const svg = await renderImage(template, {}, { format: 'svg' });
+  assert(svg.length > 0, 'SVG should be generated without config');
+});
+
+// Test 10: Partial config merge
+await test('Partial config merge', async () => {
+  const template = defineTemplate({
+    name: 'test-partial-merge',
+    size: { width: 400, height: 400 },
+    config: {
+      colors: {
+        primary: '#111111',
+        secondary: '#222222',
+      },
+    },
+    render: ({ tw }) =>
+      h('div', { style: tw('flex items-center justify-center w-full h-full bg-secondary') },
+        h('h1', { style: tw('text-4xl font-bold text-primary') }, 'Merge')
+      ),
+  });
+
+  const svg = await renderImage(
+    template,
+    {},
+    {
+      format: 'svg',
+      config: {
+        colors: {
+          primary: '#999999', // Override only primary
+        },
+      },
+    }
+  );
+
+  const svgString = svg.toString();
+  assert(svgContainsColor(svgString, '#999999'), 'SVG should contain overridden primary color');
+  assert(svgContainsColor(svgString, '#222222'), 'SVG should retain original secondary color');
+});
+
+// Test 11: Font files from URLs
+await test('Font files from URLs', async () => {
+  const config = {
+    colors: {
+      text: '#000000',
+    },
+    fonts: {
+      sans: {
+        family: ['Inter', 'sans-serif'],
+        files: [
+          {
+            path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff',
+            weight: 400,
+          },
+          {
+            path: 'https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff',
+            weight: 700,
+          },
+        ],
+      },
+    },
+  };
+
+  const template = defineTemplate({
+    name: 'test-font-files',
+    size: { width: 600, height: 400 },
+    config,
+    render: ({ tw }) =>
+      h('div', { style: tw('flex flex-col items-center justify-center w-full h-full bg-white p-8') },
+        h('h1', { style: tw('font-sans text-6xl font-bold text-text') }, 'Bold Text'),
+        h('p', { style: tw('font-sans text-3xl font-normal text-text') }, 'Normal Text')
+      ),
+  });
+
+  const svg = await renderImage(template, {}, { format: 'svg' });
+  assert(svg.length > 0, 'SVG should be generated with font files from URLs');
+
+  const png = await renderImage(template, {}, { format: 'png' });
+  assert(Buffer.isBuffer(png), 'PNG should be a Buffer');
+  assert(png.length > 0, 'PNG buffer should not be empty');
+  assert(png[0] === 0x89 && png[1] === 0x50 && png[2] === 0x4e && png[3] === 0x47, 'Should be valid PNG with custom fonts');
+});
+
+// Summary
+console.log('\n' + '='.repeat(50));
+console.log(`✅ Tests passed: ${testsPassed}`);
+console.log(`❌ Tests failed: ${testsFailed}`);
+console.log('='.repeat(50));
+
+if (testsFailed > 0) {
+  process.exit(1);
+} else {
+  console.log('\n🎉 All tests passed!');
+  process.exit(0);
+}

package/website/README.md

@@ -2,6 +2,13 @@
 
 This is the documentation website for loopwind, built with [Astro](https://astro.build/) and styled with [Tailwind CSS 4](https://tailwindcss.com/) using shadcn/ui design tokens.
 
+## Features
+
+- **Dynamic OG Images**: Each page generates its own Open Graph image on-the-fly using the loopwind SDK
+- **Dark Theme**: Beautiful dark mode optimized for readability
+- **Responsive Design**: Works perfectly on desktop, tablet, and mobile
+- **AI-Friendly**: Copy raw markdown for LLM context
+
 ## Development
 
 Install dependencies:
@@ -33,29 +40,19 @@ Preview the build:
 npm run preview
 ```
 
-## Generating Demo Videos
+## Dynamic OG Images
 
-The site includes live video examples. To generate the demo video:
+Each documentation page automatically gets a custom OG image generated using the loopwind SDK. The images are:
 
-```bash
-# In the main loopwind directory
-loopwind render video-intro '{"title":"loopwind","subtitle":"Generate videos with React + Tailwind"}' --out website/public/demo-intro.mp4
-```
+- Generated at build time (pre-rendered)
+- Cached indefinitely
+- Customized per page with title and description
 
-Or create a template file and render it:
-
-```bash
-cd website
-loopwind init
-loopwind add video-intro  # or create a custom template
-loopwind render video-intro '{"title":"loopwind","subtitle":"Generate videos with React + Tailwind"}' --out public/demo-intro.mp4
-```
-
-The `CodeVideoDemo` component expects videos in `/public/demo-intro.mp4`.
+The OG image API route is at `src/pages/api/og/[...slug].ts`.
 
 ## Deployment
 
-### Netlify
+### Netlify (Current)
 
 This site is configured to deploy on Netlify. The `netlify.toml` file in the root directory handles the configuration.
 
@@ -70,7 +67,7 @@ Just connect your GitHub repo to Netlify and it will automatically deploy!
 
 You can also deploy to:
 - **Vercel**: Connect repo, set build settings
-- **Cloudflare Pages**: Same as above
+- **Cloudflare Pages**: Install `@astrojs/cloudflare` adapter
 - **GitHub Pages**: May need additional configuration
 
 ## Adding Documentation
@@ -89,6 +86,7 @@ description: Page description
 ---
 ```
 3. Add to navigation in `src/layouts/DocsLayout.astro`
+4. Add metadata to `src/pages/api/og/[...slug].ts` for OG images
 
 ## Styling
 
@@ -108,12 +106,14 @@ website/
 ├── src/
 │   ├── components/
 │   │   ├── Hero.astro            # Home page hero
+│   │   ├── Logo.astro            # loopwind logo
 │   │   └── CodeVideoDemo.astro   # Code + video side-by-side
 │   ├── layouts/
 │   │   ├── BaseLayout.astro      # Base HTML with meta tags
 │   │   └── DocsLayout.astro      # Docs with sidebar
 │   ├── pages/
 │   │   ├── index.mdx             # Getting Started
+│   │   ├── getting-started.mdx   # Installation guide
 │   │   ├── templates.mdx         # Installing Templates
 │   │   ├── images.mdx            # Image Rendering
 │   │   ├── video.mdx             # Video Rendering
@@ -121,9 +121,14 @@ website/
 │   │   ├── helpers.mdx           # QR & Composition
 │   │   ├── styling.mdx           # Tailwind & shadcn/ui
 │   │   ├── fonts.mdx             # Font Handling
+│   │   ├── config.mdx            # loopwind.json reference
 │   │   ├── agents.mdx            # AI Agents & Cursor
 │   │   ├── sdk.mdx               # Programmatic SDK
-│   │   └── llm.txt.ts            # Combined docs endpoint
+│   │   ├── preview.mdx           # Preview Mode
+│   │   ├── llm.txt.ts            # Combined docs endpoint
+│   │   └── api/
+│   │       ├── og/[...slug].ts   # Dynamic OG image generation
+│   │       └── raw-markdown/[...path].ts  # Raw markdown API
 │   └── styles/
 │       └── global.css            # Tailwind 4 + design tokens
 ├── public/
@@ -136,3 +141,18 @@ website/
 ├── package.json
 └── tsconfig.json
 ```
+
+## Technologies
+
+- **[Astro](https://astro.build/)** - Static site generator
+- **[Tailwind CSS 4](https://tailwindcss.com/)** - Utility-first CSS
+- **[MDX](https://mdxjs.com/)** - Markdown with JSX
+- **[loopwind SDK](https://loopwind.dev/sdk)** - Dynamic OG image generation
+- **[shadcn/ui](https://ui.shadcn.com/)** - Design system tokens
+
+## Performance
+
+- Fast page loads with Astro's static generation
+- Pre-rendered OG images for instant social previews
+- Optimized fonts and assets
+- Minimal JavaScript bundle

package/website/astro.config.mjs

@@ -1,10 +1,13 @@
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import tailwindcss from '@tailwindcss/vite';
+import cloudflare from '@astrojs/cloudflare';
 
 // https://astro.build/config
 export default defineConfig({
   site: 'https://loopwind.dev',
+  output: 'hybrid',
+  adapter: cloudflare(),
   integrations: [mdx()],
   vite: {
     plugins: [tailwindcss()],

package/website/package.json

@@ -7,17 +7,22 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
+    "deploy": "astro build && wrangler deploy",
+    "cf:deploy": "wrangler deploy",
     "astro": "astro"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.3",
+    "@astrojs/cloudflare": "^11.1.0",
     "@astrojs/mdx": "^3.1.7",
     "astro": "^4.15.11",
+    "loopwind": "latest",
     "typescript": "^5.6.2"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.0",
-    "tailwindcss": "^4.0.0"
+    "tailwindcss": "^4.0.0",
+    "wrangler": "^3.86.1"
   }
 }
 

package/website/public/.gitkeep

@@ -1,3 +1,4 @@
 # Place demo videos here
 # Generate with: loopwind render video-intro '{"title":"loopwind","subtitle":"Generate videos with React + Tailwind"}' --out public/demo-intro.mp4
 
+