Added Masthead, CMDPalette and PostHeader Components

src/components/layout/PostHeader/Cover.astro

@@ -0,0 +1,75 @@
+---
+import { Image } from 'astro:assets';
+interface Props {
+  src: string;
+  alt: string;
+  caption?: string;
+}
+const { src, alt, caption } = Astro.props;
+
+const images = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/content/**/cover/*.{png,jpg,jpeg,webp,avif}',
+  { eager: true },
+);
+
+const imagePath = `/src${src}`;
+const image = images[imagePath]?.default;
+---
+
+<figure class="cover">
+  {
+    image ? (
+      <Image
+        class="image"
+        src={image}
+        alt={alt}
+        widths={[600, 900, 1280, 1440, 1600, 1920]}
+        sizes="100vw"
+        loading="lazy"
+      />
+    ) : (
+      <img class="image" src={src} alt={alt} loading="lazy" />
+    )
+  }
+  <figcaption class="caption">
+    <div class="wrapper">
+      {
+        caption ? (
+          <span class="caption-text">{caption}</span>
+        ) : (
+          <span class="caption-meta">{src}</span>
+        )
+      }
+    </div>
+  </figcaption>
+</figure>
+
+<style>
+  .cover {
+    @mixin border-t 12px, solid, var(--color-surface-inverse);
+  }
+
+  .image {
+    width: 100%;
+    height: auto;
+    max-height: 60vw;
+    object-fit: cover;
+  }
+
+  .caption {
+    padding: var(--spacing-snug);
+    font-family: var(--font-mono);
+    color: var(--color-text-inverse);
+    background-color: var(--color-surface-inverse);
+  }
+
+  .wrapper {
+    font-size: var(font-size-responsive);
+    text-align: center;
+  }
+
+  .caption-text,
+  .caption-meta {
+    font-size: var(--typo-size-sm);
+  }
+</style>