Merge pull request #245 from k35o/check

blog周りのお手入れなど。。。

.storybook/main.ts

@@ -1,6 +1,6 @@
 import type { StorybookConfig } from '@storybook/nextjs';
 const config: StorybookConfig = {
- stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+ stories: ['../src/**/*.stories.tsx'],
 
  addons: [
  '@storybook/addon-a11y',
@@ -20,7 +20,7 @@ const config: StorybookConfig = {
  },
 
  typescript: {
- reactDocgen: 'react-docgen-typescript'
- }
+ reactDocgen: 'react-docgen-typescript',
+ },
 };
 export default config;

next.config.js

@@ -1,8 +1,9 @@
 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 } from "shiki";
+import { createHighlighter, createJavaScriptRegexEngine } from "shiki";
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -13,21 +14,32 @@ const nextConfig = {
  },
 };
 
-export default withMdx({
- options: {
- remarkPlugins: [
- remarkMath,
- ],
- rehypePlugins: [
- rehypeKatex,
- [
- rehypePrettyCode,
- /** @type {Partial<import("rehype-pretty-code").Options>} */
- ({
- theme: "one-dark-pro",
- createHighlighter,
- }),
+const withBundleAnalyzer = BundleAnalyzer({
+ enabled: process.env.ANALYZE === 'true',
+});
+
+export default withBundleAnalyzer(
+ withMdx({
+ options: {
+ remarkPlugins: [
+ remarkMath,
  ],
- ],
- },
-})(nextConfig);
+ rehypePlugins: [
+ rehypeKatex,
+ [
+ rehypePrettyCode,
+ /** @type {Partial<import("rehype-pretty-code").Options>} */
+ ({
+ theme: "one-dark-pro",
+ createHighlighter: (options) => {
+ createHighlighter({
+ ...options,
+ engine: createJavaScriptRegexEngine(),
+ })
+ },
+ }),
+ ],
+ ],
+ },
+ })(nextConfig)
+);

package.json

@@ -51,6 +51,7 @@
  "zod": "3.23.8"
  },
  "devDependencies": {
+ "@next/bundle-analyzer": "^14.2.7",
  "@storybook/addon-a11y": "8.2.9",
  "@storybook/addon-essentials": "8.2.9",
  "@storybook/addon-interactions": "8.2.9",

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

@@ -4,19 +4,24 @@ import { BlogLayout } from '../_components/blog-layout/blog-layout';
 export const metadata: Metadata = {
  title: '色のコントラスト比は重要だけどどうやって求めるんだっけ？',
  description:
- 'React で開発する時、どのようにルーティングを実装していますか？Next.jsやRemixなどのフレームワークを用いて開発するときはフレームワークに実装されたルーティング利用し、フレームワークを利',
+ '背景色とテキスト色のコントラスト比はWCAG 2.1においてAA基準とAAA基準の2つの達成基準によって定められています。 AA基準における大文字のテキストの最小コントラスト比は4.5:1、小文字のテ',
  category: 'color contrast',
  openGraph: {
  title: '色のコントラスト比は重要だけどどうやって求めるんだっけ？',
  description:
- 'React で開発する時、どのようにルーティングを実装していますか？Next.jsやRemixなどのフレームワークを用いて開発するときはフレームワークに実装されたルーティング利用し、フレームワークを利',
+ '背景色とテキスト色のコントラスト比はWCAG 2.1においてAA基準とAAA基準の2つの達成基準によって定められています。 AA基準における大文字のテキストの最小コントラスト比は4.5:1、小文字のテ',
  url: 'https://k8o.me/blog/color-contrast',
+ publishedTime: '2024/02/12T00:00:00.000Z',
+ authors: ['k8o'],
+ siteName: 'k8o',
+ locale: 'ja',
+ type: 'article',
  },
  twitter: {
  title: '色のコントラスト比は重要だけどどうやって求めるんだっけ？',
- card: 'summary',
+ card: 'summary_large_image',
  description:
- 'React で開発する時、どのようにルーティングを実装していますか？Next.jsやRemixなどのフレームワークを用いて開発するときはフレームワークに実装されたルーティング利用し、フレームワークを利',
+ '背景色とテキスト色のコントラスト比はWCAG 2.1においてAA基準とAAA基準の2つの達成基準によって定められています。 AA基準における大文字のテキストの最小コントラスト比は4.5:1、小文字のテ',
  },
 };