fix: some minor layout improvements

src/components/HeroCard.astro

@@ -25,10 +25,12 @@ const translatePath = useTranslatedPath(Astro.url);
 const t = useTranslations(Astro.url);
 
 const link = translatePath(`/${collection}/${id.split("/")[0]}`);
+
+const hasCover = typeof cover === "string" ? !!cover?.length : !!cover?.src;
 ---
 
 <Card
-  classes={`grid gradient border-1 border-neutral overflow-hidden  ${cover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}>
+  classes={`grid gradient border-1 border-neutral overflow-hidden  ${hasCover ? "grid-rows-[200px_1fr] xs:grid-rows-none xs:grid-cols-[1fr_200px]" : ""}`}>
   <Card.Content classes="px-8 py-7 order-last xs:order-first">
     {
       (date || body || rating !== undefined) && (
@@ -57,11 +59,12 @@ const link = translatePath(`/${collection}/${id.split("/")[0]}`);
     <Card.ReadMoreButton link={link} text={t("read-more")} />
   </Card.Content>
   {
-    cover && (
+    hasCover && (
       <a href={link}>
         <Image
           hash
           loader={false}
+          shadow={false}
           src={cover as ImageMetadata}
           alt={"cover for " + title}
           class="right-0 h-full object-cover object-center rounded-none border-l border-neutral"

src/components/Image.astro

@@ -23,7 +23,7 @@ async function checkImage(image: ImageMetadata) {
     const res = await inferRemoteSize(src);
     if (res.format) {
       image.format = res.format;
-      return true;
+      return res;
     } else {
       console.log("Failed to load: ", src);
     }
@@ -82,8 +82,10 @@ const sizes = thumbnail
       data-thumbhash={thumbhash}
       data-exif={JSON.stringify(exif)}
       inferSize={true}
+      width={imageOk?.width}
+      height={imageOk?.height}
       pictureAttributes={{
-        class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
+      class: `${hash ? "block h-full relative" : ""} ${loader ? "thumb" : ""} ${pictureClass}`,
       }}
       class={`${Astro.props.class} h-full w-full`}
       widths={sizes.map((size) => size.width)}
@@ -92,5 +94,5 @@ const sizes = thumbnail
         .join(", ")}>
       <slot />
     </AstroImage>
-  ) : undefined
+    ) : <div>{JSON.stringify({ image })}</div>
 }

src/components/card/Metadata.svelte

@@ -34,21 +34,23 @@
   };
 </script>
 
-<div class="flex gap-3 wrapper">
+{#if rating || date || readDuration || author}
-  {#if rating}
+  <div class="flex flex-wrap gap-3 wrapper">
-    <div class="text-sm bg-light">{formatRating(rating)}</div>
+    {#if rating}
-  {/if}
+      <div class="text-sm bg-light">{formatRating(rating)}</div>
-  {#if date}
+    {/if}
-    <time class="text-sm bg-light" datetime={iso(date)}
+    {#if date}
-      >{formatDate(date)}</time>
+      <time class="text-sm bg-light" datetime={iso(date)}
-  {/if}
+        >{formatDate(date)}</time>
-  {#if readDuration > 1}
+    {/if}
-    <div class="text-sm bg-light">{readDuration} mins read</div>
+    {#if readDuration > 1}
-  {/if}
+      <div class="text-sm bg-light">{readDuration} mins read</div>
-  {#if author}
+    {/if}
-    <div class="text-sm bg-light">{author}</div>
+    {#if author}
-  {/if}
+      <div class="text-sm bg-light">{author}</div>
-</div>
+    {/if}
+  </div>
+{/if}
 
 <style>
   .wrapper > * {

src/components/card/ReadMoreButton.svelte

@@ -6,6 +6,6 @@
 <a
   href={link}
   data-astro-prefetch
-  class="bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
+  class="mt-auto bg-light p-2 text-s rounded-md px-4 flex flex-0 items-center gap-2 w-fit"
   >{text}<span class="i-tabler-arrow-right inline-block w-4 h-4"></span>
 </a>

src/components/resources/Article.astro

@@ -18,7 +18,7 @@ const { resource } = Astro.props;
         }
         alt="Cover for {resource?.content?.name}"
         class="rounded-2xl overflow-hidden"
-        pictureClass="rounded-2xl"
+        pictureClass="rounded-2xl box-shadow"
       />
     )
   }

src/components/resources/Recipe.astro

@@ -20,25 +20,28 @@ const instructions = resource?.content?.recipeInstructions || [];
         }
         alt="Cover for {resource?.content?.name}"
         class="rounded-2xl overflow-hidden"
-        pictureClass="rounded-2xl"
+        pictureClass="rounded-2xl box-shadow"
       />
     )
   }
 </div>
-<main class="flex flex-col gap-4" set:html={markdownToHtml(resource?.content?.description ?? "")} />
+<div
-<h2 class="text-2xl">Ingredients</h2>
+  class="flex flex-col gap-4 px-4"
-<ul class="list-disc">
+  set:html={markdownToHtml(resource?.content?.description ?? "")}
+/>
+<h2 class="text-2xl px-4">Ingredients</h2>
+<ul class="list-disc px-10">
   {
-    ingredients.map((ingredient: string) => (
+    ingredients.filter(s => !!s?.length).map((ingredient: string) => (
       <li set:html={markdownToHtml(ingredient)} />
     ))
   }
 </ul>
 
-<h2 class="text-2xl">Steps</h2>
+<h2 class="text-2xl px-4">Steps</h2>
-<ol class="list-decimal">
+<ol class="list-decimal px-10">
   {
-    instructions.map((ingredient: string) => (
+    instructions.filter(s => !!s?.length).map((ingredient: string) => (
       <li set:html={markdownToHtml(ingredient)} />
     ))
   }

src/components/resources/Review.astro

@@ -24,7 +24,7 @@ function formatRating(rating: string | number) {
         }
         alt="Cover for {resource?.content?.name}"
         class="rounded-2xl overflow-hidden"
-        pictureClass="rounded-2xl w-1/2 mr-4 mb-4 float-left"
+        pictureClass="rounded-2xl w-1/2 mr-4 mb-4 float-left box-shadow"
       />
     )
   }

src/layouts/global.css

@@ -107,14 +107,23 @@ picture.thumb-loading::before {
 header::before {
   content: "";
   position: absolute;
-  width: 10px;
+  width: 20px;
-  height: 10px;
+  height: 20px;
   right: 3rem;
-  bottom: -10px;
+  bottom: -20px;
-  transform: rotate(90deg);
+  background: var(--background-dark);
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 249 249' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.5 0H0V249C0.268799 111.435 111.423 0 248.5 0Z' fill='white'/%3E%3C/svg%3E");
+  mask-image: radial-gradient(circle at bottom left,
+      transparent 19.5px,
+      rgba(0, 0, 0, .5) 20px,
+      #000 20.5px);
+  box-shadow: 0px 0px 10px red;
 }
 
-.dark header::before {
+.box-shadow {
-  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 249 249' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M248.5 0H0V249C0.268799 111.435 111.423 0 248.5 0Z' fill='%2316161e'/%3E%3C/svg%3E");
+  box-shadow:
+    0px 1px 1px rgba(3, 7, 18, 0.02),
+    0px 5px 4px rgba(3, 7, 18, 0.03),
+    0px 12px 9px rgba(3, 7, 18, 0.05),
+    0px 20px 15px rgba(3, 7, 18, 0.06),
+    0px 32px 24px rgba(3, 7, 18, 0.08);
 }

src/pages/about/index.astro

@@ -1,5 +0,0 @@
----
-import Layout from "@layouts/Layout.astro";
----
-
-<Layout title="Home"> Sup people :) </Layout>

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

@@ -47,7 +47,7 @@ const resource = await memorium.listResource(
       {
         resource?.content?.url && (
           <a class="flex gap-1 items-center" href={resource?.content?.url}>
-            link
+            source link
             <span class="inline-block w-3 h-3 i-tabler-external-link" />
           </a>
         )