リファクタ

.eslintrc

@@ -29,6 +29,7 @@
     "react/prop-types": "off",
     "next/no-img-element": "off",
     "react/destructuring-assignment": "off",
+    "no-param-reassign": "off",
     "react/function-component-definition": [
       2,
       {

src/components/Author.tsx → src/components/AuthorProfile.tsx

@@ -4,6 +4,7 @@ import Link from "next/link";
 import { FaLink, FaGithub, FaTwitter, FaUserCircle } from "react-icons/fa";
 
 type Props = {
+  className: string;
   Author: string;
   AuthorName: string;
   IconURL: string;
@@ -14,15 +15,24 @@ type Props = {
   Roles: string[];
 };
 
-const AuthorProfile: FC<Props> = (props) => {
-  const { Author: AuthorID, AuthorName, IconURL, Bio, SiteURL, GitHubID, TwitterID, Roles } = props;
+const AuthorProfile: FC<Props> = ({
+  className,
+  Author: AuthorID,
+  AuthorName,
+  IconURL,
+  Bio,
+  SiteURL,
+  GitHubID,
+  TwitterID,
+  Roles,
+}) => {
   const isIconURL = IconURL !== "";
   const isSiteURL = SiteURL !== "";
   const isGitHubID = GitHubID !== "";
   const isTwitterID = TwitterID !== "";
 
   return (
-    <div className="bg-white flex items-start w-full">
+    <div className={`bg-white flex items-start w-full ${className}`}>
       <Link href={`/${AuthorID}/`}>
         <a>
           {isIconURL && <img className="h-12 w-12 sm:h-16 sm:w-16 rounded-full" src={IconURL} alt={AuthorName} />}

src/components/CustomdReactMarkdown.tsx

@@ -0,0 +1,45 @@
+import React, { FC } from "react";
+import remarkGFM from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import ReactMarkdown from "react-markdown";
+import Script from "next/script";
+
+type Props = {
+  children: string;
+};
+
+const linkBlock = (
+  props: React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>,
+): JSX.Element => {
+  if (props.href === undefined) {
+    return <a href={props.href}>{props.children}</a>;
+  }
+
+  if (props.href.match("http")) {
+    return (
+      <a href={props.href} target="_blank" rel="noopener noreferrer">
+        {props.children}
+      </a>
+    );
+  }
+
+  return <a href={props.href}>{props.children}</a>;
+};
+
+const CustomReactMarkdown: FC<Props> = (props) => (
+  <>
+    <ReactMarkdown
+      remarkPlugins={[remarkGFM]}
+      rehypePlugins={[rehypeRaw]}
+      components={{
+        a: linkBlock,
+      }}
+      className="markdown-body pb-8"
+    >
+      {props.children}
+    </ReactMarkdown>
+    <Script src="https://platform.twitter.com/widgets.js" />
+  </>
+);
+
+export default CustomReactMarkdown;

src/components/PostCard.tsx

@@ -0,0 +1,58 @@
+import Link from "next/link";
+import { FC } from "react";
+import { ArticleInfo } from "types/markdownMeta";
+import { MdUpdate } from "react-icons/md";
+import moment from "moment";
+import "moment/locale/ja";
+import { FaUserCircle } from "react-icons/fa";
+
+type Props = {
+  post: ArticleInfo;
+  showAuthor: boolean;
+};
+
+const PostCard: FC<Props> = (props) => (
+  <div
+    className="bg-white m-2 py-4 px-6 rounded-lg overflow-hidden h-full w-full sm:w-5/12 lg:w-1/5"
+    key={props.post.title}
+  >
+    {props.showAuthor ? (
+      <>
+        <Link href={`/${props.post.author}/posts/${props.post.slug}`}>
+          <a className="w-full py-3 text-xl font-extrabold text-black" title={props.post.title}>
+            <p className="break-all">{props.post.title}</p>
+          </a>
+        </Link>
+        <Link href={`/${props.post.author}`}>
+          <a>
+            <div className="flex items-center mt-1">
+              {props.post.icon !== "" && (
+                <img className="h-8 w-8 rounded-full" src={props.post.icon} alt={props.post.authorName} />
+              )}
+              {props.post.icon === "" && <FaUserCircle className="h-8 w-8" />}
+              <div className="ml-2">
+                <p>{props.post.authorName}</p>
+                <div className="flex items-center">
+                  <MdUpdate />
+                  <p className="ml-1 text-sm font-light">{moment(new Date(props.post.date)).fromNow()}</p>
+                </div>
+              </div>
+            </div>
+          </a>
+        </Link>
+      </>
+    ) : (
+      <Link href={`/${props.post.author}/posts/${props.post.slug}`}>
+        <a className="w-full py-3 text-xl font-extrabold text-black" title={props.post.title}>
+          <p className="break-all">{props.post.title}</p>
+          <div className="flex items-center mt-1">
+            <MdUpdate />
+            <p className="ml-1 text-sm font-light">{moment(new Date(props.post.date)).fromNow()}</p>
+          </div>
+        </a>
+      </Link>
+    )}
+  </div>
+);
+
+export default PostCard;

src/pages/[author]/index.tsx

@@ -1,27 +1,13 @@
 import { GetStaticPaths, GetStaticProps, InferGetStaticPropsType, NextPage } from "next";
-import Link from "next/link";
-import { ParsedUrlQuery } from "node:querystring";
-import moment from "moment";
-import "moment/locale/ja";
 
-import { MdUpdate } from "react-icons/md";
-
-import { ArticleInfo, getPosts } from "utils/api";
+import { getPosts } from "utils/api";
 import Layout from "components/Layout";
-import AuthorProfile from "components/Author";
-
-type BeforeProps = {
-  author?: string;
-  posts: ArticleInfo[];
-};
+import AuthorProfile from "components/AuthorProfile";
+import { ArticleInfo } from "types/markdownMeta";
+import { AuthorPath } from "types/paths";
+import PostCard from "../../components/PostCard";
 
-type AfterProps = InferGetStaticPropsType<typeof getStaticProps>;
-
-type Params = ParsedUrlQuery & {
-  author: string;
-};
-
-export const getStaticPaths: GetStaticPaths<Params> = async () => {
+export const getStaticPaths: GetStaticPaths<AuthorPath> = async () => {
   const posts = getPosts();
 
   return {
@@ -34,55 +20,39 @@ export const getStaticPaths: GetStaticPaths<Params> = async () => {
   };
 };
 
-export const getStaticProps: GetStaticProps<BeforeProps, Params> = async ({ params }) => {
-  const data = getPosts()
+export const getStaticProps: GetStaticProps<{ posts: ArticleInfo[] }, AuthorPath> = async ({ params }) => {
+  const posts = getPosts()
     .filter((element) => element.author === params?.author && new Date(element.date).getDate())
     .slice(0, 11);
 
   return {
     props: {
-      author: params?.author,
-      posts: data,
+      posts,
     },
   };
 };
 
-const index: NextPage<AfterProps> = (props) => (
-  <Layout PageTitle={`${props.posts[0].authorName} - Blog`}>
-    <div className="flex justify-center my-10 p-4 text-3xl font-bold overflow-hidden">
-      {props.posts[0].authorName}の記事
-    </div>
+const index: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ posts }) => (
+  <Layout PageTitle={`${posts[0].authorName} - Blog`}>
+    <div className="flex justify-center my-10 p-4 text-3xl font-bold overflow-hidden">{posts[0].authorName}の記事</div>
     <div className="m-auto w-11/12">
       <div className="w-full my-8 flex justify-center items-center sm:justify-around flex-wrap">
-        {props.posts.map((post) => (
-          <div
-            className="bg-white m-2 py-4 px-6 rounded-lg overflow-hidden h-full w-full sm:w-5/12 lg:w-1/5"
-            key={post.title}
-          >
-            <Link href={`/${post.author}/posts/${post.slug}`}>
-              <a className="w-full py-3 text-xl font-extrabold text-black" title={post.title}>
-                <p className="break-all">{post.title}</p>
-                <div className="flex items-center mt-1">
-                  <MdUpdate />
-                  <p className="ml-1 text-sm font-light">{moment(new Date(post.date)).fromNow()}</p>
-                </div>
-              </a>
-            </Link>
-          </div>
+        {posts.map((post) => (
+          <PostCard post={post} showAuthor={false} key={post.slug} />
         ))}
       </div>
-      <div className="bg-white mx-auto my-4 p-2 sm:p-6 rounded-xl sm:w-11/12 md:w-5/6 lg:w-7/12">
-        <AuthorProfile
-          Author={props.posts[0].author}
-          AuthorName={props.posts[0].authorName}
-          IconURL={props.posts[0].icon}
-          Bio={props.posts[0].bio}
-          SiteURL={props.posts[0].site}
-          GitHubID={props.posts[0].github}
-          TwitterID={props.posts[0].twitter}
-          Roles={props.posts[0].roles}
-        />
-      </div>
+
+      <AuthorProfile
+        className="bg-white mx-auto my-4 p-2 sm:p-6 rounded-xl sm:w-11/12 md:w-5/6 lg:w-7/12"
+        Author={posts[0].author}
+        AuthorName={posts[0].authorName}
+        IconURL={posts[0].icon}
+        Bio={posts[0].bio}
+        SiteURL={posts[0].site}
+        GitHubID={posts[0].github}
+        TwitterID={posts[0].twitter}
+        Roles={posts[0].roles}
+      />
     </div>
   </Layout>
 );