import '~/assets/remark42' import { THEME } from '~/assets/global' import TitleDescription from '~/components/TitleDesciption' import { IPost, dbPost, initDatabase } from '~/server/db' import styles from '~/styles/PostPage.module.css' import { GetStaticPaths, GetStaticProps } from 'next' import Head from 'next/head' import Link from 'next/link' import { createRef, useEffect } from 'react' const PostPage = (post: IPost) => { const remark42Ref = createRef() useEffect(() => { if (remark42Ref.current) { if (window.remark42Instance) { window.remark42Instance.destroy() } const initRemark42 = () => { window.remark42Instance = window.REMARK42.createInstance({ node: remark42Ref.current, host: THEME.comment.remark42.host, site_id: THEME.comment.remark42.siteId }) } if (window.REMARK42) { initRemark42() } else { window.addEventListener('REMARK42::ready', () => { initRemark42() }) } } }, [remark42Ref.current]) return (
{post.title} - {THEME.title} {post.tag ? ( ) : null} {post.image ? ( <> ) : null}

{post.title}

{post.tag ? (
Tags: {post.tag.map((t) => ( {t} ))}
) : null} {THEME.comment?.remark42 ? ( ) : null}
) } export default PostPage export const getStaticPaths: GetStaticPaths = async () => { await initDatabase() return { paths: dbPost.find().map(({ path }) => ({ params: { path: path.split(/\//g).map(encodeURIComponent) } })), fallback: false } } export const getStaticProps: GetStaticProps = async (ctx) => { await initDatabase() return { props: dbPost.findOne({ path: (ctx.params.path as string[]).map(decodeURIComponent).join('/') }) } }