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.
@@ -1,6 +1,4 @@
1
- <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="dsgn - Generate beautiful images from React components"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><title></title><link rel="stylesheet" href="/_astro/fonts.DHdiHGBO.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 font-bold bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj>
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="styling-templates">Styling Templates</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/styling/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image &#38; 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/styling/"><meta property="og:title"><meta property="og:description" content="CLI-based Image &#38; 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/styling/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image &#38; 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="styling-templates">Styling Templates</h1>
4
2
  <p>Style your templates with Tailwind utility classes and shadcn/ui’s beautiful design system.</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="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"> MyTemplate</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>
@@ -57,7 +55,7 @@ _dsgn
57
55
  <span class="line"><span style="color:#E1E4E8">}</span></span>
58
56
  <span class="line"></span></code></pre>
59
57
  <h2 id="shadcnui-design-system">shadcn/ui Design System</h2>
60
- <p>dsgn uses <strong>shadcn/ui’s design system</strong> by default, providing semantic color tokens for beautiful, consistent designs.</p>
58
+ <p>loopwind uses <strong>shadcn/ui’s design system</strong> by default, providing semantic color tokens for beautiful, consistent designs.</p>
61
59
  <h3 id="default-color-palette">Default Color Palette</h3>
62
60
  <p>All templates automatically have access to these semantic colors:</p>
63
61
  <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#B392F0">colors</span><span style="color:#E1E4E8">: {</span></span>
@@ -264,7 +262,7 @@ _dsgn
264
262
  <span class="line"><span style="color:#E1E4E8">}</span></span>
265
263
  <span class="line"></span></code></pre>
266
264
  <h2 id="custom-theme-colors">Custom Theme Colors</h2>
267
- <p>Override default colors in your <code>dsgn.json</code>:</p>
265
+ <p>Override default colors in your <code>loopwind.json</code>:</p>
268
266
  <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>
