feat: display articles

src/components/Image.astro

@@ -3,9 +3,8 @@ import type { ImageMetadata } from "astro";
 import { Picture as AstroImage } from "astro:assets";
 import { inferRemoteSize } from 'astro/assets/utils';
 import { generateThumbHash, getExifData } from "@helpers/image";
-import sharp from "sharp";
 interface Props {
-  src: ImageMetadata & { fsPath?: string };
+  src: ImageMetadata & { fsPath?: string, src?: string };
   alt: string;
   pictureClass?: string;
   class?: string;
@@ -16,7 +15,6 @@ interface Props {
 }
 
 async function checkImage(image: ImageMetadata) {
-console.log("Checking image: ", image);
   const src = image.src;
   try {
     if (src.startsWith("/@fs") || src.startsWith("/_astro")) return true;

src/components/resources/Article.astro

@@ -1,11 +1,10 @@
 ---
 import * as memorium from "@helpers/memorium";
-import { markdownToHtml, markdownToText } from "@helpers/markdown";
+import { markdownToHtml } from "@helpers/markdown";
 import Image from "@components/Image.astro";
+import type { ImageMetadata } from "astro";
 
 const { resource } = Astro.props;
-const ingredients = resource?.content?.recipeIngredient || [];
-const instructions = resource?.content?.recipeInstructions || [];
 ---
 
 <h1 class="text-4xl">{resource?.content?.headline}</h1>
@@ -14,7 +13,7 @@ const instructions = resource?.content?.recipeInstructions || [];
     resource?.content?.image && (
       <Image
         hash
-        src={{ src: memorium.getImageUrl(resource.content.image) }}
+        src={{ src: memorium.getImageUrl(resource.content.image) } as ImageMetadata}
         alt="Cover for {resource?.content?.name}"
         class="rounded-2xl overflow-hidden"
         pictureClass="rounded-2xl"

src/components/resources/Recipe.astro

@@ -1,7 +1,8 @@
 ---
 import * as memorium from "@helpers/memorium";
-import { markdownToHtml, markdownToText } from "@helpers/markdown";
+import { markdownToHtml } from "@helpers/markdown";
 import Image from "@components/Image.astro";
+import type { ImageMetadata } from "astro";
 
 const { resource } = Astro.props
 const ingredients = resource?.content?.recipeIngredient || [];
@@ -10,7 +11,7 @@ const instructions = resource?.content?.recipeInstructions || [];
 
 <h1 class="text-4xl">{resource?.content?.name}</h1>
 <div>
-  {resource?.content?.image && <Image hash src={{src: memorium.getImageUrl(resource.content.image)}} alt="Cover for {resource?.content?.name}" class="rounded-2xl overflow-hidden" pictureClass="rounded-2xl" />}
+  {resource?.content?.image && <Image hash src={{src: memorium.getImageUrl(resource.content.image)} as ImageMetadata} alt="Cover for {resource?.content?.name}" class="rounded-2xl overflow-hidden" pictureClass="rounded-2xl" />}
 </div>
 <p>{resource?.content?.description}</p>
 <h2 class="text-2xl">Ingredients</h2>

src/helpers/image.ts

@@ -17,7 +17,7 @@ export async function generateThumbHash(
 
     if (!imagePath) return;
 
-    let sp;
+    let sp: ReturnType<typeof sharp>;
     if (imagePath.startsWith("https://") || imagePath.startsWith("http://")) {
       const res = await fetch(imagePath);
       if (!res.ok) {

src/pages/resources/[resourceType]/[resourceName].astro

@@ -4,8 +4,6 @@ import { useTranslatedPath } from "@i18n/utils";
 import ResourceDisplay from "@components/resources/Display.astro";
 import * as memorium from "@helpers/memorium";
 import { resources as resourceTypes } from "../resources.ts";
-import { markdownToText } from "@helpers/markdown";
-import Image from "@components/Image.astro";
 
 const { resourceType, resourceName } = Astro?.params;
 

src/pages/resources/[resourceType]/index.astro

@@ -3,11 +3,10 @@ import Layout from "@layouts/Layout.astro";
 import HeroCard from "@components/HeroCard.astro";
 import * as memorium from "@helpers/memorium";
 import { resources as resourceTypes } from "../resources.ts";
-import { markdownToText } from "@helpers/markdown";
 
 const { resourceType } = Astro.params;
 
-async function safeGetResource(resType) {
+async function safeGetResource() {
   try {
     return await memorium.listResource(resourceType);
   } catch (error) {
@@ -15,7 +14,7 @@ async function safeGetResource(resType) {
   }
 }
 
-const resources = await safeGetResource(resourceType);
+const resources = await safeGetResource();
 
 export async function getStaticPaths() {
   return resourceTypes.map((type: any) => {
@@ -29,6 +28,7 @@ export async function getStaticPaths() {
 }
 
 function isValidResource(res) {
+  if(!res.content) return false;
   if (res?.content?.name) return true;
   if (res?.content?.headline) return true;
   return false;
@@ -38,7 +38,7 @@ function isValidResource(res) {
 <Layout title="Max Richter">
   {
     resources.content
-      .filter((res) => res && res?.content)
+      .filter((res) => isValidResource(res))
       .map((resource: any) => (
         <HeroCard
           post={{

src/pages/resources/resources.ts

@@ -1,6 +1,6 @@
 const collection = "resources";
 
-type Resource = {
+export type ResourceType = {
   id: string;
   collection: string;
   data: {
@@ -57,4 +57,4 @@ const recipes = {
 //   },
 // };
 
-export const resources: Resource[] = [recipes, articles];
+export const resources: ResourceType[] = [recipes, articles];