style: auto fix.

2022-10-17 15:37:01 +00:00
parent 10f64a9ba4
commit c081d55a32
68 changed files with 1403 additions and 1114 deletions
--- a/layouts/AuthorLayout.tsx
+++ b/layouts/AuthorLayout.tsx
@@ -1,16 +1,25 @@
-import SocialIcon from '@/components/social-icons'
-import Image from '@/components/Image'
-import { PageSEO } from '@/components/SEO'
-import { ReactNode } from 'react'
-import { AuthorFrontMatter } from 'types/AuthorFrontMatter'
+import SocialIcon from '@/components/social-icons';
+import Image from '@/components/Image';
+import { PageSEO } from '@/components/SEO';
+import { ReactNode } from 'react';
+import { AuthorFrontMatter } from 'types/AuthorFrontMatter';

 interface Props {
-  children: ReactNode
-  frontMatter: AuthorFrontMatter
+  children: ReactNode;
+  frontMatter: AuthorFrontMatter;
 }

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

  return (
    <>
@@ -30,7 +39,9 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
              height="192px"
              className="h-48 w-48 rounded-full"
            />
-            <h3 className="pt-4 pb-2 text-2xl font-bold leading-8 tracking-tight">{name}</h3>
+            <h3 className="pt-4 pb-2 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">
@@ -40,9 +51,11 @@ export default function AuthorLayout({ children, frontMatter }: Props) {
              <SocialIcon kind="twitter" href={twitter} />
            </div>
          </div>
-          <div className="prose max-w-none pt-8 pb-8 dark:prose-dark xl:col-span-2">{children}</div>
+          <div className="prose max-w-none pt-8 pb-8 dark:prose-dark xl:col-span-2">
+            {children}
+          </div>
        </div>
      </div>
    </>
-  )
+  );
 }
--- a/layouts/ListLayout.tsx
+++ b/layouts/ListLayout.tsx
@@ -1,26 +1,34 @@
-import Link from '@/components/Link'
-import Tag from '@/components/Tag'
-import { ComponentProps, useState } from 'react'
-import Pagination from '@/components/Pagination'
-import formatDate from '@/lib/utils/formatDate'
-import { PostFrontMatter } from 'types/PostFrontMatter'
+import Link from '@/components/Link';
+import Tag from '@/components/Tag';
+import { ComponentProps, useState } from 'react';
+import Pagination from '@/components/Pagination';
+import formatDate from '@/lib/utils/formatDate';
+import { PostFrontMatter } from 'types/PostFrontMatter';
 interface Props {
-  posts: PostFrontMatter[]
-  title: string
-  initialDisplayPosts?: PostFrontMatter[]
-  pagination?: ComponentProps<typeof Pagination>
+  posts: PostFrontMatter[];
+  title: string;
+  initialDisplayPosts?: PostFrontMatter[];
+  pagination?: ComponentProps<typeof Pagination>;
 }

