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.
- package/README.md +13 -117
- package/dist/cli.js +16 -10
- package/dist/cli.js.map +1 -1
- package/dist/commands/add.d.ts.map +1 -1
- package/dist/commands/add.js +6 -10
- package/dist/commands/add.js.map +1 -1
- package/dist/commands/agent.d.ts +8 -0
- package/dist/commands/agent.d.ts.map +1 -0
- package/dist/commands/agent.js +101 -0
- package/dist/commands/agent.js.map +1 -0
- package/dist/commands/init.d.ts.map +1 -1
- package/dist/commands/init.js +17 -7
- package/dist/commands/init.js.map +1 -1
- package/dist/commands/render.d.ts.map +1 -1
- package/dist/commands/render.js +17 -19
- package/dist/commands/render.js.map +1 -1
- package/dist/default-templates/AGENTS.md +10 -24
- package/dist/lib/config.d.ts +2 -3
- package/dist/lib/config.d.ts.map +1 -1
- package/dist/lib/config.js +4 -9
- package/dist/lib/config.js.map +1 -1
- package/dist/lib/constants.d.ts +1 -3
- package/dist/lib/constants.d.ts.map +1 -1
- package/dist/lib/constants.js +2 -4
- package/dist/lib/constants.js.map +1 -1
- package/dist/lib/installer.d.ts +2 -0
- package/dist/lib/installer.d.ts.map +1 -1
- package/dist/lib/installer.js +6 -7
- package/dist/lib/installer.js.map +1 -1
- package/dist/lib/renderer.d.ts.map +1 -1
- package/dist/lib/renderer.js +4 -1
- package/dist/lib/renderer.js.map +1 -1
- package/dist/lib/utils.d.ts +13 -29
- package/dist/lib/utils.d.ts.map +1 -1
- package/dist/lib/utils.js +45 -155
- package/dist/lib/utils.js.map +1 -1
- package/dist/types/config.d.ts +0 -2
- package/dist/types/config.d.ts.map +1 -1
- package/dist/types/config.js.map +1 -1
- package/package.json +1 -15
- package/REGISTRY_SETUP.md +0 -363
- package/dist/default-templates/image/template.d.ts +0 -20
- package/dist/default-templates/image/template.d.ts.map +0 -1
- package/dist/default-templates/image/template.js +0 -18
- package/dist/default-templates/image/template.js.map +0 -1
- package/dist/default-templates/image/template.tsx +0 -20
- package/dist/default-templates/kitchen-sink/template.tsx +0 -64
- package/dist/default-templates/page/template.tsx +0 -37
- package/dist/default-templates/video/template.d.ts +0 -26
- package/dist/default-templates/video/template.d.ts.map +0 -1
- package/dist/default-templates/video/template.js +0 -33
- package/dist/default-templates/video/template.js.map +0 -1
- package/dist/default-templates/video/template.tsx +0 -37
- package/dist/default-templates/website/pages/home.tsx +0 -17
- package/dist/default-templates/website/parts/footer.tsx +0 -17
- package/dist/default-templates/website/parts/header.tsx +0 -17
- package/dist/default-templates/website/template.tsx +0 -17
- package/dist/default-templates/website-template/pages/home.tsx +0 -13
- package/dist/default-templates/website-template/parts/footer.tsx +0 -15
- package/dist/default-templates/website-template/parts/header.tsx +0 -15
- package/dist/default-templates/website-template/template.tsx +0 -32
- package/dist/lib/encode-worker.d.ts +0 -2
- package/dist/lib/encode-worker.d.ts.map +0 -1
- package/dist/lib/encode-worker.js +0 -29
- package/dist/lib/encode-worker.js.map +0 -1
- package/dist/lib/mjpeg-muxer.d.ts +0 -46
- package/dist/lib/mjpeg-muxer.d.ts.map +0 -1
- package/dist/lib/mjpeg-muxer.js +0 -513
- package/dist/lib/mjpeg-muxer.js.map +0 -1
- package/dist/lib/render-core.d.ts +0 -63
- package/dist/lib/render-core.d.ts.map +0 -1
- package/dist/lib/render-core.js +0 -65
- package/dist/lib/render-core.js.map +0 -1
- package/dist/lib/tailwind-browser.d.ts +0 -27
- package/dist/lib/tailwind-browser.d.ts.map +0 -1
- package/dist/lib/tailwind-browser.js +0 -853
- package/dist/lib/tailwind-browser.js.map +0 -1
- package/dist/lib/video-player.d.ts +0 -25
- package/dist/lib/video-player.d.ts.map +0 -1
- package/dist/lib/video-player.js +0 -392
- package/dist/lib/video-player.js.map +0 -1
- package/dist/sdk/compiler.d.ts +0 -94
- package/dist/sdk/compiler.d.ts.map +0 -1
- package/dist/sdk/compiler.js +0 -122
- package/dist/sdk/compiler.js.map +0 -1
- package/dist/sdk/edge/index.d.ts +0 -91
- package/dist/sdk/edge/index.d.ts.map +0 -1
- package/dist/sdk/edge/index.js +0 -187
- package/dist/sdk/edge/index.js.map +0 -1
- package/dist/sdk/index.d.ts +0 -62
- package/dist/sdk/index.d.ts.map +0 -1
- package/dist/sdk/index.js +0 -141
- package/dist/sdk/index.js.map +0 -1
- package/dist/sdk/preview.d.ts +0 -65
- package/dist/sdk/preview.d.ts.map +0 -1
- package/dist/sdk/preview.js +0 -262
- package/dist/sdk/preview.js.map +0 -1
- package/dist/sdk/template.d.ts +0 -162
- package/dist/sdk/template.d.ts.map +0 -1
- package/dist/sdk/template.js +0 -231
- package/dist/sdk/template.js.map +0 -1
- package/dist/sdk/workers/index.d.ts +0 -135
- package/dist/sdk/workers/index.d.ts.map +0 -1
- package/dist/sdk/workers/index.js +0 -271
- package/dist/sdk/workers/index.js.map +0 -1
- package/dist/sdk/workers/tailwind-config.d.ts +0 -48
- package/dist/sdk/workers/tailwind-config.d.ts.map +0 -1
- package/dist/sdk/workers/tailwind-config.js +0 -187
- package/dist/sdk/workers/tailwind-config.js.map +0 -1
- package/dist/sdk/workers/tailwind.d.ts +0 -9
- package/dist/sdk/workers/tailwind.d.ts.map +0 -1
- package/dist/sdk/workers/tailwind.js +0 -8
- package/dist/sdk/workers/tailwind.js.map +0 -1
- package/examples/code-editor-templates.ts +0 -173
- package/examples/nextjs-api/README.md +0 -180
- package/examples/nextjs-api/package.json +0 -21
- package/examples/nextjs-api/pages/api/intro-video.ts +0 -53
- package/examples/nextjs-api/pages/api/og-image.ts +0 -50
- package/examples/nextjs-template-import.ts +0 -58
- package/examples/sdk-video-preview.tsx +0 -120
- package/examples/template-compiler-workflow.ts +0 -251
- package/examples/visual-builder-templates.ts +0 -336
- package/render-examples-600x400.mjs +0 -161
- package/render-spring-variants-fixed.mjs +0 -60
- package/render-staggered-text.mjs +0 -56
- package/test-cloudflare-worker/README.md +0 -64
- package/test-cloudflare-worker/dist/README.md +0 -1
- package/test-cloudflare-worker/dist/index.js +0 -23743
- package/test-cloudflare-worker/dist/index.js.map +0 -8
- package/test-cloudflare-worker/package-lock.json +0 -1773
- package/test-cloudflare-worker/package.json +0 -25
- package/test-cloudflare-worker/test-sdk.mjs +0 -75
- package/test-cloudflare-worker/wrangler.toml +0 -14
- package/test-font-files.mjs +0 -72
- package/test-jsx-support.mjs +0 -146
- package/test-sdk-config.mjs +0 -454
- package/test-sdk-source-config.mjs +0 -427
- package/test-sdk-user-templates.mjs +0 -469
- package/test-static-debug.tsx +0 -19
- package/test-templates/TESTS.md +0 -63
- package/test-templates/config-test.mjs +0 -17
- package/test-templates/demo-intro-props.json +0 -4
- package/test-templates/run-tests.sh +0 -44
- package/test-templates/test-sdk.mjs +0 -139
- package/test-video-720p.mjs +0 -96
- package/test-video-breakdown.mjs +0 -98
- package/test-video-perf-1080.mjs +0 -67
- package/test-video-perf.mjs +0 -56
- package/test-video-props.json +0 -3
- package/test-worker-1080p.mjs +0 -103
- package/test-worker-viability.mjs +0 -140
- package/website/.astro/content.db +0 -0
- package/website/.astro/integrations/_inox-tools_astro-when/types.d.ts +0 -1
- package/website/.astro/integrations/astro_db/db.d.ts +0 -15
- package/website/.astro/settings.json +0 -5
- package/website/.astro/types.d.ts +0 -2
- package/website/DEPLOYMENT.md +0 -143
- package/website/OG_IMAGES.md +0 -142
- package/website/README.md +0 -158
- package/website/astro.config.mjs +0 -41
- package/website/dist/.gitkeep +0 -5
- package/website/dist/_astro/PlaygroundEditor.DzFavsm8.js +0 -26
- package/website/dist/_astro/VideoPreviewClient.BrajhYmh.js +0 -1
- package/website/dist/_astro/agents.CZXv4DCM.css +0 -1
- package/website/dist/_astro/client.BHSq4mdQ.js +0 -33
- package/website/dist/_astro/index.CTbGshLK.js +0 -9
- package/website/dist/_astro/jsx-runtime.BjG_zV1W.js +0 -9
- package/website/dist/_routes.json +0 -31
- package/website/dist/_worker.js/_@astrojs-ssr-adapter.mjs +0 -1033
- package/website/dist/_worker.js/_astro-internal_middleware.mjs +0 -40
- package/website/dist/_worker.js/chunks/Logo_Cud5QvBJ.mjs +0 -22
- package/website/dist/_worker.js/chunks/_@astro-renderers_-YVK7NHa.mjs +0 -15015
- package/website/dist/_worker.js/chunks/abap_BTmsHiP5.mjs +0 -1
- package/website/dist/_worker.js/chunks/actionscript-3_DmBelb1E.mjs +0 -1
- package/website/dist/_worker.js/chunks/ada_8-E0ahCN.mjs +0 -1
- package/website/dist/_worker.js/chunks/andromeeda_XI-CXx50.mjs +0 -1
- package/website/dist/_worker.js/chunks/angular-html_DKGh3gGH.mjs +0 -1
- package/website/dist/_worker.js/chunks/angular-ts_-qZGsJoA.mjs +0 -1
- package/website/dist/_worker.js/chunks/apache_ijTUt0Ee.mjs +0 -1
- package/website/dist/_worker.js/chunks/apex_agu1c6Sh.mjs +0 -1
- package/website/dist/_worker.js/chunks/apl_Bj2f7Art.mjs +0 -1
- package/website/dist/_worker.js/chunks/applescript_B_vXrOh3.mjs +0 -1
- package/website/dist/_worker.js/chunks/ara_DCEQ2rnh.mjs +0 -1
- package/website/dist/_worker.js/chunks/asciidoc_CGN_EkYS.mjs +0 -1
- package/website/dist/_worker.js/chunks/asm_BBWZgnDp.mjs +0 -1
- package/website/dist/_worker.js/chunks/astro/assets-service_j52rQLzU.mjs +0 -721
- package/website/dist/_worker.js/chunks/astro/server_CsUrSZgd.mjs +0 -2512
- package/website/dist/_worker.js/chunks/astro-designed-error-pages_1ELXm5Tt.mjs +0 -542
- package/website/dist/_worker.js/chunks/astro_Dr_hht3h.mjs +0 -1
- package/website/dist/_worker.js/chunks/aurora-x_9GHG8nSq.mjs +0 -1
- package/website/dist/_worker.js/chunks/awk_DHRvhXot.mjs +0 -1
- package/website/dist/_worker.js/chunks/ayu-dark_CcvqmEHE.mjs +0 -1
- package/website/dist/_worker.js/chunks/ballerina_C7SdeSZb.mjs +0 -1
- package/website/dist/_worker.js/chunks/bat_Dv4A3u45.mjs +0 -1
- package/website/dist/_worker.js/chunks/beancount_BfPf9Luv.mjs +0 -1
- package/website/dist/_worker.js/chunks/berry_B8rfM3lL.mjs +0 -1
- package/website/dist/_worker.js/chunks/bibtex_TcjYgtJM.mjs +0 -1
- package/website/dist/_worker.js/chunks/bicep_CrlFWCdN.mjs +0 -1
- package/website/dist/_worker.js/chunks/blade_lanKVYID.mjs +0 -1
- package/website/dist/_worker.js/chunks/bsl_BhppzXMB.mjs +0 -1
- package/website/dist/_worker.js/chunks/c_6FBALJTK.mjs +0 -1
- package/website/dist/_worker.js/chunks/cadence_2txU9LVE.mjs +0 -1
- package/website/dist/_worker.js/chunks/cairo_BkrFAIlP.mjs +0 -1
- package/website/dist/_worker.js/chunks/catppuccin-frappe_CkEqIYhU.mjs +0 -1
- package/website/dist/_worker.js/chunks/catppuccin-latte_DG4Gx_-v.mjs +0 -1
- package/website/dist/_worker.js/chunks/catppuccin-macchiato_Cwi3vCXf.mjs +0 -1
- package/website/dist/_worker.js/chunks/catppuccin-mocha_L9_OPlFX.mjs +0 -1
- package/website/dist/_worker.js/chunks/clarity_BEAe4Ulu.mjs +0 -1
- package/website/dist/_worker.js/chunks/clojure_VnUX6p2g.mjs +0 -1
- package/website/dist/_worker.js/chunks/cmake_0-SGkZEj.mjs +0 -1
- package/website/dist/_worker.js/chunks/cobol_92M_KGaE.mjs +0 -1
- package/website/dist/_worker.js/chunks/codeowners_CzMwskBv.mjs +0 -1
- package/website/dist/_worker.js/chunks/codeql_DWJZNHv1.mjs +0 -1
- package/website/dist/_worker.js/chunks/coffee_CQjKU2fh.mjs +0 -1
- package/website/dist/_worker.js/chunks/common-lisp_BBLWDpS5.mjs +0 -1
- package/website/dist/_worker.js/chunks/coq_hedRFV3D.mjs +0 -1
- package/website/dist/_worker.js/chunks/cpp_DlS1i6Zs.mjs +0 -1
- package/website/dist/_worker.js/chunks/crystal_D6n65fKV.mjs +0 -1
- package/website/dist/_worker.js/chunks/csharp_C6FCVFzc.mjs +0 -1
- package/website/dist/_worker.js/chunks/css_C5uJEgmJ.mjs +0 -1
- package/website/dist/_worker.js/chunks/csv_CtMYuuJl.mjs +0 -1
- package/website/dist/_worker.js/chunks/cue_BsPexqx6.mjs +0 -1
- package/website/dist/_worker.js/chunks/cypher_apzf6OBi.mjs +0 -1
- package/website/dist/_worker.js/chunks/d_DcvIRcgm.mjs +0 -1
- package/website/dist/_worker.js/chunks/dark-plus_C01ONtzj.mjs +0 -1
- package/website/dist/_worker.js/chunks/dart_WkzM5WrV.mjs +0 -1
- package/website/dist/_worker.js/chunks/dax_DjXAO5V4.mjs +0 -1
- package/website/dist/_worker.js/chunks/desktop_C92LCxdc.mjs +0 -1
- package/website/dist/_worker.js/chunks/diff_CVwM_9XJ.mjs +0 -1
- package/website/dist/_worker.js/chunks/docker_DPzgJf6Z.mjs +0 -1
- package/website/dist/_worker.js/chunks/dotenv_D_vgANvA.mjs +0 -1
- package/website/dist/_worker.js/chunks/dracula-soft_CLnUBwFm.mjs +0 -1
- package/website/dist/_worker.js/chunks/dracula_lBVpb6Lb.mjs +0 -1
- package/website/dist/_worker.js/chunks/dream-maker_DTLbzd_J.mjs +0 -1
- package/website/dist/_worker.js/chunks/edge_i54JYm3_.mjs +0 -1
- package/website/dist/_worker.js/chunks/elixir_BJCIjTu4.mjs +0 -1
- package/website/dist/_worker.js/chunks/elm_BbXD39-_.mjs +0 -1
- package/website/dist/_worker.js/chunks/emacs-lisp_pxa5cXaN.mjs +0 -1
- package/website/dist/_worker.js/chunks/erb_Ccjijeee.mjs +0 -1
- package/website/dist/_worker.js/chunks/erlang_B2VM_hi7.mjs +0 -1
- package/website/dist/_worker.js/chunks/everforest-dark_BxvIPBim.mjs +0 -1
- package/website/dist/_worker.js/chunks/everforest-light_B7VoyaJM.mjs +0 -1
- package/website/dist/_worker.js/chunks/fennel_D-uo7X6c.mjs +0 -1
- package/website/dist/_worker.js/chunks/fish_BjePoK3m.mjs +0 -1
- package/website/dist/_worker.js/chunks/fluent_C8fgkzLX.mjs +0 -1
- package/website/dist/_worker.js/chunks/fortran-fixed-form_D1pu5zrc.mjs +0 -1
- package/website/dist/_worker.js/chunks/fortran-free-form_CSGOhJD6.mjs +0 -1
- package/website/dist/_worker.js/chunks/fsharp_B0xy-A4Y.mjs +0 -1
- package/website/dist/_worker.js/chunks/gdresource_CWppjlHq.mjs +0 -1
- package/website/dist/_worker.js/chunks/gdscript_eQCHchcS.mjs +0 -1
- package/website/dist/_worker.js/chunks/gdshader_C4kxepX7.mjs +0 -1
- package/website/dist/_worker.js/chunks/genie_ACtQLcDW.mjs +0 -1
- package/website/dist/_worker.js/chunks/gherkin_BFp2uKUd.mjs +0 -1
- package/website/dist/_worker.js/chunks/git-commit_CLg9ZwMV.mjs +0 -1
- package/website/dist/_worker.js/chunks/git-rebase_DG8A80Nt.mjs +0 -1
- package/website/dist/_worker.js/chunks/github-dark-default_BI0EP2Kv.mjs +0 -1
- package/website/dist/_worker.js/chunks/github-dark-dimmed_a_NIC0Xb.mjs +0 -1
- package/website/dist/_worker.js/chunks/github-dark-high-contrast_jZGqT7hk.mjs +0 -1
- package/website/dist/_worker.js/chunks/github-dark_CHCDNd2O.mjs +0 -1
- package/website/dist/_worker.js/chunks/github-light-default_DRbOW5RG.mjs +0 -1
- package/website/dist/_worker.js/chunks/github-light-high-contrast_tn_kWutM.mjs +0 -1
- package/website/dist/_worker.js/chunks/github-light_D9brYzot.mjs +0 -1
- package/website/dist/_worker.js/chunks/gleam_Dmhu1oxW.mjs +0 -1
- package/website/dist/_worker.js/chunks/glimmer-js_BfZbXy8A.mjs +0 -1
- package/website/dist/_worker.js/chunks/glimmer-ts_B9QVICrD.mjs +0 -1
- package/website/dist/_worker.js/chunks/glsl_DD2PPwOs.mjs +0 -1
- package/website/dist/_worker.js/chunks/gnuplot_D2OYChUX.mjs +0 -1
- package/website/dist/_worker.js/chunks/go_DYGFTe3h.mjs +0 -1
- package/website/dist/_worker.js/chunks/graphql_B7XsT3nH.mjs +0 -1
- package/website/dist/_worker.js/chunks/groovy_BO12Uwkl.mjs +0 -1
- package/website/dist/_worker.js/chunks/hack_CB2_ztCP.mjs +0 -1
- package/website/dist/_worker.js/chunks/haml_CyfDcDD3.mjs +0 -1
- package/website/dist/_worker.js/chunks/handlebars_CfpxpWm2.mjs +0 -1
- package/website/dist/_worker.js/chunks/haskell_jUeC5uN5.mjs +0 -1
- package/website/dist/_worker.js/chunks/haxe_B6GxP1WB.mjs +0 -1
- package/website/dist/_worker.js/chunks/hcl_DwoHV2oh.mjs +0 -1
- package/website/dist/_worker.js/chunks/hjson_DV7cJRk4.mjs +0 -1
- package/website/dist/_worker.js/chunks/hlsl_BlFCscPI.mjs +0 -1
- package/website/dist/_worker.js/chunks/houston_COBFG1Mx.mjs +0 -1
- package/website/dist/_worker.js/chunks/html-derivative_C9pJ337h.mjs +0 -1
- package/website/dist/_worker.js/chunks/html_D1OkrZS5.mjs +0 -1
- package/website/dist/_worker.js/chunks/http_DIGXRqvJ.mjs +0 -1
- package/website/dist/_worker.js/chunks/hxml_DEwh9i-c.mjs +0 -1
- package/website/dist/_worker.js/chunks/hy_DDoIgW1K.mjs +0 -1
- package/website/dist/_worker.js/chunks/imba_B00zbHo4.mjs +0 -1
- package/website/dist/_worker.js/chunks/index_BDWR1Q-q.mjs +0 -1861
- package/website/dist/_worker.js/chunks/ini_D7XQA_p8.mjs +0 -1
- package/website/dist/_worker.js/chunks/java_B9wdFd8K.mjs +0 -1
- package/website/dist/_worker.js/chunks/javascript_CLsPGOON.mjs +0 -1
- package/website/dist/_worker.js/chunks/jinja_jarBCAN1.mjs +0 -1
- package/website/dist/_worker.js/chunks/jison_oGg3J708.mjs +0 -1
- package/website/dist/_worker.js/chunks/json5_DlZ1Kyaa.mjs +0 -1
- package/website/dist/_worker.js/chunks/json_DaYk_FMp.mjs +0 -1
- package/website/dist/_worker.js/chunks/jsonc_DlwgfSDs.mjs +0 -1
- package/website/dist/_worker.js/chunks/jsonl_BbCCVaZF.mjs +0 -1
- package/website/dist/_worker.js/chunks/jsonnet_Dt-G75xe.mjs +0 -1
- package/website/dist/_worker.js/chunks/jssm_BtKFTj2A.mjs +0 -1
- package/website/dist/_worker.js/chunks/jsx_DDx_xAZ8.mjs +0 -1
- package/website/dist/_worker.js/chunks/julia_CK0lv68l.mjs +0 -1
- package/website/dist/_worker.js/chunks/kanagawa-dragon_BldAK3Oo.mjs +0 -1
- package/website/dist/_worker.js/chunks/kanagawa-lotus_DVM8FX9_.mjs +0 -1
- package/website/dist/_worker.js/chunks/kanagawa-wave_Dpih0AKP.mjs +0 -1
- package/website/dist/_worker.js/chunks/kotlin_kWneB9V_.mjs +0 -1
- package/website/dist/_worker.js/chunks/kusto_BKVATd95.mjs +0 -1
- package/website/dist/_worker.js/chunks/laserwave_BqatxsVl.mjs +0 -1
- package/website/dist/_worker.js/chunks/latex_LVDcGBbc.mjs +0 -1
- package/website/dist/_worker.js/chunks/lean_W7qo-5M2.mjs +0 -1
- package/website/dist/_worker.js/chunks/less_DFNwJnBH.mjs +0 -1
- package/website/dist/_worker.js/chunks/light-plus_Dp0AoWsO.mjs +0 -1
- package/website/dist/_worker.js/chunks/liquid_D24qs0pc.mjs +0 -1
- package/website/dist/_worker.js/chunks/log_IPWMXriF.mjs +0 -1
- package/website/dist/_worker.js/chunks/logo_C6KaatrQ.mjs +0 -1
- package/website/dist/_worker.js/chunks/lua_CwnEf-T7.mjs +0 -1
- package/website/dist/_worker.js/chunks/luau_Br3-CXjS.mjs +0 -1
- package/website/dist/_worker.js/chunks/make_UBNG-kOo.mjs +0 -1
- package/website/dist/_worker.js/chunks/markdown_C7mhJFCm.mjs +0 -1
- package/website/dist/_worker.js/chunks/marko_4tchUvI7.mjs +0 -1
- package/website/dist/_worker.js/chunks/material-theme-darker_SKtaNEPn.mjs +0 -1
- package/website/dist/_worker.js/chunks/material-theme-lighter_zOX_DZCH.mjs +0 -1
- package/website/dist/_worker.js/chunks/material-theme-ocean_BN9WbhdC.mjs +0 -1
- package/website/dist/_worker.js/chunks/material-theme-palenight_DT_covjH.mjs +0 -1
- package/website/dist/_worker.js/chunks/material-theme_6RpeM3kc.mjs +0 -1
- package/website/dist/_worker.js/chunks/matlab_DCOXsPKR.mjs +0 -1
- package/website/dist/_worker.js/chunks/mdc_B9gb2UFP.mjs +0 -1
- package/website/dist/_worker.js/chunks/mdx_DGU7Nu9u.mjs +0 -1
- package/website/dist/_worker.js/chunks/mermaid_B69URzsZ.mjs +0 -1
- package/website/dist/_worker.js/chunks/min-dark_BgxifOMI.mjs +0 -1
- package/website/dist/_worker.js/chunks/min-light_BrPjXxUp.mjs +0 -1
- package/website/dist/_worker.js/chunks/mipsasm_9U-4_t7k.mjs +0 -1
- package/website/dist/_worker.js/chunks/mojo_B0wt7ug3.mjs +0 -1
- package/website/dist/_worker.js/chunks/monokai_B6Pxpoyi.mjs +0 -1
- package/website/dist/_worker.js/chunks/move_1eid4CyR.mjs +0 -1
- package/website/dist/_worker.js/chunks/narrat_Ds6-p5JZ.mjs +0 -1
- package/website/dist/_worker.js/chunks/nextflow_v2N1Qlqa.mjs +0 -1
- package/website/dist/_worker.js/chunks/nginx_Bp9Ab2NH.mjs +0 -1
- package/website/dist/_worker.js/chunks/night-owl_CdwOw_sc.mjs +0 -1
- package/website/dist/_worker.js/chunks/nim_BXGDUe53.mjs +0 -1
- package/website/dist/_worker.js/chunks/nix_CUig1nJH.mjs +0 -1
- package/website/dist/_worker.js/chunks/noop-middleware_B8fH5jha.mjs +0 -10
- package/website/dist/_worker.js/chunks/nord_SPoG1iae.mjs +0 -1
- package/website/dist/_worker.js/chunks/nushell_DJw1Lca8.mjs +0 -1
- package/website/dist/_worker.js/chunks/objective-c_Bktzl_CO.mjs +0 -1
- package/website/dist/_worker.js/chunks/objective-cpp_CP4DWdDp.mjs +0 -1
- package/website/dist/_worker.js/chunks/ocaml_CeEAs7bZ.mjs +0 -1
- package/website/dist/_worker.js/chunks/one-dark-pro_-hIwCNMi.mjs +0 -1
- package/website/dist/_worker.js/chunks/one-light_DSmYvJ05.mjs +0 -1
- package/website/dist/_worker.js/chunks/pascal_C-S_Ms_o.mjs +0 -1
- package/website/dist/_worker.js/chunks/perl_CKamvo15.mjs +0 -1
- package/website/dist/_worker.js/chunks/php_BlmcX_F3.mjs +0 -1
- package/website/dist/_worker.js/chunks/plastic_Ryt8tVoA.mjs +0 -1
- package/website/dist/_worker.js/chunks/plsql_Cb3v7cBj.mjs +0 -1
- package/website/dist/_worker.js/chunks/po_DZbdNRlo.mjs +0 -1
- package/website/dist/_worker.js/chunks/poimandres_bYmE3_5d.mjs +0 -1
- package/website/dist/_worker.js/chunks/polar_pJkMGwoW.mjs +0 -1
- package/website/dist/_worker.js/chunks/postcss_BAXSOKgk.mjs +0 -1
- package/website/dist/_worker.js/chunks/powerquery_oITMGN4x.mjs +0 -1
- package/website/dist/_worker.js/chunks/powershell_6306-xIF.mjs +0 -1
- package/website/dist/_worker.js/chunks/prisma_DSDxnZGz.mjs +0 -1
- package/website/dist/_worker.js/chunks/prolog_CxG7tjZR.mjs +0 -1
- package/website/dist/_worker.js/chunks/proto_CS9ByXm1.mjs +0 -1
- package/website/dist/_worker.js/chunks/pug_BMtLJo6U.mjs +0 -1
- package/website/dist/_worker.js/chunks/puppet_BfeeSzee.mjs +0 -1
- package/website/dist/_worker.js/chunks/purescript_BFfueNaH.mjs +0 -1
- package/website/dist/_worker.js/chunks/python_Cc4Faapv.mjs +0 -1
- package/website/dist/_worker.js/chunks/qml_C1CTJTK8.mjs +0 -1
- package/website/dist/_worker.js/chunks/qmldir_nG1KaqKR.mjs +0 -1
- package/website/dist/_worker.js/chunks/qss_Cncxk263.mjs +0 -1
- package/website/dist/_worker.js/chunks/r_ChR54Ihi.mjs +0 -1
- package/website/dist/_worker.js/chunks/racket_BDrhptDs.mjs +0 -1
- package/website/dist/_worker.js/chunks/raku_07OUHa0P.mjs +0 -1
- package/website/dist/_worker.js/chunks/razor_DIP3INLa.mjs +0 -1
- package/website/dist/_worker.js/chunks/red_DOPXfj-6.mjs +0 -1
- package/website/dist/_worker.js/chunks/reg_B64SwEDj.mjs +0 -1
- package/website/dist/_worker.js/chunks/regexp_ButFGoB5.mjs +0 -1
- package/website/dist/_worker.js/chunks/rel_BWJAWqZD.mjs +0 -1
- package/website/dist/_worker.js/chunks/riscv_79gXlbsF.mjs +0 -1
- package/website/dist/_worker.js/chunks/rose-pine-dawn_DHIjVGd3.mjs +0 -1
- package/website/dist/_worker.js/chunks/rose-pine-moon_t86aEbs0.mjs +0 -1
- package/website/dist/_worker.js/chunks/rose-pine_BHgrcDCs.mjs +0 -1
- package/website/dist/_worker.js/chunks/rst_D3F4Fcpj.mjs +0 -1
- package/website/dist/_worker.js/chunks/ruby_Cs7vM9iv.mjs +0 -1
- package/website/dist/_worker.js/chunks/rust_DpyRVatH.mjs +0 -1
- package/website/dist/_worker.js/chunks/sas_DW45xZXN.mjs +0 -1
- package/website/dist/_worker.js/chunks/sass_C6SiMwN_.mjs +0 -1
- package/website/dist/_worker.js/chunks/scala_DlZOjNZk.mjs +0 -1
- package/website/dist/_worker.js/chunks/scheme_D2ezSJXu.mjs +0 -1
- package/website/dist/_worker.js/chunks/scss_DG5Spjqu.mjs +0 -1
- package/website/dist/_worker.js/chunks/sdbl_ZCYaj4VN.mjs +0 -1
- package/website/dist/_worker.js/chunks/shaderlab_CAcRkg1_.mjs +0 -1
- package/website/dist/_worker.js/chunks/shellscript_BWwhkDVh.mjs +0 -1
- package/website/dist/_worker.js/chunks/shellsession_BfEA3juK.mjs +0 -1
- package/website/dist/_worker.js/chunks/slack-dark_CL3lSpCc.mjs +0 -1
- package/website/dist/_worker.js/chunks/slack-ochin_DdZKOQVh.mjs +0 -1
- package/website/dist/_worker.js/chunks/smalltalk_DgilzSui.mjs +0 -1
- package/website/dist/_worker.js/chunks/snazzy-light_eJU08Pz_.mjs +0 -1
- package/website/dist/_worker.js/chunks/solarized-dark_Dg_YQywx.mjs +0 -1
- package/website/dist/_worker.js/chunks/solarized-light_BnIsrA6p.mjs +0 -1
- package/website/dist/_worker.js/chunks/solidity_DkseH8pQ.mjs +0 -1
- package/website/dist/_worker.js/chunks/soy_DU7bOYoG.mjs +0 -1
- package/website/dist/_worker.js/chunks/sparql_BuI1DBDH.mjs +0 -1
- package/website/dist/_worker.js/chunks/splunk_B8Ha9Pkg.mjs +0 -1
- package/website/dist/_worker.js/chunks/sql_BniHwea5.mjs +0 -1
- package/website/dist/_worker.js/chunks/ssh-config_CkE1GuVe.mjs +0 -1
- package/website/dist/_worker.js/chunks/stata_Dtqpbd_l.mjs +0 -1
- package/website/dist/_worker.js/chunks/stylus_CXTtglzO.mjs +0 -1
- package/website/dist/_worker.js/chunks/svelte_BjWYcUCN.mjs +0 -1
- package/website/dist/_worker.js/chunks/swift_BzHql_rM.mjs +0 -1
- package/website/dist/_worker.js/chunks/synthwave-84_DLRNhxNA.mjs +0 -1
- package/website/dist/_worker.js/chunks/system-verilog_ChyInPph.mjs +0 -1
- package/website/dist/_worker.js/chunks/systemd_Bi9Qa2qD.mjs +0 -1
- package/website/dist/_worker.js/chunks/talonscript_B3sH_Y-V.mjs +0 -1
- package/website/dist/_worker.js/chunks/tasl_BJ5yipRs.mjs +0 -1
- package/website/dist/_worker.js/chunks/tcl_CoJQjNoP.mjs +0 -1
- package/website/dist/_worker.js/chunks/templ_CrU7Ffil.mjs +0 -1
- package/website/dist/_worker.js/chunks/terraform_DT9JSFpC.mjs +0 -1
- package/website/dist/_worker.js/chunks/tex_5PKu2yA0.mjs +0 -1
- package/website/dist/_worker.js/chunks/tokyo-night_Buo8OK7-.mjs +0 -1
- package/website/dist/_worker.js/chunks/toml_CPuXX3oc.mjs +0 -1
- package/website/dist/_worker.js/chunks/ts-tags_D0M_1VSH.mjs +0 -1
- package/website/dist/_worker.js/chunks/tsv_CuivVNot.mjs +0 -1
- package/website/dist/_worker.js/chunks/tsx_MkuGr8MY.mjs +0 -1
- package/website/dist/_worker.js/chunks/turtle_BqgEPK7f.mjs +0 -1
- package/website/dist/_worker.js/chunks/twig_r1G9rpYJ.mjs +0 -1
- package/website/dist/_worker.js/chunks/typescript_Au5buqzM.mjs +0 -1
- package/website/dist/_worker.js/chunks/typespec_47rhBK_z.mjs +0 -1
- package/website/dist/_worker.js/chunks/typst_BAtuQLh-.mjs +0 -1
- package/website/dist/_worker.js/chunks/v_BIvWImHg.mjs +0 -1
- package/website/dist/_worker.js/chunks/vala_DYEacj30.mjs +0 -1
- package/website/dist/_worker.js/chunks/vb_CikQuqGJ.mjs +0 -1
- package/website/dist/_worker.js/chunks/verilog_BQRENwI-.mjs +0 -1
- package/website/dist/_worker.js/chunks/vesper_DA0kvTmj.mjs +0 -1
- package/website/dist/_worker.js/chunks/vhdl_DHscJIyg.mjs +0 -1
- package/website/dist/_worker.js/chunks/viml_F2pvMwvG.mjs +0 -1
- package/website/dist/_worker.js/chunks/vitesse-black_D9tjNzd0.mjs +0 -1
- package/website/dist/_worker.js/chunks/vitesse-dark_Bnm5d0hd.mjs +0 -1
- package/website/dist/_worker.js/chunks/vitesse-light_CHwbyjNR.mjs +0 -1
- package/website/dist/_worker.js/chunks/vue-html_DyYtbbMK.mjs +0 -1
- package/website/dist/_worker.js/chunks/vue_DofN6juy.mjs +0 -1
- package/website/dist/_worker.js/chunks/vyper_CiR0m-OV.mjs +0 -1
- package/website/dist/_worker.js/chunks/wasm_CwIGgRGf.mjs +0 -1
- package/website/dist/_worker.js/chunks/wasm_jKWhg0J0.mjs +0 -1
- package/website/dist/_worker.js/chunks/wenyan_DKvVZKXW.mjs +0 -1
- package/website/dist/_worker.js/chunks/wgsl_BOWZY7yw.mjs +0 -1
- package/website/dist/_worker.js/chunks/wikitext_CXDhhHPy.mjs +0 -1
- package/website/dist/_worker.js/chunks/wolfram_ChkmGnW0.mjs +0 -1
- package/website/dist/_worker.js/chunks/xml_DXH3hHIu.mjs +0 -1
- package/website/dist/_worker.js/chunks/xsl_DuP2mFjg.mjs +0 -1
- package/website/dist/_worker.js/chunks/yaml_IGiEkTge.mjs +0 -1
- package/website/dist/_worker.js/chunks/zenscript_59iXGyNw.mjs +0 -1
- package/website/dist/_worker.js/chunks/zig_DKzb0zdT.mjs +0 -1
- package/website/dist/_worker.js/index.js +0 -61
- package/website/dist/_worker.js/manifest_Bk6136-u.mjs +0 -98
- package/website/dist/_worker.js/pages/_image.astro.mjs +0 -24
- package/website/dist/_worker.js/pages/agents.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/animation.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/api/playground/render.astro.mjs +0 -25562
- package/website/dist/_worker.js/pages/api/playground/templates.astro.mjs +0 -92
- package/website/dist/_worker.js/pages/api/raw-markdown/_---path_.astro.mjs +0 -44
- package/website/dist/_worker.js/pages/config.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/fonts.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/getting-started.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/helpers.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/images.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/index.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/llm.txt.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/playground/_example_.astro.mjs +0 -95
- package/website/dist/_worker.js/pages/playground.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/preview.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/sdk.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/sitemap.xml.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/styling.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/templates.astro.mjs +0 -1
- package/website/dist/_worker.js/pages/video.astro.mjs +0 -1
- package/website/dist/_worker.js/renderers.mjs +0 -2
- package/website/dist/agents/index.html +0 -54
- package/website/dist/animation/index.html +0 -1505
- package/website/dist/config/index.html +0 -186
- package/website/dist/fonts/index.html +0 -200
- package/website/dist/getting-started/index.html +0 -109
- package/website/dist/helpers/index.html +0 -350
- package/website/dist/images/index.html +0 -337
- package/website/dist/index.html +0 -141
- package/website/dist/llm.txt +0 -3626
- package/website/dist/playground/index.html +0 -6
- package/website/dist/preview/index.html +0 -113
- package/website/dist/robots.txt +0 -40
- package/website/dist/sdk/index.html +0 -1588
- package/website/dist/sitemap.xml +0 -76
- package/website/dist/styling/index.html +0 -368
- package/website/dist/templates/index.html +0 -76
- package/website/dist/video/index.html +0 -354
- package/website/package-lock.json +0 -8099
- package/website/package.json +0 -43
- package/website/public/.gitkeep +0 -5
- package/website/public/robots.txt +0 -40
- package/website/templates/og-image.tsx +0 -60
- package/website/wrangler.toml +0 -9
|
@@ -1,186 +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/config/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation, 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/config/"><meta property="og:title"><meta property="og:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/api/og/config"><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/config/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/api/og/config"><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/config","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":"Config","item":"https://loopwind.dev/config"}]}</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="loopwindjson">loopwind.json</h1>
|
|
5
|
-
<p>Configure colors and fonts for all your templates in <code>_loopwind/loopwind.json</code>.</p>
|
|
6
|
-
<h2 id="file-location">File Location</h2>
|
|
7
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>your-project/</span></span>
|
|
8
|
-
<span class="line"><span>├── _loopwind/</span></span>
|
|
9
|
-
<span class="line"><span>│ ├── loopwind.json ← Configuration file</span></span>
|
|
10
|
-
<span class="line"><span>│ └── templates/</span></span>
|
|
11
|
-
<span class="line"><span></span></span></code></pre>
|
|
12
|
-
<h2 id="minimal-example">Minimal Example</h2>
|
|
13
|
-
<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>
|
|
14
|
-
<span class="line"><span style="color:#79B8FF"> "theme"</span><span style="color:#E1E4E8">: {</span></span>
|
|
15
|
-
<span class="line"><span style="color:#79B8FF"> "colors"</span><span style="color:#E1E4E8">: {</span></span>
|
|
16
|
-
<span class="line"><span style="color:#79B8FF"> "primary"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#3b82f6"</span><span style="color:#E1E4E8">,</span></span>
|
|
17
|
-
<span class="line"><span style="color:#79B8FF"> "background"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ffffff"</span></span>
|
|
18
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
19
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
20
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
21
|
-
<span class="line"></span></code></pre>
|
|
22
|
-
<h2 id="theme-colors">Theme Colors</h2>
|
|
23
|
-
<h3 id="default-shadcnui-palette">Default shadcn/ui Palette</h3>
|
|
24
|
-
<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>
|
|
25
|
-
<span class="line"><span style="color:#79B8FF"> "theme"</span><span style="color:#E1E4E8">: {</span></span>
|
|
26
|
-
<span class="line"><span style="color:#79B8FF"> "colors"</span><span style="color:#E1E4E8">: {</span></span>
|
|
27
|
-
<span class="line"><span style="color:#79B8FF"> "primary"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#18181b"</span><span style="color:#E1E4E8">,</span></span>
|
|
28
|
-
<span class="line"><span style="color:#79B8FF"> "primary-foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#fafafa"</span><span style="color:#E1E4E8">,</span></span>
|
|
29
|
-
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
30
|
-
<span class="line"><span style="color:#79B8FF"> "secondary"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#f4f4f5"</span><span style="color:#E1E4E8">,</span></span>
|
|
31
|
-
<span class="line"><span style="color:#79B8FF"> "secondary-foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#18181b"</span><span style="color:#E1E4E8">,</span></span>
|
|
32
|
-
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
33
|
-
<span class="line"><span style="color:#79B8FF"> "background"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ffffff"</span><span style="color:#E1E4E8">,</span></span>
|
|
34
|
-
<span class="line"><span style="color:#79B8FF"> "foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#09090b"</span><span style="color:#E1E4E8">,</span></span>
|
|
35
|
-
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
36
|
-
<span class="line"><span style="color:#79B8FF"> "muted"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#f4f4f5"</span><span style="color:#E1E4E8">,</span></span>
|
|
37
|
-
<span class="line"><span style="color:#79B8FF"> "muted-foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#71717a"</span><span style="color:#E1E4E8">,</span></span>
|
|
38
|
-
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
39
|
-
<span class="line"><span style="color:#79B8FF"> "accent"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#f4f4f5"</span><span style="color:#E1E4E8">,</span></span>
|
|
40
|
-
<span class="line"><span style="color:#79B8FF"> "accent-foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#18181b"</span><span style="color:#E1E4E8">,</span></span>
|
|
41
|
-
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
42
|
-
<span class="line"><span style="color:#79B8FF"> "destructive"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ef4444"</span><span style="color:#E1E4E8">,</span></span>
|
|
43
|
-
<span class="line"><span style="color:#79B8FF"> "destructive-foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#fafafa"</span><span style="color:#E1E4E8">,</span></span>
|
|
44
|
-
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
45
|
-
<span class="line"><span style="color:#79B8FF"> "border"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#e4e4e7"</span><span style="color:#E1E4E8">,</span></span>
|
|
46
|
-
<span class="line"><span style="color:#79B8FF"> "input"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#e4e4e7"</span><span style="color:#E1E4E8">,</span></span>
|
|
47
|
-
<span class="line"><span style="color:#79B8FF"> "ring"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#18181b"</span><span style="color:#E1E4E8">,</span></span>
|
|
48
|
-
<span class="line"><span style="color:#E1E4E8"> </span></span>
|
|
49
|
-
<span class="line"><span style="color:#79B8FF"> "card"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ffffff"</span><span style="color:#E1E4E8">,</span></span>
|
|
50
|
-
<span class="line"><span style="color:#79B8FF"> "card-foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#09090b"</span></span>
|
|
51
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
52
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
53
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
54
|
-
<span class="line"></span></code></pre>
|
|
55
|
-
<h3 id="custom-colors">Custom Colors</h3>
|
|
56
|
-
<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>
|
|
57
|
-
<span class="line"><span style="color:#79B8FF"> "theme"</span><span style="color:#E1E4E8">: {</span></span>
|
|
58
|
-
<span class="line"><span style="color:#79B8FF"> "colors"</span><span style="color:#E1E4E8">: {</span></span>
|
|
59
|
-
<span class="line"><span style="color:#79B8FF"> "primary"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#3b82f6"</span><span style="color:#E1E4E8">,</span></span>
|
|
60
|
-
<span class="line"><span style="color:#79B8FF"> "brand"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ff6b6b"</span><span style="color:#E1E4E8">,</span></span>
|
|
61
|
-
<span class="line"><span style="color:#79B8FF"> "success"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#22c55e"</span><span style="color:#E1E4E8">,</span></span>
|
|
62
|
-
<span class="line"><span style="color:#79B8FF"> "warning"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#f59e0b"</span></span>
|
|
63
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
64
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
65
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
66
|
-
<span class="line"></span></code></pre>
|
|
67
|
-
<p><strong>Use in templates:</strong></p>
|
|
68
|
-
<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:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'text-brand'</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// #ff6b6b</span></span>
|
|
69
|
-
<span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'bg-success'</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// #22c55e</span></span>
|
|
70
|
-
<span class="line"><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'border-warning'</span><span style="color:#E1E4E8">) </span><span style="color:#6A737D">// #f59e0b</span></span>
|
|
71
|
-
<span class="line"></span></code></pre>
|
|
72
|
-
<h2 id="fonts">Fonts</h2>
|
|
73
|
-
<h3 id="simple-system-fonts">Simple (System Fonts)</h3>
|
|
74
|
-
<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>
|
|
75
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
76
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"system-ui"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
77
|
-
<span class="line"><span style="color:#79B8FF"> "serif"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Georgia"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
78
|
-
<span class="line"><span style="color:#79B8FF"> "mono"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Courier New"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"monospace"</span><span style="color:#E1E4E8">]</span></span>
|
|
79
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
80
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
81
|
-
<span class="line"></span></code></pre>
|
|
82
|
-
<h3 id="with-font-files">With Font Files</h3>
|
|
83
|
-
<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>
|
|
84
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
85
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: {</span></span>
|
|
86
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"system-ui"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
87
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
88
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
|
|
89
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Bold.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8"> }</span></span>
|
|
90
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
91
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
92
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
93
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
94
|
-
<span class="line"></span></code></pre>
|
|
95
|
-
<p>Paths are relative to <code>loopwind.json</code>.</p>
|
|
96
|
-
<p><strong>Supported formats:</strong></p>
|
|
97
|
-
<ul>
|
|
98
|
-
<li>✅ WOFF (<code>.woff</code>)</li>
|
|
99
|
-
<li>✅ TTF (<code>.ttf</code>)</li>
|
|
100
|
-
<li>✅ OTF (<code>.otf</code>)</li>
|
|
101
|
-
<li>❌ WOFF2 (<code>.woff2</code>)</li>
|
|
102
|
-
</ul>
|
|
103
|
-
<h3 id="external-urls">External URLs</h3>
|
|
104
|
-
<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>
|
|
105
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
106
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: {</span></span>
|
|
107
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
108
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
109
|
-
<span class="line"><span style="color:#E1E4E8"> {</span></span>
|
|
110
|
-
<span class="line"><span style="color:#79B8FF"> "path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff"</span><span style="color:#E1E4E8">,</span></span>
|
|
111
|
-
<span class="line"><span style="color:#79B8FF"> "weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span></span>
|
|
112
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
113
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
114
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
115
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
116
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
117
|
-
<span class="line"></span></code></pre>
|
|
118
|
-
<h2 id="complete-example">Complete Example</h2>
|
|
119
|
-
<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>
|
|
120
|
-
<span class="line"><span style="color:#79B8FF"> "theme"</span><span style="color:#E1E4E8">: {</span></span>
|
|
121
|
-
<span class="line"><span style="color:#79B8FF"> "colors"</span><span style="color:#E1E4E8">: {</span></span>
|
|
122
|
-
<span class="line"><span style="color:#79B8FF"> "primary"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#6366f1"</span><span style="color:#E1E4E8">,</span></span>
|
|
123
|
-
<span class="line"><span style="color:#79B8FF"> "primary-foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ffffff"</span><span style="color:#E1E4E8">,</span></span>
|
|
124
|
-
<span class="line"><span style="color:#79B8FF"> "background"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ffffff"</span><span style="color:#E1E4E8">,</span></span>
|
|
125
|
-
<span class="line"><span style="color:#79B8FF"> "foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#0f172a"</span><span style="color:#E1E4E8">,</span></span>
|
|
126
|
-
<span class="line"><span style="color:#79B8FF"> "muted"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#f1f5f9"</span><span style="color:#E1E4E8">,</span></span>
|
|
127
|
-
<span class="line"><span style="color:#79B8FF"> "muted-foreground"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#64748b"</span><span style="color:#E1E4E8">,</span></span>
|
|
128
|
-
<span class="line"><span style="color:#79B8FF"> "border"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#e2e8f0"</span><span style="color:#E1E4E8">,</span></span>
|
|
129
|
-
<span class="line"><span style="color:#79B8FF"> "card"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#ffffff"</span><span style="color:#E1E4E8">,</span></span>
|
|
130
|
-
<span class="line"><span style="color:#79B8FF"> "brand"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"#8b5cf6"</span></span>
|
|
131
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
132
|
-
<span class="line"><span style="color:#E1E4E8"> },</span></span>
|
|
133
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
134
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: {</span></span>
|
|
135
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
136
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
137
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
|
|
138
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Bold.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8"> }</span></span>
|
|
139
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
140
|
-
<span class="line"><span style="color:#E1E4E8"> },</span></span>
|
|
141
|
-
<span class="line"><span style="color:#79B8FF"> "serif"</span><span style="color:#E1E4E8">: {</span></span>
|
|
142
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Playfair Display"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
143
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
144
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Playfair-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }</span></span>
|
|
145
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
146
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
147
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
148
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
149
|
-
<span class="line"></span></code></pre>
|
|
150
|
-
<h2 id="schema">Schema</h2>
|
|
151
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="typescript"><code><span class="line"><span style="color:#E1E4E8">{</span></span>
|
|
152
|
-
<span class="line"><span style="color:#9ECBFF"> "theme"</span><span style="color:#F97583">?:</span><span style="color:#E1E4E8"> {</span></span>
|
|
153
|
-
<span class="line"><span style="color:#9ECBFF"> "colors"</span><span style="color:#E1E4E8">?: {</span></span>
|
|
154
|
-
<span class="line"><span style="color:#E1E4E8"> [name: string]: string; </span><span style="color:#6A737D">// Hex color</span></span>
|
|
155
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
156
|
-
<span class="line"><span style="color:#E1E4E8"> },</span></span>
|
|
157
|
-
<span class="line"><span style="color:#9ECBFF"> "fonts"</span><span style="color:#F97583">?:</span><span style="color:#E1E4E8"> {</span></span>
|
|
158
|
-
<span class="line"><span style="color:#E1E4E8"> [class: string]: string[] </span><span style="color:#F97583">|</span><span style="color:#E1E4E8"> {</span></span>
|
|
159
|
-
<span class="line"><span style="color:#E1E4E8"> family: string[];</span></span>
|
|
160
|
-
<span class="line"><span style="color:#E1E4E8"> files: </span><span style="color:#B392F0">Array</span><span style="color:#E1E4E8"><{</span></span>
|
|
161
|
-
<span class="line"><span style="color:#FFAB70"> path</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> string</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// Local or URL</span></span>
|
|
162
|
-
<span class="line"><span style="color:#FFAB70"> weight</span><span style="color:#F97583">:</span><span style="color:#79B8FF"> number</span><span style="color:#E1E4E8">; </span><span style="color:#6A737D">// 100-900</span></span>
|
|
163
|
-
<span class="line"><span style="color:#E1E4E8"> }>;</span></span>
|
|
164
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
165
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
166
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
167
|
-
<span class="line"></span></code></pre>
|
|
168
|
-
<h2 id="auto-detection">Auto-Detection</h2>
|
|
169
|
-
<p>If no <code>loopwind.json</code> exists, loopwind auto-detects <code>tailwind.config.js</code>:</p>
|
|
170
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>your-project/</span></span>
|
|
171
|
-
<span class="line"><span>├── tailwind.config.js ← Auto-detected</span></span>
|
|
172
|
-
<span class="line"><span>└── _loopwind/</span></span>
|
|
173
|
-
<span class="line"><span> └── templates/</span></span>
|
|
174
|
-
<span class="line"><span></span></span></code></pre>
|
|
175
|
-
<p><strong>Priority:</strong></p>
|
|
176
|
-
<ol>
|
|
177
|
-
<li><code>_loopwind/loopwind.json</code></li>
|
|
178
|
-
<li><code>tailwind.config.js</code></li>
|
|
179
|
-
<li>Built-in defaults</li>
|
|
180
|
-
</ol>
|
|
181
|
-
<h2 id="next-steps">Next Steps</h2>
|
|
182
|
-
<ul>
|
|
183
|
-
<li><a href="/styling">Styling</a> - Use colors in templates</li>
|
|
184
|
-
<li><a href="/fonts">Fonts</a> - Font configuration details</li>
|
|
185
|
-
<li><a href="/getting-started">Getting Started</a> - Setup guide</li>
|
|
186
|
-
</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>
|
|
@@ -1,200 +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/fonts/"><!-- Primary Meta Tags --><title></title><meta name="title"><meta name="description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="keywords" content="loopwind, image generation, video generation, React, Tailwind CSS, Satori, CLI tool, templates, shadcn/ui, AI agents, Cursor, automation, 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/fonts/"><meta property="og:title"><meta property="og:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta property="og:image" content="https://loopwind.dev/api/og/fonts"><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/fonts/"><meta name="twitter:title"><meta name="twitter:description" content="CLI-based Image & Video Generator for developers and AI Agents. Generate stunning visuals from React + Tailwind templates."><meta name="twitter:image" content="https://loopwind.dev/api/og/fonts"><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/fonts","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":"Fonts","item":"https://loopwind.dev/fonts"}]}</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="font-handling-in-loopwind">Font Handling in loopwind</h1>
|
|
5
|
-
<p>The recommended way to use fonts is through <code>loopwind.json</code> - configure fonts once, use everywhere.</p>
|
|
6
|
-
<h2 id="using-fonts-from-loopwindjson-recommended">Using Fonts from loopwind.json (Recommended)</h2>
|
|
7
|
-
<p>Configure fonts in your <code>_loopwind/loopwind.json</code> and use Tailwind classes in templates.</p>
|
|
8
|
-
<h3 id="simple-setup">Simple Setup</h3>
|
|
9
|
-
<p>Define font families in <code>_loopwind/loopwind.json</code> without loading custom fonts (uses system fonts):</p>
|
|
10
|
-
<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>
|
|
11
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
12
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"system-ui"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"-apple-system"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
13
|
-
<span class="line"><span style="color:#79B8FF"> "serif"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Georgia"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
14
|
-
<span class="line"><span style="color:#79B8FF"> "mono"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Courier New"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"monospace"</span><span style="color:#E1E4E8">]</span></span>
|
|
15
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
16
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
17
|
-
<span class="line"></span></code></pre>
|
|
18
|
-
<p><strong>Template usage:</strong></p>
|
|
19
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#F97583">export</span><span style="color:#F97583"> default</span><span style="color:#F97583"> function</span><span style="color:#E1E4E8">({ </span><span style="color:#FFAB70">title</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">tw</span><span style="color:#E1E4E8"> }) {</span></span>
|
|
20
|
-
<span class="line"><span style="color:#F97583"> return</span><span style="color:#E1E4E8"> (</span></span>
|
|
21
|
-
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">div</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'w-full h-full'</span><span style="color:#E1E4E8">)}></span></span>
|
|
22
|
-
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses fonts.sans from loopwind.json */</span><span style="color:#E1E4E8">}</span></span>
|
|
23
|
-
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'font-sans text-6xl font-bold'</span><span style="color:#E1E4E8">)}></span></span>
|
|
24
|
-
<span class="line"><span style="color:#E1E4E8"> {title}</span></span>
|
|
25
|
-
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span>
|
|
26
|
-
<span class="line"></span>
|
|
27
|
-
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses fonts.mono from loopwind.json */</span><span style="color:#E1E4E8">}</span></span>
|
|
28
|
-
<span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#85E89D">code</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'font-mono text-sm'</span><span style="color:#E1E4E8">)}></span></span>
|
|
29
|
-
<span class="line"><span style="color:#E1E4E8"> {code}</span></span>
|
|
30
|
-
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">code</span><span style="color:#E1E4E8">></span></span>
|
|
31
|
-
<span class="line"><span style="color:#E1E4E8"> </</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">></span></span>
|
|
32
|
-
<span class="line"><span style="color:#E1E4E8"> );</span></span>
|
|
33
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
34
|
-
<span class="line"></span></code></pre>
|
|
35
|
-
<p><strong>Result:</strong> Uses system fonts, falls back to Inter for rendering.</p>
|
|
36
|
-
<h3 id="complete-setup-with-font-files">Complete Setup (With Font Files)</h3>
|
|
37
|
-
<p>Load custom font files for brand-specific typography in <code>_loopwind/loopwind.json</code>:</p>
|
|
38
|
-
<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>
|
|
39
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
40
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: {</span></span>
|
|
41
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"system-ui"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
42
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
43
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
|
|
44
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Bold.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8"> }</span></span>
|
|
45
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
46
|
-
<span class="line"><span style="color:#E1E4E8"> },</span></span>
|
|
47
|
-
<span class="line"><span style="color:#79B8FF"> "mono"</span><span style="color:#E1E4E8">: {</span></span>
|
|
48
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"JetBrains Mono"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"monospace"</span><span style="color:#E1E4E8">],</span></span>
|
|
49
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
50
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/JetBrainsMono-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }</span></span>
|
|
51
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
52
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
53
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
54
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
55
|
-
<span class="line"></span></code></pre>
|
|
56
|
-
<p><strong>Project structure:</strong></p>
|
|
57
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="plaintext"><code><span class="line"><span>your-project/</span></span>
|
|
58
|
-
<span class="line"><span>├── _loopwind/</span></span>
|
|
59
|
-
<span class="line"><span>│ ├── loopwind.json</span></span>
|
|
60
|
-
<span class="line"><span>│ └── templates/</span></span>
|
|
61
|
-
<span class="line"><span>└── fonts/</span></span>
|
|
62
|
-
<span class="line"><span> ├── Inter-Regular.woff</span></span>
|
|
63
|
-
<span class="line"><span> ├── Inter-Bold.woff</span></span>
|
|
64
|
-
<span class="line"><span> └── JetBrainsMono-Regular.woff</span></span>
|
|
65
|
-
<span class="line"><span></span></span></code></pre>
|
|
66
|
-
<p><strong>Template usage (same as before):</strong></p>
|
|
67
|
-
<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8;overflow-x:auto" tabindex="0" data-language="tsx"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#85E89D">h1</span><span style="color:#B392F0"> style</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#B392F0">tw</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">'font-sans font-bold'</span><span style="color:#E1E4E8">)}></span></span>
|
|
68
|
-
<span class="line"><span style="color:#E1E4E8"> {</span><span style="color:#6A737D">/* Uses Inter Bold from loopwind.json */</span><span style="color:#E1E4E8">}</span></span>
|
|
69
|
-
<span class="line"><span style="color:#E1E4E8"> {title}</span></span>
|
|
70
|
-
<span class="line"><span style="color:#E1E4E8"></</span><span style="color:#85E89D">h1</span><span style="color:#E1E4E8">></span></span>
|
|
71
|
-
<span class="line"></span></code></pre>
|
|
72
|
-
<p><strong>Available classes:</strong></p>
|
|
73
|
-
<ul>
|
|
74
|
-
<li><code>font-sans</code> - Uses <code>fonts.sans</code> from loopwind.json</li>
|
|
75
|
-
<li><code>font-serif</code> - Uses <code>fonts.serif</code> from loopwind.json</li>
|
|
76
|
-
<li><code>font-mono</code> - Uses <code>fonts.mono</code> from loopwind.json</li>
|
|
77
|
-
</ul>
|
|
78
|
-
<p><strong>Supported formats:</strong></p>
|
|
79
|
-
<ul>
|
|
80
|
-
<li>✅ <strong>WOFF</strong> (<code>.woff</code>) - Recommended for best compatibility</li>
|
|
81
|
-
<li>✅ <strong>TTF</strong> (<code>.ttf</code>) - Also supported</li>
|
|
82
|
-
<li>✅ <strong>OTF</strong> (<code>.otf</code>) - Also supported</li>
|
|
83
|
-
<li>❌ <strong>WOFF2</strong> (<code>.woff2</code>) - Not supported by renderer</li>
|
|
84
|
-
</ul>
|
|
85
|
-
<h2 id="font-loading-priority">Font Loading Priority</h2>
|
|
86
|
-
<p>loopwind loads fonts in this order:</p>
|
|
87
|
-
<ol>
|
|
88
|
-
<li><strong>loopwind.json fonts</strong> (if configured with <code>files</code>)</li>
|
|
89
|
-
<li><strong>Bundled Inter fonts</strong> (included with CLI)</li>
|
|
90
|
-
</ol>
|
|
91
|
-
<p>This ensures fonts work out of the box with no configuration.</p>
|
|
92
|
-
<h2 id="default-fonts">Default Fonts</h2>
|
|
93
|
-
<p>If no fonts are configured, loopwind uses <strong>Inter</strong> (Regular 400, Bold 700) which is bundled with the CLI. This means fonts work offline with no configuration required.</p>
|
|
94
|
-
<h2 id="best-practices">Best Practices</h2>
|
|
95
|
-
<ol>
|
|
96
|
-
<li>✅ <strong>Use loopwind.json for project-wide fonts</strong> - Configure once, use everywhere</li>
|
|
97
|
-
<li>✅ <strong>Use font classes</strong> - <code>tw('font-sans')</code> instead of <code>fontFamily: 'Inter'</code></li>
|
|
98
|
-
<li>✅ <strong>Include fallbacks</strong> - Always add system fonts: <code>["Inter", "system-ui", "sans-serif"]</code></li>
|
|
99
|
-
<li>✅ <strong>Match names</strong> - First font in <code>family</code> array is used as the loaded font name</li>
|
|
100
|
-
<li>✅ <strong>Relative paths</strong> - Font paths are relative to <code>loopwind.json</code> location</li>
|
|
101
|
-
</ol>
|
|
102
|
-
<h2 id="examples">Examples</h2>
|
|
103
|
-
<h3 id="minimal-setup-system-fonts">Minimal Setup (System Fonts)</h3>
|
|
104
|
-
<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>
|
|
105
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
106
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"-apple-system"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">]</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>Uses system Inter if available, falls back to Noto Sans for rendering.</p>
|
|
111
|
-
<h3 id="brand-fonts-setup">Brand Fonts Setup</h3>
|
|
112
|
-
<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>
|
|
113
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
114
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: {</span></span>
|
|
115
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Montserrat"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
116
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
117
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Montserrat-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
|
|
118
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Montserrat-Bold.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8"> }</span></span>
|
|
119
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
120
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
121
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
122
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
123
|
-
<span class="line"></span></code></pre>
|
|
124
|
-
<p>Loads and uses Montserrat for all templates.</p>
|
|
125
|
-
<h3 id="multi-font-setup">Multi-Font Setup</h3>
|
|
126
|
-
<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>
|
|
127
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
128
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: {</span></span>
|
|
129
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
130
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
131
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
|
|
132
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Bold.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span><span style="color:#E1E4E8"> }</span></span>
|
|
133
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
134
|
-
<span class="line"><span style="color:#E1E4E8"> },</span></span>
|
|
135
|
-
<span class="line"><span style="color:#79B8FF"> "serif"</span><span style="color:#E1E4E8">: {</span></span>
|
|
136
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Playfair Display"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
137
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
138
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Playfair-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }</span></span>
|
|
139
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
140
|
-
<span class="line"><span style="color:#E1E4E8"> },</span></span>
|
|
141
|
-
<span class="line"><span style="color:#79B8FF"> "mono"</span><span style="color:#E1E4E8">: {</span></span>
|
|
142
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Fira Code"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"monospace"</span><span style="color:#E1E4E8">],</span></span>
|
|
143
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
144
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/FiraCode-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> }</span></span>
|
|
145
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
146
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
147
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
148
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
149
|
-
<span class="line"></span></code></pre>
|
|
150
|
-
<p>Loads different fonts for each style class.</p>
|
|
151
|
-
<h3 id="external-font-urls">External Font URLs</h3>
|
|
152
|
-
<p>Load fonts directly from CDNs without downloading files:</p>
|
|
153
|
-
<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>
|
|
154
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
155
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: {</span></span>
|
|
156
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
157
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
158
|
-
<span class="line"><span style="color:#E1E4E8"> {</span></span>
|
|
159
|
-
<span class="line"><span style="color:#79B8FF"> "path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-400-normal.woff"</span><span style="color:#E1E4E8">,</span></span>
|
|
160
|
-
<span class="line"><span style="color:#79B8FF"> "weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span></span>
|
|
161
|
-
<span class="line"><span style="color:#E1E4E8"> },</span></span>
|
|
162
|
-
<span class="line"><span style="color:#E1E4E8"> {</span></span>
|
|
163
|
-
<span class="line"><span style="color:#79B8FF"> "path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff"</span><span style="color:#E1E4E8">,</span></span>
|
|
164
|
-
<span class="line"><span style="color:#79B8FF"> "weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span></span>
|
|
165
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
166
|
-
<span class="line"><span style="color:#E1E4E8"> ]</span></span>
|
|
167
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
168
|
-
<span class="line"><span style="color:#E1E4E8"> }</span></span>
|
|
169
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
170
|
-
<span class="line"></span></code></pre>
|
|
171
|
-
<p>You can also mix local and external fonts:</p>
|
|
172
|
-
<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>
|
|
173
|
-
<span class="line"><span style="color:#79B8FF"> "fonts"</span><span style="color:#E1E4E8">: {</span></span>
|
|
174
|
-
<span class="line"><span style="color:#79B8FF"> "sans"</span><span style="color:#E1E4E8">: {</span></span>
|
|
175
|
-
<span class="line"><span style="color:#79B8FF"> "family"</span><span style="color:#E1E4E8">: [</span><span style="color:#9ECBFF">"Inter"</span><span style="color:#E1E4E8">, </span><span style="color:#9ECBFF">"sans-serif"</span><span style="color:#E1E4E8">],</span></span>
|
|
176
|
-
<span class="line"><span style="color:#79B8FF"> "files"</span><span style="color:#E1E4E8">: [</span></span>
|
|
177
|
-
<span class="line"><span style="color:#E1E4E8"> { </span><span style="color:#79B8FF">"path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"./fonts/Inter-Regular.woff"</span><span style="color:#E1E4E8">, </span><span style="color:#79B8FF">"weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8"> },</span></span>
|
|
178
|
-
<span class="line"><span style="color:#E1E4E8"> {</span></span>
|
|
179
|
-
<span class="line"><span style="color:#79B8FF"> "path"</span><span style="color:#E1E4E8">: </span><span style="color:#9ECBFF">"https://unpkg.com/@fontsource/inter@5.0.18/files/inter-latin-700-normal.woff"</span><span style="color:#E1E4E8">,</span></span>
|
|
180
|
-
<span class="line"><span style="color:#79B8FF"> "weight"</span><span style="color:#E1E4E8">: </span><span style="color:#79B8FF">700</span></span>
|
|
181
|
-
<span class="line"><span style="color:#E1E4E8"> }</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 style="color:#E1E4E8"> }</span></span>
|
|
185
|
-
<span class="line"><span style="color:#E1E4E8">}</span></span>
|
|
186
|
-
<span class="line"></span></code></pre>
|
|
187
|
-
<p><strong>Note:</strong> Use WOFF format (<code>.woff</code>) for best compatibility. WOFF2 is not supported by the underlying renderer.</p>
|
|
188
|
-
<h2 id="performance">Performance</h2>
|
|
189
|
-
<ul>
|
|
190
|
-
<li>✅ <strong>Font caching</strong> - Fonts load once and are cached for all renders</li>
|
|
191
|
-
<li>✅ <strong>Video optimization</strong> - 90-frame video loads fonts once, not 90 times</li>
|
|
192
|
-
<li>✅ <strong>No CDN delays</strong> - Local fonts load instantly</li>
|
|
193
|
-
</ul>
|
|
194
|
-
<h2 id="next-steps">Next Steps</h2>
|
|
195
|
-
<ul>
|
|
196
|
-
<li><a href="/styling">Styling with Tailwind & shadcn/ui</a></li>
|
|
197
|
-
<li><a href="/helpers">Built-in Helpers</a></li>
|
|
198
|
-
<li><a href="/images">Image Rendering</a></li>
|
|
199
|
-
<li><a href="/video">Video Rendering</a></li>
|
|
200
|
-
</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>
|