From d29eb0a6d50d2c1711758858b1244c74bf32a624 Mon Sep 17 00:00:00 2001 From: Koki Sakano Date: Wed, 4 Sep 2024 20:35:32 +0900 Subject: [PATCH 1/7] =?UTF-8?q?blog=E3=81=AE=E9=A0=86=E7=95=AA=E3=82=92?= =?UTF-8?q?=E5=A4=89=E3=81=88=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/blog/page.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx index 473a4fba..f038c088 100644 --- a/src/app/blog/page.tsx +++ b/src/app/blog/page.tsx @@ -3,18 +3,18 @@ import { BlogCard } from './_components/blog-card'; export default function Page() { return (
- +
); } From f424f70611c729520eec49d16b323a95a3a9ce81 Mon Sep 17 00:00:00 2001 From: Koki Sakano Date: Wed, 4 Sep 2024 20:35:33 +0900 Subject: [PATCH 2/7] =?UTF-8?q?tailwind=E3=81=AEcontent=E3=82=92=E7=B5=9E?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tailwind.config.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/tailwind.config.ts b/tailwind.config.ts index 3f03392e..f01c6c09 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -3,10 +3,7 @@ import plugin from 'tailwindcss/plugin'; const config = { darkMode: ['class'], - content: [ - './src/**/*.{js,ts,jsx,tsx,mdx}', - './.storybook/preview.tsx', - ], + content: ['./src/**/*.tsx', './.storybook/preview.tsx'], theme: { colors: { // foreground From 4419358ec7872cedb63532529fa67d0352510fba Mon Sep 17 00:00:00 2001 From: Koki Sakano Date: Wed, 4 Sep 2024 20:35:33 +0900 Subject: [PATCH 3/7] =?UTF-8?q?stories=E3=82=92=E7=B5=9E=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/main.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/.storybook/main.ts b/.storybook/main.ts index 2401fa63..dcc61eb8 100644 --- a/.storybook/main.ts +++ b/.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; From fc5f31bc0c6e9faedefc715d8e3bc4ebc4737605 Mon Sep 17 00:00:00 2001 From: Koki Sakano Date: Wed, 4 Sep 2024 20:35:34 +0900 Subject: [PATCH 4/7] =?UTF-8?q?analyzer=E3=82=92=E5=85=A5=E3=82=8C?= =?UTF-8?q?=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 41 +++++++++++-------- package.json | 1 + pnpm-lock.yaml | 104 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 126 insertions(+), 20 deletions(-) diff --git a/next.config.js b/next.config.js index 31fb169f..dd65c898 100644 --- a/next.config.js +++ b/next.config.js @@ -1,4 +1,5 @@ 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"; @@ -13,21 +14,27 @@ const nextConfig = { }, }; -export default withMdx({ - options: { - remarkPlugins: [ - remarkMath, - ], - rehypePlugins: [ - rehypeKatex, - [ - rehypePrettyCode, - /** @type {Partial} */ - ({ - 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} */ + ({ + theme: "one-dark-pro", + createHighlighter, + }), + ], + ], + }, + })(nextConfig) +); diff --git a/package.json b/package.json index 1b362059..6e4f11a1 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e2df2dbd..dd7ccd0a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -84,6 +84,9 @@ importers: specifier: 3.23.8 version: 3.23.8 devDependencies: + '@next/bundle-analyzer': + specifier: ^14.2.7 + version: 14.2.7(bufferutil@4.0.8)(utf-8-validate@6.0.4) '@storybook/addon-a11y': specifier: 8.2.9 version: 8.2.9(storybook@8.2.9(@babel/preset-env@7.25.2(@babel/core@7.25.2))(bufferutil@4.0.8)(utf-8-validate@6.0.4)) @@ -894,6 +897,10 @@ packages: '@bundled-es-modules/tough-cookie@0.1.6': resolution: {integrity: sha512-dvMHbL464C0zI+Yqxbz6kZ5TOEp7GLW+pry/RWndAR8MJQAXZ2rPmIs8tziTZjeIyhSNZgZbCePtfSbdWqStJw==} + '@discoveryjs/json-ext@0.5.7': + resolution: {integrity: sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==} + engines: {node: '>=10.0.0'} + '@drizzle-team/brocli@0.10.1': resolution: {integrity: sha512-AHy0vjc+n/4w/8Mif+w86qpppHuF3AyXbcWW+R/W7GNA3F5/p2nuhlkCJaTXSLZheB4l1rtHzOfr9A7NwoR/Zg==} @@ -1604,6 +1611,9 @@ packages: '@neondatabase/serverless@0.9.4': resolution: {integrity: sha512-D0AXgJh6xkf+XTlsO7iwE2Q1w8981E1cLCPAALMU2YKtkF/1SF6BiAzYARZFYo175ON+b1RNIy9TdSFHm5nteg==} + '@next/bundle-analyzer@14.2.7': + resolution: {integrity: sha512-Zz55BLjoNKiUjr8PJIMTXFQnbUEpk8qkXP5nmEcXvOorbruQOIdmkRa3sahlJZPWTjsZNpxwImhZf2yFMVMWeg==} + '@next/env@14.2.7': resolution: {integrity: sha512-OTx9y6I3xE/eih+qtthppwLytmpJVPM5PPoJxChFsbjIEFXIayG0h/xLzefHGJviAa3Q5+Fd+9uYojKkHDKxoQ==} @@ -2617,6 +2627,10 @@ packages: resolution: {integrity: sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==} engines: {node: '>=0.4.0'} + acorn-walk@8.3.3: + resolution: {integrity: sha512-MxXdReSRhGO7VlFe1bRG/oI7/mdLV9B9JJT0N8vZOhF7gFRR5l3M8W9G8JxmKV+JC5mGqJ0QvqfSOLsCPa4nUw==} + engines: {node: '>=0.4.0'} + acorn@7.4.1: resolution: {integrity: sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==} engines: {node: '>=0.4.0'} @@ -3226,6 +3240,10 @@ packages: resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==} engines: {node: '>= 6'} + commander@7.2.0: + resolution: {integrity: sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==} + engines: {node: '>= 10'} + commander@8.3.0: resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} engines: {node: '>= 12'} @@ -3389,6 +3407,9 @@ packages: resolution: {integrity: sha512-7P3FyqDcfeznLZp2b+OMitV9Sz2lUnsT87WaTat9nVwqsBkTzPG3lPLNwW3en6F4pHUiWzr6vb8CLhjdK9bcxQ==} engines: {node: '>=4.0'} + debounce@1.2.1: + resolution: {integrity: sha512-XRRe6Glud4rd/ZGQfiV1ruXSfbvfJedlV9Y6zOlP+2K04vBYiJEte6stfFkCP03aMnY5tsipamumUjL14fofug==} + debug@2.6.9: resolution: {integrity: sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==} peerDependencies: @@ -3668,6 +3689,9 @@ packages: sqlite3: optional: true + duplexer@0.1.2: + resolution: {integrity: sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==} + eastasianwidth@0.2.0: resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} @@ -4308,6 +4332,10 @@ packages: resolution: {integrity: sha512-GGTKBX4SD7Wdb8mqeDLni2oaRGYQWjWHGKPQ24ZMnUtKfcsVoiv4uX8+LJr1K6U5VW2Lu1BwJnj7uiori0YtRw==} engines: {node: ^12.22.0 || ^14.16.0 || ^16.0.0 || >=17.0.0} + gzip-size@6.0.0: + resolution: {integrity: sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==} + engines: {node: '>=10'} + has-bigints@1.0.2: resolution: {integrity: sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==} @@ -5659,6 +5687,10 @@ packages: resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==} engines: {node: '>=12'} + opener@1.5.2: + resolution: {integrity: sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==} + hasBin: true + optionator@0.9.4: resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==} engines: {node: '>= 0.8.0'} @@ -7217,6 +7249,11 @@ packages: resolution: {integrity: sha512-VwddBukDzu71offAQR975unBIGqfKZpM+8ZX6ySk8nYhVoo5CYaZyzt3YBvYtRtO+aoGlqxPg/B87NGVZ/fu6g==} engines: {node: '>=12'} + webpack-bundle-analyzer@4.10.1: + resolution: {integrity: sha512-s3P7pgexgT/HTUSYgxJyn28A+99mmLq4HsJepMPzu0R8ImJc52QNqaFYW1Z2z2uIb1/J3eYgaAWVpaC+v/1aAQ==} + engines: {node: '>= 10.13.0'} + hasBin: true + webpack-dev-middleware@6.1.3: resolution: {integrity: sha512-A4ChP0Qj8oGociTs6UdlRUGANIGrCDL3y+pmQMc+dSsraXHCatFpmMey4mYELA+juqwUqwQsUgJJISXl1KWmiw==} engines: {node: '>= 14.15.0'} @@ -7319,6 +7356,18 @@ packages: resolution: {integrity: sha512-7KxauUdBmSdWnmpaGFg+ppNjKF8uNLry8LyzjauQDOVONfFLNKrKvQOxZ/VuTIcS/gge/YNahf5RIIQWTSarlg==} engines: {node: ^12.13.0 || ^14.15.0 || >=16.0.0} + ws@7.5.10: + resolution: {integrity: sha512-+dbF1tHwZpXcbOJdVOkzLDxZP1ailvSxM6ZweXTegylPny803bFhA+vqBYw4s31NSAk4S2Qz+AKXK9a4wkdjcQ==} + engines: {node: '>=8.3.0'} + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: ^5.0.2 + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + ws@8.18.0: resolution: {integrity: sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==} engines: {node: '>=10.0.0'} @@ -8327,6 +8376,8 @@ snapshots: '@types/tough-cookie': 4.0.5 tough-cookie: 4.1.4 + '@discoveryjs/json-ext@0.5.7': {} + '@drizzle-team/brocli@0.10.1': {} '@emnapi/runtime@1.2.0': @@ -8953,6 +9004,13 @@ snapshots: dependencies: '@types/pg': 8.11.6 + '@next/bundle-analyzer@14.2.7(bufferutil@4.0.8)(utf-8-validate@6.0.4)': + dependencies: + webpack-bundle-analyzer: 4.10.1(bufferutil@4.0.8)(utf-8-validate@6.0.4) + transitivePeerDependencies: + - bufferutil + - utf-8-validate + '@next/env@14.2.7': {} '@next/eslint-plugin-next@14.2.7': @@ -10223,6 +10281,10 @@ snapshots: acorn-walk@7.2.0: {} + acorn-walk@8.3.3: + dependencies: + acorn: 8.12.1 + acorn@7.4.1: {} acorn@8.12.1: {} @@ -10912,6 +10974,8 @@ snapshots: commander@6.2.1: {} + commander@7.2.0: {} + commander@8.3.0: {} common-path-prefix@3.0.0: {} @@ -11100,6 +11164,8 @@ snapshots: date-format@4.0.3: {} + debounce@1.2.1: {} + debug@2.6.9: dependencies: ms: 2.0.0 @@ -11295,6 +11361,8 @@ snapshots: '@vercel/postgres': 0.9.0 react: 18.3.1 + duplexer@0.1.2: {} + eastasianwidth@0.2.0: {} ee-first@1.1.1: {} @@ -11575,7 +11643,7 @@ snapshots: eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.9.0(eslint@8.57.0) eslint-plugin-react: 7.35.0(eslint@8.57.0) eslint-plugin-react-hooks: 4.6.2(eslint@8.57.0) @@ -11603,7 +11671,7 @@ snapshots: enhanced-resolve: 5.17.1 eslint: 8.57.0 eslint-module-utils: 2.8.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) - eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) + eslint-plugin-import: 2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0) fast-glob: 3.3.2 get-tsconfig: 4.7.6 is-core-module: 2.15.0 @@ -11625,7 +11693,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): + eslint-plugin-import@2.29.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.1(@typescript-eslint/parser@7.2.0(eslint@8.57.0)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1(eslint@8.57.0))(eslint@8.57.0))(eslint@8.57.0): dependencies: array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 @@ -12243,6 +12311,10 @@ snapshots: graphql@16.9.0: {} + gzip-size@6.0.0: + dependencies: + duplexer: 0.1.2 + has-bigints@1.0.2: {} has-flag@3.0.0: {} @@ -14133,6 +14205,8 @@ snapshots: dependencies: mimic-fn: 4.0.0 + opener@1.5.2: {} + optionator@0.9.4: dependencies: deep-is: 0.1.4 @@ -15845,6 +15919,25 @@ snapshots: webidl-conversions@7.0.0: {} + webpack-bundle-analyzer@4.10.1(bufferutil@4.0.8)(utf-8-validate@6.0.4): + dependencies: + '@discoveryjs/json-ext': 0.5.7 + acorn: 8.12.1 + acorn-walk: 8.3.3 + commander: 7.2.0 + debounce: 1.2.1 + escape-string-regexp: 4.0.0 + gzip-size: 6.0.0 + html-escaper: 2.0.2 + is-plain-object: 5.0.0 + opener: 1.5.2 + picocolors: 1.0.1 + sirv: 2.0.4 + ws: 7.5.10(bufferutil@4.0.8)(utf-8-validate@6.0.4) + transitivePeerDependencies: + - bufferutil + - utf-8-validate + webpack-dev-middleware@6.1.3(webpack@5.93.0(@swc/core@1.7.3(@swc/helpers@0.5.5))(esbuild@0.21.5)): dependencies: colorette: 2.0.20 @@ -16000,6 +16093,11 @@ snapshots: imurmurhash: 0.1.4 signal-exit: 3.0.7 + ws@7.5.10(bufferutil@4.0.8)(utf-8-validate@6.0.4): + optionalDependencies: + bufferutil: 4.0.8 + utf-8-validate: 6.0.4 + ws@8.18.0(bufferutil@4.0.8)(utf-8-validate@6.0.4): optionalDependencies: bufferutil: 4.0.8 From cc679bd7b115e71f8332a4a5976a1a2f8b8c44f8 Mon Sep 17 00:00:00 2001 From: Koki Sakano Date: Wed, 4 Sep 2024 20:35:35 +0900 Subject: [PATCH 5/7] metadata --- src/app/blog/color-contrast/layout.tsx | 13 ++-- src/app/blog/color-contrast/twitter-image.tsx | 63 ++++++++++++++++--- src/app/blog/layout.tsx | 3 + src/app/blog/opengraph-image.tsx | 20 ++++-- .../tanstack-router-introduction/layout.tsx | 13 ++-- .../opengraph-image.tsx | 2 +- .../twitter-image.tsx | 63 ++++++++++++++++--- src/app/blog/twitter-image.tsx | 26 +++++--- src/app/characters/check-syntax/layout.tsx | 3 + .../check-syntax/opengraph-image.tsx | 47 ++++++++++++++ .../characters/check-syntax/twitter-image.tsx | 47 ++++++++++++++ src/app/characters/counter/layout.tsx | 3 + .../characters/counter/opengraph-image.tsx | 47 ++++++++++++++ src/app/characters/counter/twitter-image.tsx | 47 ++++++++++++++ src/app/characters/layout.tsx | 3 + src/app/characters/opengraph-image.tsx | 20 ++++-- src/app/characters/twitter-image.tsx | 26 +++++--- src/app/colors/contrasts/layout.tsx | 3 + src/app/colors/contrasts/opengraph-image.tsx | 47 ++++++++++++++ src/app/colors/contrasts/twitter-image.tsx | 47 ++++++++++++++ src/app/colors/converter/layout.tsx | 3 + src/app/colors/converter/opengraph-image.tsx | 47 ++++++++++++++ src/app/colors/converter/twitter-image.tsx | 47 ++++++++++++++ src/app/colors/layout.tsx | 3 + src/app/colors/opengraph-image.tsx | 20 ++++-- src/app/colors/twitter-image.tsx | 26 +++++--- src/app/layout.tsx | 18 +++++- src/app/number/converter/layout.tsx | 3 + src/app/number/converter/opengraph-image.tsx | 47 ++++++++++++++ src/app/number/converter/twitter-image.tsx | 47 ++++++++++++++ src/app/number/layout.tsx | 3 + src/app/number/opengraph-image.tsx | 20 ++++-- src/app/number/twitter-image.tsx | 26 +++++--- src/app/opengraph-image.tsx | 36 ++++++++--- src/app/quizzes/fish-kanji/layout.tsx | 3 + .../quizzes/fish-kanji/opengraph-image.tsx | 20 ++++-- src/app/quizzes/fish-kanji/twitter-image.tsx | 26 +++++--- src/app/quizzes/layout.tsx | 3 + src/app/quizzes/opengraph-image.tsx | 20 ++++-- src/app/quizzes/twitter-image.tsx | 26 +++++--- src/app/sql-statement/layout.tsx | 3 + src/app/sql-statement/opengraph-image.tsx | 20 ++++-- src/app/sql-statement/twitter-image.tsx | 26 +++++--- src/app/twitter-image.tsx | 42 +++++++++---- 44 files changed, 950 insertions(+), 128 deletions(-) create mode 100644 src/app/characters/check-syntax/opengraph-image.tsx create mode 100644 src/app/characters/check-syntax/twitter-image.tsx create mode 100644 src/app/characters/counter/opengraph-image.tsx create mode 100644 src/app/characters/counter/twitter-image.tsx create mode 100644 src/app/colors/contrasts/opengraph-image.tsx create mode 100644 src/app/colors/contrasts/twitter-image.tsx create mode 100644 src/app/colors/converter/opengraph-image.tsx create mode 100644 src/app/colors/converter/twitter-image.tsx create mode 100644 src/app/number/converter/opengraph-image.tsx create mode 100644 src/app/number/converter/twitter-image.tsx diff --git a/src/app/blog/color-contrast/layout.tsx b/src/app/blog/color-contrast/layout.tsx index c5b871c3..310a51f2 100644 --- a/src/app/blog/color-contrast/layout.tsx +++ b/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、小文字のテ', }, }; diff --git a/src/app/blog/color-contrast/twitter-image.tsx b/src/app/blog/color-contrast/twitter-image.tsx index 9e8bab46..e789cab2 100644 --- a/src/app/blog/color-contrast/twitter-image.tsx +++ b/src/app/blog/color-contrast/twitter-image.tsx @@ -1,32 +1,77 @@ import { ImageResponse } from 'next/og'; +import { Parser, jaModel } from 'budoux'; + +const parser = new Parser(jaModel); export const runtime = 'edge'; export const alt = '色のコントラスト比は重要だけどどうやって求めるんだっけ？'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; export default async function TwitterImage() { + const words = parser.parse( + '色のコントラスト比は重要だけどどうやって求めるんだっけ？', + ); return new ImageResponse( (
- ⚖️ +
+
+ {words.map((word) => ( + + {word} + + ))} +
+

+ ⚖️ +

+
), { diff --git a/src/app/blog/layout.tsx b/src/app/blog/layout.tsx index 92dcbeb8..e7f1d3b2 100644 --- a/src/app/blog/layout.tsx +++ b/src/app/blog/layout.tsx @@ -9,6 +9,9 @@ export const metadata = { title: 'Blog', description: 'k8oのブログです。', url: 'https://k8o.me/blog', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'Blog', diff --git a/src/app/blog/opengraph-image.tsx b/src/app/blog/opengraph-image.tsx index ae464235..1dc51a2e 100644 --- a/src/app/blog/opengraph-image.tsx +++ b/src/app/blog/opengraph-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'blog'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; @@ -15,7 +15,7 @@ export default async function OpenGraphImage() { (
- 📕 +
+ 📕 +
), { diff --git a/src/app/blog/tanstack-router-introduction/layout.tsx b/src/app/blog/tanstack-router-introduction/layout.tsx index 1c6ecdc4..b7a07dd0 100644 --- a/src/app/blog/tanstack-router-introduction/layout.tsx +++ b/src/app/blog/tanstack-router-introduction/layout.tsx @@ -4,21 +4,26 @@ import { BlogLayout } from '../_components/blog-layout/blog-layout'; export const metadata: Metadata = { title: 'Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ', description: - '背景色とテキスト色のコントラスト比はWCAG 2.1においてAA基準とAAA基準の2つの達成基準によって定められています。 AA基準における大文字のテキストの最小コントラスト比は4.5:1、小文字のテ', + 'React で開発する時、どのようにルーティングを実装していますか？Next.jsやRemixなどのフレームワークを用いて開発するときはフレームワークに実装されたルーティング利用し、フレームワークを利', category: 'TanStackRouter', openGraph: { title: 'Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ', description: - '背景色とテキスト色のコントラスト比はWCAG 2.1においてAA基準とAAA基準の2つの達成基準によって定められています。 AA基準における大文字のテキストの最小コントラスト比は4.5:1、小文字のテ', + 'React で開発する時、どのようにルーティングを実装していますか？Next.jsやRemixなどのフレームワークを用いて開発するときはフレームワークに実装されたルーティング利用し、フレームワークを利', url: 'https://k8o.me/blog/tanstack-router-introduction', + publishedTime: '2023/07/13T00:00:00.000Z', + authors: ['k8o'], + siteName: 'k8o', + locale: 'ja', + type: 'article', }, twitter: { title: 'Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ', - card: 'summary', + card: 'summary_large_image', description: - '背景色とテキスト色のコントラスト比はWCAG 2.1においてAA基準とAAA基準の2つの達成基準によって定められています。 AA基準における大文字のテキストの最小コントラスト比は4.5:1、小文字のテ', + 'React で開発する時、どのようにルーティングを実装していますか？Next.jsやRemixなどのフレームワークを用いて開発するときはフレームワークに実装されたルーティング利用し、フレームワークを利', }, }; diff --git a/src/app/blog/tanstack-router-introduction/opengraph-image.tsx b/src/app/blog/tanstack-router-introduction/opengraph-image.tsx index 3e8b0923..14fbb3d2 100644 --- a/src/app/blog/tanstack-router-introduction/opengraph-image.tsx +++ b/src/app/blog/tanstack-router-introduction/opengraph-image.tsx @@ -10,7 +10,7 @@ export const alt = export const size = { width: 1200, - height: 630, + height: 600, }; export const contentType = 'image/png'; diff --git a/src/app/blog/tanstack-router-introduction/twitter-image.tsx b/src/app/blog/tanstack-router-introduction/twitter-image.tsx index 849d7ed2..018668bb 100644 --- a/src/app/blog/tanstack-router-introduction/twitter-image.tsx +++ b/src/app/blog/tanstack-router-introduction/twitter-image.tsx @@ -1,32 +1,77 @@ import { ImageResponse } from 'next/og'; +import { Parser, jaModel } from 'budoux'; + +const parser = new Parser(jaModel); export const runtime = 'edge'; export const alt = 'Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; export default async function TwitterImage() { + const words = parser.parse( + 'Reactの新しいルーティングライブラリ、TanStackRouterを学ぶ', + ); return new ImageResponse( (
- 😃 +
+
+ {words.map((word) => ( + + {word} + + ))} +
+

+ 😃 +

+
), { diff --git a/src/app/blog/twitter-image.tsx b/src/app/blog/twitter-image.tsx index 914c7aaf..7c8f04e7 100644 --- a/src/app/blog/twitter-image.tsx +++ b/src/app/blog/twitter-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'blog'; export const size = { - width: 500, - height: 500, + width: 512, + height: 512, }; export const contentType = 'image/png'; @@ -15,17 +15,29 @@ export default async function TwitterImage() { (
- 📕 +
+ 📕 +
), { diff --git a/src/app/characters/check-syntax/layout.tsx b/src/app/characters/check-syntax/layout.tsx index d460dd00..5666ba85 100644 --- a/src/app/characters/check-syntax/layout.tsx +++ b/src/app/characters/check-syntax/layout.tsx @@ -8,6 +8,9 @@ export const metadata = { title: '日本語校正くん', description: 'テキストエリアに入力した文章の校正を行います', url: 'https://k8o.me/characters/check-syntax', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: '日本語校正くん', diff --git a/src/app/characters/check-syntax/opengraph-image.tsx b/src/app/characters/check-syntax/opengraph-image.tsx new file mode 100644 index 00000000..c100cf8b --- /dev/null +++ b/src/app/characters/check-syntax/opengraph-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'check japanese syntax'; +export const size = { + width: 1200, + height: 600, +}; + +export const contentType = 'image/png'; + +export default async function OpenGraphImage() { + return new ImageResponse( + ( +
+
+ 🧐 +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/characters/check-syntax/twitter-image.tsx b/src/app/characters/check-syntax/twitter-image.tsx new file mode 100644 index 00000000..862fb2e7 --- /dev/null +++ b/src/app/characters/check-syntax/twitter-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'check japanese syntax'; +export const size = { + width: 512, + height: 512, +}; + +export const contentType = 'image/png'; + +export default async function TwitterImage() { + return new ImageResponse( + ( +
+
+ 🧐 +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/characters/counter/layout.tsx b/src/app/characters/counter/layout.tsx index 8478ad58..74b35ee8 100644 --- a/src/app/characters/counter/layout.tsx +++ b/src/app/characters/counter/layout.tsx @@ -7,6 +7,9 @@ export const metadata = { title: '文字数カウンター', description: '入力した文字数をカウントします', url: 'https://k8o.me/characters/counter', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: '文字数カウンター', diff --git a/src/app/characters/counter/opengraph-image.tsx b/src/app/characters/counter/opengraph-image.tsx new file mode 100644 index 00000000..6d7dfcd5 --- /dev/null +++ b/src/app/characters/counter/opengraph-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'character counter'; +export const size = { + width: 1200, + height: 600, +}; + +export const contentType = 'image/png'; + +export default async function OpenGraphImage() { + return new ImageResponse( + ( +
+
+ 📏 +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/characters/counter/twitter-image.tsx b/src/app/characters/counter/twitter-image.tsx new file mode 100644 index 00000000..b5f68efc --- /dev/null +++ b/src/app/characters/counter/twitter-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'character counter'; +export const size = { + width: 512, + height: 512, +}; + +export const contentType = 'image/png'; + +export default async function TwitterImage() { + return new ImageResponse( + ( +
+
+ 📏 +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/characters/layout.tsx b/src/app/characters/layout.tsx index ecc626ef..77c054bf 100644 --- a/src/app/characters/layout.tsx +++ b/src/app/characters/layout.tsx @@ -9,6 +9,9 @@ export const metadata = { description: '入力した文字の検索など、文字に対する操作を提供します', url: 'https://k8o.me/characters', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'Characters', diff --git a/src/app/characters/opengraph-image.tsx b/src/app/characters/opengraph-image.tsx index 14304f7e..e0126791 100644 --- a/src/app/characters/opengraph-image.tsx +++ b/src/app/characters/opengraph-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'characters'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; @@ -15,7 +15,7 @@ export default async function OpenGraphImage() { (
- 📄 +
+ 📄 +
), { diff --git a/src/app/characters/twitter-image.tsx b/src/app/characters/twitter-image.tsx index 1a8364a7..4e3ee3f4 100644 --- a/src/app/characters/twitter-image.tsx +++ b/src/app/characters/twitter-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'characters'; export const size = { - width: 500, - height: 500, + width: 512, + height: 512, }; export const contentType = 'image/png'; @@ -15,17 +15,29 @@ export default async function TwitterImage() { (
- 📄 +
+ 📄 +
), { diff --git a/src/app/colors/contrasts/layout.tsx b/src/app/colors/contrasts/layout.tsx index f30beb08..175fdbcf 100644 --- a/src/app/colors/contrasts/layout.tsx +++ b/src/app/colors/contrasts/layout.tsx @@ -7,6 +7,9 @@ export const metadata = { title: 'コントラスト比チェッカー', description: 'コントラスト比をチェックします', url: 'https://k8o.me/colors/contrasts', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'コントラスト比チェッカー', diff --git a/src/app/colors/contrasts/opengraph-image.tsx b/src/app/colors/contrasts/opengraph-image.tsx new file mode 100644 index 00000000..ccd8ddad --- /dev/null +++ b/src/app/colors/contrasts/opengraph-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'check contrast'; +export const size = { + width: 1200, + height: 600, +}; + +export const contentType = 'image/png'; + +export default async function OpenGraphImage() { + return new ImageResponse( + ( +
+
+ ⚖️ +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/colors/contrasts/twitter-image.tsx b/src/app/colors/contrasts/twitter-image.tsx new file mode 100644 index 00000000..80548fb5 --- /dev/null +++ b/src/app/colors/contrasts/twitter-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'check contrast'; +export const size = { + width: 512, + height: 512, +}; + +export const contentType = 'image/png'; + +export default async function TwitterImage() { + return new ImageResponse( + ( +
+
+ ⚖️ +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/colors/converter/layout.tsx b/src/app/colors/converter/layout.tsx index f3a86aae..4d1b2bdf 100644 --- a/src/app/colors/converter/layout.tsx +++ b/src/app/colors/converter/layout.tsx @@ -7,6 +7,9 @@ export const metadata = { title: '色変換ツール', description: 'カラーコードの形式を変換します', url: 'https://k8o.me/colors/converter', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: '色変換ツール', diff --git a/src/app/colors/converter/opengraph-image.tsx b/src/app/colors/converter/opengraph-image.tsx new file mode 100644 index 00000000..fd63c465 --- /dev/null +++ b/src/app/colors/converter/opengraph-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'color converter'; +export const size = { + width: 1200, + height: 600, +}; + +export const contentType = 'image/png'; + +export default async function OpenGraphImage() { + return new ImageResponse( + ( +
+
+ 🧬 +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/colors/converter/twitter-image.tsx b/src/app/colors/converter/twitter-image.tsx new file mode 100644 index 00000000..c503fda1 --- /dev/null +++ b/src/app/colors/converter/twitter-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'color converter'; +export const size = { + width: 512, + height: 512, +}; + +export const contentType = 'image/png'; + +export default async function TwitterImage() { + return new ImageResponse( + ( +
+
+ 🧬 +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/colors/layout.tsx b/src/app/colors/layout.tsx index 5f588cd5..21039dc9 100644 --- a/src/app/colors/layout.tsx +++ b/src/app/colors/layout.tsx @@ -8,6 +8,9 @@ export const metadata = { title: 'Colors', description: 'コントラスト比など、色にまつわる機能を提供します', url: 'https://k8o.me/colors', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'Colors', diff --git a/src/app/colors/opengraph-image.tsx b/src/app/colors/opengraph-image.tsx index 2adb2ab0..185ec21b 100644 --- a/src/app/colors/opengraph-image.tsx +++ b/src/app/colors/opengraph-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'colros'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; @@ -15,7 +15,7 @@ export default async function OpenGraphImage() { (
- 🎨 +
+ 🎨 +
), { diff --git a/src/app/colors/twitter-image.tsx b/src/app/colors/twitter-image.tsx index 707ff44e..85b625f4 100644 --- a/src/app/colors/twitter-image.tsx +++ b/src/app/colors/twitter-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'colors'; export const size = { - width: 500, - height: 500, + width: 512, + height: 512, }; export const contentType = 'image/png'; @@ -15,17 +15,29 @@ export default async function TwitterImage() { (
- 🎨 +
+ 🎨 +
), { diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8d84564a..0e12916c 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -19,12 +19,28 @@ const subFont = Noto_Sans_JP({ }); export const metadata: Metadata = { + metadataBase: new URL('https://k8o.me'), title: 'k8o', - description: 'k8o portal', + description: 'k8oのトップページ', + generator: 'Next.js', + applicationName: 'k8o', + referrer: 'origin-when-cross-origin', + keywords: ['k8o'], + authors: [{ name: 'k8o' }], + creator: 'k8o', + publisher: 'k8o', + formatDetection: { + email: false, + address: false, + telephone: false, + }, openGraph: { title: 'k8o', description: 'k8oのトップページ', url: 'https://k8o.me', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'k8o', diff --git a/src/app/number/converter/layout.tsx b/src/app/number/converter/layout.tsx index 900b8585..1a8a3c12 100644 --- a/src/app/number/converter/layout.tsx +++ b/src/app/number/converter/layout.tsx @@ -7,6 +7,9 @@ export const metadata = { title: '基数変換ツール', description: '10進数から2進数のように基数を変換します', url: 'https://k8o.me/number/converter', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: '基数変換ツール', diff --git a/src/app/number/converter/opengraph-image.tsx b/src/app/number/converter/opengraph-image.tsx new file mode 100644 index 00000000..e75f5764 --- /dev/null +++ b/src/app/number/converter/opengraph-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'base converter'; +export const size = { + width: 1200, + height: 600, +}; + +export const contentType = 'image/png'; + +export default async function OpenGraphImage() { + return new ImageResponse( + ( +
+
+ 🧬 +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/number/converter/twitter-image.tsx b/src/app/number/converter/twitter-image.tsx new file mode 100644 index 00000000..971e141d --- /dev/null +++ b/src/app/number/converter/twitter-image.tsx @@ -0,0 +1,47 @@ +import { ImageResponse } from 'next/og'; + +export const runtime = 'edge'; + +export const alt = 'base converter'; +export const size = { + width: 512, + height: 512, +}; + +export const contentType = 'image/png'; + +export default async function TwitterImage() { + return new ImageResponse( + ( +
+
+ 🧬 +
+
+ ), + { + ...size, + }, + ); +} diff --git a/src/app/number/layout.tsx b/src/app/number/layout.tsx index b0da4e96..e8cb6303 100644 --- a/src/app/number/layout.tsx +++ b/src/app/number/layout.tsx @@ -8,6 +8,9 @@ export const metadata = { title: 'Converter', description: '数値の基数の変換など、便利な変換処理を提供します', url: 'https://k8o.me/converter', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'Converter', diff --git a/src/app/number/opengraph-image.tsx b/src/app/number/opengraph-image.tsx index c1764564..ed6858a0 100644 --- a/src/app/number/opengraph-image.tsx +++ b/src/app/number/opengraph-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'number'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; @@ -15,7 +15,7 @@ export default async function OpenGraphImage() { (
- 🔢 +
+ 🔢 +
), { diff --git a/src/app/number/twitter-image.tsx b/src/app/number/twitter-image.tsx index 7d56c6b2..cbd74c16 100644 --- a/src/app/number/twitter-image.tsx +++ b/src/app/number/twitter-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'number'; export const size = { - width: 500, - height: 500, + width: 512, + height: 512, }; export const contentType = 'image/png'; @@ -15,17 +15,29 @@ export default async function TwitterImage() { (
- 🔢 +
+ 🔢 +
), { diff --git a/src/app/opengraph-image.tsx b/src/app/opengraph-image.tsx index 485a9bdc..e58745f4 100644 --- a/src/app/opengraph-image.tsx +++ b/src/app/opengraph-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'k8o'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; @@ -15,7 +15,7 @@ export default async function OpenGraphImage() { (
- {/* eslint-disable-next-line @next/next/no-img-element */} - アイコン +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + アイコン +
), { diff --git a/src/app/quizzes/fish-kanji/layout.tsx b/src/app/quizzes/fish-kanji/layout.tsx index fd74ffa0..a825952c 100644 --- a/src/app/quizzes/fish-kanji/layout.tsx +++ b/src/app/quizzes/fish-kanji/layout.tsx @@ -7,6 +7,9 @@ export const metadata = { title: 'うおへんクイズ', description: 'うおへんを持つ漢字の問題を出します', url: 'https://k8o.me/quizzes/fish-kanji', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'うおへんクイズ', diff --git a/src/app/quizzes/fish-kanji/opengraph-image.tsx b/src/app/quizzes/fish-kanji/opengraph-image.tsx index 5fcdca41..e7aa4444 100644 --- a/src/app/quizzes/fish-kanji/opengraph-image.tsx +++ b/src/app/quizzes/fish-kanji/opengraph-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'fish kanji'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; @@ -15,7 +15,7 @@ export default async function OpenGraphImage() { (
- 🐟 +
+ 🐟 +
), { diff --git a/src/app/quizzes/fish-kanji/twitter-image.tsx b/src/app/quizzes/fish-kanji/twitter-image.tsx index 2b8e8062..4fbdaa6d 100644 --- a/src/app/quizzes/fish-kanji/twitter-image.tsx +++ b/src/app/quizzes/fish-kanji/twitter-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'fish kanji'; export const size = { - width: 500, - height: 500, + width: 512, + height: 512, }; export const contentType = 'image/png'; @@ -15,17 +15,29 @@ export default async function TwitterImage() { (
- 🐟 +
+ 🐟 +
), { diff --git a/src/app/quizzes/layout.tsx b/src/app/quizzes/layout.tsx index 5dae1b2c..e9391d25 100644 --- a/src/app/quizzes/layout.tsx +++ b/src/app/quizzes/layout.tsx @@ -8,6 +8,9 @@ export const metadata = { title: 'Quizzes', description: '色々なジャンルのクイズを出します', url: 'https://k8o.me/quizzes', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'Quizzes', diff --git a/src/app/quizzes/opengraph-image.tsx b/src/app/quizzes/opengraph-image.tsx index 76fb4ac9..d2a439d3 100644 --- a/src/app/quizzes/opengraph-image.tsx +++ b/src/app/quizzes/opengraph-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'quizzes'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; @@ -15,7 +15,7 @@ export default async function OpenGraphImage() { (
- 💡 +
+ 💡 +
), { diff --git a/src/app/quizzes/twitter-image.tsx b/src/app/quizzes/twitter-image.tsx index 2f4935ce..e5c708a6 100644 --- a/src/app/quizzes/twitter-image.tsx +++ b/src/app/quizzes/twitter-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'quizzes'; export const size = { - width: 500, - height: 500, + width: 512, + height: 512, }; export const contentType = 'image/png'; @@ -15,17 +15,29 @@ export default async function TwitterImage() { (
- 💡 +
+ 💡 +
), { diff --git a/src/app/sql-statement/layout.tsx b/src/app/sql-statement/layout.tsx index 99c29817..f6158e63 100644 --- a/src/app/sql-statement/layout.tsx +++ b/src/app/sql-statement/layout.tsx @@ -9,6 +9,9 @@ export const metadata = { description: 'テーブルの作成など、SQLに関するコマンドを作成する機能を提供します', url: 'https://k8o.me/sql-statement', + siteName: 'k8o', + locale: 'ja', + type: 'website', }, twitter: { title: 'SQL Statement', diff --git a/src/app/sql-statement/opengraph-image.tsx b/src/app/sql-statement/opengraph-image.tsx index 9929fbd5..346a2ffb 100644 --- a/src/app/sql-statement/opengraph-image.tsx +++ b/src/app/sql-statement/opengraph-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'converter'; export const size = { - width: 500, - height: 500, + width: 1200, + height: 600, }; export const contentType = 'image/png'; @@ -15,7 +15,7 @@ export default async function OpenGraphImage() { (
- 🖥️ +
+ 🖥️ +
), { diff --git a/src/app/sql-statement/twitter-image.tsx b/src/app/sql-statement/twitter-image.tsx index d6858fb7..9d6c4aba 100644 --- a/src/app/sql-statement/twitter-image.tsx +++ b/src/app/sql-statement/twitter-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'converter'; export const size = { - width: 500, - height: 500, + width: 512, + height: 512, }; export const contentType = 'image/png'; @@ -15,17 +15,29 @@ export default async function TwitterImage() { (
- 🖥️ +
+ 🖥️ +
), { diff --git a/src/app/twitter-image.tsx b/src/app/twitter-image.tsx index 6115646a..a15ab3bb 100644 --- a/src/app/twitter-image.tsx +++ b/src/app/twitter-image.tsx @@ -4,8 +4,8 @@ export const runtime = 'edge'; export const alt = 'k8o'; export const size = { - width: 500, - height: 500, + width: 512, + height: 512, }; export const contentType = 'image/png'; @@ -15,23 +15,39 @@ export default async function TwitterImage() { (
- {/* eslint-disable-next-line @next/next/no-img-element */} - アイコン +
+ {/* eslint-disable-next-line @next/next/no-img-element */} + アイコン +
), { From 35c6ae5def0ec0b8310130599a2bb0a1b9d46d38 Mon Sep 17 00:00:00 2001 From: Koki Sakano Date: Wed, 4 Sep 2024 20:35:36 +0900 Subject: [PATCH 6/7] =?UTF-8?q?link=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/icons/icons.stories.tsx | 5 ++ src/mdx-components.tsx | 68 ++++++++++++++++++++------ 2 files changed, 58 insertions(+), 15 deletions(-) diff --git a/src/components/icons/icons.stories.tsx b/src/components/icons/icons.stories.tsx index 008fd900..9fcc2894 100644 --- a/src/components/icons/icons.stories.tsx +++ b/src/components/icons/icons.stories.tsx @@ -14,6 +14,7 @@ import { CircleCheck, ClipboardPenLine, Info, + Link, ListMinus, Table2, TriangleAlert, @@ -75,6 +76,10 @@ export const Primary: Story = {

Error

+
+ +

Link

+

Form

diff --git a/src/mdx-components.tsx b/src/mdx-components.tsx index 0349fd98..33c5c1a7 100644 --- a/src/mdx-components.tsx +++ b/src/mdx-components.tsx @@ -1,34 +1,72 @@ import type { MDXComponents } from 'mdx/types'; +import { Link } from 'lucide-react'; import { Anchor } from './components/anchor'; +import { FC, PropsWithChildren } from 'react'; +import clsx from 'clsx'; + +const LinkHeading: FC< + PropsWithChildren<{ + type: 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; + }> +> = ({ type, children }) => { + const Comp = type; + + const isStringChildren = typeof children === 'string'; + + return ( + + {isStringChildren && ( + + )} + {children} + + ); +}; export function useMDXComponents( components: MDXComponents, ): MDXComponents { return { h1: ({ children }) => ( -

- {children} -

+ {children} ), h2: ({ children }) => ( -

- {children} -

+ {children} ), h3: ({ children }) => ( -

- {children} -

+ {children} ), h4: ({ children }) => ( -
- {children} -
+ {children} ), h5: ({ children }) => ( -
- {children} -
+ {children} ), a: ({ href, children }) => ( <> From bf8ab116c650241f593bc69e72183c46fe978a19 Mon Sep 17 00:00:00 2001 From: Koki Sakano Date: Wed, 4 Sep 2024 20:35:36 +0900 Subject: [PATCH 7/7] =?UTF-8?q?javascript=20engine=E3=82=92=E5=88=A9?= =?UTF-8?q?=E7=94=A8=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/next.config.js b/next.config.js index dd65c898..1aad22a8 100644 --- a/next.config.js +++ b/next.config.js @@ -3,7 +3,7 @@ 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 = { @@ -31,7 +31,12 @@ export default withBundleAnalyzer( /** @type {Partial} */ ({ theme: "one-dark-pro", - createHighlighter, + createHighlighter: (options) => { + createHighlighter({ + ...options, + engine: createJavaScriptRegexEngine(), + }) + }, }), ], ],