loopwind 0.18.1 → 0.20.1

package/website/package.json

@@ -16,7 +16,7 @@
     "@astrojs/cloudflare": "^11.1.0",
     "@astrojs/mdx": "^3.1.7",
     "astro": "^4.15.11",
-    "loopwind": "latest",
+    "loopwind": "file:..",
     "typescript": "^5.6.2"
   },
   "devDependencies": {
@@ -25,4 +25,3 @@
     "wrangler": "^3.86.1"
   }
 }
-

package/website/public/.gitkeep

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

package/website/templates/og-image.tsx

@@ -1,30 +1,29 @@
-import { defineTemplate } from 'loopwind/sdk';
-import React from 'react';
+// Standard loopwind template - no imports needed
+// The tw, config, qr, template functions are injected by loopwind at runtime
 
 interface OgImageProps {
   title: string;
   description?: string;
 }
 
-// Define OG image template using loopwind SDK
-export const ogTemplate = defineTemplate<OgImageProps>({
+// Standard loopwind template metadata
+export const meta = {
   name: 'loopwind-og',
-  size: { width: 1200, height: 630 },
-  config: {
-    colors: {
-      background: '#0a0a0a',
-      foreground: '#fafafa',
-      muted: '#27272a',
-      'muted-foreground': '#a1a1aa',
-      accent: '#6366f1',
-      border: '#27272a',
-      brand: '#6366f1',
-    },
-    fonts: {
-      sans: ['Inter', 'system-ui', 'sans-serif'],
-    },
+  description: 'OG image template for loopwind documentation',
+  type: 'image' as const,
+  size: {
+    width: 1200,
+    height: 630,
   },
-  render: ({ tw, title, description }) => (
+  props: {
+    title: 'string',
+    description: 'string?',
+  },
+};
+
+// Standard loopwind template component
+export default function OgImage({ tw, title, description }: OgImageProps & { tw?: (classes: string) => any }) {
+  return (
     <div style={tw!('flex flex-col w-full h-full bg-background p-16 justify-between')}>
       {/* Header with logo */}
       <div style={tw!('flex items-center gap-3')}>
@@ -57,5 +56,5 @@ export const ogTemplate = defineTemplate<OgImageProps>({
         </div>
       </div>
     </div>
-  ),
-});
+  );
+}

package/website/test-playground.mjs

@@ -0,0 +1,45 @@
+const testData = {
+  templateCode: `export const meta = {
+  name: 'test',
+  type: 'image',
+  size: { width: 400, height: 400 },
+  props: { title: 'string' }
+};
+
+export default function Test({ tw, title }) {
+  return (
+    <div style={tw('flex items-center justify-center w-full h-full bg-blue-500')}>
+      <h1 style={tw('text-white text-4xl')}>{title}</h1>
+    </div>
+  );
+}`,
+  props: { title: 'Hello Playground!' },
+  format: 'svg'
+};
+
+console.log('Testing playground API...');
+console.log('Request body:', JSON.stringify(testData, null, 2));
+
+try {
+  const response = await fetch('http://localhost:4323/api/playground/render', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    body: JSON.stringify(testData)
+  });
+
+  console.log('Response status:', response.status);
+  console.log('Response headers:', Object.fromEntries(response.headers));
+
+  const data = await response.json();
+
+  if (data.type === 'image') {
+    console.log('✅ Success! Image rendered');
+    console.log('Data URL length:', data.data.length);
+  } else {
+    console.log('❌ Error:', data);
+  }
+} catch (error) {
+  console.error('❌ Failed:', error.message);
+}