Merge pull request #269 from k35o/blog-views

Blogに閲覧数をカウントするような機能を追加する

.eslintrc.cjs

@@ -1,19 +1,19 @@
 /** @type {import("eslint").Linter.Config} */
 const config = {
   extends: [
-    "prettier",
-    "next/core-web-vitals",
-    "plugin:storybook/recommended",
-    "plugin:jsx-a11y/recommended"
+    'prettier',
+    'next/core-web-vitals',
+    'plugin:storybook/recommended',
+    'plugin:jsx-a11y/recommended',
   ],
   overrides: [
     {
-      files: ["*.stories.tsx"],
+      files: ['*.stories.tsx'],
       rules: {
         'react-hooks/rules-of-hooks': 'off',
       },
     },
   ],
-}
+};
 
 module.exports = config;

.github/workflows/chromatic.yml

@@ -36,4 +36,4 @@ jobs:
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           onlyChanged: true
-          skip: "renovate/**"
+          skip: 'renovate/**'

.storybook/main.ts

@@ -15,6 +15,10 @@ const config: StorybookConfig = {
     options: {},
   },
 
+  features: {
+    experimentalRSC: true,
+  },
+
   docs: {
     autodocs: 'tag',
   },

.storybook/preview.tsx

@@ -52,7 +52,7 @@ const preview: Preview = {
           className={cn(
             font.className,
             subFont.variable,
-            'app-background text-textBody min-h-screen p-6',
+            'app-background min-h-screen p-6 text-textBody',
           )}
         >
           <Story />

.vscode/settings.json

@@ -21,7 +21,6 @@
   "eslint.rules.customizations": [
     { "rule": "*", "severity": "warn" }
   ],
-  "typescript.tsdk": "node_modules/.pnpm/typescript@5.5.4/node_modules/typescript/lib",
-  "prettier.documentSelectors": ["**/*.{cjs,mjs,ts,tsx,json,md,mdx}"],
+  "prettier.documentSelectors": ["**/*.{cjs,js,ts,tsx,json,md,mdx}"],
   "typescript.enablePromptUseWorkspaceTsdk": true
 }

next.config.js

@@ -1,9 +1,12 @@
-import withMdx from "@next/mdx";
+import withMdx from '@next/mdx';
 import BundleAnalyzer from '@next/bundle-analyzer';
-import rehypePrettyCode from "rehype-pretty-code";
-import rehypeKatex from "rehype-katex";
-import remarkMath from "remark-math";
-import { createHighlighter, createJavaScriptRegexEngine } from "shiki";
+import rehypePrettyCode from 'rehype-pretty-code';
+import rehypeKatex from 'rehype-katex';
+import remarkMath from 'remark-math';
+import {
+  createHighlighter,
+  createJavaScriptRegexEngine,
+} from 'shiki';
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -21,25 +24,23 @@ const withBundleAnalyzer = BundleAnalyzer({
 export default withBundleAnalyzer(
   withMdx({
     options: {
-      remarkPlugins: [
-        remarkMath,
-      ],
+      remarkPlugins: [remarkMath],
       rehypePlugins: [
         rehypeKatex,
         [
           rehypePrettyCode,
           /** @type {Partial<import("rehype-pretty-code").Options>} */
           ({
-            theme: "one-dark-pro",
+            theme: 'one-dark-pro',
             createHighlighter: (options) => {
               createHighlighter({
                 ...options,
                 engine: createJavaScriptRegexEngine(),
-              })
+              });
             },
           }),
         ],
       ],
     },
-  })(nextConfig)
+  })(nextConfig),
 );

package.json

