Getting Started

This guide gets the site running locally so you can start editing content. It assumes you have Git and a code editor (we recommend VS Code) installed.

Step 1: Install Node.js

You need Node.js v18 or later (npm comes bundled with it). Install the LTS version from nodejs.org, then verify:

node -v
npm -v

Both commands should print a version number.

Step 2: Clone the Repo

git clone https://github.com/leopoldblum/bears-website.git
cd bears-website
code .

Step 3: Install Dependencies

npm install

Only needed once, and again whenever dependencies change after a git pull.

Step 4: Start the Dev Server

npm run dev

Open http://localhost:4321. Changes to content files are reflected live in the browser.

Stuck? Ask an AI

Open the Ask AI for Help page, copy the AI context prompt, and paste it into ChatGPT or Claude along with your question. You’ll get accurate answers about the content system without having to read every guide.

Next Steps

Dive into the guide for whatever you’re working on:

• Managing Page Text — headings, descriptions, buttons, and other site-wide copy
• Managing Events — workshops, talks, and competitions
• Managing Projects — ongoing and completed team projects
• Managing Sponsors — sponsors organized by tier
• Managing People — Faces of BEARS grid and project leads (one record per person)
• Managing Testimonials — the landing-page quote carousel (each entry references a person)
• Hero Slides, Instagram Posts

Quick reference

Languages: The site has English (default) and German. Localized collections (events, projects, page-text) use en/ and de/ subfolders with matching filenames. If a German translation is missing, the English version is shown automatically. Language-neutral collections: sponsors, instagram, hero-slides, docs, people, testimonials, social-platforms — people keeps role translations inline (roleEn/roleDe), and testimonials keeps quote translations inline (quoteEn/quoteDe).

Content files: Every file in src/content/ is .mdx — a YAML frontmatter block at the top (between --- delimiters), followed by optional Markdown body content. The .mdx extension lets event, project, and docs posts embed interactive components alongside prose; for collections like people, sponsors, or page-text the body is ignored and only the frontmatter is read.

MDX components: At the top of any .mdx event, project, or docs file, paste this once to import every available component (unused ones are stripped at build time):

import { Accordion, Button, Callout, Carousel, Center, ImageGrid, Img, Instagram, Marquee, YouTube, SideBySide, Left, Right } from '@mdx';

Drafts: Set isDraft: true on events, projects, and Instagram posts to hide them in production while keeping them visible locally.

Images: All images must be local files in src/assets/ subdirectories. Valid formats: .jpg, .jpeg, .png, .webp, .svg. Never use remote URLs.

Uploading images through the admin UI: larger files (>2 MB) will freeze the tab during upload — just let it run and it will go through after a while. Smaller files are preferred; shrink images first at squoosh.app when you can. This is a Keystatic limitation, not something we can configure away. For hero-slide videos, compress with HandBrake or ffmpeg if the file is large — or skip the video slide entirely if an image will do.