Merge pull request #88 from KaoruMuta/feature/#86

refactor(#86): expand clickable area of blog title and refine sources
KaoruMuta · Jan 3, 2025 · ffd9bf1 · ffd9bf1
2 parents 1ffd136 + 0b67dc7
commit ffd9bf1
Show file tree

Hide file tree

Showing 11 changed files with 55 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mysite",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "private": true,
   "scripts": {
     "dev": "NODE_OPTIONS='--inspect' next dev",

diff --git a/src/components/BlogPostList.tsx b/src/components/BlogPostList.tsx
@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import { PostPropsType } from 'types/PostPropsType';
+import Description from './Description';
+
+const BlogPostList = ({ posts }: { posts: PostPropsType[] }) => {
+  return (
+    <>
+      {posts.map((post) => {
+        const { id, title, date, categories } = post;
+        return (
+          <>
+            <section className="py-4" key={id}>
+              <Link href={`/blog/posts/${id}`}>
+                <h2 className="font-semibold text-xl xl:text-2xl xl:hover:opacity-hover">{title}</h2>
+              </Link>
+              <Description date={date} categories={categories} />
+            </section>
+            <hr />
+          </>
+        );
+      })}
+    </>
+  );
+};
+
+export default BlogPostList;
diff --git a/src/components/Gallery.tsx b/src/components/Gallery.tsx
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -4,11 +4,11 @@ import Header from './Header';
 
 const Layout = ({ children }: { children?: ReactNode }) => {
   return (
-    <div id="layoutContainer" className="flex flex-col font-sans mx-4 sm:mx-16 md:mx-56 h-screen">
+    <section id="layoutContainer" className="flex flex-col font-sans mx-4 sm:mx-16 md:mx-56 h-screen">
       <Header />
       <main className="flex-grow">{children}</main>
       <Footer />
-    </div>
+    </section>
   );
 };
 

diff --git a/src/components/PageTitle.tsx b/src/components/PageTitle.tsx
@@ -0,0 +1,5 @@
+const PageTitle = ({ name }: { name: string }) => {
+  return <h1 className="font-bold text-3xl xl:text-4xl">{name}</h1>;
+};
+
+export default PageTitle;
diff --git a/src/components/Title.tsx b/src/components/Title.tsx
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -20,11 +20,9 @@ const MyApp: NextPage<AppProps> = ({ Component, pageProps }) => {
   }, [router.events]);
 
   return (
-    <>
-      <Layout>
-        <Component {...pageProps} />
-      </Layout>
-    </>
+    <Layout>
+      <Component {...pageProps} />
+    </Layout>
   );
 };
 export default MyApp;
diff --git a/src/pages/blog/categories/[category].tsx b/src/pages/blog/categories/[category].tsx
@@ -1,5 +1,5 @@
-import Gallery from 'components/Gallery';
-import Title from 'components/Title';
+import BlogPostList from 'components/BlogPostList';
+import PageTitle from 'components/PageTitle';
 import { loadAllCategories, loadSortedPostsForCategoryByDate } from 'lib/posts';
 import { InferGetStaticPropsType, NextPage } from 'next';
 import Head from 'next/head';
@@ -28,9 +28,10 @@ const Category: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ ca
       <Head>
         <title>{category}</title>
       </Head>
-      <section className="divide-y my-16">
-        <Title name={`# ${category}`} />
-        <Gallery posts={posts} />
+      <section className="my-16">
+        <PageTitle name={`# ${category}`} />
+        <hr className="mt-4" />
+        <BlogPostList posts={posts} />
       </section>
     </>
   );

diff --git a/src/pages/blog/posts/[id].tsx b/src/pages/blog/posts/[id].tsx
@@ -1,7 +1,7 @@
 import Ads from 'components/Ads';
 import Description from 'components/Description';
+import PageTitle from 'components/PageTitle';
 import Share from 'components/Share';
-import Title from 'components/Title';
 import { loadAllPostIds, loadPostById } from 'lib/posts';
 import { InferGetStaticPropsType, NextPage } from 'next';
 import Head from 'next/head';
@@ -38,14 +38,14 @@ const Post: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ post }
             <title>{post.title}</title>
           </Head>
           <article className="my-16 break-all">
-            <Title name={post.title} />
+            <PageTitle name={post.title} />
             <Description date={post.date} categories={post.categories} />
-            <hr className="mt-4"></hr>
+            <hr className="mt-4" />
             <article
               className="py-4 max-w-none prose prose-indigo xl:prose-lg"
               dangerouslySetInnerHTML={{ __html: post.content }}
             />
-            <hr className="mb-4"></hr>
+            <hr className="mb-4" />
             <Share url={`${process.env.HOST}/blog/posts/${post.id}`} title={post.title} />
             <Ads />
           </article>

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,5 +1,5 @@
-import Gallery from 'components/Gallery';
-import Title from 'components/Title';
+import BlogPostList from 'components/BlogPostList';
+import PageTitle from 'components/PageTitle';
 import { loadAllSortedPostsByDate } from 'lib/posts';
 import { InferGetStaticPropsType, NextPage } from 'next';
 import Head from 'next/head';
@@ -23,9 +23,10 @@ const Blog: NextPage<InferGetStaticPropsType<typeof getStaticProps>> = ({ allSor
         />
         <title>tionblog</title>
       </Head>
-      <section className="divide-y my-16">
-        <Title name="tionblog" />
-        <Gallery posts={allSortedPostsByDate} />
+      <section className="my-16">
+        <PageTitle name="tionblog" />
+        <hr className="mt-4" />
+        <BlogPostList posts={allSortedPostsByDate} />
       </section>
     </>
   );

diff --git a/src/pages/privacy.tsx b/src/pages/privacy.tsx
@@ -1,4 +1,4 @@
-import Title from 'components/Title';
+import PageTitle from 'components/PageTitle';
 import { NextPage } from 'next';
 import Head from 'next/head';
 
@@ -9,7 +9,7 @@ const Privacy: NextPage = () => {
         <title>Privacy Policy</title>
       </Head>
       <article className="prose prose-indigo max-w-none my-16">
-        <Title name="Privacy Policy" />
+        <PageTitle name="Privacy Policy" />
         <h2>個人情報の利用目的</h2>
         <p>
           当サイトでは、お問い合わせの際、名前やメールアドレス等の個人情報を取得することがあります。