269
267
  <span class="line"><span style="color:#79B8FF"> &quot;theme&quot;</span><span style="color:#E1E4E8">: {</span></span>
270
268
  <span class="line"><span style="color:#79B8FF"> &quot;colors&quot;</span><span style="color:#E1E4E8">: {</span></span>
@@ -281,11 +279,11 @@ _dsgn
281
279
  <span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;bg-primary&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// Uses your custom primary color</span></span>
282
280
  <span class="line"></span></code></pre>
283
281
  <h2 id="auto-detection-from-tailwindconfigjs">Auto-Detection from tailwind.config.js</h2>
284
- <p>dsgn automatically detects and loads your project’s Tailwind configuration:</p>
282
+ <p>loopwind automatically detects and loads your project’s Tailwind configuration:</p>
285
283
  <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>
286
284
  <span class="line"><span>├── tailwind.config.js ← Automatically detected</span></span>
287
- <span class="line"><span>├── dsgn.json</span></span>
288
- <span class="line"><span>└── _dsgn/templates/</span></span>
285
+ <span class="line"><span>├── loopwind.json</span></span>
286
+ <span class="line"><span>└── _loopwind/templates/</span></span>
289
287
  <span class="line"><span></span></span></code></pre>
290
288
  <p>This includes:</p>
291
289
  <ul>
@@ -1,8 +1,6 @@
1
- <!DOCTYPE html><html lang="en"> <head><meta charset="UTF-8"><meta name="description" content="dsgn - Generate beautiful images from React components"><meta name="viewport" content="width=device-width"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="generator" content="Astro v4.16.19"><title></title><link rel="stylesheet" href="/_astro/fonts.DHdiHGBO.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 font-bold bg-gradient-to-r from-[var(--color-brand-from)] to-[var(--color-brand-to)] bg-clip-text text-transparent" data-astro-cid-mw7aashj>
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="installing-templates-from-different-sources">Installing Templates from Different Sources</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/templates/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image &#38; 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/templates/"><meta property="og:title"><meta property="og:description" content="CLI-based Image &#38; 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/templates/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image &#38; 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="installing-templates-from-different-sources">Installing Templates from Different Sources</h1>
4
2
  <h2 id="overview">Overview</h2>
5
- <p>dsgn supports installing templates from multiple sources:</p>
3
+ <p>loopwind supports installing templates from multiple sources:</p>
6
4
  <ol>
7
5
  <li><strong>Official Registry</strong> (default)</li>
8
6
  <li><strong>Direct URLs</strong></li>
@@ -10,25 +8,25 @@ _dsgn
10
8
  <li><strong>Local Filesystem</strong></li>
11
9
  </ol>
12
10
  <h2 id="1-official-registry-default">1. Official Registry (Default)</h2>
13
- <p>Install templates from the official dsgn registry at <code>https://dsgncli.com/r</code></p>
14
- <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">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> banner-hero</span></span>
15
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> product-card</span></span>
16
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> social-og-image</span></span>
11
+ <p>Install templates from the official loopwind registry at <code>https://loopwind.dev/r</code></p>
12
+ <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"> add</span><span style="color:#9ECBFF"> banner-hero</span></span>
13
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> product-card</span></span>
14
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> social-og-image</span></span>
17
15
  <span class="line"></span></code></pre>
18
16
  <p><strong>How it works:</strong></p>
19
17
  <ul>
20
- <li>Fetches from: <code>https://dsgncli.com/r/banner-hero</code></li>
18
+ <li>Fetches from: <code>https://loopwind.dev/r/banner-hero</code></li>
21
19
  <li>Returns JSON with template files</li>
22
- <li>Installs to: <code>_dsgn/templates/banner-hero/</code></li>
20
+ <li>Installs to: <code>_loopwind/templates/banner-hero/</code></li>
23
21
  </ul>
24
22
  <h3 id="custom-registry">Custom Registry</h3>
25
23
  <p>Use a different registry:</p>
26
- <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">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#79B8FF"> --registry</span><span style="color:#9ECBFF"> https://my-registry.com/templates</span></span>
24
+ <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"> add</span><span style="color:#9ECBFF"> banner-hero</span><span style="color:#79B8FF"> --registry</span><span style="color:#9ECBFF"> https://my-registry.com/templates</span></span>
27
25
  <span class="line"></span></code></pre>
28
26
  <h2 id="2-direct-urls">2. Direct URLs</h2>
29
27
  <p>Install a template from any publicly accessible URL:</p>
30
- <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">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://example.com/templates/my-template.json</span></span>
31
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://cdn.example.com/templates/awesome-banner.json</span></span>
28
+ <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"> add</span><span style="color:#9ECBFF"> https://example.com/templates/my-template.json</span></span>
29
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> https://cdn.example.com/templates/awesome-banner.json</span></span>
32
30
  <span class="line"></span></code></pre>
33
31
  <p><strong>Requirements:</strong></p>
34
32
  <ul>
@@ -55,13 +53,13 @@ _dsgn
55
53
  <h2 id="3-github-repositories">3. GitHub Repositories</h2>
56
54
  <p>Install templates directly from GitHub repos:</p>
57
55
  <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"># From a GitHub repo (looks for template.json in repo root)</span></span>
58
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo</span></span>
56
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo</span></span>
59
57
  <span class="line"></span>
60
58
  <span class="line"><span style="color:#6A737D"># From a specific path in the repo</span></span>
61
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo/templates/banner-hero</span></span>
59
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:username/repo/templates/banner-hero</span></span>
62
60
  <span class="line"></span>
63
61
  <span class="line"><span style="color:#6A737D"># From an organization</span></span>
64
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:myorg/design-templates/social-media/og-image</span></span>
62
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> github:myorg/design-templates/social-media/og-image</span></span>
65
63
  <span class="line"></span></code></pre>
66
64
  <p><strong>How it works:</strong></p>
67
65
  <ol>
@@ -86,11 +84,11 @@ _dsgn
86
84
  <h2 id="4-local-filesystem">4. Local Filesystem</h2>
87
85
  <p>Install templates from your local filesystem:</p>
88
86
  <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"># Relative path</span></span>
89
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ./my-templates/banner-hero</span></span>
90
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ../shared-templates/product-card</span></span>
87
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ./my-templates/banner-hero</span></span>
88
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> ../shared-templates/product-card</span></span>
91
89
  <span class="line"></span>
92
90
  <span class="line"><span style="color:#6A737D"># Absolute path</span></span>
93
- <span class="line"><span style="color:#B392F0">dsgn</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> /Users/you/templates/social-card</span></span>
91
+ <span class="line"><span style="color:#B392F0">loopwind</span><span style="color:#9ECBFF"> add</span><span style="color:#9ECBFF"> /Users/you/templates/social-card</span></span>
94
92
  <span class="line"></span></code></pre>
95
93
  <p><strong>Use cases:</strong></p>
96
94
  <ul>
@@ -100,8 +98,8 @@ _dsgn
100
98
  <li>Before publishing to registry</li>
101
99
  </ul>
102
100
  <h2 id="template-installation-directory">Template Installation Directory</h2>
103
- <p>Templates are installed to <code>_dsgn/templates/&lt;template-name&gt;/</code> by default.</p>
104
- <p>Customize this in <code>dsgn.json</code>:</p>
101
+ <p>Templates are installed to <code>_loopwind/templates/&lt;template-name&gt;/</code> by default.</p>
102
+ <p>Customize this in <code>loopwind.json</code>:</p>
105
103
  <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>
106
104
  <span class="line"><span style="color:#79B8FF"> &quot;templatesDir&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;my-custom-templates&quot;</span></span>
107
105
  <span class="line"><span style="color:#E1E4E8">}</span></span>