feature: add multilanguage support

The plan is to support german and english.

.astro/types.d.ts

@@ -126,30 +126,30 @@ declare module 'astro:content' {
 
 	type ContentEntryMap = {
 		"recipes": {
-"Kichererbsencurry.md": {
-	id: "Kichererbsencurry.md";
-  slug: "kichererbsencurry";
+"de/SchmortofuMitFrischemKichererbsenBohnenDipp.md": {
+	id: "de/SchmortofuMitFrischemKichererbsenBohnenDipp.md";
+  slug: "de/schmortofumitfrischemkichererbsenbohnendipp";
   body: string;
   collection: "recipes";
   data: InferEntrySchema<"recipes">
 } & { render(): Render[".md"] };
-"Kindergartennudeln.md": {
-	id: "Kindergartennudeln.md";
-  slug: "kindergartennudeln";
+"de/ScrambledTofuMitTomaten.md": {
+	id: "de/ScrambledTofuMitTomaten.md";
+  slug: "de/scrambledtofumittomaten";
   body: string;
   collection: "recipes";
   data: InferEntrySchema<"recipes">
 } & { render(): Render[".md"] };
-"Nudelsalat.md": {
-	id: "Nudelsalat.md";
-  slug: "nudelsalat";
+"en/SchmortofuMitFrischemKichererbsenBohnenDipp.md": {
+	id: "en/SchmortofuMitFrischemKichererbsenBohnenDipp.md";
+  slug: "en/schmortofumitfrischemkichererbsenbohnendipp";
   body: string;
   collection: "recipes";
   data: InferEntrySchema<"recipes">
 } & { render(): Render[".md"] };
-"SchmortofuMitFrischemKichererbsenBohnenDipp.md": {
-	id: "SchmortofuMitFrischemKichererbsenBohnenDipp.md";
-  slug: "schmortofumitfrischemkichererbsenbohnendipp";
+"en/ScrambledTofuMitTomaten.md": {
+	id: "en/ScrambledTofuMitTomaten.md";
+  slug: "en/scrambledtofumittomaten";
   body: string;
   collection: "recipes";
   data: InferEntrySchema<"recipes">

src/components/Header.astro

@@ -1,11 +1,17 @@
 ---
 import Link from "./Link.astro";
+import { getLangFromUrl, useTranslations } from '../i18n/utils';
+import LanguagePicker from "./LanguagePicker.astro";
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
 ---
 <header>
   <div class="content">
     <nav>
-      <Link href=`${import.meta.env.BASE_URL}/` title="home">Home</Link>
+      <Link href=`${import.meta.env.BASE_URL}/${lang}/` title="home">{t("nav.home")}</Link>
     </nav>
+    <LanguagePicker />
   </div>
 </header>
 
@@ -23,10 +29,13 @@ import Link from "./Link.astro";
 
   nav {
     z-index: 1;
+    display: flex;
+    align-items: center;
   }
 
   .content {
     display: flex;
-
+    justify-content: space-between;
+    padding: 0 5px 10px;
   }
 </style>

src/components/LanguagePicker.astro

@@ -0,0 +1,38 @@
+---
+import { languages } from '../i18n/ui';
+import {Astro} from "astro/env";
+const url = Astro.url.pathname
+---
+<ul>
+  {Object.entries(languages).map(([lang, label]) => (
+    <li>
+      <a href={url.replace(/\/(en|de)\//, `/${lang}/`)}>{label}</a>
+    </li>
+  ))}
+</ul>
+
+<style>
+  ul {
+    display: flex;
+    gap: 10px;
+    list-style: none;
+  }
+
+  a {
+    position: relative;
+    display: block;
+    padding: 10px;
+
+    font-weight: bold;
+    text-decoration: none;
+    border: 2px solid var(--darkred);
+    color: var(--darkred);
+    background: var(--flatpink);
+    box-shadow: 5px 5px 0;
+  }
+
+  a:hover {
+    transform: translate(5px, 5px);
+    box-shadow: none;
+  }
+</style>

src/components/RecipeList.astro

@@ -1,20 +1,25 @@
 ---
 import RecipeListItem from "./RecipeListItem.astro";
-
 import {getCollection} from 'astro:content';
+import {getLangFromUrl} from '../i18n/utils';
+
+const lang = getLangFromUrl(Astro.url);
 const recipes = await getCollection('recipes')
 ---
 
 <ul>
-  {recipes.filter(recipe => recipe.data.isPublic).map(recipe => (
-    <RecipeListItem
-      href={import.meta.env.BASE_URL + "/recipe/" + recipe.data.id}
-      title={recipe.data.name}
-      body={recipe.data.description ?? ''}
-      img={recipe.data.image}
-      metaInformation={recipe.data.metaInformation}
-    />
-  ))}
+  {recipes
+    .filter(recipe => recipe.data.isPublic && recipe.data.lang === lang)
+    .map(recipe => (
+      <RecipeListItem
+        href={import.meta.env.BASE_URL + "/" + lang + "/recipe/" + recipe.data.id}
+        title={recipe.data.name}
+        body={recipe.data.description ?? ''}
+        img={recipe.data.image}
+        metaInformation={recipe.data.metaInformation}
+      />
+    ))
+  }
 </ul>
 
 <style>

src/components/RecipeMetaData.astro

@@ -5,6 +5,9 @@ import {type MetaInformation} from "../content/config";
 // Font Awesome
 import { library, icon } from "@fortawesome/fontawesome-svg-core";
 import { faUsers, faClock } from "@fortawesome/free-solid-svg-icons";
+
+import {getLangFromUrl, useTranslations} from "../i18n/utils";
+import {Astro} from "astro/env";
 // Declare all the icons you plan on using
 library.add(faUsers, faClock);
 // Instantiate the icon with the icon function
@@ -16,14 +19,16 @@ interface Props {
   isCompactView?: boolean;
 }
 
-const {metaInformation, isCompactView} = Astro.props;
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang)
+const {metaInformation, isCompactView} = Astro.props
 ---
 
 <ContentBox class={isCompactView ? "meta-information--compact-view" : "meta-information"}>
   <ul class={isCompactView ? "compact-view" : ""}>
-    <li><Fragment set:html={numberOfServingsIcon.html}/><span class="label">Portionen:</span><span class="value">{metaInformation.numberOfServings}</span></li>
-    <li><Fragment set:html={timeNeededIcon.html}/><span class="label">Zubereitungszeit:</span><span class="value">{metaInformation.timeNeeded}</span></li>
-    <li><span class="label">Schwierigkeit:</span><span class="value">{metaInformation.difficulty}</span></li>
+    <li><Fragment set:html={numberOfServingsIcon.html}/><span class="label">{t("recipe.servings")}:</span><span class="value">{metaInformation.numberOfServings}</span></li>
+    <li><Fragment set:html={timeNeededIcon.html}/><span class="label">{t("recipe.time")}:</span><span class="value">{metaInformation.timeNeeded}</span></li>
+    <li><span class="label">{t("recipe.difficulty")}:</span><span class="value">{t(metaInformation.difficulty)}</span></li>
     {metaInformation.kcalPerServing && <li><span class="label">Energiegehalt pro Portion:</span><span class="value">{metaInformation.kcalPerServing} kcal</span></li>}
   </ul>
 </ContentBox>

src/components/Steps.astro

@@ -1,14 +1,18 @@
 ---
 import Step from "./Step.astro";
 import ContentBox from "./ContentBox.astro";
+import {getLangFromUrl,useTranslations} from "../i18n/utils";
+import {Astro} from "astro/env";
 interface Props {
   steps: Array<string>;
 }
 
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang)
 const {steps} = Astro.props;
 ---
 
-<ContentBox class="steps" title="Zubereitung">
+<ContentBox class="steps" title={t("recipe.steps")}>
   <ul>
     {steps.map(step => (
       <Step step={step}/>

src/components/ingredients/IngredientList.astro

@@ -2,13 +2,17 @@
 import {type IngredientGroup} from "../../content/config";
 import ContentBox from "../ContentBox.astro";
 import Group from "./IngredientGroup.astro";
+import {getLangFromUrl, useTranslations} from "../../i18n/utils";
+import {Astro} from "astro/env";
 interface Props {
   ingredientGroups: Array<IngredientGroup>;
 }
 
+const lang = getLangFromUrl(Astro.url)
+const t = useTranslations(lang)
 const {ingredientGroups} = Astro.props;
 ---
-<ContentBox class="ingredients" title="Zutaten">
+<ContentBox class="ingredients" title={t("recipe.ingredients")}>
   <ul>
     {ingredientGroups.map(group => (
       <Group ingredientGroup={group}/>

src/content/config.ts

@@ -23,13 +23,16 @@ const metaInformation = z.object({
     numberOfServings: z.number(),
     timeNeeded: z.string().regex(/(\d+\s)(min|h)/),
     kcalPerServing: z.number().optional(),
-    difficulty: z.enum(["einfach", "mittel", "schwer"])
+    difficulty: z.enum(["difficulty.easy", "difficulty.middle", "difficulty.hard"])
 })
 
+const language = z.enum(["de", "en"])
+
 const recipe = z.object({
     id: z.string(),
     name: z.string(),
     description: z.string().optional(),
+    lang: language,
     ingredientGroups: z.array(ingredientGroup),
     image: image,
     steps: z.array(z.string()),