chore:backup

content/plus/MarkdownRender/index.md

@@ -1,44 +0,0 @@
----
-localeCode: zh-CN
-order: 0
-category: Plus
-title:  Markdown 渲染器
-icon: doc-configprovider
-dir: column
-brief: 在网页中即时渲染 Markdown 和 MDX
----
-
-
-
-## 代码演示
-
-### 如何引入
-
-```jsx live=true dir="column"
-import { MarkdownRender } from '@douyinfe/semi-ui';
-import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
-
-
-function Demo(){
-    return <MarkdownRender mdxRaw={`
-    
-    `} components={SemiMarkdownComponents}/>
-}
-
-```
-
-### 基本示例
-导入 MarkdownRender 后，直接传入 Markdown 或 MDX 纯文本即可。
-
-引入 SemiMarkdownComponents 并传入 MarkdownRender 可以美化文档，文档中的基础元素例如文本、标题、超链接、图片、表格等会使用 Semi 组件渲染，因为这些文档组件不是每个开发者必须，为了减少包体积，需要手动引入。
-
-
-### 文档中的自定义渲染
-
-你可以任意替换 Markdown 或 MDX 文档中的文档元素的显示效果，只需向 `components` props 中传入对于组件名称和你的渲染组件即可
-
-比如，现在需要将所有文本的颜色设置成蓝色
-
-```jsx
-
-```

content/plus/markdownrender/index.md

