copyright, cover images

src/components/Footer.astro

@@ -3,7 +3,11 @@ import '@fortawesome/fontawesome-free/css/fontawesome.css';
 import '@fortawesome/fontawesome-free/css/solid.css';
 ---
 
-<footer class="flex flex-row-reverse gap-1 items-center p-4 border-t">
+<footer class="flex gap-1 items-center p-4 border-t">
+  <span class="text-gray-500">Mordechai Dror © 2023-present</span>
+
+  <div class="flex-1"></div>
+
   <a href="/rss.xml"
      target="_blank">
     <i class='fa-solid fa-rss fa-lg'></i>

src/content/config.ts

@@ -2,16 +2,14 @@ import { z, defineCollection } from 'astro:content';
 
 const posts = defineCollection({
   type: 'content',
-  schema: z.object({
+  schema: ({image}) => z.object({
     title: z.string(),
     description: z.string(),
     tags: z.array(z.string()),
+    platforms: z.array(z.string()),
     publishedAt: z.date(),
+    coverImage: image().optional(),
   }),
 });
 
-const attachments = defineCollection({
-  type: 'content',
-});
-
-export const collections = { posts, attachments };
+export const collections = { posts };

src/content/posts/aws-amplify-functions-on-steroids.md

@@ -8,6 +8,7 @@ tags:
 platforms:
   - https://vorant94.medium.com/aws-amplify-functions-on-steroids-bffbfc09960c
 publishedAt: 2023-07-05
+coverImage: ../attachments/amplify-functions-on-steroids-cover.png
 ---
 ### What we have out of the box
 

src/pages/posts/[...slug].astro

@@ -1,6 +1,7 @@
 ---
 import { getCollection, type CollectionEntry } from 'astro:content';
 import Layout from '../../layouts/Layout.astro';
+import { getImage, Image } from "astro:assets";
 
 interface Props {
   post: CollectionEntry<'posts'>;
@@ -16,12 +17,20 @@ export async function getStaticPaths() {
 }
 
 const { post } = Astro.props;
-const { Content } = await post.render();
 
+const {title, coverImage} = post.data;
+const coverImageSrc = coverImage && (await getImage({src: coverImage, format: coverImage.format})).src;
+
+const { Content } = await post.render();
 ---
 
-<Layout title={post.data.title}>
+<Layout title={title}
+        image={coverImageSrc}>
   <article class="prose">
+    <h1>{title}</h1>
+
+    { coverImage && <Image src={coverImage} alt="" /> }
+
     <Content />
   </article>