fix: recipes fixes + add OG images

maxpou · Feb 22, 2024 · aeb65c6 · aeb65c6
1 parent 424d10f
commit aeb65c6
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 12 deletions.
diff --git a/src/components/BlogCard.astro b/src/components/BlogCard.astro
@@ -1,6 +1,6 @@
 ---
 import type { CollectionEntry } from 'astro:content'
-import { Image } from 'astro:assets'
+import { Picture } from 'astro:assets'
 import FrFlag from './icons/FrFlag.png'
 import FormattedDate from './FormattedDate.astro'
 
@@ -25,10 +25,11 @@ const { post, firstBigger = true } = Astro.props
 >
   {
     post.data.cover && (
-      <Image
+      <Picture
         src={post.data.cover}
         width={420}
         height={224}
+        formats={['webp', 'avif', 'jpeg']}
         alt={`Cover picture for ${post.data.title}`}
         class="h-56 w-full rounded-b-none rounded-t-lg object-cover transition"
       />

diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
@@ -47,7 +47,7 @@ const formattedTranslations = formatBlogTranslation(translations)
   translations={formattedTranslations}
   seo={{
     type: 'article',
-    ogImage: imageShare?.src,
+    ogImage: imageShare?.src || cover.src,
   }}
 >
   <article>

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -16,6 +16,7 @@ const { title, cover, description } = Astro.props
   description={description || ''}
   seo={{
     type: 'article',
+    ogImage: cover?.src,
   }}
 >
   <article>

diff --git a/src/pages/recipes/[...slug].astro b/src/pages/recipes/[...slug].astro
@@ -24,5 +24,8 @@ const { Content } = await recipe.render()
 >
   <Prose>
     <Content />
+    <div class="mt-6">
+      <a href="../">← Back to recipes</a>
+    </div>
   </Prose>
 </Page>
diff --git a/src/pages/recipes/index.astro b/src/pages/recipes/index.astro
@@ -5,14 +5,14 @@ import Layout from '../../components/Layout.astro'
 import FormattedDate from '../../components/FormattedDate.astro'
 import PageTitle from '../../components/PageTitle.astro'
 
-const posts = (await getCollection('recipes')).sort(
+const recipes = (await getCollection('recipes')).sort(
   (a, b) => b.data.date.valueOf() - a.data.date.valueOf(),
 )
 ---
 
 <Layout
   title="Max's kitchen"
-  description={`My ${posts.length} cooking recipes that I have published so far.`}
+  description={`My ${recipes.length} cooking recipes that I have published so far.`}
   seo={{
     type: 'article',
   }}
@@ -29,22 +29,31 @@ const posts = (await getCollection('recipes')).sort(
     </p>
     <ul>
       {
-        posts.map(post => (
+        recipes.map((recipe, i) => (
           <li>
-            <a href={`/recipes/${post.slug}/`}>
-              {post.data.cover && (
+            <a href={`/recipes/${recipe.slug}/`} title={recipe.data.title}>
+              {i === 0 ? (
                 <Image
-                  src={post.data.cover}
+                  src={recipe.data.cover}
+                  alt={`Cover picture for ${recipe.data.title}`}
+                  width={1020}
+                  height={500}
+                  class="rounded-xl shadow-xl mx-auto h-[500px] object-cover w-full"
+                />
+              ) : (
+                <Image
+                  src={recipe.data.cover}
                   width={720}
                   height={360}
-                  alt={`Cover picture for ${post.data.title}`}
+                  alt={`Cover picture for ${recipe.data.title}`}
+                  class="rounded-xl shadow-xl mx-auto h-[360px] object-cover w-full"
                 />
               )}
               <header class="text-2xl font-semibold dark:text-gray-100">
-                {post.data.title}
+                {recipe.data.title}
               </header>
               <p class="date">
-                <FormattedDate date={post.data.date} />
+                <FormattedDate date={recipe.data.date} />
               </p>
             </a>
           </li>