feat: trying to add hashes to scripts

routes/recipes/[name].tsx

@@ -1,4 +1,4 @@
-import { Handlers, PageProps } from "$fresh/server.ts";
+import { PageProps } from "fresh";
 import { IngredientsList } from "@islands/IngredientsList.tsx";
 import { MainLayout } from "@components/layouts/main.tsx";
 import Counter from "@islands/Counter.tsx";
@@ -14,24 +14,24 @@ import { fetchResource } from "@lib/marka/index.ts";
 import { RecipeResource } from "@lib/marka/schema.ts";
 import { parseIngredients } from "@lib/parseIngredient.ts";
 import { parseRating } from "@lib/helpers.ts";
+import { HttpError } from "fresh";
+import { define } from "../../utils.ts";
 
-export const handler: Handlers<
-  { recipe: RecipeResource; session: unknown } | null
-> = {
-  async GET(_, ctx) {
+export const handler = define.handlers({
+  async GET(ctx) {
     try {
       const recipe = await fetchResource<RecipeResource>(
         `recipes/${ctx.params.name}.md`,
       );
       if (!recipe) {
-        return ctx.renderNotFound();
+        throw new HttpError(404);
       }
-      return ctx.render({ recipe, session: ctx.state.session });
+      return { data: { recipe, session: ctx.state.session } };
     } catch (_e) {
-      return ctx.renderNotFound();
+      throw new HttpError(404);
     }
   },
-};
+});
 
 function ValidRecipe({
   recipe,
@@ -48,11 +48,13 @@ function ValidRecipe({
         <h3 class="text-3xl my-5">Ingredients</h3>
         {portion && <Counter count={amount} />}
       </div>
-      <IngredientsList
-        ingredients={ingredients}
-        amount={amount}
-        portion={portion}
-      />
+      {
+        <IngredientsList
+          ingredients={ingredients}
+          amount={amount}
+          portion={portion}
+        />
+      }
       <h3 class="text-3xl my-5">Preparation</h3>
       <div class="pl-2">
         <ol class="list-decimal grid gap-4">
@@ -135,7 +137,7 @@ export default function Page(
           )
           : (
             <div class="whitespace-break-spaces markdown-body">
-              {JSON.stringify(recipe)}
+              {recipe}
             </div>
           )}
       </div>

routes/recipes/index.tsx

@@ -1,7 +1,7 @@
-import { Handlers, PageProps } from "$fresh/server.ts";
+import { Context, PageProps } from "fresh";
 import { MainLayout } from "@components/layouts/main.tsx";
 import { Grid } from "@components/Grid.tsx";
-import { IconArrowLeft } from "@components/icons.tsx";
+import { TbArrowLeft } from "@preact-icons/tb";
 import { KMenu } from "@islands/KMenu.tsx";
 import { RedirectSearchHandler } from "@islands/Search.tsx";
 import { ResourceCard } from "@components/Card.tsx";
@@ -9,27 +9,27 @@ import { listResources } from "@lib/marka/index.ts";
 import { parseResourceUrl, searchResource } from "@lib/search.ts";
 import { GenericResource, RecipeResource } from "@lib/marka/schema.ts";
 
-export const handler: Handlers<
-  { recipes: RecipeResource[] | null; searchResults?: GenericResource[] }
-> = {
-  async GET(req, ctx) {
+export const handler = {
+  async GET(ctx: Context<{ test: number }>) {
+    const req = ctx.req;
     const recipes = await listResources<RecipeResource>("recipes");
     const searchParams = parseResourceUrl(req.url);
     const searchResults = searchParams &&
       await searchResource({ ...searchParams, types: ["recipes"] });
-    return ctx.render({ recipes, searchResults });
+    return { data: { recipes, searchResults } };
   },
 };
 
-export default function Greet(
-  props: PageProps<
-    { recipes: RecipeResource[] | null; searchResults: GenericResource[] }
-  >,
+export default function Page(
+  { data, url }: PageProps<{
+    recipes: RecipeResource[] | null;
+    searchResults: GenericResource[];
+  }>,
 ) {
-  const { recipes, searchResults } = props.data;
+  const { recipes, searchResults } = data;
   return (
     <MainLayout
-      url={props.url}
+      url={url}
       title="Recipes"
       searchResults={searchResults}
       context={{ type: "recipes" }}
@@ -41,7 +41,7 @@ export default function Greet(
           class="px-4 lg:ml-4 py-2 bg-gray-300 text-gray-800 rounded-lg flex items-center gap-1"
           href="/"
         >
-          <IconArrowLeft class="w-5 h-5" />
+          <TbArrowLeft class="w-5 h-5" />
           Back
         </a>