feat: add movies

components/Card.tsx

@@ -10,7 +10,7 @@ export function Card(
         backgroundImage: `url(${image})`,
         backgroundSize: "cover",
       }}
-      class="bg-gray-900 text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
+      class="text-white rounded-3xl shadow-md p-4 relative overflow-hidden 
   lg:w-56 lg:h-56 
   sm:w-40 sm:h-40 
   w-32 h-32"

components/MovieCard.tsx

@@ -0,0 +1,18 @@
+import { Card } from "@components/Card.tsx";
+import { Movie } from "@lib/movies.ts";
+
+export function MovieCard({ movie }: { movie: Movie }) {
+  const { meta: { image = "/placeholder.svg" } = {} } = movie;
+
+  const imageUrl = image?.startsWith("Media/movies/")
+    ? `/api/images?image=${image}&width=200&height=200`
+    : image;
+
+  return (
+    <Card
+      title={movie.name}
+      image={imageUrl}
+      link={`/movies/${movie.id}`}
+    />
+  );
+}

components/RecipeHero.tsx

@@ -2,12 +2,18 @@ import { Recipe } from "@lib/recipes.ts";
 
 import IconExternalLink from "https://deno.land/x/tabler_icons_tsx@0.0.3/tsx/external-link.tsx";
 import { Star } from "@components/Stars.tsx";
