Merge pull request #24 from powdr-labs/reduce-banner-width

Reduce banner width

data/blog/new-post-with-banner.mdx

@@ -0,0 +1,33 @@
+---
+title: 'My New Blog Post with Banner'
+date: '2023-04-15'
+lastmod: '2023-04-15'
+tags: ['blog', 'feature']
+draft: false
+summary: 'This is a sample blog post demonstrating the use of a banner image in the frontmatter.'
+images: ['/static/images/powdr-banner.png']
+layout: PostBanner
+---
+
+# Welcome to My New Blog Post
+
+This is a sample blog post that demonstrates the use of a banner image and the PostBanner layout. The banner image is specified in the frontmatter of this Markdown file.
+
+## What's Different?
+
+In the frontmatter of this post, we've added two important elements:
+
+1. `images: ['/static/images/sample-banner.jpg']` - This specifies the banner image to be used.
+2. `layout: PostBanner` - This tells the blog to use the PostBanner layout for this post.
+
+## Rest of the Post
+
+The rest of your post content goes here. You can use all the Markdown features as usual, such as:
+
+- Lists
+- **Bold text**
+- *Italic text*
+- [Links](https://example.com)
+- And more!
+
+Remember to actually add the image file `sample-banner.jpg` to your `/static/images/` directory for this to work properly.

layouts/PostBanner.tsx

@@ -29,11 +29,9 @@ export default function PostMinimal({ content, next, prev, children }: LayoutPro
         <div>
           <div className="space-y-1 pb-10 text-center dark:border-gray-700">
             <div className="w-full">
-              <Bleed>
-                <div className="relative aspect-[2/1] w-full">
-                  <Image src={displayImage} alt={title} fill className="object-cover" />
-                </div>
-              </Bleed>
+              <div className="relative mx-auto aspect-[2/1] w-full max-w-3xl">
+                <Image src={displayImage} alt={title} fill className="object-cover" />
+              </div>
             </div>
             <div className="relative pt-10">
               <PageTitle>{title}</PageTitle>