refactor: use mdx rsc
This commit is contained in:
Timothy Lin
@ -9,7 +9,7 @@ import SectionContainer from '@/components/SectionContainer'
|
||||
import Image from '@/components/Image'
|
||||
import Tag from '@/components/Tag'
|
||||
import siteMetadata from '@/data/siteMetadata'
|
||||
import ScrollTopAndComment from '@/components/ScrollTopAndComment'
|
||||
// import ScrollTopAndComment from '@/components/ScrollTopAndComment'
|
||||
|
||||
const editUrl = (path) => `${siteMetadata.siteRepo}/blob/master/data/${path}`
|
||||
const discussUrl = (path) =>
|
||||
@ -33,12 +33,12 @@ interface LayoutProps {
|
||||
export default function PostLayout({ content, authorDetails, next, prev, children }: LayoutProps) {
|
||||
const { filePath, path, slug, date, title, tags } = content
|
||||
const basePath = path.split('/')[0]
|
||||
const [loadComments, setLoadComments] = useState(false)
|
||||
// const [loadComments, setLoadComments] = useState(false)
|
||||
|
||||
return (
|
||||
<SectionContainer>
|
||||
{/* <BlogSEO url={`${siteMetadata.siteUrl}/${path}`} authorDetails={authorDetails} {...content} /> */}
|
||||
<ScrollTopAndComment />
|
||||
{/* <ScrollTopAndComment /> */}
|
||||
<article>
|
||||
<div className="xl:divide-y xl:divide-gray-200 xl:dark:divide-gray-700">
|
||||
<header className="pt-6 xl:pb-6">
|
||||
@ -108,10 +108,10 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
|
||||
className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300"
|
||||
id="comment"
|
||||
>
|
||||
{!loadComments && (
|
||||
{/* {!loadComments && (
|
||||
<button onClick={() => setLoadComments(true)}>Load Comments</button>
|
||||
)}
|
||||
{loadComments && <Comments commentsConfig={siteMetadata.comments} slug={slug} />}
|
||||
{loadComments && <Comments commentsConfig={siteMetadata.comments} slug={slug} />} */}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -1,89 +1,89 @@
|
||||
import { useState, ReactNode } from 'react'
|
||||
import { Comments } from 'pliny/comments'
|
||||
import { formatDate } from 'pliny/utils/formatDate'
|
||||
import { CoreContent } from 'pliny/utils/contentlayer'
|
||||
import type { Blog } from 'contentlayer/generated'
|
||||
import Link from '@/components/Link'
|
||||
import PageTitle from '@/components/PageTitle'
|
||||
import SectionContainer from '@/components/SectionContainer'
|
||||
// import { BlogSEO } from '@/components/SEO'
|
||||
import siteMetadata from '@/data/siteMetadata'
|
||||
import ScrollTopAndComment from '@/components/ScrollTopAndComment'
|
||||
// import { useState, ReactNode } from 'react'
|
||||
// import { Comments } from 'pliny/comments'
|
||||
// import { formatDate } from 'pliny/utils/formatDate'
|
||||
// import { CoreContent } from 'pliny/utils/contentlayer'
|
||||
// import type { Blog } from 'contentlayer/generated'
|
||||
// import Link from '@/components/Link'
|
||||
// import PageTitle from '@/components/PageTitle'
|
||||
// import SectionContainer from '@/components/SectionContainer'
|
||||
// // import { BlogSEO } from '@/components/SEO'
|
||||
// import siteMetadata from '@/data/siteMetadata'
|
||||
// import ScrollTopAndComment from '@/components/ScrollTopAndComment'
|
||||
|
||||
interface LayoutProps {
|
||||
content: CoreContent<Blog>
|
||||
children: ReactNode
|
||||
next?: { path: string; title: string }
|
||||
prev?: { path: string; title: string }
|
||||
}
|
||||
// interface LayoutProps {
|
||||
// content: CoreContent<Blog>
|
||||
// children: ReactNode
|
||||
// next?: { path: string; title: string }
|
||||
// prev?: { path: string; title: string }
|
||||
// }
|
||||
|
||||
export default function PostLayout({ content, next, prev, children }: LayoutProps) {
|
||||
const [loadComments, setLoadComments] = useState(false)
|
||||
// export default function PostLayout({ content, next, prev, children }: LayoutProps) {
|
||||
// const [loadComments, setLoadComments] = useState(false)
|
||||
|
||||
const { path, slug, date, title } = content
|
||||
// const { path, slug, date, title } = content
|
||||
|
||||
return (
|
||||
<SectionContainer>
|
||||
{/* <BlogSEO url={`${siteMetadata.siteUrl}/${path}`} {...content} /> */}
|
||||
<ScrollTopAndComment />
|
||||
<article>
|
||||
<div>
|
||||
<header>
|
||||
<div className="space-y-1 border-b border-gray-200 pb-10 text-center dark:border-gray-700">
|
||||
<dl>
|
||||
<div>
|
||||
<dt className="sr-only">Published on</dt>
|
||||
<dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
|
||||
<time dateTime={date}>{formatDate(date, siteMetadata.locale)}</time>
|
||||
</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div>
|
||||
<PageTitle>{title}</PageTitle>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<div className="grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0">
|
||||
<div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
|
||||
<div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
|
||||
</div>
|
||||
{siteMetadata.comments && (
|
||||
<div className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300" id="comment">
|
||||
{!loadComments && (
|
||||
<button onClick={() => setLoadComments(true)}>Load Comments</button>
|
||||
)}
|
||||
{loadComments && <Comments commentsConfig={siteMetadata.comments} slug={slug} />}
|
||||
</div>
|
||||
)}
|
||||
<footer>
|
||||
<div className="flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base">
|
||||
{prev && (
|
||||
<div className="pt-4 xl:pt-8">
|
||||
<Link
|
||||
href={`/${prev.path}`}
|
||||
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
aria-label={`Previous post: ${prev.title}`}
|
||||
>
|
||||
← {prev.title}
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
{next && (
|
||||
<div className="pt-4 xl:pt-8">
|
||||
<Link
|
||||
href={`/${next.path}`}
|
||||
className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
aria-label={`Next post: ${next.title}`}
|
||||
>
|
||||
{next.title} →
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</SectionContainer>
|
||||
)
|
||||
}
|
||||
// return (
|
||||
// <SectionContainer>
|
||||
// {/* <BlogSEO url={`${siteMetadata.siteUrl}/${path}`} {...content} /> */}
|
||||
// <ScrollTopAndComment />
|
||||
// <article>
|
||||
// <div>
|
||||
// <header>
|
||||
// <div className="space-y-1 border-b border-gray-200 pb-10 text-center dark:border-gray-700">
|
||||
// <dl>
|
||||
// <div>
|
||||
// <dt className="sr-only">Published on</dt>
|
||||
// <dd className="text-base font-medium leading-6 text-gray-500 dark:text-gray-400">
|
||||
// <time dateTime={date}>{formatDate(date, siteMetadata.locale)}</time>
|
||||
// </dd>
|
||||
// </div>
|
||||
// </dl>
|
||||
// <div>
|
||||
// <PageTitle>{title}</PageTitle>
|
||||
// </div>
|
||||
// </div>
|
||||
// </header>
|
||||
// <div className="grid-rows-[auto_1fr] divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0">
|
||||
// <div className="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0">
|
||||
// <div className="prose max-w-none pb-8 pt-10 dark:prose-dark">{children}</div>
|
||||
// </div>
|
||||
// {siteMetadata.comments && (
|
||||
// <div className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300" id="comment">
|
||||
// {!loadComments && (
|
||||
// <button onClick={() => setLoadComments(true)}>Load Comments</button>
|
||||
// )}
|
||||
// {loadComments && <Comments commentsConfig={siteMetadata.comments} slug={slug} />}
|
||||
// </div>
|
||||
// )}
|
||||
// <footer>
|
||||
// <div className="flex flex-col text-sm font-medium sm:flex-row sm:justify-between sm:text-base">
|
||||
// {prev && (
|
||||
// <div className="pt-4 xl:pt-8">
|
||||
// <Link
|
||||
// href={`/${prev.path}`}
|
||||
// className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
// aria-label={`Previous post: ${prev.title}`}
|
||||
// >
|
||||
// ← {prev.title}
|
||||
// </Link>
|
||||
// </div>
|
||||
// )}
|
||||
// {next && (
|
||||
// <div className="pt-4 xl:pt-8">
|
||||
// <Link
|
||||
// href={`/${next.path}`}
|
||||
// className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
|
||||
// aria-label={`Next post: ${next.title}`}
|
||||
// >
|
||||
// {next.title} →
|
||||
// </Link>
|
||||
// </div>
|
||||
// )}
|
||||
// </div>
|
||||
// </footer>
|
||||
// </div>
|
||||
// </div>
|
||||
// </article>
|
||||
// </SectionContainer>
|
||||
// )
|
||||
// }
|
||||
|
||||
Reference in New Issue
Block a user