style: 迁移到 v2.

2023-08-16 23:55:57 +08:00
parent de1da22508
commit 3932a2b612
45 changed files with 806 additions and 606 deletions
--- a/layouts/AuthorLayout.tsx
+++ b/layouts/AuthorLayout.tsx
@@ -1,15 +1,24 @@
-import { ReactNode } from 'react'
-import type { Authors } from 'contentlayer/generated'
-import SocialIcon from '@/components/social-icons'
-import Image from '@/components/Image'
+import { ReactNode } from 'react';
+import type { Authors } from 'contentlayer/generated';
+import SocialIcon from '@/components/social-icons';
+import Image from '@/components/Image';

 interface Props {
-  children: ReactNode
-  content: Omit<Authors, '_id' | '_raw' | 'body'>
+  children: ReactNode;
+  content: Omit<Authors, '_id' | '_raw' | 'body'>;
 }

 export default function AuthorLayout({ children, content }: Props) {
-  const { name, avatar, occupation, company, email, twitter, linkedin, github } = content
+  const {
+    name,
+    avatar,
+    occupation,
+    company,
+    email,
+    twitter,
+    linkedin,
+    github,
+  } = content;

  return (
    <>
@@ -30,7 +39,9 @@ export default function AuthorLayout({ children, content }: Props) {
                className="h-48 w-48 rounded-full"
              />
            )}
-            <h3 className="pb-2 pt-4 text-2xl font-bold leading-8 tracking-tight">{name}</h3>
+            <h3 className="pb-2 pt-4 text-2xl font-bold leading-8 tracking-tight">
+              {name}
+            </h3>
            <div className="text-gray-500 dark:text-gray-400">{occupation}</div>
            <div className="text-gray-500 dark:text-gray-400">{company}</div>
            <div className="flex space-x-3 pt-6">
@@ -46,5 +57,5 @@ export default function AuthorLayout({ children, content }: Props) {
        </div>
      </div>
    </>
-  )
+  );
 }
--- a/layouts/ListLayout.tsx
+++ b/layouts/ListLayout.tsx
@@ -1,44 +1,49 @@
-'use client'
+'use client';

-import { useState } from 'react'
-import { usePathname } from 'next/navigation'
-import { formatDate } from 'pliny/utils/formatDate'
-import { CoreContent } from 'pliny/utils/contentlayer'
-import type { Blog } from 'contentlayer/generated'
-import Link from '@/components/Link'
-import Tag from '@/components/Tag'
-import siteMetadata from '@/data/siteMetadata'
+import { useState } from 'react';
+import { usePathname } from 'next/navigation';
+import { formatDate } from 'pliny/utils/formatDate';
+import { CoreContent } from 'pliny/utils/contentlayer';
+import type { Blog } from 'contentlayer/generated';
+import Link from '@/components/Link';
+import Tag from '@/components/Tag';
+import siteMetadata from '@/data/siteMetadata';

 interface PaginationProps {
-  totalPages: number
-  currentPage: number
+  totalPages: number;
+  currentPage: number;
 }
 interface ListLayoutProps {
-  posts: CoreContent<Blog>[]
-  title: string
-  initialDisplayPosts?: CoreContent<Blog>[]
-  pagination?: PaginationProps
+  posts: CoreContent<Blog>[];
+  title: string;
+  initialDisplayPosts?: CoreContent<Blog>[];
+  pagination?: PaginationProps;
 }

 function Pagination({ totalPages, currentPage }: PaginationProps) {
-  const pathname = usePathname()
-  const basePath = pathname.split('/')[1]
-  const prevPage = currentPage - 1 > 0
-  const nextPage = currentPage + 1 <= totalPages
+  const pathname = usePathname();
+  const basePath = pathname.split('/')[1];
+  const prevPage = currentPage - 1 > 0;
+  const nextPage = currentPage + 1 <= totalPages;

  return (
    <div className="space-y-2 pb-8 pt-6 md:space-y-5">
      <nav className="flex justify-between">
        {!prevPage && (
-          <button className="cursor-auto disabled:opacity-50" disabled={!prevPage}>
+          <button
+            className="cursor-auto disabled:opacity-50"
+            disabled={!prevPage}>
            Previous
          </button>
        )}
        {prevPage && (
          <Link
-            href={currentPage - 1 === 1 ? `/${basePath}/` : `/${basePath}/page/${currentPage - 1}`}
-            rel="prev"
-          >
+            href={
+              currentPage - 1 === 1
+                ? `/${basePath}/`
+                : `/${basePath}/page/${currentPage - 1}`
+            }
+            rel="prev">
            Previous
          </Link>
        )}
@@ -46,7 +51,9 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
          {currentPage} of {totalPages}
        </span>
        {!nextPage && (
-          <button className="cursor-auto disabled:opacity-50" disabled={!nextPage}>
+          <button
+            className="cursor-auto disabled:opacity-50"
+            disabled={!nextPage}>
            Next
          </button>
        )}
@@ -57,7 +64,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
        )}
      </nav>
    </div>
