blog/src/pages/index.astro

---
import LayoutBase from '@layouts/Base/index.astro'
import PostTeaser from '@components/PostTeaser/index.astro'
import { loadAndFormatCollection } from '@lib/astro'
import PhotoTeaser from '@components/PhotoTeaser.astro'
import type { CollectionEntry } from 'astro:content'
import More from '@components/More.astro'

const articles = (await loadAndFormatCollection('articles')).slice(
  0,
  4
) as CollectionEntry<'articles'>[]
// const links = await loadAndFormatCollection('links')
const photos = (await loadAndFormatCollection('photos')).slice(
  0,
  12
) as CollectionEntry<'photos'>[]
---

<style>
  .section:not(:first-of-type) {
    margin-top: calc(var(--spacer) * 1.5);
  }

  .sectionTitle {
    margin-top: 0;
    color: var(--text-color-light);
  }

  .photos {
    display: grid;
    gap: var(--spacer);
    grid-template-columns: repeat(2, 1fr);
  }

  @media (min-width: 40rem) {
    .photos {
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
  }
</style>

<LayoutBase title={''}>
  <section class="section">
    <h2 class="sectionTitle">Articles</h2>
    <div class="articles">
      {articles.map((article) => <PostTeaser post={article} hideDate />)}
    </div>
    <More href="/archive/1/">All Articles & Links</More>
  </section>

  <section class="section">
    <h2 class="sectionTitle">Photos</h2>
    <div class="photos">
      {photos.map((photo) => <PhotoTeaser post={photo} />)}
    </div>

    <More href="/photos/1/">All Photos</More>
  </section>
</LayoutBase>