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

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

Adding New Bilingual Content

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

Sidebar Configuration

English sidebars are defined in _quarto.yml, German in _quarto-de.yml:

# _quarto.yml (English)
sidebar:
  - id: teaching
    title: "Teaching"
    contents:
      - teaching/index.qmd

# _quarto-de.yml (German)
sidebar:
  - id: teaching
    title: "Lehre"
    contents:
      - teaching/index.de.qmd

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'))

Zurück nach oben