@@ -0,0 +1,122 @@
+---
+localeCode: zh-CN
+order: 20
+category: Plus
+title:  Markdown 渲染器
+icon: doc-configprovider
+dir: column
+brief: 在网页中即时渲染 Markdown 和 MDX
+---
+
+
+
+## 代码演示
+
+### 如何引入
+
+```jsx live=true dir="column"
+import { MarkdownRender } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo(){
+    return <MarkdownRender mdxRaw={`
+# 1号标题
+## 2号标题
+### 3号标题
+
+正文内容是普通的文本，也可以**加粗**~~删除线~~和<u>下划线</u> [超链接](https://semi.design) 等 Markdown 与 HTML 的基本语法所支持的富文本
+
+#### 列表语法支持
+- 好好地吃饭
+- 好好地睡觉
+- 好好地游玩
+- 好好地学习
+- 好好地聊天
+- 好好地吵架
+- 过着平凡普通的每日 
+
+
+
+![Colorful World](https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/colorful.jpg)
+    
+| Markdown 中的表格 | 也是支持的 |  c |  d  |
+| - | :- | -: | :-: |
+| 1 | 2 | 3 | 4 |
+| 21 | 22 | 23 | 24 |
+| 31 | 32 | 33 | 34 |
+| 41 | 42 | 43 | 44 |
+
+    `} components={SemiMarkdownComponents}/>
+}
+
+```
+
+### 基本示例
+导入 MarkdownRender 后，直接传入 Markdown 或 MDX 纯文本即可。
+
+引入 SemiMarkdownComponents 并传入 MarkdownRender 可以美化文档，文档中的基础元素例如文本、标题、超链接、图片、表格等会使用 Semi 组件渲染，因为这些文档组件不是每个开发者必须，为了减少包体积，需要手动引入。
+
+
+### 修改元素样式
+
+你可以任意替换 Markdown 或 MDX 文档中的文档元素的显示效果，只需向 `components` props 中传入你的渲染组件覆盖即可
+
+比如，现在需要将所有1号标题的颜色设置成红色
+
+```jsx live=true
+import { MarkdownRender, Typography } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo() {
+    const components ={...SemiMarkdownComponents};
+    
+    components['h1'] = ({children}) => <Typography.Title heading={1} style={{color:"var(--semi-color-danger)"}}>{children}</Typography.Title>
+    
+    return <MarkdownRender mdxRaw={`# 红色标题`} components={components} />
+}
+
+
+```
+
+
+### 添加自定义组件
+
+```jsx live=true
+import { Button, MarkdownRender, Typography } from '@douyinfe/semi-ui';
+import * as SemiMarkdownComponents from "@douyinfe/semi-ui/markdownRender/components"
+
+
+function Demo() {
+    const components = { ...SemiMarkdownComponents };
+
+    components['MyButton'] = ({ children,onClick }) => {
+        return <Button type={"primary"} onClick={onClick} style={{marginBottom:"12px"}}> {children} </Button>
+    }
+
+    return <MarkdownRender 
+        mdxRaw={`
+#### 下面是一个渲染在 Markdown 中的按钮
+<MyButton onClick={()=>alert("点击了 MyButton")}>MyButton 点我</MyButton>
+
+直接在 Markdown 中书写 JSX 即可
+        `} 
+        components={components} />
+}
+
+
+```
+
+
+### MarkdownRender
+
+| 属性         | 说明                         | 类型                                    | 默认值 |
+|------------|----------------------------|---------------------------------------| --- |
+| mdxRaw     | Markdown 或 MDX 的纯文本        | string                                | - |
+| components | 用于覆盖 Markdown 元素，也可添加自定义组件 | Record<string, JSXElementConstructor> | - |
+
+## 设计变量
+
+<DesignToken/>
+

package.json

@@ -46,7 +46,7 @@
         "node": ">= 16.0.0"
     },
     "dependencies": {
-        "@douyinfe/semi-site-banner": "^0.1.3",
+        "@douyinfe/semi-site-banner": "^0.1.5",
         "@douyinfe/semi-site-doc-style": "0.0.1",
         "@douyinfe/semi-site-header": "^0.0.29",
         "@douyinfe/semi-site-markdown-blocks": "^0.0.9",

packages/semi-foundation/markdownRender/markdownRender.scss

@@ -3,7 +3,39 @@
 $module: #{$prefix}-markdownRender;
 
 .#{$module} {
+
     ul,li {
         color:var(--semi-color-text-0)
     }
+
+    &-component-image{
+        margin: $spacing-markdownRender_component_image-marginTop $spacing-markdownRender_component_image-marginRight $spacing-markdownRender_component_image-marginBottom $spacing-markdownRender_component_image-marginLeft;
+        max-width: $width-markdownRender_component_image-maxWidth;
+        max-height: $width-markdownRender_component_image-maxHeight;
+        display:flex;
+        flex-direction: column;
+        justify-content: center;
+
+        &-alt{
+            margin-top: $spacing-markdownRender_component_image_alt-marginTop;
+            text-align: center;
+            color:var(--semi-color-tertiary)
+        }
+    }
+
+    & &-component-header{
+        margin-top: $spacing-markdownRender_component_header-marginTop;
+        margin-bottom: $spacing-markdownRender_component_header-marginBottom;
+    }
+
+    &-component-p{
+        strong{
+            font-weight: $font-weight-bold;
+        }
+    }
+
+
+
+
+
 }

packages/semi-foundation/markdownRender/variables.scss

@@ -0,0 +1,13 @@
+$spacing-markdownRender_component_image-marginLeft:16px;
+$spacing-markdownRender_component_image-marginRight:16px;
+$spacing-markdownRender_component_image-marginTop:16px;
+$spacing-markdownRender_component_image-marginBottom:16px;
+$width-markdownRender_component_image-maxWidth: 50%;
+$width-markdownRender_component_image-maxHeight: 500px;
+$spacing-markdownRender_component_image_alt-marginTop: 8px;
+
+
+$spacing-markdownRender_component_header-marginTop: 16px;
+$spacing-markdownRender_component_header-marginBottom: 16px;
+
+

packages/semi-ui/markdownRender/components/h1.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={1} {...props}/>;
+    return <Typography.Title heading={1} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h2.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={2} {...props}/>;
+    return <Typography.Title heading={2} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h3.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={3} {...props}/>;
+    return <Typography.Title heading={3} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h4.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={4} {...props}/>;
+    return <Typography.Title heading={4} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h5.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={5} {...props}/>;
+    return <Typography.Title heading={5} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/h6.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import Typography, { TitleProps } from '../../typography';
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export default (props: PropsWithChildren<TitleProps>)=>{
-    return <Typography.Title heading={6} {...props}/>;
+    return <Typography.Title heading={6} className={`${cssClasses.PREFIX}-component-header`} {...props}/>;
 };

packages/semi-ui/markdownRender/components/img.tsx

@@ -3,7 +3,20 @@ import { PropsWithChildren } from 'react';
 import Image, { ImageProps } from '../../image';
 import { IconUploadError } from "@douyinfe/semi-icons";
 import { omit } from 'lodash';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
+
 
 export default (props: PropsWithChildren<ImageProps>)=>{
-    return <Image fallback={<IconUploadError />} width={"50%"} {...omit(props, 'children')}/>;
+
+    return <div className={`${cssClasses.PREFIX}-component-image`} style={{
+        maxWidth: "50%",
+        maxHeight: "500px",
+        display: 'flex',
+        "flexDirection": "column",
+        "justifyContent": "center"
+    }}>
+
+        <Image fallback={<IconUploadError />} width={"100%"} {...omit(props, 'children')}/>
+        <div className={`${cssClasses.PREFIX}-component-image-alt`}>{props.alt}</div>
+    </div>;
 };

packages/semi-ui/markdownRender/components/index.tsx

@@ -7,5 +7,6 @@ export { default as h6 } from "./h6";
 export { default as a } from "./a";
 export { default as img } from "./img";
 export { default as table } from "./table";
+export { default as p } from "./p";
 
 

packages/semi-ui/markdownRender/components/p.tsx

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import Typography, { TitleProps } from '../../typography';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
+
+export default (props: PropsWithChildren<TitleProps>)=>{
+    return <Typography.Paragraph className={`${cssClasses.PREFIX}-component-p`} {...props}/>;
+};

packages/semi-ui/markdownRender/index.tsx

@@ -5,8 +5,10 @@ import MarkdownRenderFoundation, {
     MarkdownRenderBaseProps,
     MarkdownRenderBaseState,
 } from '@douyinfe/semi-foundation/markdownRender/foundation';
+import "@douyinfe/semi-foundation/markdownRender/markdownRender.scss";
 import { CSSProperties } from 'react';
 import * as runtime from 'react/jsx-runtime';
+import { cssClasses } from '@douyinfe/semi-foundation/markdownRender/constants';
 
 export interface MarkdownRenderProps extends MarkdownRenderBaseProps{
     style?: CSSProperties;
@@ -48,7 +50,9 @@ class MarkdownRender extends BaseComponent<MarkdownRenderProps, MarkdownRenderSt
 
     render() {
         const ComponentConstructor = this.state.MDXContentComponent;
-        return <ComponentConstructor components={this.props.components} />;
+        return <div className={`${cssClasses.PREFIX}`}>
+            <ComponentConstructor components={this.props.components} />
+        </div>;
     }
 
 

src/components/side-nav.js

@@ -49,7 +49,7 @@ const SideNav = ({ location = null, type = null, itemsArr, edges, style, hasBann
             const { items, ...rest } = category;
             return (
                 <Nav.Sub {...rest} key={rest.itemKey}>
-                    {items.map(item=>{
+                    {items?.map(item=>{
                         return (
                             <Link to={item.itemKey} key={item.itemKey} >
                                 <Nav.Item {...item} tabIndex={-1}/>

yarn.lock

@@ -1588,10 +1588,10 @@
     lodash "^4.17.21"
     sass "^1.54.9"
 
-"@douyinfe/semi-site-banner@^0.1.3":
-  version "0.1.3"
-  resolved "https://registry.npmjs.org/@douyinfe/semi-site-banner/-/semi-site-banner-0.1.3.tgz#0d7e26d93431db29475e3c456f36f6fdd60e5362"
-  integrity sha512-Sju1cRqeQPnbzpHYan4CyxsXBPgduvIyEZGBs2xVajCbwKWoJdbScBzrWPlyyMvQGcibqu5hmptw4GHZLrn22w==
+"@douyinfe/semi-site-banner@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.npmjs.org/@douyinfe/semi-site-banner/-/semi-site-banner-0.1.5.tgz#40da848ffc18630229dea4f30b7c8a6a6fbb37a1"
+  integrity sha512-aUrkZA1DJezBEbKvMEuwegKaTd/T/1r8KNosZ6L0iDPe7HvKL+/A/Dboua2ANeJ7Hv9hno/c9ZqRn6NrnvDAUg==
   dependencies:
     "@douyinfe/semi-icons" latest
     "@douyinfe/semi-ui" latest