Your next site starts here.

1/* src/styles/themes/default.css — swap this file to re-theme */
2:root {
3  /* Semantic Tokens - Light Mode */
4  --background: var(--gray-0);
5  --foreground: var(--gray-900);
6  --border: var(--gray-200);
7  --primary: var(--gray-900);
8  --primary-foreground: var(--gray-0);
9  --accent: var(--brand-500);
10  --card: var(--gray-0);
11  --ring: var(--gray-900);
12}
13 
14/* Dark Mode */
15.dark {
16  --background: var(--gray-950);
17  --foreground: var(--gray-50);
18  --border: var(--gray-800);
19  --primary: var(--gray-0);
20  --primary-foreground: var(--gray-900);
21}

1---
2// src/components/seo/SEO.astro
3import siteConfig from '@/config/site.config';
4 
5interface Props {
6  title?: string;
7  description?: string;
8  image?: string;
9}
10 
11const { title, description, image } = Astro.props;
12const canonicalURL = new URL(Astro.url.pathname, Astro.site);
13 
14// Auto-generate OG image if none provided
15const ogImage = image || `/og/${Astro.url.pathname}.png`;
16---
17 
18<title>{title}</title>
19<meta name="description" content={description} />
20<link rel="canonical" href={canonicalURL.toString()} />
21<meta property="og:title" content={title} />
22<meta property="og:image" content={ogImage} />

1---
2// src/pages/index.astro
3import LandingLayout from '@/layouts/LandingLayout.astro';
4import { Hero } from '@/components/hero';
5import { TerminalDemo } from '@/components/ui/marketing/TerminalDemo';
6import FeatureTabs from '@/components/landing/FeatureTabs.tsx';
7import TechStack from '@/components/landing/TechStack.astro';
8---
9 
10<!-- Static Astro components - ships 0kb JS -->
11<Hero layout="split" size="lg">
12  <!-- React component - hydrates immediately -->
13  <TerminalDemo slot="aside" client:load />
14</Hero>
15 
16<!-- Static HTML, no JS -->
17<TechStack />
18 
19<!-- React component - hydrates when scrolled into view -->
20<FeatureTabs client:visible />

1// src/components/ui/form/Button/Button.tsx
2import { type Ref } from 'react';
3import { cn } from '@/lib/cn';
4import { isExternalUrl } from '@/lib/utils';
5import { buttonVariants, type ButtonVariants } from './button.variants';
6 
7interface BaseProps {
8  ref?: Ref<HTMLButtonElement | HTMLAnchorElement>;
9  variant?: ButtonVariants['variant'];
10  size?: ButtonVariants['size'];
11  loading?: boolean;
12  href?: string;
13  children: React.ReactNode;
14}
15 
16export function Button({ ref, variant = 'primary', size = 'md', href, ...rest }: BaseProps) {
17  const classes = cn(buttonVariants({ variant, size }), rest.className);
18  const isExternal = href ? isExternalUrl(href) : false;
19 
20  if (href) {
21    return <a ref={ref} href={href} className={classes} target={isExternal ? '_blank' : undefined} />;
22  }
23  return <button ref={ref} className={classes} {...rest} />;
24}

1// src/i18n/config.ts (with --i18n flag)
2export const languages = {
3  en: 'English',
4  es: 'Español',
5  fr: 'Français',
6} as const;
7 
8export const defaultLang = 'en';
9 
10// src/i18n/translations/en.ts
11export default {
12  'nav.home': 'Home',
13  'nav.about': 'About',
14  'hero.title': 'Ship faster with Velocity',
15  'hero.subtitle': 'The modern Astro starter',
16} as const;
17 
18// Usage in components
19import { t } from '@/i18n';
20const title = t('hero.title'); // "Ship faster..."

1// src/content.config.ts
2import { defineCollection, z } from 'astro:content';
3import { glob } from 'astro/loaders';
4 
5const blog = defineCollection({
6  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
7  schema: ({ image }) =>
8    z.object({
9      title: z.string().max(100),
10      description: z.string().max(200),
11      publishedAt: z.coerce.date(),
12      updatedAt: z.coerce.date().optional(),
13      author: z.string().default('Team'),
14      image: image().optional(),
15      tags: z.array(z.string()).default([]),
16      featured: z.boolean().default(false),
17      draft: z.boolean().default(false),
18      locale: z.enum(['en', 'es', 'fr']).default('en'),
19    }),
20});
21 
22export const collections = { blog, pages, authors, faqs };
23// + Pagefind indexes all content at build time