feat: add thumbhashes to images closes #6

lib/resource/articles.ts

@@ -4,6 +4,7 @@ import { createCrud } from "@lib/crud.ts";
 import { stringify } from "$std/yaml/stringify.ts";
 import { extractHashTags, formatDate } from "@lib/string.ts";
 import { fixRenderedMarkdown } from "@lib/helpers.ts";
+import { getThumbhash } from "@lib/cache/image.ts";
 
 export type Article = {
   id: string;
@@ -15,6 +16,7 @@ export type Article = {
     status: "finished" | "not-finished";
     date: Date;
     link: string;
+    thumbnail?: string;
     image?: string;
     author?: string;
     rating?: number;
@@ -24,6 +26,7 @@ export type Article = {
 const crud = createCrud<Article>({
   prefix: "Media/articles/",
   parse: parseArticle,
+  hasThumbnails: true,
 });
 
 function renderArticle(article: Article) {

lib/resource/movies.ts

@@ -1,4 +1,4 @@
-import { parseDocument, renderMarkdown } from "@lib/documents.ts";
+import { parseDocument } from "@lib/documents.ts";
 import { parse, stringify } from "yaml";
 import { createCrud } from "@lib/crud.ts";
 import { extractHashTags, formatDate } from "@lib/string.ts";
@@ -13,6 +13,7 @@ export type Movie = {
   meta: {
     date: Date;
     image: string;
+    thumbnail?: string;
     author: string;
     rating: number;
     status: "not-seen" | "watch-again" | "finished";
@@ -98,6 +99,7 @@ export function parseMovie(original: string, id: string): Movie {
 const crud = createCrud<Movie>({
   prefix: "Media/movies/",
   parse: parseMovie,
+  hasThumbnails: true,
 });
 
 export const getMovie = crud.read;

lib/resource/recipes.ts

@@ -37,6 +37,7 @@ export type Recipe = {
     rating?: number;
     portion?: number;
     author?: string;
+    thumbnail?: string;
   };
 };
 
@@ -186,6 +187,7 @@ export function parseRecipe(original: string, id: string): Recipe {
 const crud = createCrud<Recipe>({
   prefix: `Recipes/`,
   parse: parseRecipe,
+  hasThumbnails: true,
 });
 
 export const getAllRecipes = crud.readAll;

lib/resource/series.ts

@@ -3,6 +3,7 @@ import { parse, stringify } from "yaml";
 import { createCrud } from "@lib/crud.ts";
 import { extractHashTags, formatDate } from "@lib/string.ts";
 import { fixRenderedMarkdown } from "@lib/helpers.ts";
+import { getThumbhash } from "@lib/cache/image.ts";
 
 export type Series = {
   id: string;
@@ -15,6 +16,7 @@ export type Series = {
     image: string;
     author: string;
     rating: number;
+    thumbnail?: string;
     status: "not-seen" | "watch-again" | "finished";
   };
 };
@@ -98,9 +100,23 @@ export function parseSeries(original: string, id: string): Series {
 const crud = createCrud<Series>({
   prefix: "Media/series/",
   parse: parseSeries,
+  hasThumbnails: true,
 });
 
-export const getSeries = crud.read;
+export const getSeries = (id: string) =>
+  crud.read(id).then(async (serie) => {
+    const imageUrl = serie.meta?.image;
+    if (!imageUrl) return serie;
+    const thumbhash = await getThumbhash({ url: imageUrl });
+    if (!thumbhash) return serie;
+    return {
+      ...serie,
+      meta: {
+        ...serie.meta,
+        thumbnail: btoa(String.fromCharCode(...thumbhash)),
+      },
+    };
+  });
 export const getAllSeries = crud.readAll;
 export const createSeries = (series: Series) => {
   const content = renderSeries(series);