-export default function ListLayout({ posts, title, initialDisplayPosts = [], pagination }: Props) {
-  const [searchValue, setSearchValue] = useState('')
+export default function ListLayout({
+  posts,
+  title,
+  initialDisplayPosts = [],
+  pagination,
+}: Props) {
+  const [searchValue, setSearchValue] = useState('');
  const filteredBlogPosts = posts.filter((frontMatter) => {
-    const searchContent = frontMatter.title + frontMatter.summary + frontMatter.tags.join(' ')
-    return searchContent.toLowerCase().includes(searchValue.toLowerCase())
-  })
+    const searchContent =
+      frontMatter.title + frontMatter.summary + frontMatter.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 (
    <>
@@ -42,8 +50,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
-              stroke="currentColor"
-            >
+              stroke="currentColor">
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
@@ -56,7 +63,7 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
        <ul>
          {!filteredBlogPosts.length && 'No posts found.'}
          {displayPosts.map((frontMatter) => {
-            const { slug, date, title, summary, tags } = frontMatter
+            const { slug, date, title, summary, tags } = frontMatter;
            return (
              <li key={slug} className="py-4">
                <article className="space-y-2 xl:grid xl:grid-cols-4 xl:items-baseline xl:space-y-0">
@@ -69,7 +76,9 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
                  <div className="space-y-3 xl:col-span-3">
                    <div>
                      <h3 className="text-2xl font-bold leading-8 tracking-tight">
-                        <Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
+                        <Link
+                          href={`/blog/${slug}`}
+                          className="text-gray-900 dark:text-gray-100">
                          {title}
                        </Link>
                      </h3>
@@ -85,13 +94,16 @@ export default function ListLayout({ posts, title, initialDisplayPosts = [], pag
                  </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/PostLayout.tsx
+++ b/layouts/PostLayout.tsx
@@ -1,27 +1,27 @@
-import Link from '@/components/Link'
-import PageTitle from '@/components/PageTitle'
-import SectionContainer from '@/components/SectionContainer'
-import { BlogSEO } from '@/components/SEO'
-import Image from '@/components/Image'
-import Tag from '@/components/Tag'
-import siteMetadata from '@/data/siteMetadata'
-import Comments from '@/components/comments'
-import ScrollTopAndComment from '@/components/ScrollTopAndComment'
-import { ReactNode, useMemo } from 'react'
-import { PostFrontMatter } from 'types/PostFrontMatter'
-import { AuthorFrontMatter } from 'types/AuthorFrontMatter'
+import Link from '@/components/Link';
+import PageTitle from '@/components/PageTitle';
+import SectionContainer from '@/components/SectionContainer';
+import { BlogSEO } from '@/components/SEO';
+import Image from '@/components/Image';
+import Tag from '@/components/Tag';
+import siteMetadata from '@/data/siteMetadata';
+import Comments from '@/components/comments';
+import ScrollTopAndComment from '@/components/ScrollTopAndComment';
+import { ReactNode, useMemo } from 'react';
+import { PostFrontMatter } from 'types/PostFrontMatter';
+import { AuthorFrontMatter } from 'types/AuthorFrontMatter';

-const editUrl = (fileName) => `${siteMetadata.siteRepo}/raw/master/data/blog/${fileName}`
+const editUrl = (fileName) =>
+  `${siteMetadata.siteRepo}/raw/master/data/blog/${fileName}`;
 const discussUrl = (slug) =>
  `https://mobile.twitter.com/search?q=${encodeURIComponent(
    `${siteMetadata.siteUrl}/blog/${slug}`
-  )}`
+  )}`;
 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="知识共享许可协议"
@@ -30,25 +30,31 @@ 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 Props {
-  frontMatter: PostFrontMatter
-  authorDetails: AuthorFrontMatter[]
-  next?: { slug: string; title: string }
-  prev?: { slug: string; title: string }
-  children: ReactNode
+  frontMatter: PostFrontMatter;
+  authorDetails: AuthorFrontMatter[];
+  next?: { slug: string; title: string };
+  prev?: { slug: string; title: string };
+  children: ReactNode;
 }

-export default function PostLayout({ frontMatter, authorDetails, next, prev, children }: Props) {
-  const { slug, fileName, date, title, images, tags } = frontMatter
+export default function PostLayout({
+  frontMatter,
+  authorDetails,
+  next,
+  prev,
+  children,
+}: Props) {
+  const { slug, fileName, date, title, images, tags } = frontMatter;

  const headerStyles = useMemo(
    () =>
@@ -58,7 +64,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
          }
        : {},
    [images]
-  )
+  );

  return (
    <SectionContainer>
@@ -87,7 +93,10 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                  <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>
@@ -99,14 +108,15 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
          </header>
          <div
            className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:grid xl:grid-cols-4 xl:gap-x-6 xl:divide-y-0"
-            style={{ gridTemplateRows: 'auto 1fr' }}
-          >
+            style={{ gridTemplateRows: 'auto 1fr' }}>
            <dl className="pt-6 pb-10 xl:border-b xl:border-gray-200 xl:pt-11 xl:dark:border-gray-700">
              <dt className="sr-only">Authors</dt>
              <dd>
                <ul className="flex justify-center space-x-8 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}
@@ -118,15 +128,19 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
                      )}
                      <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>
@@ -137,7 +151,9 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
              </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 pt-10 pb-8 dark:prose-dark">{children}</div>
+              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">
+                {children}
+              </div>
              <div className="flex items-center gap-4 pt-6 pb-6 text-sm text-gray-700 dark:text-gray-300">
                <Copyright />
                <Link href={editUrl(fileName)}>{'View source'}</Link>
@@ -186,8 +202,7 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
              <div className="pt-4 xl:pt-8">
                <Link
                  href="/blog"
-                  className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                >
+                  className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
                  &larr; Back to the blog
                </Link>
              </div>
@@ -196,5 +211,5 @@ export default function PostLayout({ frontMatter, authorDetails, next, prev, chi
        </div>
      </article>
    </SectionContainer>
-  )
+  );
 }
--- a/layouts/PostSimple.tsx
+++ b/layouts/PostSimple.tsx
@@ -1,23 +1,28 @@
-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 formatDate from '@/lib/utils/formatDate'
-import Comments from '@/components/comments'
-import ScrollTopAndComment from '@/components/ScrollTopAndComment'
-import { ReactNode } from 'react'
-import { PostFrontMatter } from 'types/PostFrontMatter'
+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 formatDate from '@/lib/utils/formatDate';
+import Comments from '@/components/comments';
+import ScrollTopAndComment from '@/components/ScrollTopAndComment';
+import { ReactNode } from 'react';
+import { PostFrontMatter } from 'types/PostFrontMatter';

 interface Props {
-  frontMatter: PostFrontMatter
-  children: ReactNode
-  next?: { slug: string; title: string }
-  prev?: { slug: string; title: string }
+  frontMatter: PostFrontMatter;
+  children: ReactNode;
+  next?: { slug: string; title: string };
+  prev?: { slug: string; title: string };
 }

-export default function PostLayout({ frontMatter, next, prev, children }: Props) {
-  const { slug, date, title } = frontMatter
+export default function PostLayout({
+  frontMatter,
+  next,
+  prev,
+  children,
+}: Props) {
+  const { slug, date, title } = frontMatter;

  return (
    <SectionContainer>
@@ -42,10 +47,11 @@ export default function PostLayout({ frontMatter, next, prev, children }: Props)
          </header>
          <div
            className="divide-y divide-gray-200 pb-8 dark:divide-gray-700 xl:divide-y-0 "
-            style={{ gridTemplateRows: 'auto 1fr' }}
-          >
+            style={{ gridTemplateRows: 'auto 1fr' }}>
            <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 pt-10 pb-8 dark:prose-dark">{children}</div>
+              <div className="prose max-w-none pt-10 pb-8 dark:prose-dark">
+                {children}
+              </div>
            </div>
            <Comments frontMatter={frontMatter} />
            <footer>
@@ -54,8 +60,7 @@ export default function PostLayout({ frontMatter, next, prev, children }: Props)
                  <div className="pt-4 xl:pt-8">
                    <Link
                      href={`/blog/${prev.slug}`}
-                      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                    >
+                      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
                      &larr; {prev.title}
                    </Link>
                  </div>
@@ -64,8 +69,7 @@ export default function PostLayout({ frontMatter, next, prev, children }: Props)
                  <div className="pt-4 xl:pt-8">
                    <Link
                      href={`/blog/${next.slug}`}
-                      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
-                    >
+                      className="text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
                      {next.title} &rarr;
                    </Link>
                  </div>
@@ -76,5 +80,5 @@ export default function PostLayout({ frontMatter, next, prev, children }: Props)
        </div>
      </article>
    </SectionContainer>
-  )
+  );
 }