Site Configuration File

File Location

The configuration file is located at: src/content-collections/site.config.json

Schema Overview

This table represents the top-level keys available in the configuration object.

Key	Description
`general`	Core branding, SEO details, and global social links.
`header`	Visibility toggles for the site navigation bar.
`body`	Content for the homepage (Hero section and Call to Action).
`footer`	Contact info, social icons, newsletter, and giving links.
`theme`	Appearance settings and custom CSS overrides.

General Settings

Core branding and SEO metadata used across the entire site.

Key	Type	Requirement	Description
`name`	`String`	Required	The name of your church. Used in the Header and `title` tags.
`description`	`String`	Required	SEO metadata description for search engines and social sharing.
`logo`	`Path`	Optional	Path to your logo file (e.g., `/src/assets/logo.svg`).
`youtube`	`URL`	Optional	Your YouTube channel link. Used as a fallback for sermon posts.

Controls the branding elements in the navigation bar.

Key	Type	Requirement	Description
`displayTitle`	`Boolean`	Required	Default: `true` Show or hide the church name text in the header.
`displayLogo`	`Boolean`	Required	Default: `false` Show or hide the logo image in the header.

Body (Homepage)

Hero Component

The Hero section is the first thing users see on your homepage.

Key	Type	Requirement	Description
`text`	`HTML`	Required	Main headline on on homepage. Supports HTML & Tailwind.
`bgImage`	`Path`	Optional	Background image path.

CTA Button

The “Call to Action” button located directly under the Hero text.

Key	Type	Requirement	Description
`text`	`String`	Optional	Button label. Leave empty to hide the button.
`link`	`URL`	Optional	Destination for the button.

The footer is divided into three columns: Info, Newsletter, and Giving.

Left Column (Info & Socials)

Used for location details and social media links.

Sections (Array of Objects)

Key	Type	Requirement	Description
`heading`	`String`	Required	Section title (e.g., “Service Times”).
`description`	`HTML`	Required	Supports HTML & Tailwind.

Key	Type	Requirement	Description
`name`	`String`	Required	Platform name.
`icon`	`String`	Required	Iconify identifier (e.g., `mdi:facebook`).
`link`	`URL`	Required	Direct link to profile.
`hint`	`String`	Optional	Set to enable tooltip on hover.

Configuration for the newsletter signup powered by Resend.

Key	Type	Requirement	Description
`isActive`	`Boolean`	Required	Default: `True`. Set to `false` to hide this section.
`heading`	`String`	Optional	Title for the signup form.
`description`	`String`	Optional	Short text explaining what users are signing up for.

Give (Donations)

A dedicated area to highlight your giving platform.

Key	Type	Requirement	Description
`isActive`	`Boolean`	Required	Default: `True`. Set to `false` to hide this section.
`heading`	`String`	Optional	Title for the giving section.
`description`	`String`	Optional	Short text explaining how to give.
`link`	`URL`	Optional	Link to your giving provider (e.g., Tithe.ly or Planning Center).

Theme

Customize the look and feel of your site.

Key	Type	Requirement	Description
`colorScheme`	`Select`	Required	Default: `auto`. Respects system settings. Set to `light` or `dark` to force the corresponding theme to be used.
`customCSS`	`CSS`	Optional	Overrides global styles. Generate themes via tweakcn.

Example Config File

