Skip to main content
The Lake Ozark Christian Church website is built with a collection of reusable Astro and React components designed for accessibility, user engagement, and church ministry needs.

​
Component Categories

​
Forms & User Input

Components that collect user information and facilitate engagement.

DonationForm

Secure donation form with one-time and recurring options, fee coverage, and DonorKit integration

PrayerRequestForm

Prayer request submission form with anonymous option and Formspree integration

​
UI & Alerts

Components for displaying important messages and notifications to users.

AlertBanner

Modal alert dialog for important announcements with dismissal tracking

CookieBanner

GDPR/CCPA-compliant cookie consent banner with granular privacy controls

SeasonalBanner

Automatic liturgical season banners with countdown timers for holidays

WeatherBanner

Emergency service cancellation banner for weather-related closures

​
Accessibility

Components that enhance website accessibility for all users.

AccessibilityMenu

Comprehensive WCAG 2.1 AA compliant accessibility controls panel

​
Calendar & Events

Components for displaying church events and schedules.

SundayCalendar

Dynamic schedule of upcoming Sunday services with API integration

​
Interactive Displays

Components that showcase dynamic content and testimonies.

SalvationMarquee

Scrolling marquee of salvation testimonies (React component)

​
Additional Components

The website also includes several utility and layout components not individually documented but used throughout the site: Layout Components (src/ui/):
  • Header - Site navigation with mobile menu, used in all pages via Layout
  • Footer - Site footer with contact info and links, used in all pages via Layout
Utility Components (used internally by Layout):
  • AlertSmall - Compact alert messages used in Layout for site-wide announcements
  • LocationPermission - Prompts users for location access when needed
  • PrivacyBanner - Privacy notification banner shown in Layout
  • LocationMap - Interactive Mapbox map component (documented in Worship page)
  • SharePost - Social sharing buttons (documented in Blog page)
  • ExternalLinkWarning - Warning modal when leaving the site
  • SelfXSS - Console warning to prevent self-XSS attacks
These components are typically imported and used automatically by the Layout or specific pages and don’t require direct implementation by developers working on content pages.

​
Component Architecture

​
Astro Components (.astro)

Most components are built as Astro components, which provide:
  • Server-side rendering for better performance
  • Scoped styles that don’t leak
  • Built-in TypeScript support with Props interfaces
  • Client-side interactivity via <script> tags

​
React Components (.tsx)

Some components use React for advanced interactivity:
  • SalvationMarquee: Uses @joycostudio/marquee/react for smooth scrolling

​
Common Patterns

​
Props Interface

All components define their props using TypeScript interfaces: 
interface Props {
  title?: string;
  description?: string;
  showOption?: boolean;
}

​
Client-Side Scripts

Many components include client-side JavaScript for interactivity: 
<script>
  // Client-side code runs in the browser
  document.addEventListener('DOMContentLoaded', () => {
    // Initialize component
  });
</script>

​
Style Scoping

Components use both scoped and global styles: 
<style>
  /* Scoped styles (default) */
  .my-class { }
</style>

<style is:global>
  /* Global styles when needed */
  .global-class { }
</style>

​
Best Practices

When using these components, always:
  • Import from the correct path: '../components/ComponentName.astro'
  • Provide required props (marked with no ? in the interface)
  • Test accessibility features with keyboard navigation
  • Check responsive behavior on mobile devices

​
Next Steps

Explore individual component documentation to learn about specific props, usage examples, and integration patterns.

Build docs developers (and LLMs) love

Get started for freeTalk to us