loopwind 0.9.1

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.
Files changed (245) hide show
  1. package/FONTS.md +156 -0
  2. package/HELPERS_DEMO.md +134 -0
  3. package/PROJECT_STRUCTURE.md +286 -0
  4. package/PUBLISHING.md +171 -0
  5. package/README.md +1020 -0
  6. package/REGISTRY_SETUP.md +427 -0
  7. package/SHADCN_INTEGRATION.md +269 -0
  8. package/TAILWIND.md +228 -0
  9. package/TEMPLATE_SOURCES.md +363 -0
  10. package/_dsgn/templates/banner-hero/banner-hero.tsx +57 -0
  11. package/_dsgn/templates/banner-hero/meta.json +14 -0
  12. package/_dsgn/templates/composite-card/meta.json +16 -0
  13. package/_dsgn/templates/composite-card/template.tsx +44 -0
  14. package/_dsgn/templates/image/meta.json +13 -0
  15. package/_dsgn/templates/image/template.tsx +28 -0
  16. package/_dsgn/templates/kitchen-sink/meta.json +13 -0
  17. package/_dsgn/templates/kitchen-sink/template.tsx +72 -0
  18. package/_dsgn/templates/qr-card/meta.json +14 -0
  19. package/_dsgn/templates/qr-card/template.tsx +39 -0
  20. package/_dsgn/templates/test-parent/child/meta.json +11 -0
  21. package/_dsgn/templates/test-parent/child/template.tsx +27 -0
  22. package/_dsgn/templates/test-parent/meta.json +12 -0
  23. package/_dsgn/templates/test-parent/template.tsx +30 -0
  24. package/_dsgn/templates/test-sibling/meta.json +11 -0
  25. package/_dsgn/templates/test-sibling/template.tsx +20 -0
  26. package/_dsgn/templates/video/.tmp/template-1763421345296.mjs +43 -0
  27. package/_dsgn/templates/video/.tmp/template-1763421362228.mjs +43 -0
  28. package/_dsgn/templates/video/.tmp/template-1763421377706.mjs +43 -0
  29. package/_dsgn/templates/video/meta.json +17 -0
  30. package/_dsgn/templates/video/template.tsx +48 -0
  31. package/dist/cli.d.ts +3 -0
  32. package/dist/cli.d.ts.map +1 -0
  33. package/dist/cli.js +70 -0
  34. package/dist/cli.js.map +1 -0
  35. package/dist/commands/add.d.ts +6 -0
  36. package/dist/commands/add.d.ts.map +1 -0
  37. package/dist/commands/add.js +86 -0
  38. package/dist/commands/add.js.map +1 -0
  39. package/dist/commands/default.d.ts +2 -0
  40. package/dist/commands/default.d.ts.map +1 -0
  41. package/dist/commands/default.js +69 -0
  42. package/dist/commands/default.js.map +1 -0
  43. package/dist/commands/init.d.ts +2 -0
  44. package/dist/commands/init.d.ts.map +1 -0
  45. package/dist/commands/init.js +75 -0
  46. package/dist/commands/init.js.map +1 -0
  47. package/dist/commands/list.d.ts +2 -0
  48. package/dist/commands/list.d.ts.map +1 -0
  49. package/dist/commands/list.js +83 -0
  50. package/dist/commands/list.js.map +1 -0
  51. package/dist/commands/preview.d.ts +3 -0
  52. package/dist/commands/preview.d.ts.map +1 -0
  53. package/dist/commands/preview.js +296 -0
  54. package/dist/commands/preview.js.map +1 -0
  55. package/dist/commands/render.d.ts +10 -0
  56. package/dist/commands/render.d.ts.map +1 -0
  57. package/dist/commands/render.js +204 -0
  58. package/dist/commands/render.js.map +1 -0
  59. package/dist/commands/validate.d.ts +2 -0
  60. package/dist/commands/validate.d.ts.map +1 -0
  61. package/dist/commands/validate.js +107 -0
  62. package/dist/commands/validate.js.map +1 -0
  63. package/dist/default-templates/AGENTS.md +229 -0
  64. package/dist/default-templates/image/meta.json +13 -0
  65. package/dist/default-templates/image/template.d.ts +20 -0
  66. package/dist/default-templates/image/template.d.ts.map +1 -0
  67. package/dist/default-templates/image/template.js +18 -0
  68. package/dist/default-templates/image/template.js.map +1 -0
  69. package/dist/default-templates/image/template.tsx +20 -0
  70. package/dist/default-templates/image-template/meta.json +13 -0
  71. package/dist/default-templates/image-template/template.tsx +19 -0
  72. package/dist/default-templates/kitchen-sink/meta.json +13 -0
  73. package/dist/default-templates/kitchen-sink/template.tsx +64 -0
  74. package/dist/default-templates/page/meta.json +17 -0
  75. package/dist/default-templates/page/template.tsx +37 -0
  76. package/dist/default-templates/video/meta.json +17 -0
  77. package/dist/default-templates/video/template.d.ts +26 -0
  78. package/dist/default-templates/video/template.d.ts.map +1 -0
  79. package/dist/default-templates/video/template.js +33 -0
  80. package/dist/default-templates/video/template.js.map +1 -0
  81. package/dist/default-templates/video/template.tsx +37 -0
  82. package/dist/default-templates/video-template/meta.json +17 -0
  83. package/dist/default-templates/video-template/template.tsx +36 -0
  84. package/dist/default-templates/website/meta.json +16 -0
  85. package/dist/default-templates/website/pages/home.tsx +17 -0
  86. package/dist/default-templates/website/parts/footer.tsx +17 -0
  87. package/dist/default-templates/website/parts/header.tsx +17 -0
  88. package/dist/default-templates/website/template.tsx +17 -0
  89. package/dist/default-templates/website-template/meta.json +16 -0
  90. package/dist/default-templates/website-template/pages/home.tsx +16 -0
  91. package/dist/default-templates/website-template/parts/footer.tsx +16 -0
  92. package/dist/default-templates/website-template/parts/header.tsx +16 -0
  93. package/dist/default-templates/website-template/template.tsx +16 -0
  94. package/dist/lib/config.d.ts +34 -0
  95. package/dist/lib/config.d.ts.map +1 -0
  96. package/dist/lib/config.js +248 -0
  97. package/dist/lib/config.js.map +1 -0
  98. package/dist/lib/constants.d.ts +7 -0
  99. package/dist/lib/constants.d.ts.map +1 -0
  100. package/dist/lib/constants.js +12 -0
  101. package/dist/lib/constants.js.map +1 -0
  102. package/dist/lib/helpers.d.ts +29 -0
  103. package/dist/lib/helpers.d.ts.map +1 -0
  104. package/dist/lib/helpers.js +159 -0
  105. package/dist/lib/helpers.js.map +1 -0
  106. package/dist/lib/installer.d.ts +51 -0
  107. package/dist/lib/installer.d.ts.map +1 -0
  108. package/dist/lib/installer.js +215 -0
  109. package/dist/lib/installer.js.map +1 -0
  110. package/dist/lib/renderer.d.ts +51 -0
  111. package/dist/lib/renderer.d.ts.map +1 -0
  112. package/dist/lib/renderer.js +524 -0
  113. package/dist/lib/renderer.js.map +1 -0
  114. package/dist/lib/tailwind-config-loader.d.ts +47 -0
  115. package/dist/lib/tailwind-config-loader.d.ts.map +1 -0
  116. package/dist/lib/tailwind-config-loader.js +432 -0
  117. package/dist/lib/tailwind-config-loader.js.map +1 -0
  118. package/dist/lib/tailwind-detector.d.ts +36 -0
  119. package/dist/lib/tailwind-detector.d.ts.map +1 -0
  120. package/dist/lib/tailwind-detector.js +156 -0
  121. package/dist/lib/tailwind-detector.js.map +1 -0
  122. package/dist/lib/tailwind.d.ts +8 -0
  123. package/dist/lib/tailwind.d.ts.map +1 -0
  124. package/dist/lib/tailwind.js +994 -0
  125. package/dist/lib/tailwind.js.map +1 -0
  126. package/dist/lib/template-validator.d.ts +22 -0
  127. package/dist/lib/template-validator.d.ts.map +1 -0
  128. package/dist/lib/template-validator.js +174 -0
  129. package/dist/lib/template-validator.js.map +1 -0
  130. package/dist/lib/utils.d.ts +44 -0
  131. package/dist/lib/utils.d.ts.map +1 -0
  132. package/dist/lib/utils.js +207 -0
  133. package/dist/lib/utils.js.map +1 -0
  134. package/dist/lib/version-check.d.ts +16 -0
  135. package/dist/lib/version-check.d.ts.map +1 -0
  136. package/dist/lib/version-check.js +88 -0
  137. package/dist/lib/version-check.js.map +1 -0
  138. package/dist/lib/video-renderer.d.ts +32 -0
  139. package/dist/lib/video-renderer.d.ts.map +1 -0
  140. package/dist/lib/video-renderer.js +226 -0
  141. package/dist/lib/video-renderer.js.map +1 -0
  142. package/dist/sdk/index.d.ts +58 -0
  143. package/dist/sdk/index.d.ts.map +1 -0
  144. package/dist/sdk/index.js +119 -0
  145. package/dist/sdk/index.js.map +1 -0
  146. package/dist/sdk/template.d.ts +40 -0
  147. package/dist/sdk/template.d.ts.map +1 -0
  148. package/dist/sdk/template.js +60 -0
  149. package/dist/sdk/template.js.map +1 -0
  150. package/dist/types/config.d.ts +62 -0
  151. package/dist/types/config.d.ts.map +1 -0
  152. package/dist/types/config.js +47 -0
  153. package/dist/types/config.js.map +1 -0
  154. package/dist/types/template.d.ts +79 -0
  155. package/dist/types/template.d.ts.map +1 -0
  156. package/dist/types/template.js +2 -0
  157. package/dist/types/template.js.map +1 -0
  158. package/examples/nextjs-api/README.md +180 -0
  159. package/examples/nextjs-api/package.json +21 -0
  160. package/examples/nextjs-api/pages/api/intro-video.ts +53 -0
  161. package/examples/nextjs-api/pages/api/og-image.ts +50 -0
  162. package/netlify.toml +13 -0
  163. package/package.json +84 -0
  164. package/patches/satori+0.18.3.patch +13 -0
  165. package/test-templates/TESTS.md +63 -0
  166. package/test-templates/_dsgn/templates/absolute-spin/meta.json +7 -0
  167. package/test-templates/_dsgn/templates/absolute-spin/template.tsx +16 -0
  168. package/test-templates/_dsgn/templates/animated-intro/.tmp/template-1763468771640.mjs +7 -0
  169. package/test-templates/_dsgn/templates/animated-intro/meta.json +10 -0
  170. package/test-templates/_dsgn/templates/animated-intro/template.tsx +23 -0
  171. package/test-templates/_dsgn/templates/centered-spin/.tmp/template-1763468525386.mjs +7 -0
  172. package/test-templates/_dsgn/templates/centered-spin/meta.json +7 -0
  173. package/test-templates/_dsgn/templates/centered-spin/template.tsx +11 -0
  174. package/test-templates/_dsgn/templates/composite/.tmp/template-1763468815645.mjs +7 -0
  175. package/test-templates/_dsgn/templates/composite/meta.json +9 -0
  176. package/test-templates/_dsgn/templates/composite/template.tsx +23 -0
  177. package/test-templates/_dsgn/templates/easing-test/.tmp/template-1763468824501.mjs +7 -0
  178. package/test-templates/_dsgn/templates/easing-test/meta.json +7 -0
  179. package/test-templates/_dsgn/templates/easing-test/template.tsx +47 -0
  180. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466364336.mjs +10 -0
  181. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466584319.mjs +10 -0
  182. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466667797.mjs +10 -0
  183. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466746504.mjs +10 -0
  184. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763466930225.mjs +10 -0
  185. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467004552.mjs +10 -0
  186. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467060334.mjs +10 -0
  187. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467124493.mjs +10 -0
  188. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467174690.mjs +10 -0
  189. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467359134.mjs +10 -0
  190. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467451928.mjs +10 -0
  191. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467758275.mjs +10 -0
  192. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763467985201.mjs +10 -0
  193. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468020563.mjs +10 -0
  194. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468090428.mjs +10 -0
  195. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468211036.mjs +10 -0
  196. package/test-templates/_dsgn/templates/minimal-spin/.tmp/template-1763468394057.mjs +10 -0
  197. package/test-templates/_dsgn/templates/minimal-spin/meta.json +7 -0
  198. package/test-templates/_dsgn/templates/minimal-spin/template.tsx +13 -0
  199. package/test-templates/_dsgn/templates/no-origin-spin/meta.json +7 -0
  200. package/test-templates/_dsgn/templates/no-origin-spin/template.tsx +10 -0
  201. package/test-templates/_dsgn/templates/opacity-test/meta.json +7 -0
  202. package/test-templates/_dsgn/templates/opacity-test/template.tsx +9 -0
  203. package/test-templates/_dsgn/templates/qr-code/.tmp/template-1763468758954.mjs +17 -0
  204. package/test-templates/_dsgn/templates/qr-code/.tmp/template-1763468815672.mjs +17 -0
  205. package/test-templates/_dsgn/templates/qr-code/meta.json +9 -0
  206. package/test-templates/_dsgn/templates/qr-code/template.tsx +20 -0
  207. package/test-templates/_dsgn/templates/rotation-abs-test/meta.json +7 -0
  208. package/test-templates/_dsgn/templates/rotation-abs-test/template.tsx +15 -0
  209. package/test-templates/_dsgn/templates/rotation-corner/meta.json +7 -0
  210. package/test-templates/_dsgn/templates/rotation-corner/template.tsx +12 -0
  211. package/test-templates/_dsgn/templates/rotation-test/meta.json +7 -0
  212. package/test-templates/_dsgn/templates/rotation-test/template.tsx +12 -0
  213. package/test-templates/_dsgn/templates/shake-test/meta.json +7 -0
  214. package/test-templates/_dsgn/templates/shake-test/template.tsx +12 -0
  215. package/test-templates/_dsgn/templates/static-image/.tmp/template-1763468746271.mjs +7 -0
  216. package/test-templates/_dsgn/templates/static-image/meta.json +9 -0
  217. package/test-templates/_dsgn/templates/static-image/template.tsx +19 -0
  218. package/test-templates/_dsgn/templates/translate-test/meta.json +7 -0
  219. package/test-templates/_dsgn/templates/translate-test/template.tsx +9 -0
  220. package/test-templates/_dsgn/templates/video-loops/.tmp/template-1763468793192.mjs +15 -0
  221. package/test-templates/_dsgn/templates/video-loops/meta.json +9 -0
  222. package/test-templates/_dsgn/templates/video-loops/template.tsx +39 -0
  223. package/test-templates/_dsgn/templates/wrapped-spin/meta.json +7 -0
  224. package/test-templates/_dsgn/templates/wrapped-spin/template.tsx +17 -0
  225. package/test-templates/compare-svgs.mjs +30 -0
  226. package/test-templates/convert-frames.mjs +15 -0
  227. package/test-templates/debug-rotation.mjs +25 -0
  228. package/test-templates/run-tests.sh +39 -0
  229. package/test-templates/test-sdk.mjs +115 -0
  230. package/website/.astro/settings.json +5 -0
  231. package/website/.astro/types.d.ts +1 -0
  232. package/website/README.md +112 -0
  233. package/website/astro.config.mjs +18 -0
  234. package/website/dist/_astro/fonts.DHdiHGBO.css +1 -0
  235. package/website/dist/fonts/index.html +193 -0
  236. package/website/dist/helpers/index.html +166 -0
  237. package/website/dist/images/index.html +314 -0
  238. package/website/dist/index.html +219 -0
  239. package/website/dist/llm.txt +2448 -0
  240. package/website/dist/styling/index.html +365 -0
  241. package/website/dist/templates/index.html +124 -0
  242. package/website/dist/video/index.html +636 -0
  243. package/website/package-lock.json +7606 -0
  244. package/website/package.json +23 -0
  245. package/website/public/robots.txt +5 -0
