feat: add series

components/layouts/main.tsx

@@ -28,8 +28,6 @@ export const MainLayout = ({ children, url, title, context }: Props) => {
         {title &&
           <title>{title}</title>}
       </Head>
-      <RedirectSearchHandler />
-      <KMenu type="main" context={context} />
       <aside class="p-4 hidden md:block">
         <nav class="min-h-fit rounded-3xl p-3 grid gap-3 fixed t-0">
           {Object.values(resources).map((m) => {

fresh.gen.ts

@@ -21,16 +21,19 @@ import * as $15 from "./routes/api/query/index.ts";
 import * as $16 from "./routes/api/recipes/[name].ts";
 import * as $17 from "./routes/api/recipes/index.ts";
 import * as $18 from "./routes/api/resources.ts";
-import * as $19 from "./routes/api/tmdb/[id].ts";
-import * as $20 from "./routes/api/tmdb/credits/[id].ts";
-import * as $21 from "./routes/api/tmdb/query.ts";
-import * as $22 from "./routes/articles/[name].tsx";
-import * as $23 from "./routes/articles/index.tsx";
-import * as $24 from "./routes/index.tsx";
-import * as $25 from "./routes/movies/[name].tsx";
-import * as $26 from "./routes/movies/index.tsx";
-import * as $27 from "./routes/recipes/[name].tsx";
-import * as $28 from "./routes/recipes/index.tsx";
+import * as $19 from "./routes/api/series/index.ts";
+import * as $20 from "./routes/api/tmdb/[id].ts";
+import * as $21 from "./routes/api/tmdb/credits/[id].ts";
+import * as $22 from "./routes/api/tmdb/query.ts";
+import * as $23 from "./routes/articles/[name].tsx";
+import * as $24 from "./routes/articles/index.tsx";
+import * as $25 from "./routes/index.tsx";
+import * as $26 from "./routes/movies/[name].tsx";
+import * as $27 from "./routes/movies/index.tsx";
+import * as $28 from "./routes/recipes/[name].tsx";
+import * as $29 from "./routes/recipes/index.tsx";
+import * as $30 from "./routes/series/[name].tsx";
+import * as $31 from "./routes/series/index.tsx";
 import * as $$0 from "./islands/Counter.tsx";
 import * as $$1 from "./islands/IngredientsList.tsx";
 import * as $$2 from "./islands/KMenu.tsx";
@@ -62,16 +65,19 @@ const manifest = {
     "./routes/api/recipes/[name].ts": $16,
     "./routes/api/recipes/index.ts": $17,
     "./routes/api/resources.ts": $18,
-    "./routes/api/tmdb/[id].ts": $19,
-    "./routes/api/tmdb/credits/[id].ts": $20,
-    "./routes/api/tmdb/query.ts": $21,
-    "./routes/articles/[name].tsx": $22,
-    "./routes/articles/index.tsx": $23,
-    "./routes/index.tsx": $24,
-    "./routes/movies/[name].tsx": $25,
-    "./routes/movies/index.tsx": $26,
-    "./routes/recipes/[name].tsx": $27,
-    "./routes/recipes/index.tsx": $28,
+    "./routes/api/series/index.ts": $19,
+    "./routes/api/tmdb/[id].ts": $20,
+    "./routes/api/tmdb/credits/[id].ts": $21,
+    "./routes/api/tmdb/query.ts": $22,
+    "./routes/articles/[name].tsx": $23,
+    "./routes/articles/index.tsx": $24,
+    "./routes/index.tsx": $25,
+    "./routes/movies/[name].tsx": $26,
+    "./routes/movies/index.tsx": $27,
+    "./routes/recipes/[name].tsx": $28,
+    "./routes/recipes/index.tsx": $29,
+    "./routes/series/[name].tsx": $30,
+    "./routes/series/index.tsx": $31,
   },
   islands: {
     "./islands/Counter.tsx": $$0,

islands/KMenu/commands/add_movie_infos.ts

@@ -45,6 +45,8 @@ export const addMovieInfos: MenuEntry = {
   visible: () => {
     const loc = globalThis["location"];
     if (!getCookie("session_cookie")) return false;
-    return loc?.pathname?.includes("movie") && !loc.pathname.endsWith("movies");
+    return (loc?.pathname?.includes("movie") &&
+      !loc.pathname.endsWith("movies")) ||
+      (loc?.pathname?.includes("series") && !loc.pathname.endsWith("series"));
   },
 };

lib/resource/series.ts

@@ -0,0 +1,108 @@
+import { parseDocument } from "@lib/documents.ts";
+import { parse, stringify } from "yaml";
+import { createCrud } from "@lib/crud.ts";
+import { extractHashTags, formatDate } from "@lib/string.ts";
+import { fixRenderedMarkdown } from "@lib/helpers.ts";
+
+export type Series = {
+  id: string;
+  name: string;
+  description: string;
+  type: "series";
+  tags: string[];
+  meta: {
+    date: Date;
+    image: string;
+    author: string;
+    rating: number;
+    status: "not-seen" | "watch-again" | "finished";
+  };
+};
+
+function renderSeries(movie: Series) {
+  const meta = movie.meta;
+  if ("date" in meta) {
+    meta.date = formatDate(meta.date);
+  }
+
+  return fixRenderedMarkdown(`${
+    meta
+      ? `---
+${stringify(meta)}
+---`
+      : `---
+---`
+  }
+# ${movie.name}
+${movie.meta.image ? `![](${movie.meta.image})` : ""}
+${movie.tags.map((t) => `#${t}`).join(" ")}
+${movie.description}
+`);
+}
+
+export function parseSeries(original: string, id: string): Series {
+  const doc = parseDocument(original);
+
+  let meta = {} as Series["meta"];
+  let name = "";
+
+  const range = [Infinity, -Infinity];
+
+  for (const child of doc.children) {
+    if (child.type === "yaml") {
+      try {
+        meta = (parse(child.value) || {}) as Series["meta"];
+      } catch (_) {
+        // ignore here
+      }
+
+      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 tags = extractHashTags(description);
+  for (const tag of tags) {
+    description = description.replace("#" + tag, "");
+  }
+
+  return {
+    type: "series",
+    id,
+    name,
+    tags,
+    description,
+    meta,
+  };
+}
+
+const crud = createCrud<Series>({
+  prefix: "Media/series/",
+  parse: parseSeries,
+});
+
+export const getSeries = crud.read;
+export const getAllSeries = crud.readAll;
+export const createSeries = (series: Series) => {
+  const content = renderSeries(series);
+  return crud.create(series.id, content);
+};

lib/resources.ts

@@ -23,4 +23,10 @@ export const resources = {
     link: "/articles",
     prefix: "Media/articles/",
   },
+  "series": {
+    emoji: "🎥",
+    name: "Series",
+    link: "/series",
+    prefix: "Media/series/",
+  },
 } as const;

lib/tmdb.ts

@@ -6,6 +6,10 @@ export function searchMovie(query: string) {
   return moviedb.searchMovie({ query });
 }
 
+export function searchTVShow(query: string) {
+  return moviedb.searchTv({ query });
+}
+
 export function getMovie(id: number) {
   return moviedb.movieInfo({ id });
 }

lib/typesense.ts

@@ -5,6 +5,7 @@ import { getAllRecipes } from "@lib/resource/recipes.ts";
 import { getAllArticles } from "@lib/resource/articles.ts";
 import { createLogger } from "@lib/log.ts";
 import { debounce } from "https://deno.land/std@0.193.0/async/mod.ts";
+import { getAllSeries } from "@lib/resource/series.ts";
 
 const log = createLogger("typesense");
 
@@ -100,6 +101,7 @@ async function synchronizeWithTypesense() {
       getAllMovies(),
       getAllArticles(),
       getAllRecipes(),
+      getAllSeries(),
     ])).flat(); // Replace with your function to get all resources from the database
 
     const client = await getTypeSenseClient();

routes/api/series/index.ts

@@ -0,0 +1,6 @@
+import { Handlers } from "$fresh/server.ts";
+
+export const handler: Handlers = {
+  async GET() {
+  },
+};

routes/articles/[name].tsx

@@ -7,6 +7,7 @@ import { YoutubePlayer } from "@components/Youtube.tsx";
 import { HashTags } from "@components/HashTags.tsx";
 import { isYoutubeLink } from "@lib/string.ts";
 import { renderMarkdown } from "@lib/documents.ts";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
 
 export const handler: Handlers<Article | null> = {
   async GET(_, ctx) {
@@ -28,6 +29,8 @@ export default function Greet(props: PageProps<Article>) {
       title={`Article > ${article.name}`}
       context={article}
     >
+      <RedirectSearchHandler />
+      <KMenu type="main" context={{ type: "article" }} />
       <RecipeHero
         data={article}
         subline={[author, date.toString()]}

routes/articles/index.tsx

@@ -5,6 +5,7 @@ import { Card } from "@components/Card.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
 
 export const handler: Handlers<Article[] | null> = {
   async GET(_, ctx) {
@@ -27,6 +28,8 @@ export default function Greet(props: PageProps<Article[] | null>) {
 
         <h3 class="text-2xl text-white font-light">📝 Articles</h3>
       </header>
+      <RedirectSearchHandler />
+      <KMenu type="main" context={{ type: "article" }} />
       <Grid>
         {props.data?.map((doc) => {
           return (

routes/movies/[name].tsx

@@ -4,6 +4,8 @@ import { getMovie, Movie } from "@lib/resource/movies.ts";
 import { RecipeHero } from "@components/RecipeHero.tsx";
 import { HashTags } from "@components/HashTags.tsx";
 import { renderMarkdown } from "@lib/documents.ts";
+import { KMenu } from "@islands/KMenu.tsx";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
 
 export const handler: Handlers<Movie | null> = {
   async GET(_, ctx) {
@@ -21,6 +23,8 @@ export default function Greet(props: PageProps<Movie>) {
 
   return (
     <MainLayout url={props.url} title={`Movie > ${movie.name}`} context={movie}>
+      <RedirectSearchHandler />
+      <KMenu type="main" context={movie} />
       <RecipeHero
         data={movie}
         subline={[author, date.toString()]}

routes/movies/index.tsx

@@ -5,6 +5,7 @@ import { MovieCard } from "@components/MovieCard.tsx";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
 import { KMenu } from "@islands/KMenu.tsx";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
 
 export const handler: Handlers<Movie[] | null> = {
   async GET(_, ctx) {
@@ -16,6 +17,8 @@ export const handler: Handlers<Movie[] | null> = {
 export default function Greet(props: PageProps<Movie[] | null>) {
   return (
     <MainLayout url={props.url} title="Movies" context={{ type: "movie" }}>
+      <RedirectSearchHandler />
+      <KMenu type="main" context={{ type: "movie" }} />
       <header class="flex gap-4 items-center mb-5 md:hidden">
         <a
           class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"

routes/recipes/[name].tsx

@@ -5,6 +5,8 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import Counter from "@islands/Counter.tsx";
 import { useSignal } from "@preact/signals";
 import { getRecipe, Recipe } from "@lib/resource/recipes.ts";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
+import { KMenu } from "@islands/KMenu.tsx";
 
 export const handler: Handlers<Recipe | null> = {
   async GET(_, ctx) {
@@ -29,6 +31,8 @@ export default function Greet(props: PageProps<Recipe>) {
       title={`Recipes > ${recipe.name}`}
       context={recipe}
     >
+      <RedirectSearchHandler />
+      <KMenu type="main" context={recipe} />
       <RecipeHero
         data={recipe}
         backlink="/recipes"

routes/recipes/index.tsx

@@ -4,6 +4,8 @@ import { MainLayout } from "@components/layouts/main.tsx";
 import { getAllRecipes, Recipe } from "@lib/resource/recipes.ts";
 import { Grid } from "@components/Grid.tsx";
 import { IconArrowLeft } from "@components/icons.tsx";
+import { KMenu } from "@islands/KMenu.tsx";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
 
 export const handler: Handlers<Recipe[] | null> = {
   async GET(_, ctx) {
@@ -15,6 +17,8 @@ export const handler: Handlers<Recipe[] | null> = {
 export default function Greet(props: PageProps<Recipe[] | null>) {
   return (
     <MainLayout url={props.url} title="Recipes" context={{ type: "recipe" }}>
+      <RedirectSearchHandler />
+      <KMenu type="main" context={{ type: "recipe" }} />
       <header class="flex gap-4 items-center mb-2 lg:mb-5 md:hidden">
         <a
           class="px-4 lg:ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"

routes/series/[name].tsx

@@ -0,0 +1,53 @@
+import { Handlers, PageProps } from "$fresh/server.ts";
+import { MainLayout } from "@components/layouts/main.tsx";
+import { RecipeHero } from "@components/RecipeHero.tsx";
+import { HashTags } from "@components/HashTags.tsx";
+import { renderMarkdown } from "@lib/documents.ts";
+import { getSeries, Series } from "@lib/resource/series.ts";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
+import { KMenu } from "@islands/KMenu.tsx";
+
+export const handler: Handlers<Series | null> = {
+  async GET(_, ctx) {
+    const movie = await getSeries(ctx.params.name);
+    return ctx.render(movie);
+  },
+};
+
+export default function Greet(props: PageProps<Series>) {
+  const serie = props.data;
+
+  const { author = "", date = "" } = serie.meta;
+
+  const content = renderMarkdown(serie.description || "");
+
+  return (
+    <MainLayout url={props.url} title={`Serie > ${serie.name}`} context={serie}>
+      <RedirectSearchHandler />
+      <KMenu type="main" context={serie} />
+      <RecipeHero
+        data={serie}
+        subline={[author, date.toString()]}
+        editLink={`https://notes.max-richter.dev/Media/series/${serie.id}`}
+        backlink="/series"
+      />
+      {serie.tags.length > 0 && (
+        <>
+          <br />
+          <HashTags tags={serie.tags} />
+        </>
+      )}
+      <div class="px-8 text-white mt-10">
+        {serie?.description?.length > 80
+          ? <h2 class="text-4xl font-bold mb-4">Review</h2>
+          : <></>}
+        <pre
+          class="whitespace-break-spaces"
+          dangerouslySetInnerHTML={{ __html: content || "" }}
+        >
+          {content}
+        </pre>
+      </div>
+    </MainLayout>
+  );
+}

routes/series/index.tsx

@@ -0,0 +1,46 @@
+import { Handlers, PageProps } from "$fresh/server.ts";
+import { MainLayout } from "@components/layouts/main.tsx";
+import { Grid } from "@components/Grid.tsx";
+import { IconArrowLeft } from "@components/icons.tsx";
+import { getAllSeries, Series } from "@lib/resource/series.ts";
+import { Card } from "@components/Card.tsx";
+import { RedirectSearchHandler } from "@islands/Search.tsx";
+import { KMenu } from "@islands/KMenu.tsx";
+
+export const handler: Handlers<Series[] | null> = {
+  async GET(_, ctx) {
+    const movies = await getAllSeries();
+    return ctx.render(movies);
+  },
+};
+
+export default function Greet(props: PageProps<Series[] | null>) {
+  return (
+    <MainLayout url={props.url} title="Series" context={{ type: "series" }}>
+      <RedirectSearchHandler />
+      <KMenu type="main" context={{ type: "series" }} />
+      <header class="flex gap-4 items-center mb-5 md:hidden">
+        <a
+          class="px-4 ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
+          href="/"
+        >
+          <IconArrowLeft class="w-5 h-5" />
+          Back
+        </a>
+
+        <h3 class="text-2xl text-white font-light">🍿 Movies</h3>
+      </header>
+      <Grid>
+        {props.data?.map((doc) => {
+          return (
+            <Card
+              image={doc?.meta?.image || "/placeholder.svg"}
+              link={`/series/${doc.id}`}
+              title={doc.name}
+            />
+          );
+        })}
+      </Grid>
+    </MainLayout>
+  );
+}