57 lines
1.5 KiB
Plaintext
57 lines
1.5 KiB
Plaintext
---
|
|
import { Layout } from "virtual:astro-hashnode/components";
|
|
import { getPost } from '../../hn-gql';
|
|
import Tag from '../../components/Tag.astro';
|
|
import Author from '../../components/Author.astro';
|
|
import { Markup } from 'astro-remote';
|
|
import { Image } from 'astro:assets';
|
|
import RemoteImage from '../../components/astro-remote/RemoteImage.astro';
|
|
|
|
const { slug } = Astro.params;
|
|
|
|
const checkSlug = (slug:string|undefined) => {
|
|
if (slug !== undefined) {
|
|
return slug as string;
|
|
}
|
|
return " " as string;
|
|
}
|
|
|
|
const post = await getPost(checkSlug(slug));
|
|
---
|
|
{post ? (
|
|
<Layout pageTitle={post.title} ogImage={post.coverImage.url}>
|
|
<article class="bg-white p-3 mt-3 flex flex-col">
|
|
<Image
|
|
class="rounded-lg"
|
|
src={post.coverImage.url}
|
|
alt={post.title}
|
|
inferSize={true}
|
|
loading="eager"
|
|
/>
|
|
<h1 class="text-4xl font-bold pt-5">{post.title}</h1>
|
|
<h2 class="text-xl pt-3 pb-3" aria-label="CoverPhoto Subtitle">{post.subtitle}</h2>
|
|
|
|
<Author post={post} />
|
|
|
|
<div class="flex flex-wrap justify-center items-center mt-5 mb-5">
|
|
{post.tags && post.tags.map((tag) => <Tag tag={tag} />)}
|
|
</div>
|
|
|
|
<div class="post-details">
|
|
<Markup
|
|
content={post.content.html}
|
|
components={{
|
|
img: RemoteImage
|
|
}}
|
|
/>
|
|
|
|
</div>
|
|
</article>
|
|
</Layout>) : (
|
|
<Layout pageTitle="404">
|
|
<div class="text-center my-20">
|
|
<h1 class="text-4xl font-bold">404</h1>
|
|
<p>Post not found</p>
|
|
</div>
|
|
</Layout>
|
|
)} |