Added Masthead, CMDPalette and PostHeader Components

src/layouts/ContentLayout.astro

@@ -0,0 +1,58 @@
+---
+import type { CollectionEntry } from 'astro:content';
+import { render } from 'astro:content';
+import Base from '@layouts/Base.astro';
+import Header from '@compontents/layout/PostHeader/index.astro';
+import { getBreadcrumbs } from '@lib/utils/paths';
+import { toMilitaryDTG } from '@lib/utils/date';
+
+interface Props {
+  entry: CollectionEntry<'articles'> | CollectionEntry<'elements'>;
+  collectionName: string;
+}
+
+const { entry, collectionName } = Astro.props;
+const { Content } = await render(entry);
+const { title, summary, subtitle, updateDate, publishDate, tags, seo } =
+  entry.data;
+
+const breadcrumbs = await getBreadcrumbs(
+  entry.data.parent ?? null,
+  collectionName,
+);
+const formattedPublishDate = toMilitaryDTG(publishDate);
+const formattedUpdateDate = updateDate
+  ? toMilitaryDTG(updateDate)
+  : formattedPublishDate;
+const rawCover = entry.data.cover;
+const headerCover =
+  rawCover?.src && rawCover?.showInHeader
+    ? {
+        src: rawCover.src,
+        alt: rawCover.alt ?? '',
+        caption: rawCover.caption ?? '',
+        showInHeader: rawCover.showInHeader,
+      }
+    : undefined;
+---
+
+<Base title={title} seo={seo}>
+  <main>
+    <article>
+      <Header
+        title={title}
+        breadcrumbs={breadcrumbs}
+        publishDate={formattedPublishDate}
+        updateDate={formattedUpdateDate}
+        cover={headerCover}
+        tags={tags}
+        subtitle={subtitle}
+      />
+      <div class="content">
+        <slot name="before-content" />
+        <Content />
+        <slot name="after-content" />
+      </div>
+    </article>
+  </main>
+</Base>