f13.io — Figure13 Landing Page

Source for the f13.io landing page. Built with Astro — minimal client-side JS, fast, and statically exported.

main branch

stg branch

Stack

• Framework: Astro 4.x
• Fonts: Syne (display) + DM Mono (body/UI) via Bunny Fonts
• Styling: Scoped CSS with CSS custom properties — no Tailwind, no framework

Getting Started

npm install
npm run dev       # dev server at localhost:4321
npm run build     # production build → dist/
npm run preview   # preview production build locally

Fish shell completions

astrodev      # dev preview server (as above)
astrobuild    # production build (as above)

Customization

Adding a product

In src/pages/index.astro, add an entry to the techProducts array:

{
  name: 'Your Product',
  tagline: 'One compelling sentence.',
  description: 'A bit more detail for the card.',
  href: 'https://yourproduct.com',
  domain: 'yourproduct.com',
  status: 'live',   // or 'soon'
},

Colors / tokens

All design tokens live in src/styles/global.css under :root.

--c-accent:   #916DF7;   /* F13 purple */
--c-bg:       #000000;   /* page background */
--c-text-hi:  #FFFFFF;   /* headings */
--c-text-lo:  #C8C6CC;   /* body copy */

See style.md for color details, fonts, etc.

Deployment

npm run build outputs a fully static site to dist/.

The live site is hosted on Bunny. When a commit is pushed/merged to main,build-publish-main.yaml runs on Woodpecker CI which renders the site and publishes it to f13.io via trifold.

Similarly, when a commit is pushed/merged to main,build-publish-stg.yaml runs on Woodpecker CI which renders the site and publishes it to stg.f13.io via trifold.

You can track the builds using the badges at the top of this README, or in #ci-cd_site-builds on Discord.

Set up a deployment

This site uses trifold to publish the built site to Bunny.net. Before you publish a new branch (for example, the stg branch publishes to stg.f13.io), you will need to run trifold's init process to create a new trifold-[branch].toml file and pull zone.

1. If you don't already have uv installed, install it following installing uv.
2. Grab your Bunny API key, or if you don't have a Bunny account linked to our resources, grab the API key from 1Password. Save it as an env variable BUNNY_API_KEY. In bash: export BUNNY_API_KEY=a1b2c3... or in PowerShell: $env:BUNNY_API_KEY = "a1b2c3..."
3. From within this project directory, run uvx trifold init. Answer the prompts as follows:
   1. Storage zone name: f13-dot-io-[branch]
   2. Region: NY
   3. Replication region: () (leave blank)
   4. Monthly bandwith limit: 50 (this value subject to change)
   5. Browser cache time: 60
   6. Remote path: () (leave blank)
   7. Local path: dist/
4. Run uvx trifold status -v to review the files that will be published.
5. Assuming all is well, run uvx trifold publish to push the initial files to Bunny.
6. Check your published site at f13-dot-io-[branch].b-cdn.net to make sure everything published properly.
7. If you want to add a custom (sub)domain (for example, [branch].f13.io), point a CNAME for that (sub)domain to f13-dot-io-[branch].b-cdn.net.
8. Run uvx trifold hostname-add foo.example.com (replacing with your (sub)domain) to add the (sub)domain to Bunny and generate an SSL certificate.
9. Once your deployment is all set, rename the generated trifold.toml file to trifold-[branch].toml so that it does not interfere with our CI pipelines.
10. If you need to delete your deployment from Bunny, log in with your Bunny account credentials and delete the storage and pull zones for that specific deployment. If you do not have Bunny access, contact THH or open an issue here. A self-serve system is in the works and this page will be updated.

Contributing

Suggestions, content changes, and bug reports are welcome. Please file an issue in the issue tracker.

License

This project is released under the following licenses:

• Site source code and contents: GPLv3
• Images, logos, long-form text (like blog posts): CC-BY-SA 4.0
• Auxiliary files (like .gitignore and security.txt): CC0 1.0

See REUSE.toml for specific details.

AI Disclaimer

This project uses AI-assisted development tools. Please see ai-disclaimer.md for details.