TypeScript & Configuration

TypeScript Configuration

The project uses Astro’s strict TypeScript preset (astro/tsconfigs/strict) with React JSX support for MDX components that use React islands.

Path Aliases

Path aliases are configured in tsconfig.json and resolve throughout all .astro, .ts, .tsx, and .mdx files:

The @mdx barrel alias is especially important — it enables the single-import pattern used in all .mdx content files:

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

Type Definitions

Types are defined in src/types/ and re-exported from src/types/index.ts:

Content Types (src/types/content.ts)

type PostType = 'events' | 'projects';

type SponsorTier = 'bronze' | 'silver' | 'gold' | 'platinum' | 'diamond';

// Zod enums — use .options for all valid values
const CategoryEventEnum = z.enum([
  'trade-fairs-and-conventions',
  'competitions-and-workshops',
  'kick-off-events',
  'other'
]);

const CategoryProjectEnum = z.enum([
  'experimental-rocketry',
  'science-and-experiments',
  'robotics',
  'other'
]);

const CoverImageType = z.enum(["DEFAULT", "CUSTOM"]);

CategoryEventEnum.options and CategoryProjectEnum.options return the array of valid values, used by filter components to render category options.

Component Types (src/types/components.ts)

type SponsorEntry = CollectionEntry<'sponsors'>;

interface ImageWithAlt {
  image: ImageMetadata | string;
  alt: string;
  description?: string;
}

ImageWithAlt is used by ImageGrid, CollapsibleImageGrid, and other image display components. description is optional and surfaces as a gradient overlay at the bottom of the image (and again beneath the enlarged image in the click-to-enlarge modal) when set. Use it for any combination of caption and photographer credit.

Astro Configuration

File: astro.config.mjs

export default defineConfig({
  site: 'https://bears-space.de',
  vite: {
    plugins: [tailwindcss()]
  },
  integrations: [alpinejs(), mdx(), react(), sitemap({
    filter: (page) => !page.includes('/docs/')
  })]
});