Fircle Landing

Marketing and product landing site for Fircle, built with Astro, Tailwind CSS v4, and React islands.

Fircle is an open source, private, invite-only family social network designed for self-hosted deployments.

Stack

• Astro 7
• Tailwind CSS 4
• shadcn/ui primitives
• React 19 (for interactive islands)

Requirements

• Node.js 22.12.0 or newer
• pnpm

Getting Started

1. Install dependencies:

   pnpm install

2. Start the dev server (recommended background mode):

   pnpm astro dev --background

3. Open the site:

   http://localhost:4321

Development Commands

Command	What it does
pnpm astro dev --background	Start dev server in the background
pnpm astro dev status	Show background server status
pnpm astro dev logs	Show background server logs
pnpm astro dev stop	Stop background dev server
pnpm dev	Start local dev server in foreground
pnpm build	Build static output to dist/
pnpm preview	Preview built output locally
pnpm astro -- --help	Show Astro CLI help

Project Structure

landing/
├── public/
│   ├── og.webp
│   └── landing/
│       ├── shot.webp
│       ├── shot-dark.webp
│       ├── mobile-shot.webp
│       └── mobile-shot-dark.webp
├── src/
│   ├── components/
│   ├── layouts/
│   ├── pages/
│   └── styles/
├── astro.config.mjs
└── package.json

SEO and Social Preview

• Open Graph and Twitter metadata are handled in src/layouts/Layout.astro.
• The default OG image is public/og.webp.
• The homepage also displays this OG image in a dedicated preview block.

Deploy

Create a production build:

pnpm build

Output is generated in dist/.

Documentation

• Astro docs: https://docs.astro.build
• Routing: https://docs.astro.build/en/guides/routing/
• Astro components: https://docs.astro.build/en/basics/astro-components/
• Framework components: https://docs.astro.build/en/guides/framework-components/
• Styling: https://docs.astro.build/en/guides/styling/