feat: add movies

routes/api/movies/[name].ts

@@ -0,0 +1,23 @@
+import { HandlerContext } from "$fresh/server.ts";
+import { getDocument } from "@lib/documents.ts";
+import { parseMovie } from "@lib/movies.ts";
+
+export async function getMovie(name: string) {
+  const document = await getDocument(`Media/movies/${name}.md`);
+
+  const movie = parseMovie(document, name);
+
+  return movie;
+}
+
+export const handler = async (
+  _req: Request,
+  _ctx: HandlerContext,
+): Promise<Response> => {
+  const movie = await getMovie(_ctx.params.name);
+
+  const headers = new Headers();
+  headers.append("Content-Type", "application/json");
+
+  return new Response(JSON.stringify(movie));
+};

routes/api/movies/index.ts

@@ -0,0 +1,34 @@
+import { HandlerContext } from "$fresh/server.ts";
+import { getDocument, getDocuments } from "@lib/documents.ts";
+import { parseMovie } from "@lib/movies.ts";
+
+export async function getMovies() {
+  const documents = await getDocuments();
+
+  return Promise.all(
+    documents.filter((d) => {
+      return d.name.startsWith("Media/movies/") &&
+        d.contentType === "text/markdown" &&
+        !d.name.endsWith("index.md");
+    }).map(async (doc) => {
+      const document = await getDocument(doc.name);
+      const movie = parseMovie(document, doc.name);
+      return {
+        ...movie,
+        id: movie.id.replace(/\.md$/, "").replace(/^Media\/movies\//, ""),
+      };
+    }),
+  );
+}
+
+export const handler = async (
+  _req: Request,
+  _ctx: HandlerContext,
+): Promise<Response> => {
+  const headers = new Headers();
+  headers.append("Content-Type", "application/json");
+
+  const movies = await getMovies();
+
+  return new Response(JSON.stringify(movies), { headers });
+};

routes/index.tsx

@@ -1,6 +1,4 @@
 import { Head } from "$fresh/runtime.ts";
-import { useSignal } from "@preact/signals";
-import Counter from "@islands/Counter.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { Card } from "@components/Card.tsx";
 import { PageProps } from "$fresh/server.ts";
@@ -14,10 +12,15 @@ export default function Home(props: PageProps) {
       <MainLayout url={props.url}>
         <div class="flex flex-wrap justify-center items-center gap-4 px-4">
           <Card
-            title="Recipes"
-            image="/api/images?image=Recipes/images/placeholder.jpg&width=200&height=200"
+            title="🍽️ Recipes"
+            image="/placeholder.svg"
             link="/recipes"
           />
+          <Card
+            title="🍿 Movies"
+            image="/placeholder.svg"
+            link="/movies"
+          />
         </div>
       </MainLayout>
     </>

routes/movies/[name].tsx

@@ -1,44 +1,28 @@
 import { Handlers, PageProps } from "$fresh/server.ts";
-import { IngredientsList } from "@islands/IngredientsList.tsx";
-import { RecipeHero } from "@components/RecipeHero.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
-import { Recipe } from "@lib/recipes.ts";
-import { getRecipe } from "../api/recipes/[name].ts";
-import Counter from "@islands/Counter.tsx";
-import { useSignal } from "@preact/signals";
+import { Movie } from "@lib/movies.ts";
+import { getMovie } from "../api/movies/[name].ts";
+import { RecipeHero } from "@components/RecipeHero.tsx";
 
-export const handler: Handlers<Recipe | null> = {
+export const handler: Handlers<Movie | null> = {
   async GET(_, ctx) {
-    const recipe = await getRecipe(ctx.params.name);
-    return ctx.render(recipe);
+    const movie = await getMovie(ctx.params.name);
+    return ctx.render(movie);
   },
 };
 
-export default function Greet(props: PageProps<Recipe>) {
-  const recipe = props.data;
-
-  const portion = recipe.meta?.portion;
-  const amount = useSignal(portion || 1);
+export default function Greet(props: PageProps<Movie>) {
+  const movie = props.data;
 
   return (
     <MainLayout url={props.url}>
-      <RecipeHero recipe={recipe} />
+      <RecipeHero data={movie} backlink="/movies" />
       <div class="px-8 text-white mt-10">
-        <div class="flex items-center gap-8">
-          <h3 class="text-3xl my-5">Ingredients</h3>
-          {portion && <Counter count={amount} />}
-        </div>
-        <IngredientsList
-          ingredients={recipe.ingredients}
-          amount={amount}
-          portion={portion}
-        />
-        <h3 class="text-3xl my-5">Preparation</h3>
         <pre
           class="whitespace-break-spaces"
-          dangerouslySetInnerHTML={{ __html: recipe.preparation || "" }}
+          dangerouslySetInnerHTML={{ __html: movie.description || "" }}
         >
-          {recipe.preparation}
+          {movie.description}
         </pre>
       </div>
     </MainLayout>

routes/movies/index.tsx

@@ -4,14 +4,18 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import { Recipe } from "@lib/recipes.ts";
 import { getRecipes } from "../api/recipes/index.ts";
 import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
-export const handler: Handlers<Recipe[] | null> = {
+import { getMovies } from "../api/movies/index.ts";
+import { Movie } from "@lib/movies.ts";
+import { MovieCard } from "@components/MovieCard.tsx";
+
+export const handler: Handlers<Movie[] | null> = {
   async GET(_, ctx) {
-    const recipes = await getRecipes();
-    return ctx.render(recipes);
+    const movies = await getMovies();
+    return ctx.render(movies);
   },
 };
 
-export default function Greet(props: PageProps<Recipe[] | null>) {
+export default function Greet(props: PageProps<Movie[] | null>) {
   return (
     <MainLayout url={props.url}>
       <header class="flex gap-4 items-center mb-5 md:hidden">
@@ -23,11 +27,11 @@ export default function Greet(props: PageProps<Recipe[] | null>) {
           Back
         </a>
 
-        <h3 class="text-2xl text-white font-light">Recipes</h3>
+        <h3 class="text-2xl text-white font-light">🍿 Movies</h3>
       </header>
       <div class="flex flex-wrap items-center gap-4 px-4">
         {props.data?.map((doc) => {
-          return <RecipeCard recipe={doc} />;
+          return <MovieCard movie={doc} />;
         })}
       </div>
     </MainLayout>

routes/recipes/[name].tsx

@@ -22,7 +22,7 @@ export default function Greet(props: PageProps<Recipe>) {
 
   return (
     <MainLayout url={props.url}>
-      <RecipeHero recipe={recipe} />
+      <RecipeHero data={recipe} backlink="/recipes" />
       <div class="px-8 text-white mt-10">
         <div class="flex items-center gap-8">
           <h3 class="text-3xl my-5">Ingredients</h3>

routes/recipes/index.tsx

@@ -4,6 +4,7 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import { Recipe } from "@lib/recipes.ts";
 import { getRecipes } from "../api/recipes/index.ts";
 import IconArrowLeft from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/arrow-left.tsx";
+
 export const handler: Handlers<Recipe[] | null> = {
   async GET(_, ctx) {
     const recipes = await getRecipes();
@@ -23,7 +24,7 @@ export default function Greet(props: PageProps<Recipe[] | null>) {
           Back
         </a>
 
-        <h3 class="text-2xl text-white font-light">Recipes</h3>
+        <h3 class="text-2xl text-white font-light">🍽️ Recipes</h3>
       </header>
       <div class="flex flex-wrap items-center gap-4 px-4">
         {props.data?.map((doc) => {