style: 迁移到 v2.

app/blog/[...slug]/page.tsx

@@ -1,54 +1,54 @@
-import 'css/prism.css'
-import 'katex/dist/katex.css'
+import 'css/prism.css';
+import 'katex/dist/katex.css';
 
-import PageTitle from '@/components/PageTitle'
-import { components } from '@/components/MDXComponents'
-import { MDXLayoutRenderer } from 'pliny/mdx-components'
-import { sortPosts, coreContent } from 'pliny/utils/contentlayer'
-import { allBlogs, allAuthors } from 'contentlayer/generated'
-import type { Authors, Blog } from 'contentlayer/generated'
-import PostSimple from '@/layouts/PostSimple'
-import PostLayout from '@/layouts/PostLayout'
-import PostBanner from '@/layouts/PostBanner'
-import { Metadata } from 'next'
-import siteMetadata from '@/data/siteMetadata'
+import PageTitle from '@/components/PageTitle';
+import { components } from '@/components/MDXComponents';
+import { MDXLayoutRenderer } from 'pliny/mdx-components';
+import { sortPosts, coreContent } from 'pliny/utils/contentlayer';
+import { allBlogs, allAuthors } from 'contentlayer/generated';
+import type { Authors, Blog } from 'contentlayer/generated';
+import PostSimple from '@/layouts/PostSimple';
+import PostLayout from '@/layouts/PostLayout';
+import PostBanner from '@/layouts/PostBanner';
+import { Metadata } from 'next';
+import siteMetadata from '@/data/siteMetadata';
 
-const isProduction = process.env.NODE_ENV === 'production'
-const defaultLayout = 'PostLayout'
+const isProduction = process.env.NODE_ENV === 'production';
+const defaultLayout = 'PostLayout';
 const layouts = {
   PostSimple,
   PostLayout,
   PostBanner,
-}
+};
 
 export async function generateMetadata({
   params,
 }: {
-  params: { slug: string[] }
+  params: { slug: string[] };
 }): Promise<Metadata | undefined> {
-  const slug = decodeURI(params.slug.join('/'))
-  const post = allBlogs.find((p) => p.slug === slug)
-  const authorList = post?.authors || ['default']
+  const slug = decodeURI(params.slug.join('/'));
+  const post = allBlogs.find((p) => p.slug === slug);
+  const authorList = post?.authors || ['default'];
   const authorDetails = authorList.map((author) => {
-    const authorResults = allAuthors.find((p) => p.slug === author)
-    return coreContent(authorResults as Authors)
-  })
+    const authorResults = allAuthors.find((p) => p.slug === author);
+    return coreContent(authorResults as Authors);
+  });
   if (!post) {
-    return
+    return;
   }
 
-  const publishedAt = new Date(post.date).toISOString()
-  const modifiedAt = new Date(post.lastmod || post.date).toISOString()
-  const authors = authorDetails.map((author) => author.name)
-  let imageList = [siteMetadata.socialBanner]
+  const publishedAt = new Date(post.date).toISOString();
+  const modifiedAt = new Date(post.lastmod || post.date).toISOString();
+  const authors = authorDetails.map((author) => author.name);
+  let imageList = [siteMetadata.socialBanner];
   if (post.images) {
-    imageList = typeof post.images === 'string' ? [post.images] : post.images
+    imageList = typeof post.images === 'string' ? [post.images] : post.images;
   }
   const ogImages = imageList.map((img) => {
     return {
       url: img.includes('http') ? img : siteMetadata.siteUrl + img,
-    }
-  })
+    };
+  });
 
   return {
     title: post.title,
@@ -71,37 +71,37 @@ export async function generateMetadata({
       description: post.summary,
       images: imageList,
     },
-  }
+  };
 }
 
 export const generateStaticParams = async () => {
-  const paths = allBlogs.map((p) => ({ slug: p.slug.split('/') }))
+  const paths = allBlogs.map((p) => ({ slug: p.slug.split('/') }));
 
-  return paths
-}
+  return paths;
+};
 
 export default async function Page({ params }: { params: { slug: string[] } }) {
-  const slug = decodeURI(params.slug.join('/'))
-  const sortedPosts = sortPosts(allBlogs) as Blog[]
-  const postIndex = sortedPosts.findIndex((p) => p.slug === slug)
-  const prev = coreContent(sortedPosts[postIndex + 1])
-  const next = coreContent(sortedPosts[postIndex - 1])
-  const post = sortedPosts.find((p) => p.slug === slug) as Blog
-  const authorList = post?.authors || ['default']
+  const slug = decodeURI(params.slug.join('/'));
+  const sortedPosts = sortPosts(allBlogs) as Blog[];
+  const postIndex = sortedPosts.findIndex((p) => p.slug === slug);
+  const prev = coreContent(sortedPosts[postIndex + 1]);
+  const next = coreContent(sortedPosts[postIndex - 1]);
+  const post = sortedPosts.find((p) => p.slug === slug) as Blog;
+  const authorList = post?.authors || ['default'];
   const authorDetails = authorList.map((author) => {
-    const authorResults = allAuthors.find((p) => p.slug === author)
-    return coreContent(authorResults as Authors)
-  })
-  const mainContent = coreContent(post)
-  const jsonLd = post.structuredData
+    const authorResults = allAuthors.find((p) => p.slug === author);
+    return coreContent(authorResults as Authors);
+  });
+  const mainContent = coreContent(post);
+  const jsonLd = post.structuredData;
   jsonLd['author'] = authorDetails.map((author) => {
     return {
       '@type': 'Person',
       name: author.name,
-    }
-  })
+    };
+  });
 
-  const Layout = layouts[post.layout || defaultLayout]
+  const Layout = layouts[post.layout || defaultLayout];
 
   return (
     <>
@@ -120,11 +120,19 @@ export default async function Page({ params }: { params: { slug: string[] } }) {
             type="application/ld+json"
             dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
           />
-          <Layout content={mainContent} authorDetails={authorDetails} next={next} prev={prev}>
-            <MDXLayoutRenderer code={post.body.code} components={components} toc={post.toc} />
+          <Layout
+            content={mainContent}
+            authorDetails={authorDetails}
+            next={next}
+            prev={prev}>
+            <MDXLayoutRenderer
+              code={post.body.code}
+              components={components}
+              toc={post.toc}
+            />
           </Layout>
         </>
       )}
     </>
-  )
+  );
 }