---
// Component Imports
import BaseHead from '../components/BaseHead.astro';
import BlogHeader from '../components/BlogHeader.astro';
import BlogPostPreview from '../components/BlogPostPreview.astro';

// Component Script:
// You can write any JavaScript/TypeScript that you'd like here.
// It will run during the build, but never in the browser.
// All variables are available to use in the HTML template below.
let title = 'Example Blog';
let description = 'The perfect starter for your perfect blog.';
let permalink = 'https://example.com/';

// Data Fetching: List all Markdown posts in the repo.
let allPosts = Astro.fetchContent('./posts/*.md');
allPosts = allPosts.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));

// Full Astro Component Syntax:
// https://github.com/snowpackjs/astro/blob/main/docs/core-concepts/astro-components.md
---
<html lang="en">
  <head>
    <BaseHead title={title} description={description} permalink={permalink} />
    <link rel="stylesheet" href="/blog.css" />

    <style>
      body {
        width: 100%;
        display: grid;
        grid-template-rows: 3.5rem 1fr;
        --gutter: 0.5rem;
        --doc-padding: 2rem;
      }

      header {
        width: 100%;
        height: 100%;
        background-color: var(--theme-bg-offset);
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .content {
        margin-top: 4rem;
        margin-bottom: 8rem;
      }

      .content :global(main > * + *) {
        margin-top: 1rem;
      }

      .intro {
        padding-bottom: 4rem;
        margin-bottom: 2rem;
        border-bottom: 4px solid var(--theme-divider);
      }

      .intro > * {
        margin: 0;
      }

      .latest {
        font-size: 2.5rem;
        font-weight: 700;
      }
    </style>
  </head>

  <body>
    <BlogHeader />
    <div class="layout">
      <article class="content">
        <section class="intro">
          <h1 class="latest">{title}</h1>
          <p>{description}</p>
        </section>
        <section>
          {allPosts.map(p => <BlogPostPreview post={p} />)}
        </section>
      </article>
    </div>
  </body>
</html>
