site: add juejin column card (#43171)

1 year ago · 285753c67f
5 changed files with 86 additions and 7 deletions
--- a/.dumi/theme/slots/Content/ColumnCard.tsx
+++ b/.dumi/theme/slots/Content/ColumnCard.tsx
@ -4,6 +4,7 @@ import { Button, Card, Divider } from 'antd';
 import React from 'react';
 import useLocale from '../../../hooks/useLocale';
 import useSiteToken from '../../../hooks/useSiteToken';
+import JuejinLogo from './JuejinLogo';

 const ANTD_IMG_URL =
  'https://picx.zhimg.com/v2-3b2bca09c2771e7a82a81562e806be4d.jpg?source=d16d100b';
@ -56,6 +57,8 @@ const useStyle = () => {
      text-overflow: ellipsis;
      white-space: nowrap;
      .logo {
+        width: 24px;
+        height: 24px;
        font-size: 24px;
        &.zhihu-logo {
          color: #056de8;
@ -63,6 +66,9 @@ const useStyle = () => {
        &.yuque-logo {
          color: #00b96b;
        }
+        &.juejin-logo {
+          color: #1e80ff;
+        }
      }
      .arrowIcon {
        margin: 0 8px;
@ -90,12 +96,14 @@ const locales = {
    bigTitle: '文章被以下专栏收录：',
    zhiHu: '一个 UI 设计体系',
    yuQue: 'Ant Design 官方专栏',
+    junjin: 'Ant Design 开源专栏',
    buttonText: '我有想法，去参与讨论',
  },
  en: {
    bigTitle: 'Articles are included in the column:',
    zhiHu: 'A UI design system',
    yuQue: 'Ant Design official column',
+    junjin: 'Ant Design Open Source Column',
    buttonText: 'Go to discuss',
  },
 };
@ -103,12 +111,13 @@ const locales = {
 interface Props {
  zhihuLink?: string;
  yuqueLink?: string;
+  juejinLink?: string;
 }

-const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => {
+const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink, juejinLink }) => {
  const [locale] = useLocale(locales);
  const { card, bigTitle, cardBody, left, title, subTitle, btn } = useStyle();
-  if (!zhihuLink && !yuqueLink) {
+  if (!zhihuLink && !yuqueLink && !juejinLink) {
    return null;
  }
  return (
@ -137,7 +146,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => {
          <Button
            type="primary"
            css={btn}
-            icon={<ZhihuOutlined style={{ fontSize: 15 }} />}
+            icon={<ZhihuOutlined style={{ fontSize: 16 }} />}
            ghost
            target="_blank"
            href={zhihuLink}
@ -171,7 +180,7 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => {
            <Button
              type="primary"
              css={btn}
-              icon={<YuqueOutlined style={{ fontSize: 15 }} />}
+              icon={<YuqueOutlined style={{ fontSize: 16 }} />}
              ghost
              target="_blank"
              href={yuqueLink}
@ -181,6 +190,41 @@ const ColumnCard: React.FC<Props> = ({ zhihuLink, yuqueLink }) => {
          </div>
        </>
      )}
+      {juejinLink && (
+        <>
+          <Divider />
+          <div css={cardBody}>
+            <div css={left}>
+              <img src={ANTD_IMG_URL} alt="antd" />
+              <div>
+                <p css={title}>Ant Design</p>
+                <div css={subTitle}>
+                  <JuejinLogo className="logo juejin-logo" />
+                  <RightOutlined className="arrowIcon" />
+                  <Button
+                    target="_blank"
+                    href="https://juejin.cn/column/7247354308258054200"
+                    className="zl-btn"
+                    type="link"
+                  >
+                    {locale.junjin}
+                  </Button>
+                </div>
+              </div>
+            </div>
+            <Button
+              type="primary"
+              css={btn}
+              icon={<JuejinLogo style={{ fontSize: 16, width: 16, height: 16 }} />}
+              ghost
+              target="_blank"
+              href={juejinLink}
+            >
+              {locale.buttonText}
+            </Button>
+          </div>
+        </>
+      )}
    </Card>
  );
 };
--- a/.dumi/theme/slots/Content/JuejinLogo.tsx
+++ b/.dumi/theme/slots/Content/JuejinLogo.tsx
@ -0,0 +1,30 @@
+import React from 'react';
+
+interface Props {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+const JuejinLogo: React.FC<Props> = (props) => {
+  const { className, style } = props;
+  return (
+    <svg
+      className={className}
+      style={style}
+      xmlns="http://www.w3.org/2000/svg"
+      width="36"
+      height="28"
+      viewBox="0 0 36 28"
+      fill="none"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M17.5875 6.77268L21.8232 3.40505L17.5875 0.00748237L17.5837 0L13.3555 3.39757L17.5837 6.76894L17.5875 6.77268ZM17.5863 17.3955H17.59L28.5161 8.77432L25.5526 6.39453L17.59 12.6808H17.5863L17.5825 12.6845L9.61993 6.40201L6.66016 8.78181L17.5825 17.3992L17.5863 17.3955ZM17.5828 23.2891L17.5865 23.2854L32.2133 11.7456L35.1768 14.1254L28.5238 19.3752L17.5865 28L0.284376 14.3574L0 14.1291L2.95977 11.7531L17.5828 23.2891Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default JuejinLogo;
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@ -273,10 +273,13 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
          ) : null}
          {!meta.frontmatter.__autoDescription && meta.frontmatter.description}
          {children}
-          {(meta.frontmatter?.zhihu_url || meta.frontmatter?.yuque_url) && (
+          {(meta.frontmatter?.zhihu_url ||
+            meta.frontmatter?.yuque_url ||
+            meta.frontmatter?.juejin_url) && (
            <ColumnCard
              zhihuLink={meta.frontmatter.zhihu_url}
              yuqueLink={meta.frontmatter.yuque_url}
+              juejinLink={meta.frontmatter.juejin_url}
            />
          )}
          {meta.frontmatter.filename && (
--- a/docs/blog/tree-shaking.en-US.md
+++ b/docs/blog/tree-shaking.en-US.md
@ -1,7 +1,8 @@
 ---
 title: Bundle Size Optimization
-date: 2023-06-24
+date: 2023-06-25
 author: zombieJ
+juejin_url: https://juejin.cn/post/7248424501813674021
 ---

 In modern JS applications, unused module can be automatically removed by modular packaging tools. This process is called [Tree Shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking). However, if you are already very familiar with it, you will find that it is not so perfect in reality. We still need some extra operations to achieve the best size optimization effect. Today, let's talk about a problem that ConfigProvider causes Tree Shaking to fail.
--- a/docs/blog/tree-shaking.zh-CN.md
+++ b/docs/blog/tree-shaking.zh-CN.md
@ -1,7 +1,8 @@
 ---
 title: 打包体积优化
-date: 2023-06-24
+date: 2023-06-25
 author: zombieJ
+juejin_url: https://juejin.cn/post/7248424501813674021
 ---

 在现代 JS 应用中，通过模块化打包工具可以自动将一些未使用的模块代码去除，这个过程叫做 [Tree Shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking)。不过如果你已经对此非常熟悉了，你会发现现实中它并不是那么完美，我们还需要一些额外的操作才能达到最佳的体积优化效果。今天，我们就来讲讲一个 ConfigProvider 导致的 Tree Shaking 失效的问题。