-  )
+  );
 }

 export default function ListLayout({
@@ -66,15 +73,17 @@ export default function ListLayout({
  initialDisplayPosts = [],
  pagination,
 }: ListLayoutProps) {
-  const [searchValue, setSearchValue] = useState('')
+  const [searchValue, setSearchValue] = useState('');
  const filteredBlogPosts = posts.filter((post) => {
-    const searchContent = post.title + post.summary + post.tags?.join(' ')
-    return searchContent.toLowerCase().includes(searchValue.toLowerCase())
-  })
+    const searchContent = post.title + post.summary + post.tags?.join(' ');
+    return searchContent.toLowerCase().includes(searchValue.toLowerCase());
+  });

  // If initialDisplayPosts exist, display it if no searchValue is specified
  const displayPosts =
-    initialDisplayPosts.length > 0 && !searchValue ? initialDisplayPosts : filteredBlogPosts
+    initialDisplayPosts.length > 0 && !searchValue
+      ? initialDisplayPosts
+      : filteredBlogPosts;

  return (
    <>
@@ -99,8 +108,7 @@ export default function ListLayout({
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
+              stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
@@ -113,20 +121,24 @@ export default function ListLayout({
        <ul>
          {!filteredBlogPosts.length && 'No posts found.'}
          {displayPosts.map((post) => {
-            const { path, date, title, summary, tags } = post
+            const { path, date, title, summary, tags } = post;
            return (
              <li key={path} className="py-4">
                <article className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
                  <dl>
                    <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>
+                      <time dateTime={date}>
+                        {formatDate(date, siteMetadata.locale)}
+                      </time>
                    </dd>
                  </dl>
                  <div className="space-y-3 xl:col-span-3">
                    <div>
                      <h3 className="text-2xl font-bold leading-8 tracking-tight">
-                        <Link href={`/${path}`} className="text-gray-900 dark:text-gray-100">
+                        <Link
+                          href={`/${path}`}
+                          className="text-gray-900 dark:text-gray-100">
                          {title}
                        </Link>
                      </h3>
@@ -140,13 +152,16 @@ export default function ListLayout({
                  </div>
                </article>
              </li>
-            )
+            );
          })}
        </ul>
      </div>
      {pagination && pagination.totalPages > 1 && !searchValue && (
-        <Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
+        <Pagination
+          currentPage={pagination.currentPage}
+          totalPages={pagination.totalPages}
+        />
      )}
    </>
-  )
+  );
 }
--- a/layouts/ListLayoutWithTags.tsx
+++ b/layouts/ListLayoutWithTags.tsx
@@ -1,46 +1,51 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
-'use client'
+'use client';

-import { usePathname } from 'next/navigation'
-import { slug } from 'github-slugger'
-import { formatDate } from 'pliny/utils/formatDate'
-import { CoreContent } from 'pliny/utils/contentlayer'
-import type { Blog } from 'contentlayer/generated'
-import Link from '@/components/Link'
-import Tag from '@/components/Tag'
-import siteMetadata from '@/data/siteMetadata'
-import tagData from 'app/tag-data.json'
+import { usePathname } from 'next/navigation';
+import { slug } from 'github-slugger';
+import { formatDate } from 'pliny/utils/formatDate';
+import { CoreContent } from 'pliny/utils/contentlayer';
+import type { Blog } from 'contentlayer/generated';
+import Link from '@/components/Link';
+import Tag from '@/components/Tag';
+import siteMetadata from '@/data/siteMetadata';
+import tagData from 'app/tag-data.json';

 interface PaginationProps {
-  totalPages: number
-  currentPage: number
+  totalPages: number;
+  currentPage: number;
 }
 interface ListLayoutProps {
-  posts: CoreContent<Blog>[]
-  title: string
-  initialDisplayPosts?: CoreContent<Blog>[]
-  pagination?: PaginationProps
+  posts: CoreContent<Blog>[];
+  title: string;
+  initialDisplayPosts?: CoreContent<Blog>[];
+  pagination?: PaginationProps;
 }

 function Pagination({ totalPages, currentPage }: PaginationProps) {
-  const pathname = usePathname()
-  const basePath = pathname.split('/')[1]
-  const prevPage = currentPage - 1 > 0
-  const nextPage = currentPage + 1 <= totalPages
+  const pathname = usePathname();
+  const basePath = pathname.split('/')[1];
+  const prevPage = currentPage - 1 > 0;
+  const nextPage = currentPage + 1 <= totalPages;

  return (
    <div className="space-y-2 pb-8 pt-6 md:space-y-5">
      <nav className="flex justify-between">
        {!prevPage && (
-          <button className="cursor-auto disabled:opacity-50" disabled={!prevPage}>
+          <button
+            className="cursor-auto disabled:opacity-50"
+            disabled={!prevPage}>
            Previous
          </button>
        )}
        {prevPage && (
          <Link
-            href={currentPage - 1 === 1 ? `/${basePath}/` : `/${basePath}/page/${currentPage - 1}`}
-            rel="prev"
-          >
+            href={
+              currentPage - 1 === 1
+                ? `/${basePath}/`
+                : `/${basePath}/page/${currentPage - 1}`
+            }
+            rel="prev">
            Previous
          </Link>
        )}
@@ -48,7 +53,9 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
          {currentPage} of {totalPages}
        </span>
        {!nextPage && (
-          <button className="cursor-auto disabled:opacity-50" disabled={!nextPage}>
+          <button
+            className="cursor-auto disabled:opacity-50"
+            disabled={!nextPage}>
            Next
          </button>
        )}
@@ -59,7 +66,7 @@ function Pagination({ totalPages, currentPage }: PaginationProps) {
        )}
      </nav>
    </div>
-  )
+  );
 }

 export default function ListLayoutWithTags({
@@ -68,12 +75,13 @@ export default function ListLayoutWithTags({
  initialDisplayPosts = [],
  pagination,
 }: ListLayoutProps) {
-  const pathname = usePathname()
-  const tagCounts = tagData as Record<string, number>
-  const tagKeys = Object.keys(tagCounts)
-  const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a])
+  const pathname = usePathname();
+  const tagCounts = tagData as Record<string, number>;
+  const tagKeys = Object.keys(tagCounts);
+  const sortedTags = tagKeys.sort((a, b) => tagCounts[b] - tagCounts[a]);

-  const displayPosts = initialDisplayPosts.length > 0 ? initialDisplayPosts : posts
+  const displayPosts =
+    initialDisplayPosts.length > 0 ? initialDisplayPosts : posts;

  return (
    <>
@@ -87,12 +95,13 @@ export default function ListLayoutWithTags({
          <div className="hidden max-h-screen h-full sm:flex flex-wrap bg-gray-50 dark:bg-gray-900/70 shadow-md pt-5 dark:shadow-gray-800/40 rounded min-w-[280px] max-w-[280px]">
            <div className="py-4 px-6">
              {pathname.startsWith('/blog') ? (
-                <h3 className="text-primary-500 font-bold uppercase">All Posts</h3>
+                <h3 className="text-primary-500 font-bold uppercase">
+                  All Posts
+                </h3>
              ) : (
                <Link
                  href={`/blog`}
-                  className="font-bold uppercase text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-500"
-                >
+                  className="font-bold uppercase text-gray-700 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-500">
                  All Posts
                </Link>
              )}
@@ -108,13 +117,12 @@ export default function ListLayoutWithTags({
                        <Link
                          href={`/tags/${slug(t)}`}
                          className="py-2 px-3 uppercase text-sm font-medium text-gray-500 dark:text-gray-300 hover:text-primary-500 dark:hover:text-primary-500"
-                          aria-label={`View posts tagged ${t}`}
-                        >
+                          aria-label={`View posts tagged ${t}`}>
                          {`${t} (${tagCounts[t]})`}
                        </Link>
                      )}
                    </li>
-                  )
+                  );
                })}
              </ul>
            </div>
@@ -122,20 +130,24 @@ export default function ListLayoutWithTags({
          <div>
            <ul>
              {displayPosts.map((post) => {
-                const { path, date, title, summary, tags } = post
+                const { path, date, title, summary, tags } = post;
                return (
                  <li key={path} className="py-5">
                    <article className="space-y-2 flex flex-col xl:space-y-0">
                      <dl>
                        <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>
+                          <time dateTime={date}>
+                            {formatDate(date, siteMetadata.locale)}
+                          </time>
                        </dd>
                      </dl>
                      <div className="space-y-3">
                        <div>
                          <h2 className="text-2xl font-bold leading-8 tracking-tight">
-                            <Link href={`/${path}`} className="text-gray-900 dark:text-gray-100">
+                            <Link
+                              href={`/${path}`}
+                              className="text-gray-900 dark:text-gray-100">
                              {title}
                            </Link>
                          </h2>
@@ -149,15 +161,18 @@ export default function ListLayoutWithTags({
                      </div>
                    </article>
                  </li>
-                )
+                );
              })}
            </ul>
            {pagination && pagination.totalPages > 1 && (
-              <Pagination currentPage={pagination.currentPage} totalPages={pagination.totalPages} />
+              <Pagination
+                currentPage={pagination.currentPage}
+                totalPages={pagination.totalPages}
+              />
            )}
          </div>
        </div>
      </div>
    </>
-  )
+  );
 }
--- a/layouts/PostBanner.tsx
+++ b/layouts/PostBanner.tsx
@@ -1,26 +1,33 @@
-import { ReactNode } from 'react'
-import Image from '@/components/Image'
-import Bleed from 'pliny/ui/Bleed'
-import { CoreContent } from 'pliny/utils/contentlayer'
-import type { Blog } from 'contentlayer/generated'
-import Comments from '@/components/Comments'
-import Link from '@/components/Link'
-import PageTitle from '@/components/PageTitle'
-import SectionContainer from '@/components/SectionContainer'
-import siteMetadata from '@/data/siteMetadata'
-import ScrollTopAndComment from '@/components/ScrollTopAndComment'
+import { ReactNode } from 'react';
+import Image from '@/components/Image';
+import Bleed from 'pliny/ui/Bleed';
+import { CoreContent } from 'pliny/utils/contentlayer';
+import type { Blog } from 'contentlayer/generated';
+import Comments from '@/components/Comments';
+import Link from '@/components/Link';
+import PageTitle from '@/components/PageTitle';
+import SectionContainer from '@/components/SectionContainer';
+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 }
+  content: CoreContent<Blog>;
+  children: ReactNode;
+  next?: { path: string; title: string };
+  prev?: { path: string; title: string };
 }

