Webserver & Dokumentation

Hosting

• Self-hosted Linux Server (eigene Administration)
• Domain: remow.wara.de (Subdomain der Walther-Rathenau-Gewerbeschule)
• DNS-Integration in die WARA-Zone
• SSL-Zertifikat

Framework Stack

• Astro: Content-fokussiertes Web-Framework
  • Islands Architecture für optimale Performance
  • Zero-JavaScript-First Ansatz
  • Server-Side Rendering (SSR)
• Starlight: Dokumentations-Theme für Astro
  • Integrierte Suchfunktion
  • Automatische Seitennavigation
  • Dark/Light Mode
• MDX: Erweiterte Markdown-Syntax
  • Integration von React/JSX Komponenten
  • Interaktive Code-Beispiele
  • Dynamische Inhalte

Features

• Vollständig responsives Design
• Optimierte Asset-Verarbeitung
• Caching für Ladezeiten
• Schnelle Seitenladezeiten durch statisches Rendering
• Integrierte Dokumentationssuche
• Automatische Bildoptimierung

CSS

Es wird hier mit eigenem TailwindCSS gearbeitet. Folgendes Styling wird verwendet:

/* Global styles for Re-Mow project */

/* Importing Tailwind CSS layers */
@layer base, starlight, theme, components, utilities;

@import '@astrojs/starlight-tailwind';
@import 'tailwindcss/theme.css' layer(theme);
@import 'tailwindcss/utilities.css' layer(utilities);

/* Dark mode colors. */
:root {
  --sl-color-scheme: dark;
    --sl-color-accent-low: #072d00;
    --sl-color-accent: #247f00;
    --sl-color-accent-high: #aad7a0;
    --sl-color-white: #ffffff;
    --sl-color-gray-1: #eaf0e8;
    --sl-color-gray-2: #c5cdc3;
    --sl-color-gray-3: #99a796;
    --sl-color-gray-4: #4f5c4d;
    --sl-color-gray-5: #303c2d;
    --sl-color-gray-6: #1f2a1c;
    --sl-color-black: #151a13;
}
/* Light mode colors. */
:root[data-theme='light'] {
    --sl-color-accent-low: #c0e2b8;
    --sl-color-accent: #165800;
    --sl-color-accent-high: #0d3e00;
    --sl-color-white: #151a13;
    --sl-color-gray-1: #1f2a1c;
    --sl-color-gray-2: #303c2d;
    --sl-color-gray-3: #4f5c4d;
    --sl-color-gray-4: #82907f;
    --sl-color-gray-5: #bdc4bb;
    --sl-color-gray-6: #eaf0e8;
    --sl-color-gray-7: #f4f7f3;
    --sl-color-black: #ffffff;
}

Performance

Die Webseite erreicht optimale Performance-Werte - sowohl auf Computern als auch auf mobilen Endgeräten: