diff --git "a/blog/develop/Next js \344\275\277\347\224\250 Hono \346\216\245\347\256\241 API.md" "b/blog/develop/Next js \344\275\277\347\224\250 Hono \346\216\245\347\256\241 API.md"
index 2e2af9ed7..66ea16b74 100644
--- "a/blog/develop/Next js \344\275\277\347\224\250 Hono \346\216\245\347\256\241 API.md"
+++ "b/blog/develop/Next js \344\275\277\347\224\250 Hono \346\216\245\347\256\241 API.md"
@@ -102,7 +102,7 @@ export default app
:::
-因为 zod-validator 默认以 json 格式返回整个 result，代码详见 https://github.com/honojs/middleware/blob/main/packages/zod-validator/src/index.ts#L68-L70
+因为 zod-validator 默认以 json 格式返回整个 result，代码详见 [zod-validator/src/index.ts#L68-L70](https://github.com/honojs/middleware/blob/main/packages/zod-validator/src/index.ts#L68-L70)
这就是坑点之一，返回给客户端的错误信息肯定不会是以这种格式。这里我将其更改为全局错误捕获，做法如下
diff --git "a/blog/lifestyle/\350\256\260 \302\267 \345\234\250 AI \345\205\254\345\217\270\345\205\245\350\201\214\344\270\200\344\270\252\346\234\210\347\232\204\344\275\223\351\252\214\344\270\216\346\204\237\346\202\237.md" "b/blog/lifestyle/\350\256\260 \302\267 \345\234\250 AI \345\205\254\345\217\270\345\205\245\350\201\214\344\270\200\344\270\252\346\234\210\347\232\204\344\275\223\351\252\214\344\270\216\346\204\237\346\202\237.md"
index 584cdfe35..804e5268d 100644
--- "a/blog/lifestyle/\350\256\260 \302\267 \345\234\250 AI \345\205\254\345\217\270\345\205\245\350\201\214\344\270\200\344\270\252\346\234\210\347\232\204\344\275\223\351\252\214\344\270\216\346\204\237\346\202\237.md"
+++ "b/blog/lifestyle/\350\256\260 \302\267 \345\234\250 AI \345\205\254\345\217\270\345\205\245\350\201\214\344\270\200\344\270\252\346\234\210\347\232\204\344\275\223\351\252\214\344\270\216\346\204\237\346\202\237.md"
@@ -21,6 +21,8 @@ import Tweet from '@site/src/components/Tweet';
:::
+
+
已经在一家 AI 公司入职了一个月，对坐班有些厌恶的我，没想到有一天也会开始通勤打卡。而经历了这一个月的工作，我对坐班的态度有所转变，开始理解这种工作方式对我的意义。是时候分享入职这期间的工作内容与感受。
diff --git a/docusaurus.config.ts b/docusaurus.config.ts
index d3ce091b7..94904d686 100644
--- a/docusaurus.config.ts
+++ b/docusaurus.config.ts
@@ -179,7 +179,7 @@ const config: Config = {
},
blog: false,
theme: {
- customCss: ['./src/css/custom.css'],
+ customCss: ['./src/css/custom.css', './src/css/tweet-theme.css'],
},
sitemap: {
priority: 0.5,
@@ -224,7 +224,7 @@ const config: Config = {
editLocalizedFiles: false,
blogDescription: '代码人生：编织技术与生活的博客之旅',
blogSidebarCount: 10,
- blogSidebarTitle: 'Blogs',
+ blogSidebarTitle: '博文',
postsPerPage: 12,
showReadingTime: true,
readingTime: ({ content, frontMatter, defaultReadingTime }) =>
diff --git a/package.json b/package.json
index 3a5489b75..6487f5c90 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
"react-github-calendar": "^4.1.6",
"react-icon-cloud": "^4.1.4",
"react-popper": "^2.3.0",
+ "react-tweet": "^3.2.1",
"tailwind-merge": "^2.3.0",
"tailwindcss": "^3.4.4"
},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c04b2bad4..4debd2ffc 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -80,6 +80,9 @@ importers:
react-popper:
specifier: ^2.3.0
version: 2.3.0(@popperjs/core@2.11.8)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+ react-tweet:
+ specifier: ^3.2.1
+ version: 3.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
tailwind-merge:
specifier: ^2.3.0
version: 2.3.0
@@ -1416,6 +1419,9 @@ packages:
resolution: {integrity: sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==}
engines: {node: '>=14'}
+ '@swc/helpers@0.5.13':
+ resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
+
'@szmarczak/http-timer@5.0.1':
resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==}
engines: {node: '>=14.16'}
@@ -2033,6 +2039,9 @@ packages:
resolution: {integrity: sha512-w5Jac5SykAeZJKntOxJCrm63Eg5/4dhMWIcuTbo9rpE+brgaSZo0RuNJZeOyMgsUdhDeojvgyQLmjI+K50ZGyg==}
engines: {node: 10.* || >= 12.*}
+ client-only@0.0.1:
+ resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+
clone-deep@4.0.1:
resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
engines: {node: '>=6'}
@@ -4628,6 +4637,12 @@ packages:
peerDependencies:
react: '>=15'
+ react-tweet@3.2.1:
+ resolution: {integrity: sha512-dktP3RMuwRB4pnSDocKpSsW5Hq1IXRW6fONkHhxT5EBIXsKZzdQuI70qtub1XN2dtZdkJWWxfBm/Q+kN+vRYFA==}
+ peerDependencies:
+ react: '>= 18.0.0'
+ react-dom: '>= 18.0.0'
+
react-waypoint@10.3.0:
resolution: {integrity: sha512-iF1y2c1BsoXuEGz08NoahaLFIGI9gTUAAOKip96HUmylRT6DUtpgoBPjk/Y8dfcFVmfVDvUzWjNXpZyKTOV0SQ==}
peerDependencies:
@@ -5134,6 +5149,11 @@ packages:
engines: {node: '>=14.0.0'}
hasBin: true
+ swr@2.2.5:
+ resolution: {integrity: sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==}
+ peerDependencies:
+ react: ^16.11.0 || ^17.0.0 || ^18.0.0
+
tailwind-merge@2.3.0:
resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==}
@@ -5382,6 +5402,11 @@ packages:
file-loader:
optional: true
+ use-sync-external-store@1.2.2:
+ resolution: {integrity: sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==}
+ peerDependencies:
+ react: ^16.8.0 || ^17.0.0 || ^18.0.0
+
util-deprecate@1.0.2:
resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
@@ -7721,6 +7746,10 @@ snapshots:
- supports-color
- typescript
+ '@swc/helpers@0.5.13':
+ dependencies:
+ tslib: 2.6.2
+
'@szmarczak/http-timer@5.0.1':
dependencies:
defer-to-connect: 2.0.1
@@ -8428,6 +8457,8 @@ snapshots:
optionalDependencies:
'@colors/colors': 1.5.0
+ client-only@0.0.1: {}
+
clone-deep@4.0.1:
dependencies:
is-plain-object: 2.0.4
@@ -11457,6 +11488,14 @@ snapshots:
tiny-invariant: 1.3.1
tiny-warning: 1.0.3
+ react-tweet@3.2.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
+ dependencies:
+ '@swc/helpers': 0.5.13
+ clsx: 2.0.0
+ react: 18.3.1
+ react-dom: 18.3.1(react@18.3.1)
+ swr: 2.2.5(react@18.3.1)
+
react-waypoint@10.3.0(react@18.3.1):
dependencies:
'@babel/runtime': 7.24.6
@@ -12096,6 +12135,12 @@ snapshots:
csso: 5.0.5
picocolors: 1.0.0
+ swr@2.2.5(react@18.3.1):
+ dependencies:
+ client-only: 0.0.1
+ react: 18.3.1
+ use-sync-external-store: 1.2.2(react@18.3.1)
+
tailwind-merge@2.3.0:
dependencies:
'@babel/runtime': 7.24.6
@@ -12395,6 +12440,10 @@ snapshots:
optionalDependencies:
file-loader: 6.2.0(webpack@5.88.2)
+ use-sync-external-store@1.2.2(react@18.3.1):
+ dependencies:
+ react: 18.3.1
+
util-deprecate@1.0.2: {}
utila@0.4.0: {}
diff --git a/src/components/Tweet/index.tsx b/src/components/Tweet/index.tsx
new file mode 100644
index 000000000..eafefa3e6
--- /dev/null
+++ b/src/components/Tweet/index.tsx
@@ -0,0 +1,14 @@
+import BrowserOnly from '@docusaurus/BrowserOnly'
+import { Tweet as ReactTweet } from 'react-tweet'
+
+export default function Tweet({ id }: { id: string }) {
+ return (
+ Loading...}>
+ {() => (
+
+
+
+ )}
+
+ )
+}
diff --git a/src/css/custom.css b/src/css/custom.css
index 6f6aa06f6..8a8b844a0 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -117,15 +117,15 @@ html[data-theme='dark'] .theme-code-block {
--prism-background-color: #1e1e1e !important;
}
-article .markdown a:not(.hash-link) {
+article .markdown a.link {
text-decoration: none;
font-weight: inherit;
border-bottom: 1px solid rgba(125, 125, 125, 0.3);
transition: border 0.3s ease-in-out;
}
-article .markdown a:not(.hash-link):hover,
-article .markdown a:not(.hash-link):focus {
+article .markdown a.link:hover,
+article .markdown a.link:focus {
border-bottom: 1px solid var(--ifm-color-primary-light);
}
diff --git a/src/css/tweet-theme.css b/src/css/tweet-theme.css
new file mode 100644
index 000000000..f56c36482
--- /dev/null
+++ b/src/css/tweet-theme.css
@@ -0,0 +1,133 @@
+.react-tweet-theme {
+ --tweet-container-margin: 1.5rem 0;
+
+ /* Header */
+ --tweet-header-font-size: 0.9375rem;
+ --tweet-header-line-height: 1.25rem;
+
+ /* Text */
+ --tweet-body-font-size: 1.25rem;
+ --tweet-body-font-weight: 400;
+ --tweet-body-line-height: 1.5rem;
+ --tweet-body-margin: 0;
+
+ /* Quoted Tweet */
+ --tweet-quoted-container-margin: 0.75rem 0;
+ --tweet-quoted-body-font-size: 0.938rem;
+ --tweet-quoted-body-font-weight: 400;
+ --tweet-quoted-body-line-height: 1.25rem;
+ --tweet-quoted-body-margin: 0.25rem 0 0.75rem 0;
+
+ /* Info */
+ --tweet-info-font-size: 0.9375rem;
+ --tweet-info-line-height: 1.25rem;
+
+ /* Actions like the like, reply and copy buttons */
+ --tweet-actions-font-size: 0.875rem;
+ --tweet-actions-line-height: 1rem;
+ --tweet-actions-font-weight: 700;
+ --tweet-actions-icon-size: 1.25em;
+ --tweet-actions-icon-wrapper-size: calc(
+ var(--tweet-actions-icon-size) + 0.75em
+ );
+
+ /* Reply button */
+ --tweet-replies-font-size: 0.875rem;
+ --tweet-replies-line-height: 1rem;
+ --tweet-replies-font-weight: 700;
+}
+
+:where(.react-tweet-theme) * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+:is([data-theme='light'], .light) :where(.react-tweet-theme),
+:where(.react-tweet-theme) {
+ --tweet-skeleton-gradient: linear-gradient(
+ 270deg,
+ #fafafa,
+ #eaeaea,
+ #eaeaea,
+ #fafafa
+ );
+ --tweet-border: 1px solid rgb(207, 217, 222);
+ --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Helvetica, Arial, sans-serif;
+ --tweet-font-color: rgb(15, 20, 25);
+ --tweet-font-color-secondary: rgb(83, 100, 113);
+ --tweet-bg-color: #fff;
+ --tweet-bg-color-hover: rgb(247, 249, 249);
+ --tweet-quoted-bg-color-hover: rgba(0, 0, 0, 0.03);
+ --tweet-color-blue-primary: rgb(29, 155, 240);
+ --tweet-color-blue-primary-hover: rgb(26, 140, 216);
+ --tweet-color-blue-secondary: rgb(0, 111, 214);
+ --tweet-color-blue-secondary-hover: rgba(0, 111, 214, 0.1);
+ --tweet-color-red-primary: rgb(249, 24, 128);
+ --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
+ --tweet-color-green-primary: rgb(0, 186, 124);
+ --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
+ --tweet-twitter-icon-color: var(--tweet-font-color);
+ --tweet-verified-old-color: rgb(130, 154, 171);
+ --tweet-verified-blue-color: var(--tweet-color-blue-primary);
+}
+
+:is([data-theme='dark'], .dark) :where(.react-tweet-theme) {
+ --tweet-skeleton-gradient: linear-gradient(
+ 270deg,
+ #15202b,
+ rgb(30, 39, 50),
+ rgb(30, 39, 50),
+ rgb(21, 32, 43)
+ );
+ --tweet-border: 1px solid rgb(66, 83, 100);
+ --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Helvetica, Arial, sans-serif;
+ --tweet-font-color: rgb(247, 249, 249);
+ --tweet-font-color-secondary: rgb(139, 152, 165);
+ --tweet-bg-color: rgb(21, 32, 43);
+ --tweet-bg-color-hover: rgb(30, 39, 50);
+ --tweet-quoted-bg-color-hover: rgba(255, 255, 255, 0.03);
+ --tweet-color-blue-primary: rgb(29, 155, 240);
+ --tweet-color-blue-primary-hover: rgb(26, 140, 216);
+ --tweet-color-blue-secondary: rgb(107, 201, 251);
+ --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1);
+ --tweet-color-red-primary: rgb(249, 24, 128);
+ --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
+ --tweet-color-green-primary: rgb(0, 186, 124);
+ --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
+ --tweet-twitter-icon-color: var(--tweet-font-color);
+ --tweet-verified-old-color: rgb(130, 154, 171);
+ --tweet-verified-blue-color: #fff;
+}
+
+@media (prefers-color-scheme: dark) {
+ :where(.react-tweet-theme) {
+ --tweet-skeleton-gradient: linear-gradient(
+ 270deg,
+ #15202b,
+ rgb(30, 39, 50),
+ rgb(30, 39, 50),
+ rgb(21, 32, 43)
+ );
+ --tweet-border: 1px solid rgb(66, 83, 100);
+ --tweet-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+ Helvetica, Arial, sans-serif;
+ --tweet-font-color: rgb(247, 249, 249);
+ --tweet-font-color-secondary: rgb(139, 152, 165);
+ --tweet-bg-color: rgb(21, 32, 43);
+ --tweet-bg-color-hover: rgb(30, 39, 50);
+ --tweet-color-blue-primary: rgb(29, 155, 240);
+ --tweet-color-blue-primary-hover: rgb(26, 140, 216);
+ --tweet-color-blue-secondary: rgb(107, 201, 251);
+ --tweet-color-blue-secondary-hover: rgba(107, 201, 251, 0.1);
+ --tweet-color-red-primary: rgb(249, 24, 128);
+ --tweet-color-red-primary-hover: rgba(249, 24, 128, 0.1);
+ --tweet-color-green-primary: rgb(0, 186, 124);
+ --tweet-color-green-primary-hover: rgba(0, 186, 124, 0.1);
+ --tweet-twitter-icon-color: var(--tweet-font-color);
+ --tweet-verified-old-color: rgb(130, 154, 171);
+ --tweet-verified-blue-color: #fff;
+ }
+}
diff --git a/src/theme/MDXComponents/A.tsx b/src/theme/MDXComponents/A.tsx
index f92b6aae7..3adcc1058 100644
--- a/src/theme/MDXComponents/A.tsx
+++ b/src/theme/MDXComponents/A.tsx
@@ -1,6 +1,5 @@
import Link from '@docusaurus/Link'
import type { Props } from '@theme/MDXComponents/A'
-import React from 'react'
import { Icon } from '@iconify/react'
@@ -11,7 +10,7 @@ export default function MDXA(props: Props): JSX.Element {
const iconMappings = {
'github.com': 'simple-icons:github',
- 'twitter.com': 'logos:twitter',
+ 'x.com': 'ri:twitter-x-fill',
}
const foundKey = Object.keys(iconMappings).find(key => {
@@ -25,10 +24,10 @@ export default function MDXA(props: Props): JSX.Element {
return (
{icon && }
-
+
)
}
- return
+ return
}