62 lines
No EOL
2 KiB
Text
62 lines
No EOL
2 KiB
Text
---
|
|
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">← Back to posts</a>
|
|
</div>
|
|
|
|
</Layout>
|
|
<style>
|
|
span.date {
|
|
color: #4c566a;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 1.5rem;
|
|
display: block;
|
|
}
|
|
</style> |