77 lines
3.6 KiB
TypeScript
77 lines
3.6 KiB
TypeScript
// @ts-nocheck
|
|
import MainTemplate from "./MainTemplate"
|
|
import { Badge } from "@/components/ui/badge"
|
|
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>
|
|
{!post ? (
|
|
<div>Loading...</div>
|
|
) : (
|
|
<>
|
|
<div className="mb-5">
|
|
<h2 className="text-2xl font-semibold lg:text-2xl border-b pb-3">
|
|
{post?.title}
|
|
</h2>
|
|
</div>
|
|
<div className="flex md:flex-row md:justify-between flex-col mb-8">
|
|
<span className="text-muted-foreground">
|
|
{convertDate(post?.date)}
|
|
</span>
|
|
<div className="flex gap-1 mt-3 md:mt-0">
|
|
{post?.tags?.map((tag, i) => (
|
|
<Badge asChild variant="secondary">
|
|
<Link key={i} to={`/tags/${tag}`}>
|
|
{tag}
|
|
</Link>
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="
|
|
[&>h2]:text-xl [&>h2]:border-b [&>h2]:pb-2 [&>h2]:font-semibold [&>h2]:first:mt-0 [&>h2:not(:first-child)]:mt-8
|
|
[&>h3]:text-xl [&>h3]:sm:text-1xl [&>h3]:font-semibold [&>h3:not(:first-child)]:mt-5
|
|
[&>h4]:text-lg [&>h4]:sm:text-xl [&>h4]:font-semibold [&>h4:not(:first-child)]:mt-4
|
|
[&>p]:leading-7 [&>p:not(:first-child)]:mt-6
|
|
[&>p+:is(h1,h2,h3,h4,h5,h6)]:mt-6
|
|
[&>blockquote]:mt-4 [&>blockquote]:border-l-2 [&>blockquote]:pl-6 [&>blockquote]:text-muted-foreground [&>blockquote]:text-sm
|
|
[&>ul]:my-4 [&>ul]:ml-6 [&>ul]:list-disc [&>ul>li]:mt-2
|
|
[&>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
|
|
[&>code]:relative [&>code]:rounded [&>code]:bg-muted [&>code]:px-[0.3rem] [&>code]:py-[0.2rem] [&>code]:font-mono [&>code]:text-sm [&>code]:font-normal
|
|
[&>table>tbody>tr:nth-child(even)]:bg-muted
|
|
[&>table>thead>tr:nth-child(even)]:bg-muted
|
|
[&_table_code]:text-sm font-normal
|
|
[&>pre]:mt-6 [&>pre]:mb-6
|
|
[&>p+pre]:mt-6
|
|
[&>pre+p]:mt-6
|
|
[&>ul+pre]:mt-6
|
|
[&>li]:leading-[1.5]
|
|
[&_li_code]:relative [&_li_code]:rounded [&_li_code]:bg-muted [&_li_code]:px-[0.3rem] [&_li_code]:py-[0.2rem] [&_li_code]:font-mono [&_li_code]:text-sm [&_li_code]:font-normal
|
|
[&>p]:mt-6 [&>p]:leading-[1.5]
|
|
[&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-muted-foreground
|
|
[&>figure]:w-full [&>figure]:flex [&>figure]:flex-col [&>figure]:items-center [&>figure]:justify-center [&>figure]:mb-6 [&>figure]:mx-auto
|
|
[&>figure>img]:w-full
|
|
[&>figure>figcaption]:text-sm [&>figure>figcaption]:text-muted-foreground [&>figure>figcaption]:mt-3 [&>figure>figcaption]:text-center
|
|
[&>figure>figcaption>a]:text-primary [&>figure>figcaption>a:hover]:text-primary/80
|
|
"
|
|
dangerouslySetInnerHTML={{ __html: post?.html }}
|
|
/>
|
|
</>
|
|
)}
|
|
</MainTemplate>
|
|
)
|
|
}
|
|
|
|
export default BlogTemplate
|