kremalicious/blog

---
import type { CollectionEntry } from 'astro:content'
import Changelog from '@/components/Changelog/index.astro'
import Exif from '@/components/Exif/index.astro'
import Picture from '@/components/Picture/index.astro'
import RelatedPosts from '@/components/RelatedPosts/index.astro'
import Toc from '@/components/Toc.astro'
import LayoutBase from '@/layouts/Base/index.astro'
import type { Exif as ExifType } from '@/lib/exif'
import Actions from './Actions.astro'
import LinkActions from './LinkActions.astro'
import Meta from './Meta.astro'
import Title from './Title.astro'
import styles from './index.module.css'

type Props = CollectionEntry<'articles' | 'links' | 'photos'> & {
  lead?: string // comes in through remark plugin as html
  leadRaw?: string // comes in through remark plugin as plain text
  tableOfContents?: string // comes in through remark plugin as html
}

const { data, collection, lead, leadRaw, tableOfContents, slug } = Astro.props
const { title, date, updated, toc, githubLink, changelog } = data
const { image, exif } = data as CollectionEntry<'photos'>['data']
const { linkurl } = data as CollectionEntry<'links'>['data']
---

<LayoutBase {...data} description={leadRaw}>
  <article class={styles.entry}>
    <header>
      <Title linkurl={linkurl} title={title} date={date} updated={updated} />
    </header>

    {
      collection === 'articles' && lead ? (
        <div class={styles.lead} set:html={lead} />
      ) : collection === 'photos' ? (
        <slot />
      ) : null
    }

    {
      image && (
        <div class={styles.imageWrapper}>
          <Picture
            class={styles.image}
            width={1028}
            height={460}
            src={image}
            alt={title}
          />
        </div>
      )
    }

    {collection === 'photos' && exif && <Exif exif={exif as ExifType} />}

    {toc && tableOfContents && <Toc tableOfContents={tableOfContents} />}

    {collection !== 'photos' && <slot />}

    {changelog && <Changelog repo={changelog} />}

    {collection === 'links' && <LinkActions slug={slug} linkurl={linkurl} />}

    <Meta post={Astro.props} />

    {collection !== 'photos' && <Actions githubLink={githubLink as string} />}

    <RelatedPosts isPhotos={collection === 'photos'} post={Astro.props} />
  </article>
</LayoutBase>