package/website/dist/templates/index.html ADDED
@@ -0,0 +1,124 @@
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>
4
+ <h2 id="overview">Overview</h2>
5
+ <p>dsgn supports installing templates from multiple sources:</p>
6
+ <ol>
7
+ <li><strong>Official Registry</strong> (default)</li>
8
+ <li><strong>Direct URLs</strong></li>
9
+ <li><strong>GitHub Repositories</strong></li>
10
+ <li><strong>Local Filesystem</strong></li>
11
+ </ol>
12
+ <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>
17
+ <span class="line"></span></code></pre>
18
+ <p><strong>How it works:</strong></p>
19
+ <ul>
20
+ <li>Fetches from: <code>https://dsgncli.com/r/banner-hero</code></li>
21
+ <li>Returns JSON with template files</li>
22
+ <li>Installs to: <code>_dsgn/templates/banner-hero/</code></li>
23
+ </ul>
24
+ <h3 id="custom-registry">Custom Registry</h3>
25
+ <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>
27
+ <span class="line"></span></code></pre>
28
+ <h2 id="2-direct-urls">2. Direct URLs</h2>
29
+ <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>
32
+ <span class="line"></span></code></pre>
33
+ <p><strong>Requirements:</strong></p>
34
+ <ul>
35
+ <li>URL must return JSON in the registry template format</li>
36
+ <li>Must be publicly accessible (no authentication)</li>
37
+ </ul>
38
+ <p><strong>Example template JSON:</strong></p>
39
+ <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>
40
+ <span class="line"><span style="color:#79B8FF"> &quot;name&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;my-template&quot;</span><span style="color:#E1E4E8">,</span></span>
41
+ <span class="line"><span style="color:#79B8FF"> &quot;version&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;1.0.0&quot;</span><span style="color:#E1E4E8">,</span></span>
42
+ <span class="line"><span style="color:#79B8FF"> &quot;description&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;My custom template&quot;</span><span style="color:#E1E4E8">,</span></span>
43
+ <span class="line"><span style="color:#79B8FF"> &quot;files&quot;</span><span style="color:#E1E4E8">: [</span></span>
44
+ <span class="line"><span style="color:#E1E4E8"> {</span></span>
45
+ <span class="line"><span style="color:#79B8FF"> &quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;my-template.tsx&quot;</span><span style="color:#E1E4E8">,</span></span>
46
+ <span class="line"><span style="color:#79B8FF"> &quot;content&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;import React from &#39;react&#39;;</span><span style="color:#79B8FF">\n\n</span><span style="color:#9ECBFF">export default function...&quot;</span></span>
47
+ <span class="line"><span style="color:#E1E4E8"> },</span></span>
48
+ <span class="line"><span style="color:#E1E4E8"> {</span></span>
49
+ <span class="line"><span style="color:#79B8FF"> &quot;path&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;meta.json&quot;</span><span style="color:#E1E4E8">,</span></span>
50
+ <span class="line"><span style="color:#79B8FF"> &quot;content&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;{</span><span style="color:#79B8FF">\&quot;</span><span style="color:#9ECBFF">name</span><span style="color:#79B8FF">\&quot;</span><span style="color:#9ECBFF">:</span><span style="color:#79B8FF">\&quot;</span><span style="color:#9ECBFF">my-template</span><span style="color:#79B8FF">\&quot;</span><span style="color:#9ECBFF">...}&quot;</span></span>
51
+ <span class="line"><span style="color:#E1E4E8"> }</span></span>
52
+ <span class="line"><span style="color:#E1E4E8"> ]</span></span>
53
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
54
+ <span class="line"></span></code></pre>
55
+ <h2 id="3-github-repositories">3. GitHub Repositories</h2>
56
+ <p>Install templates directly from GitHub repos:</p>
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:#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>
59
+ <span class="line"></span>
60
+ <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>
62
+ <span class="line"></span>
63
+ <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>
65
+ <span class="line"></span></code></pre>
66
+ <p><strong>How it works:</strong></p>
67
+ <ol>
68
+ <li>Detects <code>github:</code> prefix</li>
69
+ <li>Converts to raw GitHub URL</li>
70
+ <li>Fetches <code>template.json</code> (or <code>meta.json</code> + template file)</li>
71
+ <li>Downloads all referenced files</li>
72
+ <li>Installs locally</li>
73
+ </ol>
74
+ <p><strong>Template structure on GitHub:</strong></p>
75
+ <p>Option A: Single template.json (self-contained)</p>
76
+ <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>username/repo/</span></span>
77
+ <span class="line"><span>└── template.json # Contains all files inline</span></span>
78
+ <span class="line"><span></span></span></code></pre>
79
+ <p>Option B: Separate files</p>
80
+ <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>username/repo/</span></span>
81
+ <span class="line"><span>├── meta.json</span></span>
82
+ <span class="line"><span>├── banner-hero.tsx</span></span>
83
+ <span class="line"><span>└── fonts/</span></span>
84
+ <span class="line"><span> └── Inter-Bold.woff</span></span>
85
+ <span class="line"><span></span></span></code></pre>
86
+ <h2 id="4-local-filesystem">4. Local Filesystem</h2>
87
+ <p>Install templates from your local filesystem:</p>
88
+ <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>
91
+ <span class="line"></span>
92
+ <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>
94
+ <span class="line"></span></code></pre>
95
+ <p><strong>Use cases:</strong></p>
96
+ <ul>
97
+ <li>Development and testing</li>
98
+ <li>Private templates</li>
99
+ <li>Shared team templates (monorepo)</li>
100
+ <li>Before publishing to registry</li>
101
+ </ul>
102
+ <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>
105
+ <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
+ <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
+ <span class="line"><span style="color:#E1E4E8">}</span></span>
108
+ <span class="line"></span></code></pre>
109
+ <h2 id="benefits-of-local-installation">Benefits of Local Installation</h2>
110
+ <ul>
111
+ <li><strong>Version Control</strong>: Templates are part of your project</li>
112
+ <li><strong>Offline</strong>: Works without internet once installed</li>
113
+ <li><strong>Team Sharing</strong>: Everyone on the team has the same templates</li>
114
+ <li><strong>Customization</strong>: Fork and modify templates per project</li>
115
+ <li><strong>Consistency</strong>: Different projects can use different template versions</li>
116
+ </ul>
117
+ <h2 id="next-steps">Next Steps</h2>
118
+ <ul>
119
+ <li><a href="/helpers">Learn about Helpers</a></li>
120
+ <li><a href="/styling">Styling with Tailwind &amp; shadcn/ui</a></li>
121
+ <li><a href="/fonts">Custom Fonts</a></li>
122
+ <li><a href="/images">Image Rendering</a></li>
123
+ <li><a href="/video">Video Rendering</a></li>
124
+ </ul> </article> </div> </main> </div> </body></html>