CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Project Overview

This is a Quarto-based academic website for Virtuelle Akademie, built as a static site generator that outputs to GitHub Pages. The site is bilingual (EN/DE) using the babelquarto package.

Architecture

The project uses Quarto’s website format with these key components:

  • Main site: Academic website with Teaching, Research, and About sections
  • Bilingual: Uses babelquarto for native EN/DE support
  • Output: Static HTML generated to docs/ directory for GitHub Pages
  • Styling: Custom SCSS themes with Nunito Sans/Inter fonts and purple branding (#4b2e83)
  • Extensions: Multiple Quarto extensions including timer, custom-callout, fontawesome, etc.

File Structure

  • _quarto.yml: Main site configuration (English default)
  • _quarto-de.yml: German language profile (navbar, sidebar translations)
  • styles/: SCSS files for custom styling and themes
  • posts/: Blog posts with metadata
  • teaching/, research/, about/, workshops/: Main content sections
  • docs/: Generated output directory (do not edit directly)

Common Commands

Building the Site (Bilingual)

make render
# or
Rscript -e "babelquarto::render_website()"

Preview During Development

make preview   # Render then serve
make serve     # Just serve docs/ (no render)

Git Workflow (via Makefile)

make branch name=feature-name    # Create new branch
make commit msg="Description"    # Add and commit changes
make push                        # Push current branch
make merge                       # Admin: merge to main

Bilingual System (babelquarto)

The site uses babelquarto for native multilingual support.

File Naming Convention

  • English files (main language): index.qmd, teaching/index.qmd
  • German files (translation): index.de.qmd, teaching/index.de.qmd

The main language has no suffix; only translations have language codes (.de.qmd).

Configuration Files

  • _quarto.yml: Main config with babelquarto settings + English navbar/sidebar
  • _quarto-de.yml: German language profile with translated navbar/sidebar

How It Works

  1. babelquarto reads both config files
  2. Renders each language version separately
  3. Outputs to docs/ (EN) and docs/de/ (DE)
  4. Automatically adds language switcher to navbar

Adding New Bilingual Content

  1. Create section/page.qmd (English) and section/page.de.qmd (German)
  2. Add English file to sidebar in _quarto.yml
  3. Add German file to sidebar in _quarto-de.yml
  4. Run make render

Content Management

  • New blog posts go in posts/ directory as .qmd and .de.qmd files
  • Teaching content uses sidebar navigation
  • Research sections follow the same pattern
  • All content uses Quarto markdown format with YAML frontmatter

Styling

The site uses a custom purple theme (#4b2e83) with sophisticated typography and animations. The main stylesheet is styles/custom.scss which defines:

  • Typography hierarchy with Inter/Nunito Sans fonts
  • Card-based layouts with hover effects
  • Gradient animations and smooth transitions
  • Responsive grid systems (.content-grid, .content-grid-compact)

Extensions

The site uses Quarto extensions for enhanced functionality:

  • timer: Interactive timers for presentations
  • custom-callout: Enhanced callout boxes
  • fontawesome: Icon support

Development Notes

  • The Makefile provides convenient git workflow and build commands
  • The site outputs to docs/ for GitHub Pages hosting
  • External workshops are hosted in separate repositories (e.g., ki-lehre-beginner, ki-lehre-refresher)
  • Requires R with babelquarto package: install.packages('babelquarto', repos = c('https://ropensci.r-universe.dev', 'https://cloud.r-project.org'))
Back to top