@@ -3,6 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
+  "imports": {
+    "#vercel/kv": {
+      "storybook": "./src/mocks/vercel-kv.mock.ts",
+      "default": "@vercel/kv"
+    },
+    "#*": [
+      "./*",
+      "./*.ts",
+      "./*.tsx"
+    ]
+  },
   "scripts": {
     "dev": "next dev",
     "build": "next build",
@@ -29,6 +40,7 @@
     "@next/env": "14.2.11",
     "@next/mdx": "14.2.11",
     "@vercel/analytics": "1.3.1",
+    "@vercel/kv": "2.0.0",
     "@vercel/postgres": "0.10.0",
     "@vercel/speed-insights": "1.0.12",
     "autoprefixer": "10.4.20",
@@ -42,6 +54,7 @@
     "postcss": "8.4.47",
     "react": "18.3.1",
     "react-dom": "18.3.1",
+    "react-error-boundary": "4.0.13",
     "rehype-katex": "7.0.1",
     "rehype-pretty-code": "0.14.0",
     "remark-math": "6.0.0",

postcss.config.js

@@ -4,6 +4,6 @@ const config = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
 
 export default config;

src/app/blog/_components/blog-layout/blog-layout.stories.tsx

@@ -1,9 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { BlogLayout } from './blog-layout';
+import { kv } from '#src/mocks/vercel-kv.mock';
 
 const meta: Meta<typeof BlogLayout> = {
   title: 'app/blog/blog-layout',
   component: BlogLayout,
+  beforeEach: () => {
+    kv.incr.mockResolvedValue(74931);
+  },
 };
 
 export default meta;
@@ -12,6 +16,7 @@ type Story = StoryObj<typeof BlogLayout>;
 export const Primary: Story = {
   args: {
     updatedAt: '2024/02/12',
+    slug: 'color-contrast',
     children: 'This is a blog layout',
   },
 };

src/app/blog/_components/blog-layout/blog-layout.tsx

@@ -1,15 +1,38 @@
-import { FC, ReactNode } from 'react';
+import { formatDate } from '@/utils/date/format';
+import { Calendar, Eye } from 'lucide-react';
+import { FC, ReactNode, Suspense } from 'react';
+import { ViewCoounter } from '../view-counter';
+import { Slug } from '../../_types';
+import { ErrorBoundary } from 'react-error-boundary';
 
 export const BlogLayout: FC<{
   children: ReactNode;
   updatedAt: string;
-}> = ({ children, updatedAt }) => {
+  slug: Slug;
+}> = ({ children, updatedAt, slug }) => {
   return (
     <div className="flex flex-col gap-4">
       <article className="rounded-lg bg-bgBase/90 px-3 py-14 pt-4 sm:px-10">
-        <p className="text-end text-textDescription">
-          {updatedAt}に公開
-        </p>
+        <div className="flex items-center justify-end gap-4 text-sm text-textDescription">
+          <ErrorBoundary fallback={<></>}>
+            <Suspense fallback={<></>}>
+              <div className="flex items-center gap-1">
+                <Eye className="size-4" />
+                <ViewCoounter slug={slug} />
+              </div>
+            </Suspense>
+          </ErrorBoundary>
+          <div className="flex items-center gap-1">
+            <Calendar className="size-4" />
+            <span>
+              {formatDate(updatedAt, {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+              })}
+            </span>
+          </div>
+        </div>
         {children}
       </article>
     </div>

src/app/blog/_components/view-counter/index.ts

@@ -0,0 +1 @@
+export * from './view-counter';

src/app/blog/_components/view-counter/view-counter.stories.tsx

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ViewCoounter } from './view-counter';
+import { kv } from '#src/mocks/vercel-kv.mock';
+
+const meta: Meta<typeof ViewCoounter> = {
+  title: 'app/blog/view-counter',
+  component: ViewCoounter,
+  beforeEach: () => {
+    kv.incr.mockResolvedValue(74931);
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ViewCoounter>;
+
+export const Primary: Story = {
+  args: {
+    slug: 'color-contrast',
+  },
+};

src/app/blog/_components/view-counter/view-counter.tsx

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+import { kv } from '#vercel/kv';
+import { commalize } from '@/utils/number/commalize';
+import { Slug } from '../../_types';
+
+export const ViewCoounter: FC<{ slug: Slug }> = async ({ slug }) => {
+  const views = await kv.incr(`views-${slug}`);
+  return <span>{commalize(views)}</span>;
+};

src/app/blog/_types/index.ts

@@ -0,0 +1 @@
+export type Slug = 'tanstack-router-introduction' | 'color-contrast';

src/app/blog/color-contrast/layout.tsx

@@ -25,10 +25,17 @@ export const metadata: Metadata = {
   },
 };
 
+// TODO:pprが利用可能になったら切り替える
+export const dynamic = 'force-dynamic';
+
 export default function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <BlogLayout updatedAt="2024/02/12">{children}</BlogLayout>;
+  return (
+    <BlogLayout updatedAt="2024/02/12" slug="color-contrast">
+      {children}
+    </BlogLayout>
+  );
 }

src/app/blog/tanstack-router-introduction/layout.tsx

@@ -27,10 +27,20 @@ export const metadata: Metadata = {
   },
 };
 
+// TODO:pprが利用可能になったら切り替える
+export const dynamic = 'force-dynamic';
+
 export default function Layout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return <BlogLayout updatedAt="2023/07/13">{children}</BlogLayout>;
+  return (
+    <BlogLayout
+      updatedAt="2023/07/13"
+      slug="tanstack-router-introduction"
+    >
+      {children}
+    </BlogLayout>
+  );
 }