77 lines
3.8 KiB
JavaScript
77 lines
3.8 KiB
JavaScript
// @ts-nocheck
|
|
import MainTemplate from "./MainTemplate"
|
|
import { Link, useParams } from "react-router"
|
|
import { convertDate } from "@/utils/convertDate"
|
|
import { usePosts } from "@/hooks/usePosts"
|
|
|
|
const BlogTemplate = () => {
|
|
const { slug } = useParams()
|
|
const { posts } = usePosts()
|
|
const post = posts?.find((x) => x.slug === slug)
|
|
|
|
return (
|
|
<MainTemplate>
|
|
<div className="container mx-auto p-4 grow">
|
|
{!post ? (
|
|
<div>Loading...</div>
|
|
) : (
|
|
<article className="prose prose-lg max-w-none">
|
|
<header className="mb-6 pb-4">
|
|
<h1 className="text-4xl font-bold mb-4 leading-tight inline-block scanlined px-1">
|
|
{post?.title}
|
|
</h1>
|
|
<div className="flex flex-wrap align-center gap-4 text-[#928374] condensed font-medium">
|
|
<time datetime={convertDate(post?.date)} className="text-sm">
|
|
{convertDate(post?.date)}
|
|
</time>
|
|
<div className="flex flex-wrap gap-3 align-center">
|
|
{post?.tags?.map((tag, i) => (
|
|
<Link
|
|
className="text-primary text-sm underline underline-offset-3 hover:text-[#689d6a]"
|
|
key={i}
|
|
to={`/tags/${tag}`}
|
|
>
|
|
{tag}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div
|
|
className="
|
|
[&>h2]:text-2xl [&>h2]:font-medium [&>h2]:my-4 [&>h2]:text-[#fabd2f]!
|
|
[&>h3]:text-xl [&>h3]:font-medium [&>h3]:my-4 [&>h3]:text-[#fabd2f]
|
|
[&>h4]:text-lg [&>h4]:font-medium [&>h4]:my-4 [&>h4]:text-[#fabd2f]
|
|
[&>p]:leading-7 [&>p:not(:first-child)]:mt-4
|
|
[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
|
|
[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground
|
|
[&>ul]:my-4 [&>ul]:ml-6 [&>ul]:list-disc [&>ul>li]:mt-2
|
|
[&>pre]:mt-6 [&>pre]:mb-6
|
|
[&>p+pre]:mt-6
|
|
[&>pre+p]:mt-6
|
|
[&>ul+pre]:mt-6
|
|
[&>li]:leading-[1.6]
|
|
[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-[#504945] [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal
|
|
[&>code]:relative [&>code]:rounded [&>code]:bg-[#504945] [&>code]:px-[0.3rem] [&>code]:py-[0.2rem] [&>code]:font-mono [&>code]:text-sm [&>code]:font-normal
|
|
[&>figure]:w-full [&>figure]:max-w-2xl [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto [&>figure>img]:max-w-full [&>figure>img]:max-h-[700px] [&>figure>img]:w-auto [&>figure>img]:h-auto [&>figure>img]:object-contain
|
|
[&>figure>img]:max-w-2xl [&>figure>img]:max-h-[700px] [&>figure>img]:w-auto [&>figure>img]:h-auto [&>figure>img]:object-contain
|
|
[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-[#bdae93] [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
|
|
[&>figure>figcaption>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80
|
|
[&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-[#689d6a] [&_a]:text-primary
|
|
[&>table]:w-full [&>table]:my-4
|
|
[&>table>thead>tr]:m-0 [&>table>thead>tr]:border-t [&>table>thead>tr]:p-0 [&>table>thead>tr:even]:bg-muted
|
|
[&>table>thead>tr>th]:border [&>table>thead>tr>th]:px-4 [&>table>thead>tr>th]:py-2 [&>table>thead>tr>th]:text-left [&>table>thead>tr>th]:font-bold [&>table>thead>tr>th[align=center]]:text-center [&>table>thead>tr>th[align=right]]:text-right
|
|
[&>table>tbody>tr]:m-0 [&>table>tbody>tr]:border-t [&>table>tbody>tr]:p-0 [&>table>tbody>tr:even]:bg-muted
|
|
[&>table>tbody>tr>td]:border [&>table>tbody>tr>td]:px-4 [&>table>tbody>tr>td]:py-2 [&>table>tbody>tr>td]:text-left [&>table>tbody>tr>td[align=center]]:text-center [&>table>tbody>tr>td[align=right]]:text-right
|
|
"
|
|
dangerouslySetInnerHTML={{ __html: post?.html }}
|
|
/>
|
|
</article>
|
|
)}
|
|
</div>
|
|
</MainTemplate>
|
|
)
|
|
}
|
|
|
|
export default BlogTemplate
|