blog/src/layouts/ContentLayout.astro

---
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';
import { extractSidenotes } from '@lib/utils/extractors';
import Sidenote from '@compontents/content/Sidenote.astro';

interface Props {
  entry: CollectionEntry<'articles'> | CollectionEntry<'elements'> | CollectionEntry<'kindred'>;
  collectionName: string;
}

const { entry, collectionName } = Astro.props;
const { Content } = await render(entry);
const { title, summary, subtitle, updateDate, publishDate, tags, seo } =
  entry.data;
const sidenotes = entry.body ? extractSidenotes(entry.body) : [];
const hasMargin = Astro.slots.has('margin') || !!sidenotes;

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="frame">
        <div class="body content prose">
          <slot name="before-content" />
          <Content />
          <slot name="after-content" />
        </div>
        {hasMargin &&(
          <aside class="margin">
            <slot name="margin" />
            {sidenotes.map(note => <Sidenote {...note} />)}
          </aside>
        )}
      </div>
    </article>
  </main>
</Base>

<style>
  .frame {
    @mixin layout-wrapper;

    position: relative;

    @media (--bp-desktop) {
      display: grid;
      grid-template-columns: var(--layout-content-width) var(--layout-margin-width);
      gap: var(--layout-gutter);
    }
  }

  .body {
    min-width: 0;
  }

  .margin {
    min-width: 0;
  }
</style>