{
  "general": {
    "name": "Astro Church",
    "description": "We exist to be and make eternally joyful disciples of Jesus Christ. Sojourners is a baptistic, reformed, non-denominational church in Albert Lea, Minnesota. Join us Sundays at 10am in the Skyline Plaza!",
    "youtube": "https://www.youtube.com/@CodinginPublic"
  },
  "header": {
    "displayTitle": true,
    "displayLogo": false
  },
  "body": {
    "hero": {
      "text": "<span class='opacity-40'>Free, open-source template</span><span class='text-primary'> for building great church websites</span><span class='opacity-40'> with Astro</span>",
      "bgImage": "src/assets/hero-bg.webp"
    },
    "cta": {
      "text": "10 am Sundays | Click here for livestream",
      "link": "https://www.youtube.com/watch?v=eQXG75XirdE"
    }
  },
  "footer": {
    "left": {
      "sections": [
        {
          "heading": "Sundays at 10am",
          "description": "<address>3321 Stephens Hill Ln<br />Antioch, TN 37013</address>"
        },
        {
          "heading": "Contact Us",
          "description": "<a href='mailto:notarealemail@astro.church'>notarealemail@astro.church</a><br />(123)456-7899"
        }
      ],
      "social": [
        {
          "name": "Facebook",
          "icon": "simple-icons:facebook",
          "link": "https://www.facebook.com/tctnetwork"
        },
        {
          "name": "Youtube",
          "icon": "simple-icons:youtube",
          "link": "https://www.youtube.com/@CodinginPublic"
        },
        {
          "name": "Spotify",
          "icon": "simple-icons:spotify",
          "link": "https://open.spotify.com/artist/16QSVsPKl743hu4U5C18R8?si=Cl-bBnERRfCzrMZVwbul9w"
        }
      ]
    },
    "form": {
      "active": true,
      "heading": "Weekly Bulletin",
      "description": "Sign up to stay informed and connected to Astro Church weekly happenings."
    },
    "give": {
      "active": true,
      "heading": "Give to Astro Church",
      "description": "Click below to set up a one time or recurring gift to Astro Church.",
      "link": "https://get.tithe.ly/"
    }
  },
  "theme": {
    "colorScheme": "auto",
    "customCSS": ":root {\n  --background: oklch(0.9885 0.0057 84.5659);\n  --foreground: oklch(0.3660 0.0251 49.6085);\n  --card: oklch(0.9686 0.0091 78.2818);\n  --card-foreground: oklch(0.3660 0.0251 49.6085);\n  --popover: oklch(0.9686 0.0091 78.2818);\n  --popover-foreground: oklch(0.3660 0.0251 49.6085);\n  --primary: oklch(0.5553 0.1455 48.9975);\n  --primary-foreground: oklch(1.0000 0 0);\n  --secondary: oklch(0.8276 0.0752 74.4400);\n  --secondary-foreground: oklch(0.4444 0.0096 73.6390);\n  --muted: oklch(0.9363 0.0218 83.2637);\n  --muted-foreground: oklch(0.5534 0.0116 58.0708);\n  --accent: oklch(0.9000 0.0500 74.9889);\n  --accent-foreground: oklch(0.4444 0.0096 73.6390);\n  --destructive: oklch(0.4437 0.1613 26.8994);\n  --destructive-foreground: oklch(1.0000 0 0);\n  --border: oklch(0.8866 0.0404 89.6994);\n  --input: oklch(0.8866 0.0404 89.6994);\n  --ring: oklch(0.5553 0.1455 48.9975);\n  --chart-1: oklch(0.5553 0.1455 48.9975);\n  --chart-2: oklch(0.5534 0.0116 58.0708);\n  --chart-3: oklch(0.5538 0.1207 66.4416);\n  --chart-4: oklch(0.5534 0.0116 58.0708);\n  --chart-5: oklch(0.6806 0.1423 75.8340);\n  --sidebar: oklch(0.9363 0.0218 83.2637);\n  --sidebar-foreground: oklch(0.3660 0.0251 49.6085);\n  --sidebar-primary: oklch(0.5553 0.1455 48.9975);\n  --sidebar-primary-foreground: oklch(1.0000 0 0);\n  --sidebar-accent: oklch(0.5538 0.1207 66.4416);\n  --sidebar-accent-foreground: oklch(1.0000 0 0);\n  --sidebar-border: oklch(0.8866 0.0404 89.6994);\n  --sidebar-ring: oklch(0.5553 0.1455 48.9975);\n  --font-sans: Oxanium, sans-serif;\n  --font-serif: Merriweather, serif;\n  --font-mono: Fira Code, monospace;\n  --radius: 0.3rem;\n  --shadow-x: 0px;\n  --shadow-y: 2px;\n  --shadow-blur: 3px;\n  --shadow-spread: 0px;\n  --shadow-opacity: 0.18;\n  --shadow-color: hsl(28 18% 25%);\n  --shadow-2xs: 0px 2px 3px 0px hsl(28 18% 25% / 0.09);\n  --shadow-xs: 0px 2px 3px 0px hsl(28 18% 25% / 0.09);\n  --shadow-sm: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px hsl(28 18% 25% / 0.18);\n  --shadow: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px hsl(28 18% 25% / 0.18);\n  --shadow-md: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 2px 4px -1px hsl(28 18% 25% / 0.18);\n  --shadow-lg: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 4px 6px -1px hsl(28 18% 25% / 0.18);\n  --shadow-xl: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 8px 10px -1px hsl(28 18% 25% / 0.18);\n  --shadow-2xl: 0px 2px 3px 0px hsl(28 18% 25% / 0.45);\n  --tracking-normal: 0em;\n  --spacing: 0.25rem;\n}\n\n.dark {\n  --background: oklch(0.2161 0.0061 56.0434);\n  --foreground: oklch(0.9699 0.0013 106.4238);\n  --card: oklch(0.2685 0.0063 34.2976);\n  --card-foreground: oklch(0.9699 0.0013 106.4238);\n  --popover: oklch(0.2685 0.0063 34.2976);\n  --popover-foreground: oklch(0.9699 0.0013 106.4238);\n  --primary: oklch(0.7049 0.1867 47.6044);\n  --primary-foreground: oklch(1.0000 0 0);\n  --secondary: oklch(0.4444 0.0096 73.6390);\n  --secondary-foreground: oklch(0.9232 0.0026 48.7171);\n  --muted: oklch(0.2330 0.0073 67.4563);\n  --muted-foreground: oklch(0.7161 0.0091 56.2590);\n  --accent: oklch(0.3598 0.0497 229.3202);\n  --accent-foreground: oklch(0.9232 0.0026 48.7171);\n  --destructive: oklch(0.5771 0.2152 27.3250);\n  --destructive-foreground: oklch(1.0000 0 0);\n  --border: oklch(0.3741 0.0087 67.5582);\n  --input: oklch(0.3741 0.0087 67.5582);\n  --ring: oklch(0.7049 0.1867 47.6044);\n  --chart-1: oklch(0.7049 0.1867 47.6044);\n  --chart-2: oklch(0.6847 0.1479 237.3225);\n  --chart-3: oklch(0.7952 0.1617 86.0468);\n  --chart-4: oklch(0.7161 0.0091 56.2590);\n  --chart-5: oklch(0.5534 0.0116 58.0708);\n  --sidebar: oklch(0.2685 0.0063 34.2976);\n  --sidebar-foreground: oklch(0.9699 0.0013 106.4238);\n  --sidebar-primary: oklch(0.7049 0.1867 47.6044);\n  --sidebar-primary-foreground: oklch(1.0000 0 0);\n  --sidebar-accent: oklch(0.6847 0.1479 237.3225);\n  --sidebar-accent-foreground: oklch(0.2839 0.0734 254.5378);\n  --sidebar-border: oklch(0.3741 0.0087 67.5582);\n  --sidebar-ring: oklch(0.7049 0.1867 47.6044);\n  --font-sans: Oxanium, sans-serif;\n  --font-serif: Merriweather, serif;\n  --font-mono: Fira Code, monospace;\n  --radius: 0.3rem;\n  --shadow-x: 0px;\n  --shadow-y: 2px;\n  --shadow-blur: 3px;\n  --shadow-spread: 0px;\n  --shadow-opacity: 0.18;\n  --shadow-color: hsl(0 0% 5%);\n  --shadow-2xs: 0px 2px 3px 0px hsl(0 0% 5% / 0.09);\n  --shadow-xs: 0px 2px 3px 0px hsl(0 0% 5% / 0.09);\n  --shadow-sm: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18);\n  --shadow: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18);\n  --shadow-md: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 2px 4px -1px hsl(0 0% 5% / 0.18);\n  --shadow-lg: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 4px 6px -1px hsl(0 0% 5% / 0.18);\n  --shadow-xl: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 8px 10px -1px hsl(0 0% 5% / 0.18);\n  --shadow-2xl: 0px 2px 3px 0px hsl(0 0% 5% / 0.45);\n}\n\n@theme inline {\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n\n  --font-sans: var(--font-sans);\n  --font-mono: var(--font-mono);\n  --font-serif: var(--font-serif);\n\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n\n  --shadow-2xs: var(--shadow-2xs);\n  --shadow-xs: var(--shadow-xs);\n  --shadow-sm: var(--shadow-sm);\n  --shadow: var(--shadow);\n  --shadow-md: var(--shadow-md);\n  --shadow-lg: var(--shadow-lg);\n  --shadow-xl: var(--shadow-xl);\n  --shadow-2xl: var(--shadow-2xl);\n}"
  }
}