loopwind 0.23.0 → 0.24.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 (497) hide show
  1. package/README.md +13 -117
  2. package/dist/cli.js +16 -10
  3. package/dist/cli.js.map +1 -1
  4. package/dist/commands/add.d.ts.map +1 -1
  5. package/dist/commands/add.js +6 -10
  6. package/dist/commands/add.js.map +1 -1
  7. package/dist/commands/agent.d.ts +8 -0
  8. package/dist/commands/agent.d.ts.map +1 -0
  9. package/dist/commands/agent.js +101 -0
  10. package/dist/commands/agent.js.map +1 -0
  11. package/dist/commands/init.d.ts.map +1 -1
  12. package/dist/commands/init.js +17 -7
  13. package/dist/commands/init.js.map +1 -1
  14. package/dist/commands/render.d.ts.map +1 -1
  15. package/dist/commands/render.js +17 -19
  16. package/dist/commands/render.js.map +1 -1
  17. package/dist/default-templates/AGENTS.md +10 -24
  18. package/dist/lib/config.d.ts +2 -3
  19. package/dist/lib/config.d.ts.map +1 -1
  20. package/dist/lib/config.js +4 -9
  21. package/dist/lib/config.js.map +1 -1
  22. package/dist/lib/constants.d.ts +1 -3
  23. package/dist/lib/constants.d.ts.map +1 -1
  24. package/dist/lib/constants.js +2 -4
  25. package/dist/lib/constants.js.map +1 -1
  26. package/dist/lib/installer.d.ts +2 -0
  27. package/dist/lib/installer.d.ts.map +1 -1
  28. package/dist/lib/installer.js +6 -7
  29. package/dist/lib/installer.js.map +1 -1
  30. package/dist/lib/renderer.d.ts.map +1 -1
  31. package/dist/lib/renderer.js +4 -1
  32. package/dist/lib/renderer.js.map +1 -1
  33. package/dist/lib/utils.d.ts +13 -29
  34. package/dist/lib/utils.d.ts.map +1 -1
  35. package/dist/lib/utils.js +45 -155
  36. package/dist/lib/utils.js.map +1 -1
  37. package/dist/types/config.d.ts +0 -2
  38. package/dist/types/config.d.ts.map +1 -1
  39. package/dist/types/config.js.map +1 -1
  40. package/package.json +1 -15
  41. package/REGISTRY_SETUP.md +0 -363
  42. package/dist/default-templates/image/template.d.ts +0 -20
  43. package/dist/default-templates/image/template.d.ts.map +0 -1
  44. package/dist/default-templates/image/template.js +0 -18
  45. package/dist/default-templates/image/template.js.map +0 -1
  46. package/dist/default-templates/image/template.tsx +0 -20
  47. package/dist/default-templates/kitchen-sink/template.tsx +0 -64
  48. package/dist/default-templates/page/template.tsx +0 -37
  49. package/dist/default-templates/video/template.d.ts +0 -26
  50. package/dist/default-templates/video/template.d.ts.map +0 -1
  51. package/dist/default-templates/video/template.js +0 -33
  52. package/dist/default-templates/video/template.js.map +0 -1
  53. package/dist/default-templates/video/template.tsx +0 -37
  54. package/dist/default-templates/website/pages/home.tsx +0 -17
  55. package/dist/default-templates/website/parts/footer.tsx +0 -17
  56. package/dist/default-templates/website/parts/header.tsx +0 -17
  57. package/dist/default-templates/website/template.tsx +0 -17
  58. package/dist/default-templates/website-template/pages/home.tsx +0 -13
  59. package/dist/default-templates/website-template/parts/footer.tsx +0 -15
  60. package/dist/default-templates/website-template/parts/header.tsx +0 -15
  61. package/dist/default-templates/website-template/template.tsx +0 -32
  62. package/dist/lib/encode-worker.d.ts +0 -2
  63. package/dist/lib/encode-worker.d.ts.map +0 -1
  64. package/dist/lib/encode-worker.js +0 -29
  65. package/dist/lib/encode-worker.js.map +0 -1
  66. package/dist/lib/mjpeg-muxer.d.ts +0 -46
  67. package/dist/lib/mjpeg-muxer.d.ts.map +0 -1
  68. package/dist/lib/mjpeg-muxer.js +0 -513
  69. package/dist/lib/mjpeg-muxer.js.map +0 -1
  70. package/dist/lib/render-core.d.ts +0 -63
  71. package/dist/lib/render-core.d.ts.map +0 -1
  72. package/dist/lib/render-core.js +0 -65
  73. package/dist/lib/render-core.js.map +0 -1
  74. package/dist/lib/tailwind-browser.d.ts +0 -27
  75. package/dist/lib/tailwind-browser.d.ts.map +0 -1
  76. package/dist/lib/tailwind-browser.js +0 -853
  77. package/dist/lib/tailwind-browser.js.map +0 -1
  78. package/dist/lib/video-player.d.ts +0 -25
  79. package/dist/lib/video-player.d.ts.map +0 -1
  80. package/dist/lib/video-player.js +0 -392
  81. package/dist/lib/video-player.js.map +0 -1
  82. package/dist/sdk/compiler.d.ts +0 -94
  83. package/dist/sdk/compiler.d.ts.map +0 -1
  84. package/dist/sdk/compiler.js +0 -122
  85. package/dist/sdk/compiler.js.map +0 -1
  86. package/dist/sdk/edge/index.d.ts +0 -91
  87. package/dist/sdk/edge/index.d.ts.map +0 -1
  88. package/dist/sdk/edge/index.js +0 -187
  89. package/dist/sdk/edge/index.js.map +0 -1
  90. package/dist/sdk/index.d.ts +0 -62
  91. package/dist/sdk/index.d.ts.map +0 -1
  92. package/dist/sdk/index.js +0 -141
  93. package/dist/sdk/index.js.map +0 -1
  94. package/dist/sdk/preview.d.ts +0 -65
  95. package/dist/sdk/preview.d.ts.map +0 -1
  96. package/dist/sdk/preview.js +0 -262
  97. package/dist/sdk/preview.js.map +0 -1
  98. package/dist/sdk/template.d.ts +0 -162
  99. package/dist/sdk/template.d.ts.map +0 -1
  100. package/dist/sdk/template.js +0 -231
  101. package/dist/sdk/template.js.map +0 -1
  102. package/dist/sdk/workers/index.d.ts +0 -135
  103. package/dist/sdk/workers/index.d.ts.map +0 -1
  104. package/dist/sdk/workers/index.js +0 -271
  105. package/dist/sdk/workers/index.js.map +0 -1
  106. package/dist/sdk/workers/tailwind-config.d.ts +0 -48
  107. package/dist/sdk/workers/tailwind-config.d.ts.map +0 -1
  108. package/dist/sdk/workers/tailwind-config.js +0 -187
  109. package/dist/sdk/workers/tailwind-config.js.map +0 -1
  110. package/dist/sdk/workers/tailwind.d.ts +0 -9
  111. package/dist/sdk/workers/tailwind.d.ts.map +0 -1
  112. package/dist/sdk/workers/tailwind.js +0 -8
  113. package/dist/sdk/workers/tailwind.js.map +0 -1
  114. package/examples/code-editor-templates.ts +0 -173
  115. package/examples/nextjs-api/README.md +0 -180
  116. package/examples/nextjs-api/package.json +0 -21
  117. package/examples/nextjs-api/pages/api/intro-video.ts +0 -53
  118. package/examples/nextjs-api/pages/api/og-image.ts +0 -50
  119. package/examples/nextjs-template-import.ts +0 -58
  120. package/examples/sdk-video-preview.tsx +0 -120
  121. package/examples/template-compiler-workflow.ts +0 -251
  122. package/examples/visual-builder-templates.ts +0 -336
  123. package/render-examples-600x400.mjs +0 -161
  124. package/render-spring-variants-fixed.mjs +0 -60
  125. package/render-staggered-text.mjs +0 -56
  126. package/test-cloudflare-worker/README.md +0 -64
  127. package/test-cloudflare-worker/dist/README.md +0 -1
  128. package/test-cloudflare-worker/dist/index.js +0 -23743
  129. package/test-cloudflare-worker/dist/index.js.map +0 -8
  130. package/test-cloudflare-worker/package-lock.json +0 -1773
  131. package/test-cloudflare-worker/package.json +0 -25
  132. package/test-cloudflare-worker/test-sdk.mjs +0 -75
  133. package/test-cloudflare-worker/wrangler.toml +0 -14
  134. package/test-font-files.mjs +0 -72
  135. package/test-jsx-support.mjs +0 -146
  136. package/test-sdk-config.mjs +0 -454
  137. package/test-sdk-source-config.mjs +0 -427
  138. package/test-sdk-user-templates.mjs +0 -469
  139. package/test-static-debug.tsx +0 -19
  140. package/test-templates/TESTS.md +0 -63
  141. package/test-templates/config-test.mjs +0 -17
  142. package/test-templates/demo-intro-props.json +0 -4
  143. package/test-templates/run-tests.sh +0 -44
  144. package/test-templates/test-sdk.mjs +0 -139
  145. package/test-video-720p.mjs +0 -96
  146. package/test-video-breakdown.mjs +0 -98
  147. package/test-video-perf-1080.mjs +0 -67
  148. package/test-video-perf.mjs +0 -56
  149. package/test-video-props.json +0 -3
  150. package/test-worker-1080p.mjs +0 -103
  151. package/test-worker-viability.mjs +0 -140
  152. package/website/.astro/content.db +0 -0
  153. package/website/.astro/integrations/_inox-tools_astro-when/types.d.ts +0 -1
  154. package/website/.astro/integrations/astro_db/db.d.ts +0 -15
  155. package/website/.astro/settings.json +0 -5
  156. package/website/.astro/types.d.ts +0 -2
  157. package/website/DEPLOYMENT.md +0 -143
  158. package/website/OG_IMAGES.md +0 -142
  159. package/website/README.md +0 -158
  160. package/website/astro.config.mjs +0 -41
  161. package/website/dist/.gitkeep +0 -5
  162. package/website/dist/_astro/PlaygroundEditor.DzFavsm8.js +0 -26
  163. package/website/dist/_astro/VideoPreviewClient.BrajhYmh.js +0 -1
  164. package/website/dist/_astro/agents.CZXv4DCM.css +0 -1
  165. package/website/dist/_astro/client.BHSq4mdQ.js +0 -33
  166. package/website/dist/_astro/index.CTbGshLK.js +0 -9
  167. package/website/dist/_astro/jsx-runtime.BjG_zV1W.js +0 -9
  168. package/website/dist/_routes.json +0 -31
  169. package/website/dist/_worker.js/_@astrojs-ssr-adapter.mjs +0 -1033
  170. package/website/dist/_worker.js/_astro-internal_middleware.mjs +0 -40
  171. package/website/dist/_worker.js/chunks/Logo_Cud5QvBJ.mjs +0 -22
  172. package/website/dist/_worker.js/chunks/_@astro-renderers_-YVK7NHa.mjs +0 -15015
  173. package/website/dist/_worker.js/chunks/abap_BTmsHiP5.mjs +0 -1
  174. package/website/dist/_worker.js/chunks/actionscript-3_DmBelb1E.mjs +0 -1
  175. package/website/dist/_worker.js/chunks/ada_8-E0ahCN.mjs +0 -1
  176. package/website/dist/_worker.js/chunks/andromeeda_XI-CXx50.mjs +0 -1
  177. package/website/dist/_worker.js/chunks/angular-html_DKGh3gGH.mjs +0 -1
  178. package/website/dist/_worker.js/chunks/angular-ts_-qZGsJoA.mjs +0 -1
  179. package/website/dist/_worker.js/chunks/apache_ijTUt0Ee.mjs +0 -1
  180. package/website/dist/_worker.js/chunks/apex_agu1c6Sh.mjs +0 -1
  181. package/website/dist/_worker.js/chunks/apl_Bj2f7Art.mjs +0 -1
  182. package/website/dist/_worker.js/chunks/applescript_B_vXrOh3.mjs +0 -1
  183. package/website/dist/_worker.js/chunks/ara_DCEQ2rnh.mjs +0 -1
  184. package/website/dist/_worker.js/chunks/asciidoc_CGN_EkYS.mjs +0 -1
  185. package/website/dist/_worker.js/chunks/asm_BBWZgnDp.mjs +0 -1
  186. package/website/dist/_worker.js/chunks/astro/assets-service_j52rQLzU.mjs +0 -721
  187. package/website/dist/_worker.js/chunks/astro/server_CsUrSZgd.mjs +0 -2512
  188. package/website/dist/_worker.js/chunks/astro-designed-error-pages_1ELXm5Tt.mjs +0 -542
  189. package/website/dist/_worker.js/chunks/astro_Dr_hht3h.mjs +0 -1
  190. package/website/dist/_worker.js/chunks/aurora-x_9GHG8nSq.mjs +0 -1
  191. package/website/dist/_worker.js/chunks/awk_DHRvhXot.mjs +0 -1
  192. package/website/dist/_worker.js/chunks/ayu-dark_CcvqmEHE.mjs +0 -1
  193. package/website/dist/_worker.js/chunks/ballerina_C7SdeSZb.mjs +0 -1
  194. package/website/dist/_worker.js/chunks/bat_Dv4A3u45.mjs +0 -1
  195. package/website/dist/_worker.js/chunks/beancount_BfPf9Luv.mjs +0 -1
  196. package/website/dist/_worker.js/chunks/berry_B8rfM3lL.mjs +0 -1
  197. package/website/dist/_worker.js/chunks/bibtex_TcjYgtJM.mjs +0 -1
  198. package/website/dist/_worker.js/chunks/bicep_CrlFWCdN.mjs +0 -1
  199. package/website/dist/_worker.js/chunks/blade_lanKVYID.mjs +0 -1
  200. package/website/dist/_worker.js/chunks/bsl_BhppzXMB.mjs +0 -1
  201. package/website/dist/_worker.js/chunks/c_6FBALJTK.mjs +0 -1
  202. package/website/dist/_worker.js/chunks/cadence_2txU9LVE.mjs +0 -1
  203. package/website/dist/_worker.js/chunks/cairo_BkrFAIlP.mjs +0 -1
  204. package/website/dist/_worker.js/chunks/catppuccin-frappe_CkEqIYhU.mjs +0 -1
  205. package/website/dist/_worker.js/chunks/catppuccin-latte_DG4Gx_-v.mjs +0 -1
  206. package/website/dist/_worker.js/chunks/catppuccin-macchiato_Cwi3vCXf.mjs +0 -1
  207. package/website/dist/_worker.js/chunks/catppuccin-mocha_L9_OPlFX.mjs +0 -1
  208. package/website/dist/_worker.js/chunks/clarity_BEAe4Ulu.mjs +0 -1
  209. package/website/dist/_worker.js/chunks/clojure_VnUX6p2g.mjs +0 -1
  210. package/website/dist/_worker.js/chunks/cmake_0-SGkZEj.mjs +0 -1
  211. package/website/dist/_worker.js/chunks/cobol_92M_KGaE.mjs +0 -1
  212. package/website/dist/_worker.js/chunks/codeowners_CzMwskBv.mjs +0 -1
  213. package/website/dist/_worker.js/chunks/codeql_DWJZNHv1.mjs +0 -1
  214. package/website/dist/_worker.js/chunks/coffee_CQjKU2fh.mjs +0 -1
  215. package/website/dist/_worker.js/chunks/common-lisp_BBLWDpS5.mjs +0 -1
  216. package/website/dist/_worker.js/chunks/coq_hedRFV3D.mjs +0 -1
  217. package/website/dist/_worker.js/chunks/cpp_DlS1i6Zs.mjs +0 -1
  218. package/website/dist/_worker.js/chunks/crystal_D6n65fKV.mjs +0 -1
  219. package/website/dist/_worker.js/chunks/csharp_C6FCVFzc.mjs +0 -1
  220. package/website/dist/_worker.js/chunks/css_C5uJEgmJ.mjs +0 -1
  221. package/website/dist/_worker.js/chunks/csv_CtMYuuJl.mjs +0 -1
  222. package/website/dist/_worker.js/chunks/cue_BsPexqx6.mjs +0 -1
  223. package/website/dist/_worker.js/chunks/cypher_apzf6OBi.mjs +0 -1
  224. package/website/dist/_worker.js/chunks/d_DcvIRcgm.mjs +0 -1
  225. package/website/dist/_worker.js/chunks/dark-plus_C01ONtzj.mjs +0 -1
  226. package/website/dist/_worker.js/chunks/dart_WkzM5WrV.mjs +0 -1
  227. package/website/dist/_worker.js/chunks/dax_DjXAO5V4.mjs +0 -1
  228. package/website/dist/_worker.js/chunks/desktop_C92LCxdc.mjs +0 -1
  229. package/website/dist/_worker.js/chunks/diff_CVwM_9XJ.mjs +0 -1
  230. package/website/dist/_worker.js/chunks/docker_DPzgJf6Z.mjs +0 -1
  231. package/website/dist/_worker.js/chunks/dotenv_D_vgANvA.mjs +0 -1
  232. package/website/dist/_worker.js/chunks/dracula-soft_CLnUBwFm.mjs +0 -1
  233. package/website/dist/_worker.js/chunks/dracula_lBVpb6Lb.mjs +0 -1
  234. package/website/dist/_worker.js/chunks/dream-maker_DTLbzd_J.mjs +0 -1
  235. package/website/dist/_worker.js/chunks/edge_i54JYm3_.mjs +0 -1
  236. package/website/dist/_worker.js/chunks/elixir_BJCIjTu4.mjs +0 -1
  237. package/website/dist/_worker.js/chunks/elm_BbXD39-_.mjs +0 -1
  238. package/website/dist/_worker.js/chunks/emacs-lisp_pxa5cXaN.mjs +0 -1
  239. package/website/dist/_worker.js/chunks/erb_Ccjijeee.mjs +0 -1
  240. package/website/dist/_worker.js/chunks/erlang_B2VM_hi7.mjs +0 -1
  241. package/website/dist/_worker.js/chunks/everforest-dark_BxvIPBim.mjs +0 -1
  242. package/website/dist/_worker.js/chunks/everforest-light_B7VoyaJM.mjs +0 -1
  243. package/website/dist/_worker.js/chunks/fennel_D-uo7X6c.mjs +0 -1
  244. package/website/dist/_worker.js/chunks/fish_BjePoK3m.mjs +0 -1
  245. package/website/dist/_worker.js/chunks/fluent_C8fgkzLX.mjs +0 -1
  246. package/website/dist/_worker.js/chunks/fortran-fixed-form_D1pu5zrc.mjs +0 -1
  247. package/website/dist/_worker.js/chunks/fortran-free-form_CSGOhJD6.mjs +0 -1
  248. package/website/dist/_worker.js/chunks/fsharp_B0xy-A4Y.mjs +0 -1
  249. package/website/dist/_worker.js/chunks/gdresource_CWppjlHq.mjs +0 -1
  250. package/website/dist/_worker.js/chunks/gdscript_eQCHchcS.mjs +0 -1
  251. package/website/dist/_worker.js/chunks/gdshader_C4kxepX7.mjs +0 -1
  252. package/website/dist/_worker.js/chunks/genie_ACtQLcDW.mjs +0 -1
  253. package/website/dist/_worker.js/chunks/gherkin_BFp2uKUd.mjs +0 -1
  254. package/website/dist/_worker.js/chunks/git-commit_CLg9ZwMV.mjs +0 -1
  255. package/website/dist/_worker.js/chunks/git-rebase_DG8A80Nt.mjs +0 -1
  256. package/website/dist/_worker.js/chunks/github-dark-default_BI0EP2Kv.mjs +0 -1
  257. package/website/dist/_worker.js/chunks/github-dark-dimmed_a_NIC0Xb.mjs +0 -1
  258. package/website/dist/_worker.js/chunks/github-dark-high-contrast_jZGqT7hk.mjs +0 -1
  259. package/website/dist/_worker.js/chunks/github-dark_CHCDNd2O.mjs +0 -1
  260. package/website/dist/_worker.js/chunks/github-light-default_DRbOW5RG.mjs +0 -1
  261. package/website/dist/_worker.js/chunks/github-light-high-contrast_tn_kWutM.mjs +0 -1
  262. package/website/dist/_worker.js/chunks/github-light_D9brYzot.mjs +0 -1
  263. package/website/dist/_worker.js/chunks/gleam_Dmhu1oxW.mjs +0 -1
  264. package/website/dist/_worker.js/chunks/glimmer-js_BfZbXy8A.mjs +0 -1
  265. package/website/dist/_worker.js/chunks/glimmer-ts_B9QVICrD.mjs +0 -1
  266. package/website/dist/_worker.js/chunks/glsl_DD2PPwOs.mjs +0 -1
  267. package/website/dist/_worker.js/chunks/gnuplot_D2OYChUX.mjs +0 -1
  268. package/website/dist/_worker.js/chunks/go_DYGFTe3h.mjs +0 -1
  269. package/website/dist/_worker.js/chunks/graphql_B7XsT3nH.mjs +0 -1
  270. package/website/dist/_worker.js/chunks/groovy_BO12Uwkl.mjs +0 -1
  271. package/website/dist/_worker.js/chunks/hack_CB2_ztCP.mjs +0 -1
  272. package/website/dist/_worker.js/chunks/haml_CyfDcDD3.mjs +0 -1
  273. package/website/dist/_worker.js/chunks/handlebars_CfpxpWm2.mjs +0 -1
  274. package/website/dist/_worker.js/chunks/haskell_jUeC5uN5.mjs +0 -1
  275. package/website/dist/_worker.js/chunks/haxe_B6GxP1WB.mjs +0 -1
  276. package/website/dist/_worker.js/chunks/hcl_DwoHV2oh.mjs +0 -1
  277. package/website/dist/_worker.js/chunks/hjson_DV7cJRk4.mjs +0 -1
  278. package/website/dist/_worker.js/chunks/hlsl_BlFCscPI.mjs +0 -1
  279. package/website/dist/_worker.js/chunks/houston_COBFG1Mx.mjs +0 -1
  280. package/website/dist/_worker.js/chunks/html-derivative_C9pJ337h.mjs +0 -1
  281. package/website/dist/_worker.js/chunks/html_D1OkrZS5.mjs +0 -1
  282. package/website/dist/_worker.js/chunks/http_DIGXRqvJ.mjs +0 -1
  283. package/website/dist/_worker.js/chunks/hxml_DEwh9i-c.mjs +0 -1
  284. package/website/dist/_worker.js/chunks/hy_DDoIgW1K.mjs +0 -1
  285. package/website/dist/_worker.js/chunks/imba_B00zbHo4.mjs +0 -1
  286. package/website/dist/_worker.js/chunks/index_BDWR1Q-q.mjs +0 -1861
  287. package/website/dist/_worker.js/chunks/ini_D7XQA_p8.mjs +0 -1
  288. package/website/dist/_worker.js/chunks/java_B9wdFd8K.mjs +0 -1
  289. package/website/dist/_worker.js/chunks/javascript_CLsPGOON.mjs +0 -1
  290. package/website/dist/_worker.js/chunks/jinja_jarBCAN1.mjs +0 -1
  291. package/website/dist/_worker.js/chunks/jison_oGg3J708.mjs +0 -1
  292. package/website/dist/_worker.js/chunks/json5_DlZ1Kyaa.mjs +0 -1
  293. package/website/dist/_worker.js/chunks/json_DaYk_FMp.mjs +0 -1
  294. package/website/dist/_worker.js/chunks/jsonc_DlwgfSDs.mjs +0 -1
  295. package/website/dist/_worker.js/chunks/jsonl_BbCCVaZF.mjs +0 -1
  296. package/website/dist/_worker.js/chunks/jsonnet_Dt-G75xe.mjs +0 -1
  297. package/website/dist/_worker.js/chunks/jssm_BtKFTj2A.mjs +0 -1
  298. package/website/dist/_worker.js/chunks/jsx_DDx_xAZ8.mjs +0 -1
  299. package/website/dist/_worker.js/chunks/julia_CK0lv68l.mjs +0 -1
  300. package/website/dist/_worker.js/chunks/kanagawa-dragon_BldAK3Oo.mjs +0 -1
  301. package/website/dist/_worker.js/chunks/kanagawa-lotus_DVM8FX9_.mjs +0 -1
  302. package/website/dist/_worker.js/chunks/kanagawa-wave_Dpih0AKP.mjs +0 -1
  303. package/website/dist/_worker.js/chunks/kotlin_kWneB9V_.mjs +0 -1
  304. package/website/dist/_worker.js/chunks/kusto_BKVATd95.mjs +0 -1
  305. package/website/dist/_worker.js/chunks/laserwave_BqatxsVl.mjs +0 -1
  306. package/website/dist/_worker.js/chunks/latex_LVDcGBbc.mjs +0 -1
  307. package/website/dist/_worker.js/chunks/lean_W7qo-5M2.mjs +0 -1
  308. package/website/dist/_worker.js/chunks/less_DFNwJnBH.mjs +0 -1
  309. package/website/dist/_worker.js/chunks/light-plus_Dp0AoWsO.mjs +0 -1
  310. package/website/dist/_worker.js/chunks/liquid_D24qs0pc.mjs +0 -1
  311. package/website/dist/_worker.js/chunks/log_IPWMXriF.mjs +0 -1
  312. package/website/dist/_worker.js/chunks/logo_C6KaatrQ.mjs +0 -1
  313. package/website/dist/_worker.js/chunks/lua_CwnEf-T7.mjs +0 -1
  314. package/website/dist/_worker.js/chunks/luau_Br3-CXjS.mjs +0 -1
  315. package/website/dist/_worker.js/chunks/make_UBNG-kOo.mjs +0 -1
  316. package/website/dist/_worker.js/chunks/markdown_C7mhJFCm.mjs +0 -1
  317. package/website/dist/_worker.js/chunks/marko_4tchUvI7.mjs +0 -1
  318. package/website/dist/_worker.js/chunks/material-theme-darker_SKtaNEPn.mjs +0 -1
  319. package/website/dist/_worker.js/chunks/material-theme-lighter_zOX_DZCH.mjs +0 -1
  320. package/website/dist/_worker.js/chunks/material-theme-ocean_BN9WbhdC.mjs +0 -1
  321. package/website/dist/_worker.js/chunks/material-theme-palenight_DT_covjH.mjs +0 -1
  322. package/website/dist/_worker.js/chunks/material-theme_6RpeM3kc.mjs +0 -1
  323. package/website/dist/_worker.js/chunks/matlab_DCOXsPKR.mjs +0 -1
  324. package/website/dist/_worker.js/chunks/mdc_B9gb2UFP.mjs +0 -1
  325. package/website/dist/_worker.js/chunks/mdx_DGU7Nu9u.mjs +0 -1
  326. package/website/dist/_worker.js/chunks/mermaid_B69URzsZ.mjs +0 -1
  327. package/website/dist/_worker.js/chunks/min-dark_BgxifOMI.mjs +0 -1
  328. package/website/dist/_worker.js/chunks/min-light_BrPjXxUp.mjs +0 -1
  329. package/website/dist/_worker.js/chunks/mipsasm_9U-4_t7k.mjs +0 -1
  330. package/website/dist/_worker.js/chunks/mojo_B0wt7ug3.mjs +0 -1
  331. package/website/dist/_worker.js/chunks/monokai_B6Pxpoyi.mjs +0 -1
  332. package/website/dist/_worker.js/chunks/move_1eid4CyR.mjs +0 -1
  333. package/website/dist/_worker.js/chunks/narrat_Ds6-p5JZ.mjs +0 -1
  334. package/website/dist/_worker.js/chunks/nextflow_v2N1Qlqa.mjs +0 -1
  335. package/website/dist/_worker.js/chunks/nginx_Bp9Ab2NH.mjs +0 -1
  336. package/website/dist/_worker.js/chunks/night-owl_CdwOw_sc.mjs +0 -1
  337. package/website/dist/_worker.js/chunks/nim_BXGDUe53.mjs +0 -1
  338. package/website/dist/_worker.js/chunks/nix_CUig1nJH.mjs +0 -1
  339. package/website/dist/_worker.js/chunks/noop-middleware_B8fH5jha.mjs +0 -10
  340. package/website/dist/_worker.js/chunks/nord_SPoG1iae.mjs +0 -1
  341. package/website/dist/_worker.js/chunks/nushell_DJw1Lca8.mjs +0 -1
  342. package/website/dist/_worker.js/chunks/objective-c_Bktzl_CO.mjs +0 -1
  343. package/website/dist/_worker.js/chunks/objective-cpp_CP4DWdDp.mjs +0 -1
  344. package/website/dist/_worker.js/chunks/ocaml_CeEAs7bZ.mjs +0 -1
  345. package/website/dist/_worker.js/chunks/one-dark-pro_-hIwCNMi.mjs +0 -1
  346. package/website/dist/_worker.js/chunks/one-light_DSmYvJ05.mjs +0 -1
  347. package/website/dist/_worker.js/chunks/pascal_C-S_Ms_o.mjs +0 -1
  348. package/website/dist/_worker.js/chunks/perl_CKamvo15.mjs +0 -1
  349. package/website/dist/_worker.js/chunks/php_BlmcX_F3.mjs +0 -1
  350. package/website/dist/_worker.js/chunks/plastic_Ryt8tVoA.mjs +0 -1
  351. package/website/dist/_worker.js/chunks/plsql_Cb3v7cBj.mjs +0 -1
  352. package/website/dist/_worker.js/chunks/po_DZbdNRlo.mjs +0 -1
  353. package/website/dist/_worker.js/chunks/poimandres_bYmE3_5d.mjs +0 -1
  354. package/website/dist/_worker.js/chunks/polar_pJkMGwoW.mjs +0 -1
  355. package/website/dist/_worker.js/chunks/postcss_BAXSOKgk.mjs +0 -1
  356. package/website/dist/_worker.js/chunks/powerquery_oITMGN4x.mjs +0 -1
  357. package/website/dist/_worker.js/chunks/powershell_6306-xIF.mjs +0 -1
  358. package/website/dist/_worker.js/chunks/prisma_DSDxnZGz.mjs +0 -1
  359. package/website/dist/_worker.js/chunks/prolog_CxG7tjZR.mjs +0 -1
  360. package/website/dist/_worker.js/chunks/proto_CS9ByXm1.mjs +0 -1
  361. package/website/dist/_worker.js/chunks/pug_BMtLJo6U.mjs +0 -1
  362. package/website/dist/_worker.js/chunks/puppet_BfeeSzee.mjs +0 -1
  363. package/website/dist/_worker.js/chunks/purescript_BFfueNaH.mjs +0 -1
  364. package/website/dist/_worker.js/chunks/python_Cc4Faapv.mjs +0 -1
  365. package/website/dist/_worker.js/chunks/qml_C1CTJTK8.mjs +0 -1
  366. package/website/dist/_worker.js/chunks/qmldir_nG1KaqKR.mjs +0 -1
  367. package/website/dist/_worker.js/chunks/qss_Cncxk263.mjs +0 -1
  368. package/website/dist/_worker.js/chunks/r_ChR54Ihi.mjs +0 -1
  369. package/website/dist/_worker.js/chunks/racket_BDrhptDs.mjs +0 -1
  370. package/website/dist/_worker.js/chunks/raku_07OUHa0P.mjs +0 -1
  371. package/website/dist/_worker.js/chunks/razor_DIP3INLa.mjs +0 -1
  372. package/website/dist/_worker.js/chunks/red_DOPXfj-6.mjs +0 -1
  373. package/website/dist/_worker.js/chunks/reg_B64SwEDj.mjs +0 -1
  374. package/website/dist/_worker.js/chunks/regexp_ButFGoB5.mjs +0 -1
  375. package/website/dist/_worker.js/chunks/rel_BWJAWqZD.mjs +0 -1
  376. package/website/dist/_worker.js/chunks/riscv_79gXlbsF.mjs +0 -1
  377. package/website/dist/_worker.js/chunks/rose-pine-dawn_DHIjVGd3.mjs +0 -1
  378. package/website/dist/_worker.js/chunks/rose-pine-moon_t86aEbs0.mjs +0 -1
  379. package/website/dist/_worker.js/chunks/rose-pine_BHgrcDCs.mjs +0 -1
  380. package/website/dist/_worker.js/chunks/rst_D3F4Fcpj.mjs +0 -1
  381. package/website/dist/_worker.js/chunks/ruby_Cs7vM9iv.mjs +0 -1
  382. package/website/dist/_worker.js/chunks/rust_DpyRVatH.mjs +0 -1
  383. package/website/dist/_worker.js/chunks/sas_DW45xZXN.mjs +0 -1
  384. package/website/dist/_worker.js/chunks/sass_C6SiMwN_.mjs +0 -1
  385. package/website/dist/_worker.js/chunks/scala_DlZOjNZk.mjs +0 -1
  386. package/website/dist/_worker.js/chunks/scheme_D2ezSJXu.mjs +0 -1
  387. package/website/dist/_worker.js/chunks/scss_DG5Spjqu.mjs +0 -1
  388. package/website/dist/_worker.js/chunks/sdbl_ZCYaj4VN.mjs +0 -1
  389. package/website/dist/_worker.js/chunks/shaderlab_CAcRkg1_.mjs +0 -1
  390. package/website/dist/_worker.js/chunks/shellscript_BWwhkDVh.mjs +0 -1
  391. package/website/dist/_worker.js/chunks/shellsession_BfEA3juK.mjs +0 -1
  392. package/website/dist/_worker.js/chunks/slack-dark_CL3lSpCc.mjs +0 -1
  393. package/website/dist/_worker.js/chunks/slack-ochin_DdZKOQVh.mjs +0 -1
  394. package/website/dist/_worker.js/chunks/smalltalk_DgilzSui.mjs +0 -1
  395. package/website/dist/_worker.js/chunks/snazzy-light_eJU08Pz_.mjs +0 -1
  396. package/website/dist/_worker.js/chunks/solarized-dark_Dg_YQywx.mjs +0 -1
  397. package/website/dist/_worker.js/chunks/solarized-light_BnIsrA6p.mjs +0 -1
  398. package/website/dist/_worker.js/chunks/solidity_DkseH8pQ.mjs +0 -1
  399. package/website/dist/_worker.js/chunks/soy_DU7bOYoG.mjs +0 -1
  400. package/website/dist/_worker.js/chunks/sparql_BuI1DBDH.mjs +0 -1
  401. package/website/dist/_worker.js/chunks/splunk_B8Ha9Pkg.mjs +0 -1
  402. package/website/dist/_worker.js/chunks/sql_BniHwea5.mjs +0 -1
  403. package/website/dist/_worker.js/chunks/ssh-config_CkE1GuVe.mjs +0 -1
  404. package/website/dist/_worker.js/chunks/stata_Dtqpbd_l.mjs +0 -1
  405. package/website/dist/_worker.js/chunks/stylus_CXTtglzO.mjs +0 -1
  406. package/website/dist/_worker.js/chunks/svelte_BjWYcUCN.mjs +0 -1
  407. package/website/dist/_worker.js/chunks/swift_BzHql_rM.mjs +0 -1
  408. package/website/dist/_worker.js/chunks/synthwave-84_DLRNhxNA.mjs +0 -1
  409. package/website/dist/_worker.js/chunks/system-verilog_ChyInPph.mjs +0 -1
  410. package/website/dist/_worker.js/chunks/systemd_Bi9Qa2qD.mjs +0 -1
  411. package/website/dist/_worker.js/chunks/talonscript_B3sH_Y-V.mjs +0 -1
  412. package/website/dist/_worker.js/chunks/tasl_BJ5yipRs.mjs +0 -1
  413. package/website/dist/_worker.js/chunks/tcl_CoJQjNoP.mjs +0 -1
  414. package/website/dist/_worker.js/chunks/templ_CrU7Ffil.mjs +0 -1
  415. package/website/dist/_worker.js/chunks/terraform_DT9JSFpC.mjs +0 -1
  416. package/website/dist/_worker.js/chunks/tex_5PKu2yA0.mjs +0 -1
  417. package/website/dist/_worker.js/chunks/tokyo-night_Buo8OK7-.mjs +0 -1
  418. package/website/dist/_worker.js/chunks/toml_CPuXX3oc.mjs +0 -1
  419. package/website/dist/_worker.js/chunks/ts-tags_D0M_1VSH.mjs +0 -1
  420. package/website/dist/_worker.js/chunks/tsv_CuivVNot.mjs +0 -1
  421. package/website/dist/_worker.js/chunks/tsx_MkuGr8MY.mjs +0 -1
  422. package/website/dist/_worker.js/chunks/turtle_BqgEPK7f.mjs +0 -1
  423. package/website/dist/_worker.js/chunks/twig_r1G9rpYJ.mjs +0 -1
  424. package/website/dist/_worker.js/chunks/typescript_Au5buqzM.mjs +0 -1
  425. package/website/dist/_worker.js/chunks/typespec_47rhBK_z.mjs +0 -1
  426. package/website/dist/_worker.js/chunks/typst_BAtuQLh-.mjs +0 -1
  427. package/website/dist/_worker.js/chunks/v_BIvWImHg.mjs +0 -1
  428. package/website/dist/_worker.js/chunks/vala_DYEacj30.mjs +0 -1
  429. package/website/dist/_worker.js/chunks/vb_CikQuqGJ.mjs +0 -1
  430. package/website/dist/_worker.js/chunks/verilog_BQRENwI-.mjs +0 -1
  431. package/website/dist/_worker.js/chunks/vesper_DA0kvTmj.mjs +0 -1
  432. package/website/dist/_worker.js/chunks/vhdl_DHscJIyg.mjs +0 -1
  433. package/website/dist/_worker.js/chunks/viml_F2pvMwvG.mjs +0 -1
  434. package/website/dist/_worker.js/chunks/vitesse-black_D9tjNzd0.mjs +0 -1
  435. package/website/dist/_worker.js/chunks/vitesse-dark_Bnm5d0hd.mjs +0 -1
  436. package/website/dist/_worker.js/chunks/vitesse-light_CHwbyjNR.mjs +0 -1
  437. package/website/dist/_worker.js/chunks/vue-html_DyYtbbMK.mjs +0 -1
  438. package/website/dist/_worker.js/chunks/vue_DofN6juy.mjs +0 -1
  439. package/website/dist/_worker.js/chunks/vyper_CiR0m-OV.mjs +0 -1
  440. package/website/dist/_worker.js/chunks/wasm_CwIGgRGf.mjs +0 -1
  441. package/website/dist/_worker.js/chunks/wasm_jKWhg0J0.mjs +0 -1
  442. package/website/dist/_worker.js/chunks/wenyan_DKvVZKXW.mjs +0 -1
  443. package/website/dist/_worker.js/chunks/wgsl_BOWZY7yw.mjs +0 -1
  444. package/website/dist/_worker.js/chunks/wikitext_CXDhhHPy.mjs +0 -1
  445. package/website/dist/_worker.js/chunks/wolfram_ChkmGnW0.mjs +0 -1
  446. package/website/dist/_worker.js/chunks/xml_DXH3hHIu.mjs +0 -1
  447. package/website/dist/_worker.js/chunks/xsl_DuP2mFjg.mjs +0 -1
  448. package/website/dist/_worker.js/chunks/yaml_IGiEkTge.mjs +0 -1
  449. package/website/dist/_worker.js/chunks/zenscript_59iXGyNw.mjs +0 -1
  450. package/website/dist/_worker.js/chunks/zig_DKzb0zdT.mjs +0 -1
  451. package/website/dist/_worker.js/index.js +0 -61
  452. package/website/dist/_worker.js/manifest_Bk6136-u.mjs +0 -98
  453. package/website/dist/_worker.js/pages/_image.astro.mjs +0 -24
  454. package/website/dist/_worker.js/pages/agents.astro.mjs +0 -1
  455. package/website/dist/_worker.js/pages/animation.astro.mjs +0 -1
  456. package/website/dist/_worker.js/pages/api/playground/render.astro.mjs +0 -25562
  457. package/website/dist/_worker.js/pages/api/playground/templates.astro.mjs +0 -92
  458. package/website/dist/_worker.js/pages/api/raw-markdown/_---path_.astro.mjs +0 -44
  459. package/website/dist/_worker.js/pages/config.astro.mjs +0 -1
  460. package/website/dist/_worker.js/pages/fonts.astro.mjs +0 -1
  461. package/website/dist/_worker.js/pages/getting-started.astro.mjs +0 -1
  462. package/website/dist/_worker.js/pages/helpers.astro.mjs +0 -1
  463. package/website/dist/_worker.js/pages/images.astro.mjs +0 -1
  464. package/website/dist/_worker.js/pages/index.astro.mjs +0 -1
  465. package/website/dist/_worker.js/pages/llm.txt.astro.mjs +0 -1
  466. package/website/dist/_worker.js/pages/playground/_example_.astro.mjs +0 -95
  467. package/website/dist/_worker.js/pages/playground.astro.mjs +0 -1
  468. package/website/dist/_worker.js/pages/preview.astro.mjs +0 -1
  469. package/website/dist/_worker.js/pages/sdk.astro.mjs +0 -1
  470. package/website/dist/_worker.js/pages/sitemap.xml.astro.mjs +0 -1
  471. package/website/dist/_worker.js/pages/styling.astro.mjs +0 -1
  472. package/website/dist/_worker.js/pages/templates.astro.mjs +0 -1
  473. package/website/dist/_worker.js/pages/video.astro.mjs +0 -1
  474. package/website/dist/_worker.js/renderers.mjs +0 -2
  475. package/website/dist/agents/index.html +0 -54
  476. package/website/dist/animation/index.html +0 -1505
  477. package/website/dist/config/index.html +0 -186
  478. package/website/dist/fonts/index.html +0 -200
  479. package/website/dist/getting-started/index.html +0 -109
  480. package/website/dist/helpers/index.html +0 -350
  481. package/website/dist/images/index.html +0 -337
  482. package/website/dist/index.html +0 -141
  483. package/website/dist/llm.txt +0 -3626
  484. package/website/dist/playground/index.html +0 -6
  485. package/website/dist/preview/index.html +0 -113
  486. package/website/dist/robots.txt +0 -40
  487. package/website/dist/sdk/index.html +0 -1588
  488. package/website/dist/sitemap.xml +0 -76
  489. package/website/dist/styling/index.html +0 -368
  490. package/website/dist/templates/index.html +0 -76
  491. package/website/dist/video/index.html +0 -354
  492. package/website/package-lock.json +0 -8099
  493. package/website/package.json +0 -43
  494. package/website/public/.gitkeep +0 -5
  495. package/website/public/robots.txt +0 -40
  496. package/website/templates/og-image.tsx +0 -60
  497. package/website/wrangler.toml +0 -9
