Merge pull request #190 from shogo4131/release/v1.4.0

Release/v1.4.0

Author: shogo4131

LICENSE

@@ -1,8 +1,7 @@
 {
   "name": "tech-blog",
-  "version": "1.3.7",
+  "version": "1.4.0",
   "private": true,
-  "license": "MIT",
   "scripts": {
     "dev": "next dev && node createData.js",
     "build": "next build && node createData.js && next export && next-sitemap --config next-sitemap.config.js",
@@ -36,30 +35,30 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
-    "@netlify/plugin-nextjs": "^4.29.1",
-    "@next/bundle-analyzer": "^13.0.3",
+    "@netlify/plugin-nextjs": "^4.29.4",
+    "@next/bundle-analyzer": "^13.1.1",
     "@storybook/addon-actions": "^6.5.9",
     "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.14",
+    "@storybook/addon-links": "^6.5.15",
     "@storybook/builder-webpack5": "^6.5.12",
     "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^6.5.15",
     "@storybook/testing-library": "^0.0.13",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.4.0",
     "@types/cheerio": "^0.22.31",
     "@types/highlight.js": "^10.1.0",
-    "@types/jest": "^29.2.3",
+    "@types/jest": "^29.2.4",
     "@types/node": "^18.11.8",
-    "@types/react": "18.0.25",
+    "@types/react": "18.0.26",
     "@types/react-dom": "18.0.9",
     "@types/react-gtm-module": "^2.0.1",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.42.1",
     "babel-loader": "^9.1.0",
     "eslint": "8.28.0",
-    "eslint-config-next": "13.0.5",
+    "eslint-config-next": "13.1.1",
     "eslint-config-prettier": "^8.5.0",
     "eslint-import-resolver-typescript": "^3.5.1",
     "eslint-plugin-import": "^2.26.0",
@@ -70,11 +69,11 @@
     "husky": "^8.0.2",
     "jest": "^29.3.1",
     "jest-environment-jsdom": "^29.3.1",
-    "netlify-cli": "^12.0.9",
+    "netlify-cli": "^12.5.0",
     "next-sitemap": "^3.1.32",
     "prettier": "^2.8.0",
     "scaffdog": "^2.4.0",
-    "storybook-addon-next-router": "^4.0.1",
+    "storybook-addon-next-router": "^4.0.2",
     "storybook-css-modules-preset": "^1.1.1",
     "stylelint": "^14.13.0",
     "stylelint-config-idiomatic-order": "^9.0.0",

package.json

@@ -6,7 +6,7 @@ import type { Blog } from '@/types/api';
 
 import { Chip } from '@/components/Chip';
 
-import { page } from '../../constants/page';
+import { pages } from '../../constants/pages';
 
 import styles from './index.module.css';
 
@@ -15,7 +15,7 @@ type Props = Pick<Blog, 'id' | 'title' | 'thumbnail' | 'tags' | 'createdAt'>;
 export const BlogCard: FC<Props> = ({ id, title, thumbnail, tags, createdAt }) => {
   return (
     <div className={styles.root}>
-      <Link href={`${page.blog.url}/${id}`}>
+      <Link href={`${pages.blog.url}/${id}`}>
         <img
           src={thumbnail.url}
           height={600}
@@ -26,7 +26,7 @@ export const BlogCard: FC<Props> = ({ id, title, thumbnail, tags, createdAt }) =
       </Link>
       <div className={styles.title}>
         <h3>
-          <Link href={`${page.blog.url}/${id}`}>{title}</Link>
+          <Link href={`${pages.blog.url}/${id}`}>{title}</Link>
         </h3>
       </div>
       <div className={styles.date}>

src/components/BlogCard/index.tsx

@@ -6,7 +6,7 @@ import { clsx } from 'clsx';
 
 import { Tag } from '@/types/api';
 
-import { page } from '../../constants/page';
+import { pages } from '../../constants/pages';
 
 import styles from './index.module.css';
 
@@ -20,7 +20,7 @@ export const Chip: FC<Props> = ({ className, tagClassName, tags }) => {
   return (
     <div className={clsx(styles.tags, className)}>
       {tags.map(({ id, tag }) => (
-        <Link href={`${page.tags.url}/${id}`} key={id} className={clsx(styles.tag, tagClassName)}>
+        <Link href={`${pages.tags.url}/${id}`} key={id} className={clsx(styles.tag, tagClassName)}>
           <span>{tag}</span>
         </Link>
       ))}

src/components/Chip/index.tsx

@@ -2,15 +2,15 @@ import { FC } from 'react';
 
 import Link from 'next/link';
 
-import { page, seoContents } from '../../constants';
+import { pages, seoContents } from '../../constants';
 
 import styles from './index.module.css';
 
 export const Footer: FC = () => {
   return (
     <footer className={styles.root}>
       <div className={styles.linkArea}>
-        <Link href={page.privacy.url}>免責事項・プライバシーポリシー</Link>
+        <Link href={pages.privacy.url}>免責事項・プライバシーポリシー</Link>
         <div className={styles.divider} />
         <a href="https://forms.gle/Dvt3wWcXDzENR97CA" target="_blank" rel="noopener noreferrer">
           お問合せ

src/components/Footer/index.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/router';
 
 import { clsx } from 'clsx';
 
-import { page } from '../../constants/page';
+import { pages } from '../../constants/pages';
 import { useMediaQuery } from '../../hooks/useMediaQuery';
 
 import styles from './index.module.css';
@@ -24,14 +24,14 @@ export const Header: FC = () => {
   const { sm } = useMediaQuery();
 
   const headerTitle = (
-    <Link href={page.top.url} title="Reactおじさんブログ">
+    <Link href={pages.top.url} title="Reactおじさんブログ">
       Reactおじさんブログ
     </Link>
   );
 
   return (
     <header className={clsx(styles.root, { [styles.sm]: sm })}>
-      {page.top.url === asPath ? <h1>{headerTitle}</h1> : <div>{headerTitle}</div>}
+      {pages.top.url === asPath ? <h1>{headerTitle}</h1> : <div>{headerTitle}</div>}
       <ul className={styles.headerBanner}>
         {headerLinks.map(({ title, url, imagePath, alt }) => (
           <li key={title}>

src/components/Header/index.tsx

@@ -2,30 +2,30 @@ import { FC } from 'react';
 
 import Link from 'next/link';
 
-import { page } from '../../constants/page';
+import { pages } from '../../constants/pages';
 
 import styles from './index.module.css';
 
 const navigationHeaders = [
   {
     title: 'フロントエンド',
     subtitle: 'Frontend',
-    href: `${page.category.url}/frontend`,
+    href: `${pages.category.url}/frontend`,
   },
   // {
   //   title: 'バックエンド',
   //   subtitle: 'Backend',
-  //   href: `${page.category.url}/backend`,
+  //   href: `${pages.category.url}/backend`,
   // },
   {
     title: 'その他',
     subtitle: 'Others',
-    href: `${page.category.url}/others`,
+    href: `${pages.category.url}/others`,
   },
   {
     title: 'サイトマップ',
     subtitle: 'Sitemap',
-    href: `${page.sitemap.url}`,
+    href: `${pages.sitemap.url}`,
   },
 ] as const;
 

src/components/Navigation/index.tsx

@@ -1,28 +1,24 @@
 .root {
   display: flex;
   align-items: center;
-  column-gap: 8px;
-  font-size: 14px;
-}
-
-.arrowIcon {
-  transform: rotate(180deg);
-}
-
-.numButton {
-  display: flex;
-  width: 22px;
-  height: 22px;
-  align-items: center;
   justify-content: center;
-  border-radius: 50%;
+  margin-top: 40px;
+  font-size: 1.8rem;
 }
 
-.hiddenButton {
-  visibility: hidden;
+.pageNum {
+  display: flex;
 }
 
-.active {
+.num {
+  padding: 12px 16px;
+  border-radius: 50%;
+  margin: 0 4px;
   background-color: var(--color-gray-500);
   color: var(--color-white);
 }
+
+.num:hover {
+  background-color: var(--color-gray-400);
+  cursor: pointer;
+}

src/components/Pagination/index.module.css

@@ -1,25 +1,17 @@
-import { useState } from 'react';
-
 import { ComponentMeta, Story } from '@storybook/react';
 
-import { Pagination, Props } from './index';
+import { Pagenation, Props } from './index';
 
 export default {
-  component: Pagination,
-} as ComponentMeta<typeof Pagination>;
+  component: Pagenation,
+} as ComponentMeta<typeof Pagenation>;
 
 const Template: Story<Props> = (args) => {
-  const { activePage } = args;
-
-  const [page, setPage] = useState<number>(activePage);
-  const onChange = (p: number) => setPage(p);
-
-  return <Pagination {...args} activePage={page} onChange={onChange} />;
+  return <Pagenation {...args} />;
 };
 
 export const Default = Template.bind({});
 
 Default.args = {
-  activePage: 1,
-  totalPageSize: 12,
+  totalCount: 12,
 };

src/components/Pagination/index.stories.tsx

@@ -1,91 +1,33 @@
-import { FC, useMemo } from 'react';
+import { FC } from 'react';
+
+import Link from 'next/link';
 
 import { clsx } from 'clsx';
 
-import { range } from '../../utils/range';
+import { range } from '@/utils/range';
 
 import styles from './index.module.css';
 
 export type Props = {
   className?: string;
-  activePage: number;
-  totalPageSize: number;
-  onChange: (page: number) => void;
+  totalCount: number;
+  pageUrl: string;
 };
 
-const START_PAGE = 1;
-const DIFFERENCE = 1;
-const DISPLAY_PAGE_SIZE = 5;
-const STATIC_POSITION_NUMBER = 5;
-
-export const Pagination: FC<Props> = ({ className, activePage, totalPageSize, onChange }) => {
-  const min = useMemo(() => {
-    let minPage: number;
-    if (activePage < STATIC_POSITION_NUMBER) minPage = START_PAGE;
-
-    if (totalPageSize - activePage < DISPLAY_PAGE_SIZE - STATIC_POSITION_NUMBER) {
-      minPage = totalPageSize - DISPLAY_PAGE_SIZE + 1;
-    } else {
-      minPage = activePage - STATIC_POSITION_NUMBER + 1;
-    }
-
-    return Math.max(Math.min(minPage, totalPageSize), START_PAGE);
-  }, [activePage, totalPageSize]);
-
-  const max = useMemo(() => {
-    return Math.min(min + DISPLAY_PAGE_SIZE - 1, totalPageSize);
-  }, [min, totalPageSize]);
-
-  const displayLength = useMemo(() => max - min + 1, [max, min]);
+const PER_PAGE = 9;
 
+export const Pagenation: FC<Props> = ({ className, totalCount, pageUrl }) => {
   return (
     <div className={clsx(styles.root, className)}>
-      <div
-        className={clsx(styles.buttonContainer, {
-          [styles.hiddenButton]: activePage === START_PAGE,
-        })}
-      >
-        <button
-          type="button"
-          className={styles.arrowIcon}
-          disabled={activePage === START_PAGE}
-          onClick={() => onChange(START_PAGE)}
-        >
-          <img src="/images/arrow-right-double-gray.svg" alt="top" height={22} width={22} />
-        </button>
-        <button
-          type="button"
-          className={styles.arrowIcon}
-          onClick={() => onChange(Math.max(activePage - DIFFERENCE, START_PAGE))}
-        >
-          <img src="/images/arrow-right-gray.svg" alt="prev" height={20} width={20} />
-        </button>
-      </div>
-      {range(displayLength, min).map((num) => (
-        <button
-          type="button"
-          key={num}
-          className={clsx(styles.numButton, { [styles.active]: num === activePage })}
-          onClick={() => onChange(num)}
-        >
-          {num}
-        </button>
-      ))}
-      <div
-        className={clsx(styles.buttonContainer, {
-          [styles.hiddenButton]: activePage === totalPageSize,
-        })}
-      >
-        <button
-          type="button"
-          onClick={() => onChange(Math.min(activePage + DIFFERENCE, totalPageSize))}
-        >
-          <img src="/images/arrow-right-gray.svg" alt="next" height={20} width={20} />
-        </button>
-        <button type="button" onClick={() => onChange(totalPageSize)}>
-          <img src="/images/arrow-right-double-gray.svg" alt="last" height={20} width={20} />
-        </button>
-      </div>
+      <ul className={styles.pageNum}>
+        {range(1, Math.ceil(totalCount / PER_PAGE)).map((number) => (
+          <li key={number}>
+            <Link href={`${pageUrl}/${number}`} className={styles.num}>
+              {number}
+            </Link>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 };