loopwind 0.10.3 → 0.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +4 -4
- package/REGISTRY_SETUP.md +5 -15
- package/TEMPLATE_SOURCES.md +15 -31
- package/dist/commands/init.js +5 -5
- package/dist/commands/init.js.map +1 -1
- package/dist/lib/config.d.ts.map +1 -1
- package/dist/lib/config.js +14 -4
- package/dist/lib/config.js.map +1 -1
- package/dist/lib/renderer.d.ts.map +1 -1
- package/dist/lib/renderer.js +7 -3
- package/dist/lib/renderer.js.map +1 -1
- package/package.json +5 -4
- package/test-templates/demo-intro-props.json +4 -0
- package/website/README.md +42 -16
- package/website/dist/.gitkeep +3 -0
- package/website/dist/_astro/agents.I1-fN38o.css +1 -0
- package/website/dist/agents/index.html +51 -0
- package/website/dist/animation/index.html +605 -0
- package/website/dist/fonts/index.html +42 -41
- package/website/dist/helpers/index.html +6 -8
- package/website/dist/images/index.html +33 -39
- package/website/dist/index.html +70 -115
- package/website/dist/llm.txt +954 -322
- package/website/dist/robots.txt +5 -0
- package/website/dist/sdk/index.html +435 -0
- package/website/dist/styling/index.html +6 -8
- package/website/dist/templates/index.html +19 -21
- package/website/dist/video/index.html +193 -79
- package/website/package-lock.json +7558 -2595
- package/website/public/.gitkeep +3 -0
- package/website/dist/_astro/fonts.DHdiHGBO.css +0 -1
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
<p>
|
|
5
|
-
<
|
|
6
|
-
<p>Configure fonts in your <code>dsgn.json</code> and use Tailwind classes in templates.</p>
|
|
7
|
-
<h3 id="simple-setup-css-only">Simple Setup (CSS Only)</h3>
|
|
1
|
+
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/fonts/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation"><meta name="author" content="loopwind"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://loopwind.dev/fonts/"><meta property="og:title"><meta property="og:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/og-image.png"><meta property="og:site_name" content="loopwind"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://loopwind.dev/fonts/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/og-image.png"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="language" content="English"><link rel="stylesheet" href="/_astro/agents.I1-fN38o.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl flex items-center gap-2 bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj> <span class="text-5xl" data-astro-cid-mw7aashj>↫</span> <span data-astro-cid-mw7aashj>loopwind</span> </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="font-handling-in-loopwind">Font Handling in loopwind</h1>
|
|
2
|
+
<p>The recommended way to use fonts is through <code>loopwind.json</code> - configure fonts once, use everywhere.</p>
|
|
3
|
+
<h2 id="using-fonts-from-loopwindjson-recommended">Using Fonts from loopwind.json (Recommended)</h2>
|
|
4
|
+
<p>Configure fonts in your <code>loopwind.json</code> and use Tailwind classes in templates.</p>
|
|
5
|
+
<h3 id="simple-setup">Simple Setup</h3>
|
|
8
6
|
<p>Define font families without loading custom fonts (uses system fonts):</p>
|
|
9
7
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="json"><code><span class="line"><span style="color:#E1E4E8">{</span></span>
|
|
10
8
|
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
@@ -18,12 +16,12 @@ _dsgn
|
|
|
18
16
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
|
|
19
17
|
<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
|
|
20
18
|
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'w-full h-full'</span><span style="color:#E1E4E8">)}></span></span>
|
|
21
|
-
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses fonts.sans from
|
|
19
|
+
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses fonts.sans from loopwind.json */</span><span style="color:#E1E4E8">}</span></span>
|
|
22
20
|
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'font-sans text-6xl font-bold'</span><span style="color:#E1E4E8">)}></span></span>
|
|
23
21
|
<span class="line"><span style="color:#E1E4E8"> {title}</span></span>
|
|
24
22
|
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span>
|
|
25
23
|
<span class="line"></span>
|
|
26
|
-
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses fonts.mono from
|
|
24
|
+
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses fonts.mono from loopwind.json */</span><span style="color:#E1E4E8">}</span></span>
|
|
27
25
|
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">code</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'font-mono text-sm'</span><span style="color:#E1E4E8">)}></span></span>
|
|
28
26
|
<span class="line"><span style="color:#E1E4E8"> {code}</span></span>
|
|
29
27
|
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">code</span><span style="color:#E1E4E8">></span></span>
|
|
@@ -54,25 +52,25 @@ _dsgn
|
|
|
54
52
|
<span class="line"></span></code></pre>
|
|
55
53
|
<p><strong>Project structure:</strong></p>
|
|
56
54
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>your-project/</span></span>
|
|
57
|
-
<span class="line"><span>├──
|
|
55
|
+
<span class="line"><span>├── loopwind.json</span></span>
|
|
58
56
|
<span class="line"><span>├── fonts/</span></span>
|
|
59
57
|
<span class="line"><span>│ ├── Inter-Regular.woff</span></span>
|
|
60
58
|
<span class="line"><span>│ ├── Inter-Bold.woff</span></span>
|
|
61
59
|
<span class="line"><span>│ └── JetBrainsMono-Regular.woff</span></span>
|
|
62
|
-
<span class="line"><span>└──
|
|
60
|
+
<span class="line"><span>└── _loopwind/</span></span>
|
|
63
61
|
<span class="line"><span> └── templates/</span></span>
|
|
64
62
|
<span class="line"><span></span></span></code></pre>
|
|
65
63
|
<p><strong>Template usage (same as before):</strong></p>
|
|
66
64
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'font-sans font-bold'</span><span style="color:#E1E4E8">)}></span></span>
|
|
67
|
-
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses Inter Bold from
|
|
65
|
+
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses Inter Bold from loopwind.json */</span><span style="color:#E1E4E8">}</span></span>
|
|
68
66
|
<span class="line"><span style="color:#E1E4E8"> {title}</span></span>
|
|
69
67
|
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span>
|
|
70
68
|
<span class="line"></span></code></pre>
|
|
71
69
|
<p><strong>Available classes:</strong></p>
|
|
72
70
|
<ul>
|
|
73
|
-
<li><code>font-sans</code> - Uses <code>fonts.sans</code> from
|
|
74
|
-
<li><code>font-serif</code> - Uses <code>fonts.serif</code> from
|
|
75
|
-
<li><code>font-mono</code> - Uses <code>fonts.mono</code> from
|
|
71
|
+
<li><code>font-sans</code> - Uses <code>fonts.sans</code> from loopwind.json</li>
|
|
72
|
+
<li><code>font-serif</code> - Uses <code>fonts.serif</code> from loopwind.json</li>
|
|
73
|
+
<li><code>font-mono</code> - Uses <code>fonts.mono</code> from loopwind.json</li>
|
|
76
74
|
</ul>
|
|
77
75
|
<p><strong>Supported formats:</strong></p>
|
|
78
76
|
<ul>
|
|
@@ -84,50 +82,53 @@ _dsgn
|
|
|
84
82
|
<h2 id="template-specific-fonts-advanced">Template-Specific Fonts (Advanced)</h2>
|
|
85
83
|
<p>For templates that need unique fonts not shared across the project:</p>
|
|
86
84
|
<p><strong>Template structure:</strong></p>
|
|
87
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>
|
|
88
|
-
<span class="line"><span>├──
|
|
89
|
-
<span class="line"><span>├── meta.json</span></span>
|
|
85
|
+
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>_loopwind/templates/my-template/</span></span>
|
|
86
|
+
<span class="line"><span>├── template.tsx</span></span>
|
|
90
87
|
<span class="line"><span>└── fonts/</span></span>
|
|
91
88
|
<span class="line"><span> └── SpecialFont.woff</span></span>
|
|
92
89
|
<span class="line"><span></span></span></code></pre>
|
|
93
|
-
<p><strong>
|
|
94
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="
|
|
95
|
-
<span class="line"><span style="color:#
|
|
96
|
-
<span class="line"><span style="color:#
|
|
97
|
-
<span class="line"><span style="color:#
|
|
98
|
-
<span class="line"><span style="color:#
|
|
90
|
+
<p><strong>template.tsx:</strong></p>
|
|
91
|
+
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> meta</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
|
|
92
|
+
<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"my-template"</span><span style="color:#E1E4E8">,</span></span>
|
|
93
|
+
<span class="line"><span style="color:#E1E4E8"> type: </span><span style="color:#9ECBFF">"image"</span><span style="color:#E1E4E8">,</span></span>
|
|
94
|
+
<span class="line"><span style="color:#E1E4E8"> size: { width: </span><span style="color:#79B8FF">1200</span><span style="color:#E1E4E8">, height: </span><span style="color:#79B8FF">630</span><span style="color:#E1E4E8"> },</span></span>
|
|
95
|
+
<span class="line"><span style="color:#E1E4E8"> props: { title: </span><span style="color:#9ECBFF">"string"</span><span style="color:#E1E4E8"> },</span></span>
|
|
96
|
+
<span class="line"><span style="color:#E1E4E8"> fonts: [</span></span>
|
|
99
97
|
<span class="line"><span style="color:#E1E4E8"> {</span></span>
|
|
100
|
-
<span class="line"><span style="color:#
|
|
101
|
-
<span class="line"><span style="color:#
|
|
102
|
-
<span class="line"><span style="color:#
|
|
103
|
-
<span class="line"><span style="color:#
|
|
98
|
+
<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"Special Font"</span><span style="color:#E1E4E8">,</span></span>
|
|
99
|
+
<span class="line"><span style="color:#E1E4E8"> path: </span><span style="color:#9ECBFF">"fonts/SpecialFont.woff"</span><span style="color:#E1E4E8">,</span></span>
|
|
100
|
+
<span class="line"><span style="color:#E1E4E8"> weight: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8">,</span></span>
|
|
101
|
+
<span class="line"><span style="color:#E1E4E8"> style: </span><span style="color:#9ECBFF">"normal"</span></span>
|
|
104
102
|
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
105
103
|
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
104
|
+
<span class="line"><span style="color:#E1E4E8">};</span></span>
|
|
105
|
+
<span class="line"></span>
|
|
106
|
+
<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> Template</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
|
|
107
|
+
<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
|
|
108
|
+
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ fontFamily: </span><span style="color:#9ECBFF">'Special Font'</span><span style="color:#E1E4E8">, fontWeight: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }}></span></span>
|
|
109
|
+
<span class="line"><span style="color:#E1E4E8"> {title}</span></span>
|
|
110
|
+
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span>
|
|
111
|
+
<span class="line"><span style="color:#E1E4E8"> );</span></span>
|
|
106
112
|
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
107
113
|
<span class="line"></span></code></pre>
|
|
108
|
-
<p><strong>Template usage:</strong></p>
|
|
109
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{{ fontFamily: </span><span style="color:#9ECBFF">'Special Font'</span><span style="color:#E1E4E8">, fontWeight: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }}></span></span>
|
|
110
|
-
<span class="line"><span style="color:#E1E4E8"> {title}</span></span>
|
|
111
|
-
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span>
|
|
112
|
-
<span class="line"></span></code></pre>
|
|
113
114
|
<h2 id="font-loading-priority">Font Loading Priority</h2>
|
|
114
|
-
<p>
|
|
115
|
+
<p>loopwind loads fonts in this order:</p>
|
|
115
116
|
<ol>
|
|
116
|
-
<li><strong>
|
|
117
|
-
<li><strong>Template meta
|
|
117
|
+
<li><strong>loopwind.json fonts</strong> (if configured with <code>files</code>)</li>
|
|
118
|
+
<li><strong>Template meta fonts</strong> (if specified in <code>export const meta</code>)</li>
|
|
118
119
|
<li><strong>Default Noto Sans</strong> (from CDN)</li>
|
|
119
120
|
</ol>
|
|
120
|
-
<p>This means
|
|
121
|
+
<p>This means loopwind.json fonts override template fonts, ensuring consistency.</p>
|
|
121
122
|
<h2 id="default-fonts">Default Fonts</h2>
|
|
122
|
-
<p>If no fonts are configured,
|
|
123
|
+
<p>If no fonts are configured, loopwind automatically fetches <strong>Noto Sans</strong> from jsDelivr CDN.</p>
|
|
123
124
|
<h2 id="best-practices">Best Practices</h2>
|
|
124
125
|
<ol>
|
|
125
|
-
<li>✅ <strong>Use
|
|
126
|
+
<li>✅ <strong>Use loopwind.json for project-wide fonts</strong> - Configure once, use everywhere</li>
|
|
126
127
|
<li>✅ <strong>Use font classes</strong> - <code>tw('font-sans')</code> instead of <code>fontFamily: 'Inter'</code></li>
|
|
127
128
|
<li>✅ <strong>Include fallbacks</strong> - Always add system fonts: <code>["Inter", "system-ui", "sans-serif"]</code></li>
|
|
128
129
|
<li>✅ <strong>Match names</strong> - First font in <code>family</code> array is used as the loaded font name</li>
|
|
129
|
-
<li>✅ <strong>Relative paths</strong> - Font paths are relative to <code>
|
|
130
|
-
<li>⚠️ <strong>Template fonts for special cases</strong> - Only use meta
|
|
130
|
+
<li>✅ <strong>Relative paths</strong> - Font paths are relative to <code>loopwind.json</code> location</li>
|
|
131
|
+
<li>⚠️ <strong>Template fonts for special cases</strong> - Only use template meta fonts for template-specific typography</li>
|
|
131
132
|
</ol>
|
|
132
133
|
<h2 id="examples">Examples</h2>
|
|
133
134
|
<h3 id="minimal-setup-system-fonts">Minimal Setup (System Fonts)</h3>
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="
|
|
2
|
-
_dsgn
|
|
3
|
-
</h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> LLM Docs </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="template-helpers">Template Helpers</h1>
|
|
1
|
+
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/helpers/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation"><meta name="author" content="loopwind"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://loopwind.dev/helpers/"><meta property="og:title"><meta property="og:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/og-image.png"><meta property="og:site_name" content="loopwind"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://loopwind.dev/helpers/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/og-image.png"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="language" content="English"><link rel="stylesheet" href="/_astro/agents.I1-fN38o.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl flex items-center gap-2 bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj> <span class="text-5xl" data-astro-cid-mw7aashj>↫</span> <span data-astro-cid-mw7aashj>loopwind</span> </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="template-helpers">Template Helpers</h1>
|
|
4
2
|
<p>Additional helpers for creating powerful, composable templates.</p>
|
|
5
3
|
<h2 id="overview">Overview</h2>
|
|
6
|
-
<p>Beyond the basics,
|
|
4
|
+
<p>Beyond the basics, loopwind provides:</p>
|
|
7
5
|
<ul>
|
|
8
6
|
<li><code>template()</code> - Compose templates together</li>
|
|
9
7
|
<li><code>qr()</code> - Generate QR codes on the fly</li>
|
|
@@ -106,9 +104,9 @@ _dsgn
|
|
|
106
104
|
<li><code>H</code> - High (~30% correction)</li>
|
|
107
105
|
</ul>
|
|
108
106
|
<h2 id="user-configuration">User Configuration</h2>
|
|
109
|
-
<p>Access user settings from <code>
|
|
107
|
+
<p>Access user settings from <code>loopwind.json</code> using the <code>config</code> prop:</p>
|
|
110
108
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> BrandedTemplate</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">config</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8"> }) {</span></span>
|
|
111
|
-
<span class="line"><span style="color:#6A737D"> // Access custom colors from
|
|
109
|
+
<span class="line"><span style="color:#6A737D"> // Access custom colors from loopwind.json</span></span>
|
|
112
110
|
<span class="line"><span style="color:#F97583"> const</span><span style="color:#79B8FF"> primaryColor</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> config?.colors?.brand </span><span style="color:#F97583">||</span><span style="color:#9ECBFF"> '#6366f1'</span><span style="color:#E1E4E8">;</span></span>
|
|
113
111
|
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
114
112
|
<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
|
|
@@ -123,7 +121,7 @@ _dsgn
|
|
|
123
121
|
<span class="line"><span style="color:#E1E4E8"> );</span></span>
|
|
124
122
|
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
125
123
|
<span class="line"></span></code></pre>
|
|
126
|
-
<p><strong>User’s
|
|
124
|
+
<p><strong>User’s loopwind.json:</strong></p>
|
|
127
125
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="json"><code><span class="line"><span style="color:#E1E4E8">{</span></span>
|
|
128
126
|
<span class="line"><span style="color:#79B8FF"> "colors"</span><span style="color:#E1E4E8">: {</span></span>
|
|
129
127
|
<span class="line"><span style="color:#79B8FF"> "brand"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ff6b6b"</span></span>
|
|
@@ -141,7 +139,7 @@ _dsgn
|
|
|
141
139
|
<span class="line"><span style="color:#FFAB70"> tw</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Tailwind class converter</span></span>
|
|
142
140
|
<span class="line"><span style="color:#FFAB70"> qr</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// QR code generator (this page)</span></span>
|
|
143
141
|
<span class="line"><span style="color:#FFAB70"> template</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Template composer (this page)</span></span>
|
|
144
|
-
<span class="line"><span style="color:#FFAB70"> config</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// User config from
|
|
142
|
+
<span class="line"><span style="color:#FFAB70"> config</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// User config from loopwind.json (this page)</span></span>
|
|
145
143
|
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
146
144
|
<span class="line"><span style="color:#6A737D"> // Media helpers (see dedicated pages)</span></span>
|
|
147
145
|
<span class="line"><span style="color:#FFAB70"> image</span><span style="color:#E1E4E8">, </span><span style="color:#6A737D">// Image embedder → see /images</span></span>
|
|
@@ -1,23 +1,29 @@
|
|
|
1
|
-
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="
|
|
2
|
-
|
|
3
|
-
</h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> LLM Docs </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="image-rendering">Image Rendering</h1>
|
|
4
|
-
<p>Generate beautiful images from React components using dsgn’s powerful image rendering engine powered by Satori.</p>
|
|
1
|
+
<!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><link rel="canonical" href="https://loopwind.dev/images/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation"><meta name="author" content="loopwind"><!-- Open Graph / Facebook --><meta property="og:type" content="website"><meta property="og:url" content="https://loopwind.dev/images/"><meta property="og:title"><meta property="og:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/og-image.png"><meta property="og:site_name" content="loopwind"><!-- Twitter --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://loopwind.dev/images/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/og-image.png"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="language" content="English"><link rel="stylesheet" href="/_astro/agents.I1-fN38o.css"></head> <body class="antialiased"> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Sidebar --> <aside class="fixed top-0 left-0 h-screen w-64 border-r border-border bg-card overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="p-6" data-astro-cid-mw7aashj> <a href="/" class="block mb-8 no-underline" data-astro-cid-mw7aashj> <h1 class="text-3xl flex items-center gap-2 bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj> <span class="text-5xl" data-astro-cid-mw7aashj>↫</span> <span data-astro-cid-mw7aashj>loopwind</span> </h1> </a> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Getting Started </a> </li><li data-astro-cid-mw7aashj> <a href="/templates" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Templates </a> </li><li data-astro-cid-mw7aashj> <a href="/images" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Images </a> </li><li data-astro-cid-mw7aashj> <a href="/video" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Video </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Animation </a> </li><li data-astro-cid-mw7aashj> <a href="/helpers" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Helpers </a> </li><li data-astro-cid-mw7aashj> <a href="/styling" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Styling </a> </li><li data-astro-cid-mw7aashj> <a href="/fonts" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Fonts </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> SDK </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-2 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> llm.txt </a> </li> </ul> </nav> </div> </aside> <!-- Main content --> <main class="ml-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="image-rendering">Image Rendering</h1>
|
|
2
|
+
<p>Generate beautiful images from React components using loopwind’s powerful image rendering engine powered by Satori.</p>
|
|
5
3
|
<h2 id="quick-start">Quick Start</h2>
|
|
6
4
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Render an image template with inline props</span></span>
|
|
7
|
-
<span class="line"><span style="color:#B392F0">
|
|
5
|
+
<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> '{"title":"Hello World","subtitle":"Welcome"}'</span></span>
|
|
8
6
|
<span class="line"></span>
|
|
9
7
|
<span class="line"><span style="color:#6A737D"># Custom output name</span></span>
|
|
10
|
-
<span class="line"><span style="color:#B392F0">
|
|
8
|
+
<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> '{"title":"Hello"}'</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> custom-name.png</span></span>
|
|
11
9
|
<span class="line"></span>
|
|
12
10
|
<span class="line"><span style="color:#6A737D"># Different format</span></span>
|
|
13
|
-
<span class="line"><span style="color:#B392F0">
|
|
11
|
+
<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> '{"title":"Hello"}'</span><span style="color:#79B8FF"> --format</span><span style="color:#9ECBFF"> jpeg</span><span style="color:#79B8FF"> --quality</span><span style="color:#79B8FF"> 95</span></span>
|
|
14
12
|
<span class="line"></span>
|
|
15
13
|
<span class="line"><span style="color:#6A737D"># Or use a props file</span></span>
|
|
16
|
-
<span class="line"><span style="color:#B392F0">
|
|
14
|
+
<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#9ECBFF"> props.json</span></span>
|
|
17
15
|
<span class="line"></span></code></pre>
|
|
18
16
|
<h2 id="image-template-structure">Image Template Structure</h2>
|
|
19
17
|
<h3 id="basic-template">Basic Template</h3>
|
|
20
18
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#6A737D">// banner-hero.tsx</span></span>
|
|
19
|
+
<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> meta</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
|
|
20
|
+
<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"banner-hero"</span><span style="color:#E1E4E8">,</span></span>
|
|
21
|
+
<span class="line"><span style="color:#E1E4E8"> type: </span><span style="color:#9ECBFF">"image"</span><span style="color:#E1E4E8">,</span></span>
|
|
22
|
+
<span class="line"><span style="color:#E1E4E8"> description: </span><span style="color:#9ECBFF">"Hero banner with gradient background"</span><span style="color:#E1E4E8">,</span></span>
|
|
23
|
+
<span class="line"><span style="color:#E1E4E8"> size: { width: </span><span style="color:#79B8FF">1600</span><span style="color:#E1E4E8">, height: </span><span style="color:#79B8FF">900</span><span style="color:#E1E4E8"> },</span></span>
|
|
24
|
+
<span class="line"><span style="color:#E1E4E8"> props: { title: </span><span style="color:#9ECBFF">"string"</span><span style="color:#E1E4E8">, subtitle: </span><span style="color:#9ECBFF">"string"</span><span style="color:#E1E4E8"> }</span></span>
|
|
25
|
+
<span class="line"><span style="color:#E1E4E8">};</span></span>
|
|
26
|
+
<span class="line"></span>
|
|
21
27
|
<span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#B392F0"> BannerHero</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">subtitle</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
|
|
22
28
|
<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
|
|
23
29
|
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'flex flex-col justify-center items-center w-full h-full bg-gradient-to-br from-purple-600 to-blue-500 p-12'</span><span style="color:#E1E4E8">)}></span></span>
|
|
@@ -31,31 +37,16 @@ _dsgn
|
|
|
31
37
|
<span class="line"><span style="color:#E1E4E8"> );</span></span>
|
|
32
38
|
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
33
39
|
<span class="line"></span></code></pre>
|
|
34
|
-
<h3 id="metadata-metajson">Metadata (meta.json)</h3>
|
|
35
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="json"><code><span class="line"><span style="color:#E1E4E8">{</span></span>
|
|
36
|
-
<span class="line"><span style="color:#79B8FF"> "name"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"banner-hero"</span><span style="color:#E1E4E8">,</span></span>
|
|
37
|
-
<span class="line"><span style="color:#79B8FF"> "type"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"image"</span><span style="color:#E1E4E8">,</span></span>
|
|
38
|
-
<span class="line"><span style="color:#79B8FF"> "description"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Hero banner with gradient background"</span><span style="color:#E1E4E8">,</span></span>
|
|
39
|
-
<span class="line"><span style="color:#79B8FF"> "size"</span><span style="color:#E1E4E8">: {</span></span>
|
|
40
|
-
<span class="line"><span style="color:#79B8FF"> "width"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">1600</span><span style="color:#E1E4E8">,</span></span>
|
|
41
|
-
<span class="line"><span style="color:#79B8FF"> "height"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">900</span></span>
|
|
42
|
-
<span class="line"><span style="color:#E1E4E8"> },</span></span>
|
|
43
|
-
<span class="line"><span style="color:#79B8FF"> "props"</span><span style="color:#E1E4E8">: {</span></span>
|
|
44
|
-
<span class="line"><span style="color:#79B8FF"> "title"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"string"</span><span style="color:#E1E4E8">,</span></span>
|
|
45
|
-
<span class="line"><span style="color:#79B8FF"> "subtitle"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"string"</span></span>
|
|
46
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
47
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
48
|
-
<span class="line"></span></code></pre>
|
|
49
40
|
<h3 id="props-file">Props File</h3>
|
|
50
41
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="json"><code><span class="line"><span style="color:#E1E4E8">{</span></span>
|
|
51
|
-
<span class="line"><span style="color:#79B8FF"> "title"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Welcome to
|
|
42
|
+
<span class="line"><span style="color:#79B8FF"> "title"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Welcome to loopwind"</span><span style="color:#E1E4E8">,</span></span>
|
|
52
43
|
<span class="line"><span style="color:#79B8FF"> "subtitle"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"Generate beautiful images from React"</span></span>
|
|
53
44
|
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
54
45
|
<span class="line"></span></code></pre>
|
|
55
46
|
<h2 id="output-formats">Output Formats</h2>
|
|
56
47
|
<h3 id="png-default">PNG (Default)</h3>
|
|
57
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">
|
|
58
|
-
<span class="line"><span style="color:#6A737D"># Output: my-template.png</span></span>
|
|
48
|
+
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> my-template</span><span style="color:#9ECBFF"> '{"title":"Hello"}'</span></span>
|
|
49
|
+
<span class="line"><span style="color:#6A737D"># Output: _loopwind/outputs/my-template.png</span></span>
|
|
59
50
|
<span class="line"></span></code></pre>
|
|
60
51
|
<p><strong>Best for:</strong></p>
|
|
61
52
|
<ul>
|
|
@@ -65,7 +56,7 @@ _dsgn
|
|
|
65
56
|
<li>Web graphics</li>
|
|
66
57
|
</ul>
|
|
67
58
|
<h3 id="jpeg">JPEG</h3>
|
|
68
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">
|
|
59
|
+
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> my-template</span><span style="color:#9ECBFF"> '{"title":"Hello"}'</span><span style="color:#79B8FF"> --format</span><span style="color:#9ECBFF"> jpeg</span><span style="color:#79B8FF"> --quality</span><span style="color:#79B8FF"> 92</span></span>
|
|
69
60
|
<span class="line"></span></code></pre>
|
|
70
61
|
<p><strong>Options:</strong></p>
|
|
71
62
|
<ul>
|
|
@@ -79,7 +70,7 @@ _dsgn
|
|
|
79
70
|
<li>Social media images</li>
|
|
80
71
|
</ul>
|
|
81
72
|
<h3 id="svg">SVG</h3>
|
|
82
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">
|
|
73
|
+
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> my-template</span><span style="color:#9ECBFF"> '{"title":"Hello"}'</span><span style="color:#79B8FF"> --format</span><span style="color:#9ECBFF"> svg</span></span>
|
|
83
74
|
<span class="line"></span></code></pre>
|
|
84
75
|
<p><strong>Best for:</strong></p>
|
|
85
76
|
<ul>
|
|
@@ -250,13 +241,13 @@ _dsgn
|
|
|
250
241
|
<h3 id="3-batch-rendering">3. Batch Rendering</h3>
|
|
251
242
|
<p>Render multiple images at once:</p>
|
|
252
243
|
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="bash"><code><span class="line"><span style="color:#6A737D"># Using a script with inline props</span></span>
|
|
253
|
-
<span class="line"><span style="color:#B392F0">
|
|
254
|
-
<span class="line"><span style="color:#B392F0">
|
|
255
|
-
<span class="line"><span style="color:#B392F0">
|
|
244
|
+
<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> my-template</span><span style="color:#9ECBFF"> '{"title":"Image 1"}'</span></span>
|
|
245
|
+
<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> my-template</span><span style="color:#9ECBFF"> '{"title":"Image 2"}'</span></span>
|
|
246
|
+
<span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> my-template</span><span style="color:#9ECBFF"> '{"title":"Image 3"}'</span></span>
|
|
256
247
|
<span class="line"></span>
|
|
257
248
|
<span class="line"><span style="color:#6A737D"># Or loop through props files</span></span>
|
|
258
249
|
<span class="line"><span style="color:#F97583">for</span><span style="color:#E1E4E8"> props </span><span style="color:#F97583">in</span><span style="color:#9ECBFF"> props/*.json</span><span style="color:#E1E4E8">; </span><span style="color:#F97583">do</span></span>
|
|
259
|
-
<span class="line"><span style="color:#B392F0">
|
|
250
|
+
<span class="line"><span style="color:#B392F0"> loopwind</span><span style="color:#9ECBFF"> render</span><span style="color:#9ECBFF"> my-template</span><span style="color:#9ECBFF"> "</span><span style="color:#E1E4E8">$props</span><span style="color:#9ECBFF">"</span></span>
|
|
260
251
|
<span class="line"><span style="color:#F97583">done</span></span>
|
|
261
252
|
<span class="line"></span></code></pre>
|
|
262
253
|
<h3 id="4-cache-templates">4. Cache Templates</h3>
|
|
@@ -285,16 +276,19 @@ _dsgn
|
|
|
285
276
|
</ul>
|
|
286
277
|
<h2 id="troubleshooting">Troubleshooting</h2>
|
|
287
278
|
<h3 id="fonts-not-rendering">Fonts Not Rendering</h3>
|
|
288
|
-
<p>Make sure fonts are properly
|
|
289
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="
|
|
290
|
-
<span class="line"><span style="color:#
|
|
279
|
+
<p>Make sure fonts are properly defined in your template’s meta:</p>
|
|
280
|
+
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> const</span><span style="color:#79B8FF"> meta</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
|
|
281
|
+
<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"my-template"</span><span style="color:#E1E4E8">,</span></span>
|
|
282
|
+
<span class="line"><span style="color:#6A737D"> // ...</span></span>
|
|
283
|
+
<span class="line"><span style="color:#E1E4E8"> fonts: [</span></span>
|
|
291
284
|
<span class="line"><span style="color:#E1E4E8"> {</span></span>
|
|
292
|
-
<span class="line"><span style="color:#
|
|
293
|
-
<span class="line"><span style="color:#
|
|
294
|
-
<span class="line"><span style="color:#
|
|
285
|
+
<span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">,</span></span>
|
|
286
|
+
<span class="line"><span style="color:#E1E4E8"> path: </span><span style="color:#9ECBFF">"fonts/Inter-Bold.woff"</span><span style="color:#E1E4E8">,</span></span>
|
|
287
|
+
<span class="line"><span style="color:#E1E4E8"> weight: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8">,</span></span>
|
|
288
|
+
<span class="line"><span style="color:#E1E4E8"> style: </span><span style="color:#9ECBFF">"normal"</span></span>
|
|
295
289
|
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
296
290
|
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
297
|
-
<span class="line"><span style="color:#E1E4E8">}
|
|
291
|
+
<span class="line"><span style="color:#E1E4E8">};</span></span>
|
|
298
292
|
<span class="line"></span></code></pre>
|
|
299
293
|
<h3 id="images-not-loading">Images Not Loading</h3>
|
|
300
294
|
<p>Check file paths are relative to the props file:</p>
|