WIP

src/components/Nav.astro

@@ -24,8 +24,8 @@ const paths = [
     text: t("nav.photos"),
   },
   {
-    link: translatePath("/videos"),
-    text: t("nav.videos"),
+    link: translatePath("/resources"),
+    text: t("nav.resources"),
   },
 ];
 ---

src/content/videos/_index.en.md

@@ -1,4 +1,4 @@
 ---
-title: Videos
+title: Resources
 menu: nav
 ---

src/i18n/ui.ts

@@ -20,7 +20,7 @@ export const ui = {
     'home.subtitle': 'Trained Media Designer, Blender Nerd, Developer and Hardware Tinkerer.',
     'nav.blog': 'Blog',
     'nav.projects': 'Projects',
-    'nav.videos': 'Videos',
+    'nav.resources': 'Resources',
     'nav.photos': 'Photos',
     'toc.title': 'Table of Contents',
     "resume": "Resume",
@@ -38,7 +38,7 @@ export const ui = {
     'home.subtitle': 'Ausgebildeter Mediengestalter, Blender Nerd, Entwickler und Hardware Bastler.',
     'nav.blog': 'Blog',
     'nav.projects': 'Projekte',
-    'nav.videos': 'Videos',
+    'nav.resources': 'Resources',
     'nav.photos': 'Fotos',
     "resume": "Lebenslauf",
     'toc.title': 'Inhaltsverzeichnis',

src/layouts/Post.astro

@@ -16,11 +16,10 @@ const { frontmatter, headings } = Astro.props;
 const t = useTranslations(Astro.url);
 const { title, url, date: dateString, links, toc, cover } = frontmatter;
 const collection = url?.split("/")[2];
-const date = new Date(dateString);
-const path = useTranslatedPath(Astro.url);
-
 //@ts-ignore
 const backlinkContent = t(`nav.${collection}`).toLowerCase();
+const date = new Date(dateString);
+const path = useTranslatedPath(Astro.url);
 ---
 
 <Layout title={title} image={cover}>

src/pages/resources/index.astro

@@ -0,0 +1,64 @@
+---
+import Layout from "@layouts/Layout.astro";
+import HeroCard from "@components/HeroCard.astro";
+
+const collection = "resources";
+
+const wiki = {
+  id: "wiki",
+  collection,
+  body: "My knowledge base",
+  data: {
+    title: "Wiki",
+    icon: "🧠",
+  },
+};
+
+const articles = {
+  id: "articles",
+  collection,
+  body: "Articles saved",
+  data: {
+    title: "Articles",
+    icon: "📰",
+  },
+};
+
+const recipes = {
+  id: "recipes",
+  collection,
+  body: "Recipes",
+  data: {
+    title: "Recipes",
+    icon: "🍲",
+  },
+};
+
+const movies = {
+  id: "movies",
+  collection,
+  body: "Movies",
+  data: {
+    title: "Movies",
+    icon: "🎥",
+  },
+};
+
+const series = {
+  id: "series",
+  collection,
+  body: "Series",
+  data: {
+    title: "Series",
+    icon: "📺",
+  },
+};
+---
+
+<Layout title="Max Richter">
+  <HeroCard post={wiki} />
+  <HeroCard post={recipes} />
+  <HeroCard post={articles} />
+  <HeroCard post={movies} />
+  <HeroCard post={series} />
+</Layout>

src/pages/resources/movies/[movieName].astro

@@ -0,0 +1,35 @@
+---
+import Layout from "@layouts/Layout.astro";
+
+export async function getStaticPaths() {
+  const response = await fetch(
+    "http://localhost:8080/resources?name=Media/movies/*",
+  );
+  const movieReviews = await response.json();
+
+  const paths = movieReviews.map((review: any) => {
+    return {
+      params: {
+        movieName: review.identifier
+          .replace("Media/movies/", "")
+          .replace(/\.md$/, ""),
+      },
+    };
+  });
+
+  return paths;
+}
+
+const response = await fetch(
+  //@ts-ignore
+  `http://localhost:8080/resources?name=Media/movies/${Astro.params.movieName}.md`,
+);
+const reviewes = await response.json();
+const review = reviewes[0];
+---
+
+<Layout title="Max Richter">
+  <h1>{review.itemReviewed?.name}</h1>
+  <p>{review.reviewBody}</p>
+  <!-- <pre><code>{JSON.stringify(review, null, 2)}</code></pre> -->
+</Layout>

src/pages/resources/movies/index.astro

@@ -0,0 +1,29 @@
+---
+import Layout from "@layouts/Layout.astro";
+import HeroCard from "@components/HeroCard.astro";
+
+const response = await fetch(
+  "http://localhost:8080/resources?name=Media/movies/*",
+);
+const movieReviews = await response.json();
+---
+
+<Layout title="Max Richter">
+  {
+    movieReviews.map((review: any) => (
+      <HeroCard
+        post={{
+          collection: "resources/movies",
+          id: review.identifier
+            .replace("Media/movies/", "")
+            .replace(/\.md$/, ""),
+          data: {
+            title: review.itemReviewed.name,
+            description: review.reviewBody,
+          },
+          body: review.reviewBody,
+        }}
+      />
+    ))
+  }
+</Layout>

src/pages/resources/recipes/[recipeName].astro

@@ -0,0 +1,66 @@
+---
+import Layout from "@layouts/Layout.astro";
+import { useTranslatedPath } from "@i18n/utils";
+import markdownToText from "@helpers/markdownToText";
+
+const path = useTranslatedPath(Astro.url);
+
+const collection = "resources/recipes";
+
+export async function getStaticPaths() {
+  const response = await fetch(
+    "http://localhost:8080/resources?name=Recipes/*",
+  );
+  const recipes = await response.json();
+
+  const paths = recipes.map((recipe: any) => {
+    return {
+      params: {
+        recipeName: recipe.identifier
+          .replace("Recipes/", "")
+          .replace(/\.md$/, ""),
+      },
+    };
+  });
+
+  return paths;
+}
+
+const response = await fetch(
+  //@ts-ignore
+  `http://localhost:8080/resources?name=Recipes/${Astro.params.recipeName}.md`,
+);
+const recipes = await response.json();
+const recipe = recipes[0];
+---
+
+<Layout title="Max Richter">
+  <div class="top-info flex items-center place-content-between m-y-2">
+    <a class="flex items-center gap-1 opacity-50" href={path("/" + collection)}>
+      <span class="i-tabler-arrow-left"></span> back
+    </a>
+    <div class="date opacity-50">
+      {
+        recipe.date?.toLocaleString("en-US", {
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        })
+      }
+    </div>
+  </div>
+
+  <h1>{recipe.name}</h1>
+
+  <h3>Ingredients</h3>
+  <ol>
+    {
+      recipe.recipeIngredient?.map((ingredient: any) => (
+        <li>{markdownToText(ingredient)}</li>
+      ))
+    }
+  </ol>
+
+  <h3>Instructions</h3>
+  <p>{recipe.recipeInstructions}</p>
+</Layout>

src/pages/resources/recipes/index.astro

@@ -0,0 +1,23 @@
+---
+import Layout from "@layouts/Layout.astro";
+import HeroCard from "@components/HeroCard.astro";
+
+const response = await fetch("http://localhost:8080/resources?name=Recipes/*");
+const recipes = await response.json();
+---
+
+<Layout title="Max Richter">
+  {
+    recipes.map((recipe: any) => (
+      <HeroCard
+        post={{
+          collection: "resources/recipes",
+          id: recipe.identifier.replace("Recipes/", "").replace(/\.md$/, ""),
+          data: {
+            title: recipe.name,
+          },
+        }}
+      />
+    ))
+  }
+</Layout>

src/pages/resources/series/[seriesName].astro

@@ -0,0 +1,54 @@
+---
+import Layout from "@layouts/Layout.astro";
+import { useTranslatedPath } from "@i18n/utils";
+
+const collection = "resources/series";
+
+const path = useTranslatedPath(Astro.url);
+
+export async function getStaticPaths() {
+  const response = await fetch(
+    "http://localhost:8080/resources?name=Media/series/*",
+  );
+  const seriesReviews = await response.json();
+
+  const paths = seriesReviews.map((review:any) => {
+    return {
+      params: {
+        seriesName: review.identifier
+          .replace("Media/series/", "")
+          .replace(/\.md$/, ""),
+      },
+    };
+  });
+
+  return paths;
+}
+
+const response = await fetch(
+  //@ts-ignore
+  `http://localhost:8080/resources?name=Media/series/${Astro.params.seriesName}.md`,
+);
+const reviewes = response.ok ? await response.json() : [];
+const review = reviewes[0];
+---
+
+<Layout title="Max Richter">
+  <div class="top-info flex items-center place-content-between m-y-2">
+    <a class="flex items-center gap-1 opacity-50" href={path("/" + collection)}>
+      <span class="i-tabler-arrow-left"></span> back
+    </a>
+    <div class="date opacity-50">
+      {
+        review.date?.toLocaleString("en-US", {
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        })
+      }
+    </div>
+  </div>
+
+  <h1>{review.itemReviewed?.name}</h1>
+  <p>{review.reviewBody}</p>
+</Layout>

src/pages/resources/series/index.astro

@@ -0,0 +1,29 @@
+---
+import Layout from "@layouts/Layout.astro";
+import HeroCard from "@components/HeroCard.astro";
+
+const response = await fetch(
+  "http://localhost:8080/resources?name=Media/series/*",
+);
+const seriesReviewes = await response.json();
+---
+
+<Layout title="Max Richter">
+  {
+    seriesReviewes.map((review: any) => (
+      <HeroCard
+        post={{
+          collection: "resources/series",
+          id: review.identifier
+            .replace("Media/series/", "")
+            .replace(/\.md$/, ""),
+          data: {
+            title: review.itemReviewed.name,
+            description: review.reviewBody,
+          },
+          body: review.reviewBody,
+        }}
+      />
+    ))
+  }
+</Layout>