package/website/dist/images/index.html DELETED
@@ -1,337 +0,0 @@
1
- <!DOCTYPE html><html lang="en" data-astro-cid-mw7aashj> <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 &#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, serverless, WASM, Open Graph, social media, marketing 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 &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/api/og/images"><meta property="og:image:width" content="1200"><meta property="og:image:height" content="630"><meta property="og:image:alt"><meta property="og:site_name" content="loopwind"><meta property="og:locale" content="en_US"><!-- 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 &#38; Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/api/og/images"><meta name="twitter:image:alt"><meta name="twitter:creator" content="@loopwind"><meta name="twitter:site" content="@loopwind"><!-- Theme Color --><meta name="theme-color" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a"><meta name="theme-color" media="(prefers-color-scheme: light)" content="#fafafa"><!-- Additional SEO --><meta name="robots" content="index, follow"><meta name="googlebot" content="index, follow"><meta name="language" content="English"><meta name="revisit-after" content="7 days"><meta name="rating" content="general"><!-- Mobile Web App --><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"><meta name="apple-mobile-web-app-title" content="loopwind"><!-- Structured Data (JSON-LD) --><script type="application/ld+json">{"@context":"https://schema.org","@type":"SoftwareApplication","name":"loopwind","applicationCategory":"DeveloperApplication","operatingSystem":"Cross-platform","description":"CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates.","url":"https://loopwind.dev/","author":{"@type":"Organization","name":"loopwind","url":"https://loopwind.dev/"},"offers":{"@type":"Offer","price":"0","priceCurrency":"USD"},"softwareVersion":"0.11.0","releaseNotes":"https://github.com/loopwind/loopwind/releases","screenshot":"https://loopwind.dev/api/og/images","featureList":["Image generation from React templates","Video generation with animations","Tailwind CSS support","shadcn/ui design system","CLI-based workflow","Serverless rendering","TypeScript support","AI Agent friendly"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"Organization","name":"loopwind","url":"https://loopwind.dev/","logo":"https://loopwind.dev/favicon.svg","sameAs":["https://github.com/loopwind/loopwind","https://www.npmjs.com/package/loopwind"]}</script><script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://loopwind.dev/"},{"@type":"ListItem","position":2,"name":"Images","item":"https://loopwind.dev/images"}]}</script><link rel="stylesheet" href="/_astro/agents.CZXv4DCM.css">
2
- <style>.hero[data-astro-cid-bbe6dxrz]{position:relative}html{scroll-behavior:smooth}.mobile-header[data-astro-cid-mw7aashj]{display:none}.toc-sidebar[data-astro-cid-mw7aashj]{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar{width:4px}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-track{background:transparent}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-thumb{background-color:#ffffff1a;border-radius:2px}.toc-sidebar[data-astro-cid-mw7aashj]::-webkit-scrollbar-thumb:hover{background-color:#fff3}#copy-to-llm-btn[data-astro-cid-mw7aashj]{cursor:pointer}@media (max-width: 768px){.mobile-header[data-astro-cid-mw7aashj]{display:block}.desktop-sidebar[data-astro-cid-mw7aashj]{display:none}main[data-astro-cid-mw7aashj]{margin-left:0;margin-right:0!important;padding:5rem 1.5rem 1.5rem}.toc-sidebar[data-astro-cid-mw7aashj]{display:none}#copy-to-llm-btn[data-astro-cid-mw7aashj]{width:100%;justify-content:center}}@media (max-width: 1280px){.toc-sidebar[data-astro-cid-mw7aashj]{display:none!important}main[data-astro-cid-mw7aashj]{margin-right:0!important}}
3
- </style><script type="module">const p=document.getElementById("mobile-menu-button"),l=document.getElementById("mobile-menu"),g=document.querySelectorAll(".mobile-menu-link");p?.addEventListener("click",()=>{l?.classList.toggle("hidden")});l?.addEventListener("click",o=>{o.target===l&&l.classList.add("hidden")});g.forEach(o=>{o.addEventListener("click",()=>{l?.classList.add("hidden")})});function m(){const o=document.getElementById("toc-nav");if(!o){console.log("TOC: No toc-nav element found");return}const n=document.querySelector("article");if(!n){console.log("TOC: No article element found");return}const c=n.querySelectorAll("h2, h3");if(c.length===0){console.log("TOC: No headings found");return}console.log(`TOC: Found ${c.length} headings`);const a=document.createElement("ul");a.className="space-y-0 text-sm border-l border-border/50",c.forEach(e=>{const t=e.tagName==="H2"?2:3,r=e.id||e.textContent?.toLowerCase().replace(/[^\w]+/g,"-");!e.id&&r&&(e.id=r);const s=document.createElement("li"),d=document.createElement("a");d.href=`#${r}`,d.textContent=e.textContent,d.className=`toc-link block py-1 px-3 -ml-px border-l-2 border-transparent transition-all no-underline ${t===3?"pl-6 text-xs text-muted-foreground/70":"text-sm text-muted-foreground"} hover:text-foreground hover:border-muted-foreground/50`,s.appendChild(d),a.appendChild(s)}),o.appendChild(a);const i=new IntersectionObserver(e=>{e.forEach(t=>{const r=t.target.id,s=o.querySelector(`a[href="#${r}"]`);t.isIntersecting&&(document.querySelectorAll(".toc-link").forEach(d=>{d.classList.remove("text-foreground","border-accent","font-medium")}),s?.classList.add("text-foreground","border-accent","font-medium"))})},{rootMargin:"-100px 0px -66%",threshold:0});c.forEach(e=>{i.observe(e)})}document.addEventListener("DOMContentLoaded",m);document.addEventListener("astro:page-load",m);function u(){const o=document.getElementById("copy-to-llm-btn"),n=document.getElementById("copy-btn-text");if(!o||!n){console.log("Copy to LLM: Button not found on this page");return}console.log("Copy to LLM: Initialized"),o.addEventListener("click",async()=>{const c=window.location.pathname,a=c.replace(/^\//,"").replace(/\/$/,""),e=`/api/raw-markdown/${a===""?"index":a}`;console.log("Copy to LLM clicked: pathname=",c,"apiUrl=",e);try{n.textContent="Copying...";const t=await fetch(e);if(console.log("Response status:",t.status),!t.ok)throw new Error(`HTTP error! status: ${t.status}`);const r=await t.text();console.log("Got markdown, length:",r.length),await navigator.clipboard.writeText(r),n.textContent="Copied!",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}catch(t){console.error("Copy failed:",t),n.textContent="Failed",setTimeout(()=>{n.textContent="Copy to LLM"},2e3)}})}document.addEventListener("DOMContentLoaded",u);document.addEventListener("astro:page-load",u);
4
- </script></head> <body class="antialiased" data-astro-cid-mw7aashj> <div class="min-h-screen" data-astro-cid-mw7aashj> <!-- Mobile Header --> <header class="mobile-header fixed top-0 left-0 right-0 h-16 bg-card border-b border-border z-50 md:hidden" data-astro-cid-mw7aashj> <div class="flex items-center justify-between h-full px-4" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-2xl">➰</span> <span>loopwind</span> </h1> </a> <button id="mobile-menu-button" class="p-2 text-foreground hover:bg-accent rounded-md transition-colors" aria-label="Toggle menu" data-astro-cid-mw7aashj> <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" data-astro-cid-mw7aashj></path> </svg> </button> </div> </header> <!-- Mobile Menu Overlay --> <div id="mobile-menu" class="mobile-menu fixed inset-0 bg-background/80 backdrop-blur-sm z-40 md:hidden hidden" data-astro-cid-mw7aashj> <div class="fixed top-0 left-0 h-screen w-64 bg-card border-r border-border overflow-y-auto" data-astro-cid-mw7aashj> <div class="p-6 pt-20" data-astro-cid-mw7aashj> <nav data-astro-cid-mw7aashj> <ul class="space-y-1" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="mobile-menu-link 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> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="mobile-menu-link 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="mobile-menu-link 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="mobile-menu-link 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="mobile-menu-link 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="/preview" class="mobile-menu-link 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> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="mobile-menu-link 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="mobile-menu-link 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="mobile-menu-link 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="mobile-menu-link 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="/config" class="mobile-menu-link 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> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="mobile-menu-link 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="/playground" class="mobile-menu-link 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> Playground </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="mobile-menu-link 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> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="mobile-menu-link 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> </div> </div> <!-- Desktop Sidebar --> <aside class="desktop-sidebar 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> <div class="block mb-3" data-astro-cid-mw7aashj> <a href="/" class="no-underline"> <h1 class="text-3xl flex items-center gap-2 bg-linear-to-r from-brand-from to-brand-to bg-clip-text text-transparent"> <span class="text-4xl">➰</span> <span>loopwind</span> </h1> </a> </div> <nav data-astro-cid-mw7aashj> <ul class="space-y-0" data-astro-cid-mw7aashj> <li data-astro-cid-mw7aashj> <a href="/" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Home </a> </li><li data-astro-cid-mw7aashj> <a href="/getting-started" class="block px-3 py-1.5 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-1.5 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-1.5 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-1.5 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="/preview" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Preview </a> </li><li data-astro-cid-mw7aashj> <a href="/animation" class="block px-3 py-1.5 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-1.5 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-1.5 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-1.5 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="/config" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> loopwind.json </a> </li><li data-astro-cid-mw7aashj> <a href="/sdk" class="block px-3 py-1.5 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="/playground" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Playground </a> </li><li data-astro-cid-mw7aashj> <a href="/agents" class="block px-3 py-1.5 rounded-md text-sm transition-colors no-underline text-muted-foreground hover:text-foreground hover:bg-accent/50" data-astro-cid-mw7aashj> Use with AI Agents </a> </li><li data-astro-cid-mw7aashj> <a href="/llm.txt" class="block px-3 py-1.5 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 mr-64" data-astro-cid-mw7aashj> <div class="p-12" data-astro-cid-mw7aashj> <button id="copy-to-llm-btn" class="mb-6 px-4 py-2 bg-accent hover:bg-accent/80 text-accent-foreground rounded-md text-sm font-medium transition-colors flex items-center gap-2" aria-label="Copy raw markdown to clipboard" data-astro-cid-mw7aashj> <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" data-astro-cid-mw7aashj> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z" data-astro-cid-mw7aashj></path> </svg> <span id="copy-btn-text" data-astro-cid-mw7aashj>Copy to LLM</span> </button> <article class="prose prose-invert max-w-4xl" data-astro-cid-mw7aashj> <h1 id="image-rendering">Image Rendering</h1>
5
- <p>Generate beautiful images from React components using loopwind’s powerful image rendering engine powered by Satori.</p>
6
- <h2 id="quick-start">Quick Start</h2>
7
- <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>
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"> &#39;{&quot;title&quot;:&quot;Hello World&quot;,&quot;subtitle&quot;:&quot;Welcome&quot;}&#39;</span></span>
9
- <span class="line"></span>
10
- <span class="line"><span style="color:#6A737D"># Custom output name</span></span>
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"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span><span style="color:#79B8FF"> --out</span><span style="color:#9ECBFF"> custom-name.png</span></span>
12
- <span class="line"></span>
13
- <span class="line"><span style="color:#6A737D"># Different format</span></span>
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"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</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>
15
- <span class="line"></span>
16
- <span class="line"><span style="color:#6A737D"># Or use a props file</span></span>
17
- <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>
18
- <span class="line"></span></code></pre>
19
- <h2 id="image-template-structure">Image Template Structure</h2>
20
- <h3 id="basic-template">Basic Template</h3>
21
- <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>
22
- <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>
23
- <span class="line"><span style="color:#E1E4E8"> name: </span><span style="color:#9ECBFF">&quot;banner-hero&quot;</span><span style="color:#E1E4E8">,</span></span>
24
- <span class="line"><span style="color:#E1E4E8"> type: </span><span style="color:#9ECBFF">&quot;image&quot;</span><span style="color:#E1E4E8">,</span></span>
25
- <span class="line"><span style="color:#E1E4E8"> description: </span><span style="color:#9ECBFF">&quot;Hero banner with gradient background&quot;</span><span style="color:#E1E4E8">,</span></span>
26
- <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>
27
- <span class="line"><span style="color:#E1E4E8"> props: { title: </span><span style="color:#9ECBFF">&quot;string&quot;</span><span style="color:#E1E4E8">, subtitle: </span><span style="color:#9ECBFF">&quot;string&quot;</span><span style="color:#E1E4E8"> }</span></span>
28
- <span class="line"><span style="color:#E1E4E8">};</span></span>
29
- <span class="line"></span>
30
- <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>
31
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
32
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex flex-col justify-center items-center w-full h-full bg-gradient-to-br from-purple-600 to-blue-500 p-12&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
33
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;text-7xl font-bold text-white mb-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
34
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
35
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
36
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</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">&#39;text-2xl text-white/80&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
37
- <span class="line"><span style="color:#E1E4E8"> {subtitle}</span></span>
38
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
39
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
40
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
41
- <span class="line"><span style="color:#E1E4E8">}</span></span>
42
- <span class="line"></span></code></pre>
43
- <h3 id="props-file">Props File</h3>
44
- <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>
45
- <span class="line"><span style="color:#79B8FF"> &quot;title&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;Welcome to loopwind&quot;</span><span style="color:#E1E4E8">,</span></span>
46
- <span class="line"><span style="color:#79B8FF"> &quot;subtitle&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;Generate beautiful images from React&quot;</span></span>
47
- <span class="line"><span style="color:#E1E4E8">}</span></span>
48
- <span class="line"></span></code></pre>
49
- <h2 id="output-formats">Output Formats</h2>
50
- <h3 id="png-default">PNG (Default)</h3>
51
- <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"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span></span>
52
- <span class="line"><span style="color:#6A737D"># Output: _loopwind/outputs/my-template.png</span></span>
53
- <span class="line"></span></code></pre>
54
- <p><strong>Best for:</strong></p>
55
- <ul>
56
- <li>Designs with transparency</li>
57
- <li>High-quality graphics</li>
58
- <li>Sharp text and logos</li>
59
- <li>Web graphics</li>
60
- </ul>
61
- <h3 id="jpeg">JPEG</h3>
62
- <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"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</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>
63
- <span class="line"></span></code></pre>
64
- <p><strong>Options:</strong></p>
65
- <ul>
66
- <li><code>--quality</code> - 1-100 (default: 92)</li>
67
- </ul>
68
- <p><strong>Best for:</strong></p>
69
- <ul>
70
- <li>Photographs</li>
71
- <li>Gradients</li>
72
- <li>Smaller file sizes</li>
73
- <li>Social media images</li>
74
- </ul>
75
- <h3 id="svg">SVG</h3>
76
- <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"> &#39;{&quot;title&quot;:&quot;Hello&quot;}&#39;</span><span style="color:#79B8FF"> --format</span><span style="color:#9ECBFF"> svg</span></span>
77
- <span class="line"></span></code></pre>
78
- <p><strong>Best for:</strong></p>
79
- <ul>
80
- <li>Vector graphics</li>
81
- <li>Scalable designs</li>
82
- <li>Print-ready artwork</li>
83
- <li>Logos and icons</li>
84
- </ul>
85
- <h2 id="embedding-images">Embedding Images</h2>
86
- <p>Use the <code>image()</code> helper to embed images in your templates. It supports two modes:</p>
87
- <ol>
88
- <li><strong>Prop-based</strong> - Load from a prop value: <code>image(&#39;logo&#39;)</code></li>
89
- <li><strong>Direct file</strong> - Load from template directory: <code>image(&#39;icon.svg&#39;)</code></li>
90
- </ol>
91
- <h3 id="prop-based-images">Prop-based Images</h3>
92
- <p>Pass the prop name to load an image path from props:</p>
93
- <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"> ProductCard</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">background</span><span style="color:#E1E4E8"> }) {</span></span>
94
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
95
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;relative w-full h-full&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
96
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Load image from &#39;background&#39; prop */</span><span style="color:#E1E4E8">}</span></span>
97
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span></span>
98
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;background&#39;</span><span style="color:#E1E4E8">)}</span></span>
99
- <span class="line"><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">&#39;absolute inset-0 w-full h-full object-cover&#39;</span><span style="color:#E1E4E8">)}</span></span>
100
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
101
- <span class="line"></span>
102
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Content overlay */</span><span style="color:#E1E4E8">}</span></span>
103
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;relative z-10 p-12&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
104
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;text-6xl font-bold text-white&#39;</span><span style="color:#E1E4E8">)}&gt;{title}&lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
105
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
106
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
107
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
108
- <span class="line"><span style="color:#E1E4E8">}</span></span>
109
- <span class="line"></span></code></pre>
110
- <p><strong>Props:</strong></p>
111
- <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>
112
- <span class="line"><span style="color:#79B8FF"> &quot;title&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;New Product&quot;</span><span style="color:#E1E4E8">,</span></span>
113
- <span class="line"><span style="color:#79B8FF"> &quot;background&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./images/background.jpg&quot;</span></span>
114
- <span class="line"><span style="color:#E1E4E8">}</span></span>
115
- <span class="line"></span></code></pre>
116
- <h3 id="direct-file-images">Direct File Images</h3>
117
- <p>Load images directly from your template directory by including the file extension:</p>
118
- <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"> ChangelogItem</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">text</span><span style="color:#E1E4E8"> }) {</span></span>
119
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
120
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex items-center gap-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
121
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Load check.svg from template directory */</span><span style="color:#E1E4E8">}</span></span>
122
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span></span>
123
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;check.svg&#39;</span><span style="color:#E1E4E8">)}</span></span>
124
- <span class="line"><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">&#39;w-6 h-6&#39;</span><span style="color:#E1E4E8">)}</span></span>
125
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
126
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">span</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">&#39;text-lg&#39;</span><span style="color:#E1E4E8">)}&gt;{text}&lt;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">&gt;</span></span>
127
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
128
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
129
- <span class="line"><span style="color:#E1E4E8">}</span></span>
130
- <span class="line"></span></code></pre>
131
- <p>This loads <code>check.svg</code> from the same directory as your template file. You can also use subdirectories:</p>
132
- <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">// Load from assets subdirectory</span></span>
133
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;assets/icons/star.svg&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
134
- <span class="line"></span>
135
- <span class="line"><span style="color:#6A737D">// Load from shared folder</span></span>
136
- <span class="line"><span style="color:#E1E4E8">&lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;shared/logo.png&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
137
- <span class="line"></span></code></pre>
138
- <p><strong>Template directory structure:</strong></p>
139
- <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>
140
- <span class="line"><span>├── template.tsx</span></span>
141
- <span class="line"><span>├── check.svg ← image(&#39;check.svg&#39;)</span></span>
142
- <span class="line"><span>└── assets/</span></span>
143
- <span class="line"><span> └── icons/</span></span>
144
- <span class="line"><span> └── star.svg ← image(&#39;assets/icons/star.svg&#39;)</span></span>
145
- <span class="line"><span></span></span></code></pre>
146
- <h3 id="urls">URLs</h3>
147
- <p>The <code>image()</code> helper also supports loading images from URLs:</p>
148
- <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>
149
- <span class="line"><span style="color:#79B8FF"> &quot;background&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;https://example.com/image.jpg&quot;</span></span>
150
- <span class="line"><span style="color:#E1E4E8">}</span></span>
151
- <span class="line"></span></code></pre>
152
- <h3 id="supported-image-formats">Supported Image Formats</h3>
153
- <ul>
154
- <li>✅ <strong>JPEG</strong> (<code>.jpg</code>, <code>.jpeg</code>)</li>
155
- <li>✅ <strong>PNG</strong> (<code>.png</code>)</li>
156
- <li>✅ <strong>GIF</strong> (<code>.gif</code>)</li>
157
- <li>✅ <strong>WebP</strong> (<code>.webp</code>)</li>
158
- <li>✅ <strong>SVG</strong> (<code>.svg</code>)</li>
159
- </ul>
160
- <h3 id="image-positioning">Image Positioning</h3>
161
- <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"> ImageGrid</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">img1</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">img2</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">img3</span><span style="color:#E1E4E8"> }) {</span></span>
162
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
163
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;grid grid-cols-3 gap-4 w-full h-full p-8 bg-gray-100&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
164
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Cover - fills entire area */</span><span style="color:#E1E4E8">}</span></span>
165
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
166
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(img1)} </span></span>
167
- <span class="line"><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">&#39;w-full h-full object-cover rounded-lg&#39;</span><span style="color:#E1E4E8">)}</span></span>
168
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
169
- <span class="line"><span style="color:#E1E4E8"> </span></span>
170
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Contain - fits within area */</span><span style="color:#E1E4E8">}</span></span>
171
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
172
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(img2)} </span></span>
173
- <span class="line"><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">&#39;w-full h-full object-contain&#39;</span><span style="color:#E1E4E8">)}</span></span>
174
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
175
- <span class="line"><span style="color:#E1E4E8"> </span></span>
176
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Fill - stretches to fill */</span><span style="color:#E1E4E8">}</span></span>
177
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
178
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(img3)} </span></span>
179
- <span class="line"><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">&#39;w-full h-full object-fill&#39;</span><span style="color:#E1E4E8">)}</span></span>
180
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
181
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
182
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
183
- <span class="line"><span style="color:#E1E4E8">}</span></span>
184
- <span class="line"></span></code></pre>
185
- <h2 id="common-image-templates">Common Image Templates</h2>
186
- <h3 id="open-graph--social-cards">Open Graph / Social Cards</h3>
187
- <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">// og-image.tsx</span></span>
188
- <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"> OGImage</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">description</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">logo</span><span style="color:#E1E4E8"> }) {</span></span>
189
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
190
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex w-full h-full bg-white&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
191
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Left side - Content */</span><span style="color:#E1E4E8">}</span></span>
192
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex-1 flex flex-col justify-between p-12&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
193
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(logo)} </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">&#39;h-12 w-auto&#39;</span><span style="color:#E1E4E8">)} /&gt;</span></span>
194
- <span class="line"><span style="color:#E1E4E8"> </span></span>
195
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
196
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;text-5xl font-bold text-gray-900 mb-4&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
197
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
198
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">&gt;</span></span>
199
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</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">&#39;text-xl text-gray-600&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
200
- <span class="line"><span style="color:#E1E4E8"> {description}</span></span>
201
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
202
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
203
- <span class="line"><span style="color:#E1E4E8"> </span></span>
204
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</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">&#39;text-gray-400&#39;</span><span style="color:#E1E4E8">)}&gt;yoursite.com&lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
205
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
206
- <span class="line"><span style="color:#E1E4E8"> </span></span>
207
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Right side - Image */</span><span style="color:#E1E4E8">}</span></span>
208
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex-1&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
209
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
210
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(featuredImage)} </span></span>
211
- <span class="line"><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">&#39;w-full h-full object-cover&#39;</span><span style="color:#E1E4E8">)}</span></span>
212
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
213
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
214
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
215
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
216
- <span class="line"><span style="color:#E1E4E8">}</span></span>
217
- <span class="line"></span></code></pre>
218
- <p><strong>Size:</strong> 1200x630 (standard OG image size)</p>
219
- <h3 id="product-cards">Product Cards</h3>
220
- <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"> ProductCard</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">product</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">price</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">badge</span><span style="color:#E1E4E8"> }) {</span></span>
221
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
222
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex flex-col w-full h-full bg-white rounded-2xl overflow-hidden&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
223
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Product image */</span><span style="color:#E1E4E8">}</span></span>
224
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;relative h-2/3&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
225
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
226
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(product)} </span></span>
227
- <span class="line"><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">&#39;w-full h-full object-cover&#39;</span><span style="color:#E1E4E8">)}</span></span>
228
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
229
- <span class="line"><span style="color:#E1E4E8"> {badge </span><span style="color:#F97583">&amp;&amp;</span><span style="color:#E1E4E8"> (</span></span>
230
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;absolute top-4 right-4 bg-red-500 text-white px-4 py-2 rounded-full text-sm font-bold&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
231
- <span class="line"><span style="color:#E1E4E8"> {badge}</span></span>
232
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
233
- <span class="line"><span style="color:#E1E4E8"> )}</span></span>
234
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
235
- <span class="line"><span style="color:#E1E4E8"> </span></span>
236
- <span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Product info */</span><span style="color:#E1E4E8">}</span></span>
237
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex-1 p-6 flex flex-col justify-between&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
238
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">h2</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">&#39;text-2xl font-bold text-gray-900&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
239
- <span class="line"><span style="color:#E1E4E8"> {title}</span></span>
240
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">h2</span><span style="color:#E1E4E8">&gt;</span></span>
241
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex justify-between items-center&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
242
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">span</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">&#39;text-3xl font-bold text-gray-900&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
243
- <span class="line"><span style="color:#E1E4E8"> ${price}</span></span>
244
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">span</span><span style="color:#E1E4E8">&gt;</span></span>
245
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
246
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
247
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
248
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
249
- <span class="line"><span style="color:#E1E4E8">}</span></span>
250
- <span class="line"></span></code></pre>
251
- <h3 id="quote-cards">Quote Cards</h3>
252
- <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"> QuoteCard</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">image</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">quote</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">author</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">avatar</span><span style="color:#E1E4E8"> }) {</span></span>
253
- <span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
254
- <span class="line"><span style="color:#E1E4E8"> &lt;</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">&#39;flex flex-col items-center justify-center w-full h-full bg-gradient-to-br from-indigo-500 to-purple-600 p-16&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
255
- <span class="line"><span style="color:#E1E4E8"> {avatar </span><span style="color:#F97583">&amp;&amp;</span><span style="color:#E1E4E8"> (</span></span>
256
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">img</span><span style="color:#E1E4E8"> </span></span>
257
- <span class="line"><span style="color:#B392F0"> src</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">image</span><span style="color:#E1E4E8">(avatar)} </span></span>
258
- <span class="line"><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">&#39;w-24 h-24 rounded-full border-4 border-white mb-8&#39;</span><span style="color:#E1E4E8">)}</span></span>
259
- <span class="line"><span style="color:#E1E4E8"> /&gt;</span></span>
260
- <span class="line"><span style="color:#E1E4E8"> )}</span></span>
261
- <span class="line"><span style="color:#E1E4E8"> </span></span>
262
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">blockquote</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">&#39;text-3xl text-white text-center font-light mb-8 max-w-3xl&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
263
- <span class="line"><span style="color:#E1E4E8"> &quot;{quote}&quot;</span></span>
264
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">blockquote</span><span style="color:#E1E4E8">&gt;</span></span>
265
- <span class="line"><span style="color:#E1E4E8"> </span></span>
266
- <span class="line"><span style="color:#E1E4E8"> &lt;</span><span style="color:#85E89D">p</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">&#39;text-xl text-white/80&#39;</span><span style="color:#E1E4E8">)}&gt;</span></span>
267
- <span class="line"><span style="color:#E1E4E8"> — {author}</span></span>
268
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">p</span><span style="color:#E1E4E8">&gt;</span></span>
269
- <span class="line"><span style="color:#E1E4E8"> &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
270
- <span class="line"><span style="color:#E1E4E8"> );</span></span>
271
- <span class="line"><span style="color:#E1E4E8">}</span></span>
272
- <span class="line"></span></code></pre>
273
- <h2 id="performance-tips">Performance Tips</h2>
274
- <h3 id="1-optimize-image-sizes">1. Optimize Image Sizes</h3>
275
- <p>Use appropriately sized images before embedding:</p>
276
- <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"># Resize large images before using them</span></span>
277
- <span class="line"><span style="color:#B392F0">convert</span><span style="color:#9ECBFF"> large-image.jpg</span><span style="color:#79B8FF"> -resize</span><span style="color:#9ECBFF"> 1600x900</span><span style="color:#9ECBFF"> optimized.jpg</span></span>
278
- <span class="line"></span></code></pre>
279
- <h3 id="2-use-web-optimized-formats">2. Use Web-Optimized Formats</h3>
280
- <ul>
281
- <li><strong>WebP</strong> for modern browsers (smaller file sizes)</li>
282
- <li><strong>JPEG</strong> for photos with controlled quality</li>
283
- <li><strong>PNG</strong> only when transparency is needed</li>
284
- </ul>
285
- <h3 id="3-batch-rendering">3. Batch Rendering</h3>
286
- <p>Render multiple images at once:</p>
287
- <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>
288
- <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"> &#39;{&quot;title&quot;:&quot;Image 1&quot;}&#39;</span></span>
289
- <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"> &#39;{&quot;title&quot;:&quot;Image 2&quot;}&#39;</span></span>
290
- <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"> &#39;{&quot;title&quot;:&quot;Image 3&quot;}&#39;</span></span>
291
- <span class="line"></span>
292
- <span class="line"><span style="color:#6A737D"># Or loop through props files</span></span>
293
- <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>
294
- <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"> &quot;</span><span style="color:#E1E4E8">$props</span><span style="color:#9ECBFF">&quot;</span></span>
295
- <span class="line"><span style="color:#F97583">done</span></span>
296
- <span class="line"></span></code></pre>
297
- <h3 id="4-cache-templates">4. Cache Templates</h3>
298
- <p>Templates are cached after first load for faster subsequent renders.</p>
299
- <h2 id="common-sizes">Common Sizes</h2>
300
- <h3 id="social-media">Social Media</h3>
301
- <ul>
302
- <li><strong>Twitter/X Card</strong>: 1200x675</li>
303
- <li><strong>Facebook Post</strong>: 1200x630</li>
304
- <li><strong>Instagram Post</strong>: 1080x1080</li>
305
- <li><strong>LinkedIn Post</strong>: 1200x627</li>
306
- <li><strong>Pinterest Pin</strong>: 1000x1500</li>
307
- </ul>
308
- <h3 id="web-graphics">Web Graphics</h3>
309
- <ul>
310
- <li><strong>Hero Banner</strong>: 1920x1080</li>
311
- <li><strong>Blog Header</strong>: 1600x900</li>
312
- <li><strong>Thumbnail</strong>: 640x360</li>
313
- <li><strong>Avatar</strong>: 400x400</li>
314
- </ul>
315
- <h3 id="print">Print</h3>
316
- <ul>
317
- <li><strong>Flyer (A4)</strong>: 2480x3508 (300 DPI)</li>
318
- <li><strong>Business Card</strong>: 1050x600 (300 DPI)</li>
319
- <li><strong>Poster (A3)</strong>: 3508x4961 (300 DPI)</li>
320
- </ul>
321
- <h2 id="troubleshooting">Troubleshooting</h2>
322
- <h3 id="images-not-loading">Images Not Loading</h3>
323
- <p>Check file paths are relative to the props file:</p>
324
- <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>
325
- <span class="line"><span style="color:#79B8FF"> &quot;background&quot;</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">&quot;./images/bg.jpg&quot;</span><span style="color:#6A737D"> // ✅ Relative path</span></span>
326
- <span class="line"><span style="color:#9ECBFF"> &quot;background&quot;</span><span style="color:#FDAEB7;font-style:italic">:</span><span style="color:#9ECBFF"> &quot;/images/bg.jpg&quot;</span><span style="color:#6A737D"> // ❌ Absolute path won&#39;t work</span></span>
327
- <span class="line"><span style="color:#E1E4E8">}</span></span>
328
- <span class="line"></span></code></pre>
329
- <h3 id="blurry-text">Blurry Text</h3>
330
- <p>Ensure you’re using appropriate dimensions. Satori renders at exact pixel dimensions.</p>
331
- <h2 id="next-steps">Next Steps</h2>
332
- <ul>
333
- <li><a href="/video">Learn about Video Rendering</a></li>
334
- <li><a href="/helpers">QR Codes and Template Composition</a></li>
335
- <li><a href="/styling">Styling with Tailwind &amp; shadcn/ui</a></li>
336
- <li><a href="/fonts">Using Custom Fonts</a></li>
337
- </ul> </article> </div> </main> <!-- Table of Contents Sidebar (Desktop only) --> <aside id="toc-sidebar" class="toc-sidebar fixed top-0 right-0 h-screen w-64 overflow-y-auto z-10" data-astro-cid-mw7aashj> <div class="px-6 py-8" data-astro-cid-mw7aashj> <h3 class="text-xs font-semibold text-muted-foreground mb-4 uppercase tracking-wider" data-astro-cid-mw7aashj>On this page</h3> <nav id="toc-nav" data-astro-cid-mw7aashj> <!-- TOC will be populated by JavaScript --> </nav> </div> </aside> </div> </body></html>