---
import Layout from '../../layouts/Layout.astro';
import { getCollection } from 'astro:content';
import Comments from "../../components/Comments.astro";
import {getImage} from "astro:assets";
import { unified } from "unified";
import { select } from "unist-util-select";
import remarkMdx from "remark-mdx";
import remarkParse from "remark-parse";

export async function getStaticPaths() {
  const blogEntries = await getCollection('posts');
  return blogEntries.map(entry => ({
    params: { slug: entry.slug }, props: { entry },
  }));
}

const { entry } = Astro.props;
const { Content } = await entry.render();

const slug = Astro.params.slug;

// get featured image and use it as og:image
// use the custom cover image if it exists, otherwise use the featured image file in the same directory
const featuredImages = import.meta.glob(`/src/content/posts/*/featured.*`,{import:'default',eager:true});
const customFeaturedImage = entry.data.cover?.src
const matchedImage = Object.keys(featuredImages).find(path => path.includes(slug));
let matchedImage_src;
if (matchedImage && !customFeaturedImage) {
    matchedImage_src = await getImage({src: featuredImages[matchedImage], format: 'webp'}) || null;
}

const cover = customFeaturedImage || matchedImage_src?.src || `/post/${slug}/featured.png` || '';
---

<Layout
  title={entry.data.title}
  path={`~/grassblock/micr0blog/blog/${slug}`}
  description={entry.data.description}
  ogImage={cover}
>
      <h1 class="title">{entry.data.title}</h1>
      <span class="date">{new Date(entry.data.pubDate).toISOString().split('T')[0]}</span>
      <div class="content">
        <Content />
      </div>

    <div style="margin-top: 2rem; border-top: 1px solid var(--border-color); padding-top: 1rem;">
    <h2>Comments</h2>
    <Comments path={`post/${slug}`} />
    <a href="/blog">&larr; Back to posts</a>
  </div>

</Layout>
<style>
span.date {
    color: #4c566a;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    display: block;
}
</style>