🚩 Astro Flag

Plant your flag on the web.

A modern Astro landing page template for multi-product portals. Built with the Carta design system, dark/light mode, CMS integration, PWA support, and markdown pages.

Features

• 🎨 Carta Design System — polished UI with glass effects, smooth gradients, and micro-animations
• 🌙 Dark / Light Mode — system-aware with manual toggle and smooth transitions
• 📱 Fully Responsive — mobile-first breakpoints with collapsible nav
• 🔍 SEO-Ready — Open Graph, Twitter Cards, meta descriptions, semantic HTML
• 📲 PWA Support — installable manifest with app icons
• 📝 Markdown Pages — drop .md files with frontmatter for instant routes
• 🏗️ CMS Integration — build-time fetch with graceful fallback (works without a CMS too)
• 🏷️ Tag Cloud — colorful, linked tag pills with 6-color rotating palette
• ⚡ Static Output — fast deploys to Cloudflare Pages, Vercel, Netlify, etc.

Quick Start

# Clone the template
git clone https://github.com/danielw-sudo/astro-flag.git my-portal
cd my-portal

# Install dependencies
npm install

# Start dev server
npm run dev

Configuration

Everything is in one file: src/config.ts

export const SITE_CONFIG = {
  name: "Your Site",
  description: "Your site description",
  url: "https://your-domain.com",
  links: {
    navi: "https://products.your-domain.com",
    gallery: "https://gallery.your-domain.com",
    lib: "https://docs.your-domain.com",
    blog: "https://blog.your-domain.com",
  },
};

Adding Pages

Drop a .md file in src/pages/ with this frontmatter:

---
layout: ../layouts/PageLayout.astro
title: My New Page
description: Optional SEO description
---
Your content here.

That's it — it's automatically a styled, routed page.

Project Structure

src/
├── config.ts              # ← Customize everything here
├── components/
│   ├── Header.astro       # Fixed nav with config-driven links
│   ├── Footer.astro       # Icon links + copyright
│   ├── SiteCard.astro     # Product/tool card component
│   ├── GalleryCard.astro  # Gallery item card component
│   └── ThemeToggle.tsx    # Dark/light mode toggle (React)
├── layouts/
│   ├── MainLayout.astro   # Base layout with SEO/OG/PWA meta
│   └── PageLayout.astro   # Markdown page wrapper with typography
├── pages/
│   ├── index.astro        # Landing page with hero + sections
│   └── about_us.md        # Example markdown page
├── lib/
│   ├── api.ts             # CMS data fetching (build-time)
│   └── types.ts           # TypeScript interfaces
└── styles/
    ├── global.css          # Tailwind + theme variables
    └── carta.css           # Design system styles

CMS Integration

The template fetches featured content from a CMS API at build time. If no CMS is available, the sections gracefully hide.

To connect your CMS:

1. Set PUBLIC_API_URL in .env
2. Adjust endpoints in src/config.ts
3. Update types in src/lib/types.ts to match your schema

Deploy

Cloudflare Pages

1. Connect your GitHub repo
2. Build command: npm run build
3. Output directory: dist
4. Environment variable: NODE_VERSION = 20

Vercel / Netlify

Works out of the box — just connect the repo and deploy.

Build

npm run build   # → dist/
npm run preview # Preview production build

License

MIT — use it for anything.