feat: add tweet component

blog/develop/Next js 使用 Hono 接管 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)
 
 这就是坑点之一，返回给客户端的错误信息肯定不会是以这种格式。这里我将其更改为全局错误捕获，做法如下
 

blog/lifestyle/记 · 在 AI 公司入职一个月的体验与感悟.md

@@ -21,6 +21,8 @@ import Tweet from '@site/src/components/Tweet';
 
 ::: 
 
+<Tweet id="1840698427048616381" />
+
 已经在一家 AI 公司入职了一个月，对坐班有些厌恶的我，没想到有一天也会开始通勤打卡。而经历了这一个月的工作，我对坐班的态度有所转变，开始理解这种工作方式对我的意义。是时候分享入职这期间的工作内容与感受。
 
 <!-- truncate -->

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 }) =>

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"
   },

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 (
+    <BrowserOnly fallback={<div>Loading...</div>}>
+      {() => (
+        <span className="flex justify-center">
+          <ReactTweet id={id} />
+        </span>
+      )}
+    </BrowserOnly>
+  )
+}

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);
 }
 

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;
+  }
+}

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 (
       <span style={{ display: 'inline-flex', gap: '0.25rem' }}>
         {icon && <Icon className="a-icon" style={{ alignSelf: 'center' }} icon={icon} width={16} height={16} />}
-        <Link {...props} />
+        <Link {...props} className={'link'} />
       </span>
     )
   }
 
-  return <Link {...props} />
+  return <Link {...props} className={'link'} />
 }