---
import BaseLayout from "./BaseLayout.astro";
import "@/styles/global.css";
const { frontmatter } = Astro.props;
---

<BaseLayout pageTitle={frontmatter.title}>
  <h1>{frontmatter.title}</h1>
  <p><em>{frontmatter.description}</em></p>
  <p>{frontmatter.pubDate.toString().slice(0, 10)}</p>

  <p>Written by: {frontmatter.author}</p>

  <img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />

  <div class="tags">
    {
      frontmatter.tags.map((tag: string) => (
        <p class="tag">
          <a href={`/tags/${tag}`}>{tag}</a>
        </p>
      ))
    }
  </div>

  <slot />
</BaseLayout>
<style>
  a {
    color: #00539f;
  }

  .tags {
    display: flex;
    flex-wrap: wrap;
  }

  .tag {
    margin: 0.25em;
    border: dotted 1px #a1a1a1;
    border-radius: 0.5em;
    padding: 0.5em 1em;
    font-size: 1.15em;
    background-color: #f8fcfd;
  }
</style>