---
import { getEntry, type CollectionKey } from "astro:content";

interface Props {
  articleSlug: string;
  collectionName: CollectionKey;
}
const { articleSlug, collectionName } = Astro.props;

const article = await getEntry(collectionName, articleSlug);
const { Content } = await article!.render();
const articlePrettyName = article!.id.split("/").pop()!.replace(".md", "");
---

<div class="article">
  <div class="article-title">
    <h1>{articlePrettyName}&nbsp;</h1>
    {
      article!.data.lastUpdate && (
        <span class="last-update">Last Update: {article!.data.lastUpdate}</span>
      )
    }
  </div>
  <Content />
</div>

<style>
  :global(.article img) {
    max-width: 100%;
    margin: auto;
    display: block;
  }
  :global(.article p) {
    margin: 1em 0 1em 0;
  }
  :global(.article > h1, h2, h3, h4, h5) {
    margin: 1em 0 1em 0;
  }
  :global(.article-title h1) {
    margin: 0.5em 0 0 0;
  }
  .article .article-title {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
  }
  /* reduce indent of TOC list */
  :global(.article-title + ul) {
    margin: 1em 0 1em 0;
    padding: 0 0 0 20px;
  }
  /* font for all code */
  :global(.article code) {
    font-family: "Consolas", "Tahoma", sans-serif;
  }
  /* code block */
  :global(.article pre) {
    border: 1px solid #eee;
    border-left: 6px solid #ccc;
    padding: 6px 6px 4px 6px;
    border-radius: 6px;
  }
  /* inline code in paragraph*/
  :global(.article p code) {
    color: #be4750;
  }
  /* inline code in list item */
  :global(.article li > code) {
    color: #be4750;
  }
</style>