BEARS Documentation

• Getting Started — How to add and edit content on the BEARS website.
• Ask AI for Help — Copy a ready-made prompt into ChatGPT or Claude to get instant help with the BEARS content system.
• If Something Breaks — The one-click fix when an edit goes wrong.

Content

• Managing Events — How to add, edit, and organize events.
• Managing Projects — How to add, edit, and organize team projects.
• Managing Sponsors — How to add and organize sponsors by tier.
• Managing Hero Slides — How to add and configure the landing page slideshow.
• Managing Instagram Posts — How to embed Instagram posts on the website.
• Managing People — How to add and manage people who appear in the Faces of BEARS grid, as project leads in Meet the Team, and as the subjects of landing-page testimonials.
• Managing Testimonials — How to add and manage quotes in the landing-page Testimonials carousel.
• Managing Page Text — How to edit headings, descriptions, CTAs, and other page copy.
• Anchor IDs Reference — Complete list of anchor IDs on every page, for deep-linking to specific sections.
• Managing Logos — How to change the header, footer, and landing page hero logos.
• Managing the Media page — How photos make it onto the /media gallery and how to control what shows up.

MDX Components

• Using Accordions — Add expandable sections to your pages — great for FAQs and detailed content.
• Using Buttons — Add styled buttons and links to your pages.
• Using Callouts — Highlight important information with a styled card.
• Using Images — Add optimized, responsive images with click-to-enlarge.
• Using YouTube Embeds — Embed YouTube videos in your pages.
• Using Instagram Embeds — Embed Instagram posts in your pages.
• Using Side-by-Side Layouts — Place content in two columns that stack on mobile.
• Using Carousels — Create image slideshows with navigation controls.
• Using Marquees — Create an infinite scrolling gallery of images.
• Using Center — Center content horizontally on the page.
• Using Image Grids — Display multiple images in a responsive grid or masonry layout.

• Architecture — Overview of the project structure and technology stack.

Architecture

• Content Collections — Schema reference for all content collections.
• Routing & Layouts — File-based routing, dynamic routes, and the layout system.
• TypeScript & Configuration — Type system, path aliases, and build configuration.
• Testing Keystatic Schema — Automated drift detection between keystatic.config.ts and content files, via the Reader API.

MDX Components

• Accordion — Expandable sections with Markdown content and configurable behavior.
• Button Component — Technical reference for the Button component with live examples.
• Callout — Glass-morphism highlight card for emphasized content.
• Carousel — Slide-based image carousel with navigation controls and swipe support.
• Center — Horizontal centering wrapper for content.
• Img — Optimized image with responsive srcset and click-to-enlarge modal.
• ImageGrid — Responsive image grid with square (CSS Grid) and masonry (CSS columns) layout modes.
• Instagram — Embedded Instagram posts with size presets.
• Marquee — Infinite horizontal scroll for images and content.
• SideBySide — Responsive two-column layout with optional divider.
• YouTube — Responsive YouTube video embed with privacy-enhanced mode.

Patterns

• Alpine.js Patterns — Common Alpine.js patterns, animation techniques, and gotchas.
• Styling & Theming — Tailwind CSS v4 configuration, color tokens, animations, and responsive strategy.

Site Components

• Site Components — Reference for layout, reusable, landing, and post catalog components.

Systems

• Image System — Image loading pipeline, glob patterns, fallbacks, and optimization.
• Content Queries — Query utilities for fetching, filtering, and sorting content collections.