Configuration

All configuration options available in src/config/site.ts.

Site Metadata

Basic site information and branding settings:

export const siteConfig = {
  name: "Your Brand",           // Primary brand name
  nameAccent: "Corp",           // Optional accent-colored suffix
  templateName: "Mostra",       // Template name for branding
  showTemplateName: false,      // Show template name in logo
  description: "Your site description",
  isDark: false,                // Enable dark theme
}
  • name - Primary brand name displayed in the logo
  • nameAccent - Optional second part in accent color (e.g., "Corp" in "NexusCorp")
  • showTemplateName - When true, shows template name after brand name
  • isDark - Enables dark theme with themed scrollbar and components

Logo Configuration

Multiple logo styles are supported. The logoMark setting determines the display style:

logo: {
  src: "",           // Image path: "/logo.png"
  emoji: "",         // Emoji: "šŸš€" (takes precedence over src)
  char: "",          // Character for gradient-box: "Q"
  svgIcon: "",       // Inline SVG markup for custom icons
  alt: "Site Logo",
  width: 32,
  height: 32,
},

// Logo mark type: 'text-only' | 'icon-text' | 'gradient-box'
logoMark: "icon-text" as const,
  • text-only - Just the brand name, no icon
  • icon-text - Icon/image followed by brand name
  • gradient-box - Single character in a gradient background box

For icons, priority order is: emoji > svgIcon > src

Header Configuration

Control header layout, CTA button style, and navigation spacing:

header: {
  // Layout: 'standard' | 'centered' | 'minimal'
  layout: "standard" as HeaderLayout,

  // CTA button shape: 'rounded' | 'pill'
  ctaShape: "rounded" as CTAShape,

  // Navigation spacing: 'normal' | 'compact'
  navSpacing: "normal" as NavSpacing,
}
  • standard - Logo left, navigation right, CTA right
  • centered - Logo left, navigation center, CTA right
  • minimal - Logo left, CTA right only (no navigation)
  • compact - Tighter navigation spacing for short labels

Navigation with Mega Menus

Navigation supports both simple links and multi-column mega menus:

nav: {
  items: [
    // Mega menu with sections
    {
      label: "Features",
      menuId: "features",
      sections: [
        {
          title: "Core Features",
          titleStyle: "primary",  // primary, secondary, tertiary, etc.
          links: [
            {
              title: "Smooth Scrolling",
              description: "Buttery smooth scrolling",
              href: "/features/scrolling/",
            },
          ],
        },
      ],
    },
    // Simple link (no mega menu)
    { label: "Documentation", href: "/docs/" },
  ],
  cta: {
    label: "Get Started",
    href: "/get-started/",
  },
}

Mega menu sections can have different title styles: primary, secondary, tertiary, quaternary, quinary, senary, neutral

Footer Configuration

Multiple footer layouts with flexible link and social configurations:

// Footer layout options:
// 'grid-4col' | 'flex-row' | 'flex-sections' | 'minimal-centered'
footerLayout: "grid-4col" as const,

footer: {
  copyright: "Your Company",
  copyrightSuffix: "",        // e.g., "A 501(c)(3) nonprofit."
  tagline: "Your tagline here.",

  // Link groups for grid layout
  linkGroups: [
    {
      heading: "Company",
      links: [
        { label: "About", href: "/about/" },
        { label: "Careers", href: "/careers/" },
      ],
    },
  ],

  // Social links
  social: {
    style: "icons",    // 'icons' | 'initials' | 'text' | 'none'
    position: "brand", // 'brand' (under logo) | 'column' (in linkGroups)
    links: [
      { platform: "github", label: "GitHub", href: "..." },
      { platform: "twitter", label: "Twitter", href: "..." },
    ],
  },

  // Legal links
  legalLinks: [
    { label: "Privacy Policy", href: "/privacy/" },
    { label: "Terms", href: "/terms/" },
  ],
  showLegalLinks: true,
  legalInBottomRow: false,

  // Display options
  showCopyright: true,
  showTemplateCredit: true,
}

Footer Layout Options

  • grid-4col - 4-column grid with brand, link groups, and social
  • flex-row - Single row with brand and inline links
  • flex-sections - Flexible sections with grouped links
  • minimal-centered - Minimal centered footer with basic info

Social Icon Styles

  • icons - Lucide icons (GitHub, Twitter, Instagram, etc.)
  • initials - Circular badges with initials (FB, TW, IG)
  • text - Plain text links
  • none - No social links displayed

Feature Flags

Toggle optional features on or off:

features: {
  tailwind: true,              // Tailwind CSS utilities
  smoothScrolling: true,       // Lenis smooth scrolling
  customScrollbar: true,       // Chrome-style scrollbar
  scrollbarThumbStyle: "full", // "auto" or "full"
  viewTransitions: true,       // Page transitions
}
  • tailwind - Include Tailwind CSS utility classes. Set to false for smaller bundle size
  • smoothScrolling - Enables Lenis for buttery smooth scrolling experience
  • customScrollbar - Replaces native scrollbar with theme-aware styled version
  • scrollbarThumbStyle - "auto" (thin, expands on hover) or "full" (always full width)
  • viewTransitions - Enables smooth page transitions using Astro View Transitions