-export default function PostMinimal({ content, next, prev, children }: LayoutProps) {
-  const { slug, title, images } = content
+export default function PostMinimal({
+  content,
+  next,
+  prev,
+  children,
+}: LayoutProps) {
+  const { slug, title, images } = content;
  const displayImage =
-    images && images.length > 0 ? images[0] : 'https://picsum.photos/seed/picsum/800/400'
+    images && images.length > 0
+      ? images[0]
+      : 'https://picsum.photos/seed/picsum/800/400';

  return (
    <SectionContainer>
@@ -31,7 +38,12 @@ export default function PostMinimal({ content, next, prev, children }: LayoutPro
            <div className="w-full">
              <Bleed>
                <div className="aspect-[2/1] w-full relative">
-                  <Image src={displayImage} alt={title} fill className="object-cover" />
+                  <Image
+                    src={displayImage}
+                    alt={title}
+                    fill
+                    className="object-cover"
+                  />
                </div>
              </Bleed>
            </div>
@@ -39,9 +51,13 @@ export default function PostMinimal({ content, next, prev, children }: LayoutPro
              <PageTitle>{title}</PageTitle>
            </div>
          </div>
-          <div className="prose max-w-none py-4 dark:prose-invert">{children}</div>
+          <div className="prose max-w-none py-4 dark:prose-invert">
+            {children}
+          </div>
          {siteMetadata.comments && (
-            <div className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300" id="comment">
+            <div
+              className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300"
+              id="comment">
              <Comments slug={slug} />
            </div>
          )}
@@ -52,8 +68,7 @@ export default function PostMinimal({ content, next, prev, children }: LayoutPro
                  <Link
                    href={`/${prev.path}`}
                    className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                    aria-label={`Previous post: ${prev.title}`}
-                  >
+                    aria-label={`Previous post: ${prev.title}`}>
                    &larr; {prev.title}
                  </Link>
                </div>
@@ -63,8 +78,7 @@ export default function PostMinimal({ content, next, prev, children }: LayoutPro
                  <Link
                    href={`/${next.path}`}
                    className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                    aria-label={`Next post: ${next.title}`}
-                  >
+                    aria-label={`Next post: ${next.title}`}>
                    {next.title} &rarr;
                  </Link>
                </div>
@@ -74,5 +88,5 @@ export default function PostMinimal({ content, next, prev, children }: LayoutPro
        </div>
      </article>
    </SectionContainer>
-  )
+  );
 }
--- a/layouts/PostLayout.tsx
+++ b/layouts/PostLayout.tsx
@@ -1,23 +1,23 @@
-import { ReactNode } from 'react'
-import { CoreContent } from 'pliny/utils/contentlayer'
-import type { Blog, Authors } from 'contentlayer/generated'
-import Comments from '@/components/Comments'
-import Link from '@/components/Link'
-import PageTitle from '@/components/PageTitle'
-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 { ReactNode } from 'react';
+import { CoreContent } from 'pliny/utils/contentlayer';
+import type { Blog, Authors } from 'contentlayer/generated';
+import Comments from '@/components/Comments';
+import Link from '@/components/Link';
+import PageTitle from '@/components/PageTitle';
+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';

-const editUrl = (path) => `${siteMetadata.siteRepo}/raw/branch/master/data/${path}`
+const editUrl = (path) =>
+  `${siteMetadata.siteRepo}/raw/branch/master/data/${path}`;

 const Copyright = () => (
  <a
    rel="license"
    href="http://creativecommons.org/licenses/by-sa/4.0/"
-    className="inline-flex self-center"
-  >
+    className="inline-flex self-center">
    <Image
      className="border-0"
      alt="知识共享许可协议"
@@ -26,26 +26,32 @@ const Copyright = () => (
      src="https://i.creativecommons.org/l/by-sa/4.0/80x15.png"
    />
  </a>
-)
+);

 const postDateTemplate: Intl.DateTimeFormatOptions = {
  weekday: 'long',
  year: 'numeric',
  month: 'long',
  day: 'numeric',
-}
+};

 interface LayoutProps {
-  content: CoreContent<Blog>
-  authorDetails: CoreContent<Authors>[]
-  next?: { path: string; title: string }
-  prev?: { path: string; title: string }
-  children: ReactNode
+  content: CoreContent<Blog>;
+  authorDetails: CoreContent<Authors>[];
+  next?: { path: string; title: string };
+  prev?: { path: string; title: string };
+  children: ReactNode;
 }

-export default function PostLayout({ content, authorDetails, next, prev, children }: LayoutProps) {
-  const { filePath, path, slug, date, title, tags } = content
-  const basePath = path.split('/')[0]
+export default function PostLayout({
+  content,
+  authorDetails,
+  next,
+  prev,
+  children,
+}: LayoutProps) {
+  const { filePath, path, slug, date, title, tags } = content;
+  const basePath = path.split('/')[0];

  return (
    <SectionContainer>
@@ -59,7 +65,10 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
                  <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}>
-                      {new Date(date).toLocaleDateString(siteMetadata.locale, postDateTemplate)}
+                      {new Date(date).toLocaleDateString(
+                        siteMetadata.locale,
+                        postDateTemplate,
+                      )}
                    </time>
                  </dd>
                </div>
@@ -75,7 +84,9 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
              <dd>
                <ul className="flex flex-wrap justify-center gap-4 sm:space-x-12 xl:block xl:space-x-0 xl:space-y-8">
                  {authorDetails.map((author) => (
-                    <li className="flex items-center space-x-2" key={author.name}>
+                    <li
+                      className="flex items-center space-x-2"
+                      key={author.name}>
                      {author.avatar && (
                        <Image
                          src={author.avatar}
@@ -87,15 +98,19 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
                      )}
                      <dl className="whitespace-nowrap text-sm font-medium leading-5">
                        <dt className="sr-only">Name</dt>
-                        <dd className="text-gray-900 dark:text-gray-100">{author.name}</dd>
+                        <dd className="text-gray-900 dark:text-gray-100">
+                          {author.name}
+                        </dd>
                        <dt className="sr-only">Twitter</dt>
                        <dd>
                          {author.twitter && (
                            <Link
                              href={author.twitter}
-                              className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                            >
-                              {author.twitter.replace('https://twitter.com/', '@')}
+                              className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
+                              {author.twitter.replace(
+                                'https://twitter.com/',
+                                '@',
+                              )}
                            </Link>
                          )}
                        </dd>
@@ -106,7 +121,9 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
              </dd>
            </dl>
            <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-invert">{children}</div>
+              <div className="prose max-w-none pb-8 pt-10 dark:prose-invert">
+                {children}
+              </div>
              <div className="pb-6 pt-6 text-sm text-gray-700 dark:text-gray-300 flex items-center gap-4 ">
                <Copyright />
                <Link href={editUrl(filePath)}>{'View source'}</Link>
@@ -114,8 +131,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
              {siteMetadata.comments && (
                <div
                  className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300"
-                  id="comment"
-                >
+                  id="comment">
                  <Comments slug={slug} />
                </div>
              )}
@@ -163,8 +179,7 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
                <Link
                  href={`/${basePath}`}
                  className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                  aria-label="Back to the blog"
-                >
+                  aria-label="Back to the blog">
                  &larr; Back to the blog
                </Link>
              </div>
@@ -173,5 +188,5 @@ export default function PostLayout({ content, authorDetails, next, prev, childre
        </div>
      </article>
    </SectionContainer>
-  )
+  );
 }
--- a/layouts/PostSimple.tsx
+++ b/layouts/PostSimple.tsx
@@ -1,23 +1,28 @@
-import { ReactNode } from 'react'
-import { formatDate } from 'pliny/utils/formatDate'
-import { CoreContent } from 'pliny/utils/contentlayer'
-import type { Blog } from 'contentlayer/generated'
-import Comments from '@/components/Comments'
-import Link from '@/components/Link'
-import PageTitle from '@/components/PageTitle'
-import SectionContainer from '@/components/SectionContainer'
-import siteMetadata from '@/data/siteMetadata'
-import ScrollTopAndComment from '@/components/ScrollTopAndComment'
+import { ReactNode } from 'react';
+import { formatDate } from 'pliny/utils/formatDate';
+import { CoreContent } from 'pliny/utils/contentlayer';
+import type { Blog } from 'contentlayer/generated';
+import Comments from '@/components/Comments';
+import Link from '@/components/Link';
+import PageTitle from '@/components/PageTitle';
+import SectionContainer from '@/components/SectionContainer';
+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 }
+  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 { path, slug, date, title } = content
+export default function PostLayout({
+  content,
+  next,
+  prev,
+  children,
+}: LayoutProps) {
+  const { path, slug, date, title } = content;

  return (
    <SectionContainer>
@@ -30,7 +35,9 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
                <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>
+                    <time dateTime={date}>
+                      {formatDate(date, siteMetadata.locale)}
+                    </time>
                  </dd>
                </div>
              </dl>
@@ -41,10 +48,14 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
          </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-invert">{children}</div>
+              <div className="prose max-w-none pb-8 pt-10 dark:prose-invert">
+                {children}
+              </div>
            </div>
            {siteMetadata.comments && (
-              <div className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300" id="comment">
+              <div
+                className="pb-6 pt-6 text-center text-gray-700 dark:text-gray-300"
+                id="comment">
                <Comments slug={slug} />
              </div>
            )}
@@ -55,8 +66,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
                    <Link
                      href={`/${prev.path}`}
                      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                      aria-label={`Previous post: ${prev.title}`}
-                    >
+                      aria-label={`Previous post: ${prev.title}`}>
                      &larr; {prev.title}
                    </Link>
                  </div>
@@ -66,8 +76,7 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
                    <Link
                      href={`/${next.path}`}
                      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                      aria-label={`Next post: ${next.title}`}
-                    >
+                      aria-label={`Next post: ${next.title}`}>
                      {next.title} &rarr;
                    </Link>
                  </div>
@@ -78,5 +87,5 @@ export default function PostLayout({ content, next, prev, children }: LayoutProp
        </div>
      </article>
    </SectionContainer>
-  )
+  );
 }