feat(theme): replace twitter with x in soicalLinks config (#1316)

web-infra-dev · Aug 8, 2024 · 25d1324 · 25d1324
1 parent cb600a2
commit 25d1324
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 16 deletions.
diff --git a/packages/document/docs/en/api/config/config-theme.mdx b/packages/document/docs/en/api/config/config-theme.mdx
@@ -348,7 +348,7 @@ export default defineConfig({
 - Type: `Array`
 - Default: `[]`
 
-You can add related links through the following config, such as `github` links, `twitter` links, etc.
+You can add related links through the following config, such as `github` links, `x` links, etc.
 Related links support four modes: `link mode` `text mode` `image mode` `dom mode`, for example:
 
 ```ts title="rspress.config.ts"
@@ -399,6 +399,7 @@ export type SocialLinkIcon =
   | 'instagram'
   | 'linkedin'
   | 'slack'
+  | 'x'
   | 'twitter'
   | 'youtube'
   | 'wechat'

diff --git a/packages/document/docs/en/guide/default-theme/navbar.mdx b/packages/document/docs/en/guide/default-theme/navbar.mdx
@@ -92,8 +92,8 @@ export default defineConfig({
             link: 'http://github.com/',
           },
           {
-            text: 'Twitter',
-            link: 'http://twitter.com/',
+            text: 'X',
+            link: 'http://x.com/',
           },
         ],
         position: 'left',

diff --git a/packages/document/docs/zh/api/config/config-theme.mdx b/packages/document/docs/zh/api/config/config-theme.mdx
@@ -334,7 +334,7 @@ export default defineConfig({
 - Type: `Array`
 - Default: `[]`
 
-你可以通过如下的配置添加相关链接，比如 `github` 链接、`twitter` 链接等。
+你可以通过如下的配置添加相关链接，比如 `github` 链接、`x` 链接等。
 相关链接支持四种模式：`链接模式link` `文本模式text` `图片模式img` `自定义模式dom`，相关例子如下：
 
 ```ts title="rspress.config.ts"
@@ -385,6 +385,7 @@ export type SocialLinkIcon =
   | 'instagram'
   | 'linkedin'
   | 'slack'
+  | 'x'
   | 'twitter'
   | 'youtube'
   | 'wechat'

diff --git a/packages/document/docs/zh/guide/default-theme/navbar.mdx b/packages/document/docs/zh/guide/default-theme/navbar.mdx
@@ -92,8 +92,8 @@ export default defineConfig({
             link: 'http://github.com/',
           },
           {
-            text: 'Twitter',
-            link: 'http://twitter.com/',
+            text: 'X',
+            link: 'http://x.com/',
           },
           // 也可以是一个导航栏组
           {

diff --git a/packages/document/rspress.config.ts b/packages/document/rspress.config.ts
@@ -58,6 +58,11 @@ export default defineConfig({
         mode: 'link',
         content: 'https://discord.gg/mkVw5zPAtf',
       },
+      {
+        icon: 'x',
+        mode: 'link',
+        content: 'https://x.com/rspack_dev',
+      },
     ],
     locales: [
       {

diff --git a/packages/shared/src/types/defaultTheme.ts b/packages/shared/src/types/defaultTheme.ts
@@ -49,7 +49,7 @@ export interface Config {
 
   /**
    * The social links to be displayed at the end of the nav bar. Perfect for
-   * placing links to social services such as GitHub, Twitter, Facebook, etc.
+   * placing links to social services such as GitHub, X, Facebook, etc.
    */
   socialLinks?: SocialLink[];
 
@@ -263,7 +263,7 @@ export type SocialLinkIcon =
   | 'instagram'
   | 'linkedin'
   | 'slack'
-  | 'twitter'
+  | 'x'
   | 'youtube'
   | 'wechat'
   | 'qq'

diff --git a/packages/theme-default/src/components/SocialLinks/LinkContent.tsx b/packages/theme-default/src/components/SocialLinks/LinkContent.tsx
@@ -11,13 +11,17 @@ interface ILinkContentComp {
 export const LinkContent = (props: ILinkContentComp) => {
   const { link, popperStyle = {} } = props;
   const { icon, mode = 'link', content } = link;
-  const IconComp =
-    typeof icon === 'object' ? (
-      // eslint-disable-next-line react/no-danger
-      <div dangerouslySetInnerHTML={{ __html: icon.svg }}></div>
-    ) : (
-      presetIcons[icon]
-    );
+
+  let IconComp: React.ReactElement = null;
+  if (typeof icon === 'object') {
+    // eslint-disable-next-line react/no-danger
+    IconComp = <div dangerouslySetInnerHTML={{ __html: icon.svg }}></div>;
+  } else if (icon) {
+    const iconLowerCase = icon.toLowerCase();
+    IconComp =
+      // redirect twitter's logo to `x`
+      iconLowerCase === 'twitter' ? presetIcons.x : presetIcons[iconLowerCase];
+  }
 
   const [contentVisible, setContentVisible] = useState(false);
   const mouseEnterIcon = () => {

diff --git a/packages/theme-default/src/components/SocialLinks/presetIcons.tsx b/packages/theme-default/src/components/SocialLinks/presetIcons.tsx
@@ -233,7 +233,7 @@ export default {
       />
     </svg>
   ),
-  X: (
+  x: (
     <svg
       role="img"
       viewBox="0 0 24 24"