-export function RecipeHero({ recipe }: { recipe: Recipe }) {
-  const { meta: { image } = {} } = recipe;
+export function RecipeHero(
+  { data, backlink }: {
+    backlink: string;
+    data: { meta?: { image?: string; link?: string }; name: string };
+  },
+) {
+  const { meta: { image } = {} } = data;
 
-  const imageUrl = image?.startsWith("Recipes/images/")
-    ? `/api/images?image=${image}&width=800`
-    : image;
+  const imageUrl =
+    (image?.startsWith("Recipes/images/") || image?.startsWith("Media/movies/"))
+      ? `/api/images?image=${image}&width=800`
+      : image;
 
   return (
     <div
@@ -27,17 +33,17 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
       <div class="absolute top-8 left-8 ">
         <a
           class="px-4 py-2 bg-gray-300 text-gray-800 rounded-lg block"
-          href="/recipes"
+          href={backlink}
         >
           Back
         </a>
       </div>
 
-      {recipe.meta?.link &&
+      {data.meta?.link &&
         (
           <div class="absolute top-8 right-8 ">
             <a
-              href={recipe.meta.link}
+              href={data.meta.link}
               target="__blank"
               class="p-2 ml-4 bg-gray-300 text-gray-800 rounded-lg flex"
               name="Link to Original recipe"
@@ -56,10 +62,10 @@ export function RecipeHero({ recipe }: { recipe: Recipe }) {
           class="relative text-4xl font-bold z-10"
           style={{ color: imageUrl ? "#1F1F1F" : "white" }}
         >
-          {recipe.name}
+          {data.name}
         </h2>
 
-        {recipe.meta?.rating && <Star rating={recipe.meta.rating} />}
+        {data.meta?.rating && <Star rating={data.meta.rating} />}
       </div>
     </div>
   );

fresh.gen.ts

@@ -6,13 +6,15 @@ import * as $0 from "./routes/_404.tsx";
 import * as $1 from "./routes/_app.tsx";
 import * as $2 from "./routes/api/images/index.ts";
 import * as $3 from "./routes/api/index.ts";
-import * as $4 from "./routes/api/recipes/[name].ts";
-import * as $5 from "./routes/api/recipes/index.ts";
-import * as $6 from "./routes/index.tsx";
-import * as $7 from "./routes/movies/[name].tsx";
-import * as $8 from "./routes/movies/index.tsx";
-import * as $9 from "./routes/recipes/[name].tsx";
-import * as $10 from "./routes/recipes/index.tsx";
+import * as $4 from "./routes/api/movies/[name].ts";
+import * as $5 from "./routes/api/movies/index.ts";
+import * as $6 from "./routes/api/recipes/[name].ts";
+import * as $7 from "./routes/api/recipes/index.ts";
+import * as $8 from "./routes/index.tsx";
+import * as $9 from "./routes/movies/[name].tsx";
+import * as $10 from "./routes/movies/index.tsx";
+import * as $11 from "./routes/recipes/[name].tsx";
+import * as $12 from "./routes/recipes/index.tsx";
 import * as $$0 from "./islands/Counter.tsx";
 import * as $$1 from "./islands/IngredientsList.tsx";
 
@@ -22,13 +24,15 @@ const manifest = {
     "./routes/_app.tsx": $1,
     "./routes/api/images/index.ts": $2,
     "./routes/api/index.ts": $3,
-    "./routes/api/recipes/[name].ts": $4,
-    "./routes/api/recipes/index.ts": $5,
-    "./routes/index.tsx": $6,
-    "./routes/movies/[name].tsx": $7,
-    "./routes/movies/index.tsx": $8,
-    "./routes/recipes/[name].tsx": $9,
-    "./routes/recipes/index.tsx": $10,
+    "./routes/api/movies/[name].ts": $4,
+    "./routes/api/movies/index.ts": $5,
+    "./routes/api/recipes/[name].ts": $6,
+    "./routes/api/recipes/index.ts": $7,
+    "./routes/index.tsx": $8,
+    "./routes/movies/[name].tsx": $9,
+    "./routes/movies/index.tsx": $10,
+    "./routes/recipes/[name].tsx": $11,
+    "./routes/recipes/index.tsx": $12,
   },
   islands: {
     "./islands/Counter.tsx": $$0,

lib/movies.ts

@@ -0,0 +1,70 @@
+import {
+  parseDocument,
+  parseFrontmatter,
+  renderMarkdown,
+} from "@lib/documents.ts";
+
+export type Movie = {
+  id: string;
+  name: string;
+  description: string;
+  hashtags: string[];
+  meta: {
+    published: Date;
+    image: string;
+    author: string;
+    rating: number;
+    status: "not-seen" | "watch-again" | "finished";
+  };
+};
+
+export function parseMovie(original: string, id: string): Movie {
+  const doc = parseDocument(original);
+
+  let meta = {} as Movie["meta"];
+  let name = "";
+
+  const range = [Infinity, -Infinity];
+
+  for (const child of doc.children) {
+    if (child.type === "yaml") {
+      meta = parseFrontmatter(child.value) as Movie["meta"];
+
+      if (meta["rating"] && typeof meta["rating"] === "string") {
+        meta.rating = [...meta.rating?.matchAll("⭐")].length;
+      }
+
+      continue;
+    }
+
+    if (
+      child.type === "heading" && child.depth === 1 && !name &&
+      child.children.length === 1 && child.children[0].type === "text"
+    ) {
+      name = child.children[0].value;
+      continue;
+    }
+
+    if (name) {
+      const start = child.position?.start.offset || Infinity;
+      const end = child.position?.end.offset || -Infinity;
+      if (start < range[0]) range[0] = start;
+      if (end > range[1]) range[1] = end;
+    }
+  }
+
+  let description = original.slice(range[0], range[1]);
+  const hashtags = [];
+  for (const [hashtag] of original.matchAll(/\B(\#[a-zA-Z]+\b)(?!;)/g)) {
+    hashtags.push(hashtag.replace(/\#/g, ""));
+    description = description.replace(hashtag, "");
+  }
+
+  return {
+    id,
+    name,
+    hashtags,
+    description: renderMarkdown(description),
+    meta,
+  };
+}

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) => {

static/g10.svg:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=about:internet

static/g8.svg:Zone.Identifier

@@ -1,3 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-HostUrl=about:internet

static/vecteezy_picture-gallery-image-line-icon-vector-illustration_.svg:Zone.Identifier

@@ -1,4 +0,0 @@
-[ZoneTransfer]
-ZoneId=3
-ReferrerUrl=https://cloudconvert.com/
-HostUrl=https://storage.cloudconvert.com/tasks/748af8fd-a74c-4374-b73b-fa782814df9d/vecteezy_picture-gallery-image-line-icon-vector-illustration_.svg?AWSAccessKeyId=cloudconvert-production&Expires=1690830191&Signature=fBYB2Q0uKneAnH7%2BrXXzsWOKUXw%3D&response-content-disposition=attachment%3B%20filename%3D%22vecteezy_picture-gallery-image-line-icon-vector-illustration_.svg%22&response-content-type=image%2Fsvg%2Bxml