This is an automated email from the ASF dual-hosted git repository.
jiafengzheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/doris-website.git
The following commit(s) were added to refs/heads/master by this push:
new 21794438e6d update version component for document (#149)
21794438e6d is described below
commit 21794438e6dee3a519d8ef0d964b52d86848b4b2
Author: wangyongfeng <[email protected]>
AuthorDate: Wed Nov 2 12:07:11 2022 +0800
update version component for document (#149)
---
docusaurus.config.js | 2 +-
src/components/VersionsDoc/README.md | 22 +--------
src/components/VersionsDoc/index.tsx | 52 +++++++++------------
src/components/VersionsDoc/styles.scss | 82 ++++++++++++++++++++++++++++------
src/scss/components/markdown.scss | 2 +-
src/theme/MDXComponents.js | 8 ++--
6 files changed, 96 insertions(+), 72 deletions(-)
diff --git a/docusaurus.config.js b/docusaurus.config.js
index d1347130d02..e4cd709f22c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -55,7 +55,7 @@ const config = {
'@docusaurus/plugin-pwa',
{
debug: false,
- offlineModeActivationStrategies: ['appInstalled',
'standalone', 'queryString', 'mobile'],
+ offlineModeActivationStrategies: ['standalone', 'queryString',
'mobile'],
injectManifestConfig: {
globPatterns:
['**/*.{json,pdf,docx,xlsx,html,css,js,png,svg,ico,jpg,jpeg}'],
},
diff --git a/src/components/VersionsDoc/README.md
b/src/components/VersionsDoc/README.md
index 3579274b760..00044d09e1a 100644
--- a/src/components/VersionsDoc/README.md
+++ b/src/components/VersionsDoc/README.md
@@ -1,21 +1 @@
-# How to use `<versions>`
-
-You can wrap a piece of Markdown content using the <versions>, and set the
version number, like this:
-
-```html
-<versions value="1.1,1.2">
- This is markdown content...
-</versions>
-```
-> Tips: the value must be a string that split by commas.
-
-Then in our website, the MarkDown content will show the version number to
which it belongs.
-
-If you want to build a single version docs, you can update buildVersions.json:
-
-```json
-["1.1", "1.2"]
-```
-Then run the build:versions command.
-
-
+[Doris 文档版本标记用法](https://selectdb.feishu.cn/docx/TdmDdhNTDoAKGbx1mkbcT3sbn8P)
\ No newline at end of file
diff --git a/src/components/VersionsDoc/index.tsx
b/src/components/VersionsDoc/index.tsx
index 97e11a60a4d..c085ccb5589 100644
--- a/src/components/VersionsDoc/index.tsx
+++ b/src/components/VersionsDoc/index.tsx
@@ -1,39 +1,29 @@
import React from 'react';
import clsx from 'clsx';
-import Translate from '@docusaurus/Translate';
import './styles.scss';
-import { usePluginData } from '@docusaurus/useGlobalData';
-
+import { useState } from 'react';
+// type: paragraph (段落), inline（行内）
export default function VersionsDoc(props): JSX.Element {
- const { children, value = '' } = props;
- const versionsPluginData: any = usePluginData('versions-plugin');
- const getBuildVersions = (versionsPluginData): string[] => {
- if (versionsPluginData) {
- const versionsData = versionsPluginData.versions;
- if (Array.isArray(versionsData) && versionsData.length > 0) {
- return versionsData;
- }
- }
- return []
- }
- const isShowVersionContent = (buildVersions: string[]) => {
- if (!value) return false
- if (buildVersions.length === 0) return true
- return buildVersions.some(v => value.includes(v))
- }
-
- const buildVersions = getBuildVersions(versionsPluginData)
+ const { children, type="paragraph", since = '', deprecated = '',
comment=''} = props;
+ const [showTag, setShowTag] = useState<boolean>(false)
+
return (
- <div className={clsx('versions-tag')}>
- {isShowVersionContent(buildVersions) && (
- <>
- <span className="version-sub">
- <Translate id="doc.version">Version</Translate>:
{value}
- </span>
- {children}
- </>
- )}
- </div>
+ <span className={clsx('version-mark', type)} onMouseEnter={() =>
setShowTag(true)} onMouseLeave={() => setShowTag(false)}>
+ <span className={clsx('v-mark', showTag && 'show')}>
+ {<span className={clsx("version-tags")}>
+ {since && <span className='version-tag'>
+ <span className='version-tag-t'>Since</span>
+ <span className='version-tag-n since'>Version
{since}</span>
+ </span>}
+ {deprecated && <span className='version-tag'>
+ <span className='version-tag-t'>Deprecated</span>
+ <span className='version-tag-n deprecated'>Version
{deprecated}</span>
+ </span>}
+ </span>}
+ {comment && <span className='version-comment'>{comment}</span>}
+ </span>
+ {children}
+ </span>
);
}
diff --git a/src/components/VersionsDoc/styles.scss
b/src/components/VersionsDoc/styles.scss
index c5724760518..92934a88b92 100644
--- a/src/components/VersionsDoc/styles.scss
+++ b/src/components/VersionsDoc/styles.scss
@@ -1,23 +1,77 @@
-.versions-tag {
+.version-mark {
position: relative;
- &:before {
+ display: inline-block;
+ margin-bottom: 1rem;
+ &.paragraph:before {
content: '';
position: absolute;
- left: -0.7rem;
- top: 0.5rem;
- bottom: 0.5rem;
+ left: -1rem;
+ height: 100%;
border-left: 2px solid var(--ifm-color-primary);
opacity: 0.2;
}
- .version-sub {
- line-height: 1.4;
- padding: 4px 12px;
- font-size: 75%;
- white-space: nowrap;
- position: relative;
- left: -1rem;
- top: -0.2rem;
- color: var(--ifm-color-primary);
+
+ &.inline {
+ display: inline;
+ text-decoration: underline dotted #e6a700 2.3px;
+ .version-comment {
+ width: 40vw;
+ }
+
+ .v-mark {
+ position: absolute;
+ left: 0;
+ top: 0rem;
+ visibility: hidden;
+ &.show {
+ visibility: visible;
+ top: -1.5rem;
+ transition: all .3s;
+ }
+ }
+ }
+ .version-tags {
+ display: inline-block;
+ margin-bottom: 0.6rem;
+
+ .version-tag {
+ display: inline-block;
+ margin-right: 6px;
+ .version-tag-t {
+ font-size: 12px;
+ white-space: nowrap;
+ background-color: #505050;
+ color: #ffffff;
+ padding: 3px 6px;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ .version-tag-n {
+ font-size: 12px;
+ white-space: nowrap;
+ color: #ffffff;
+ padding: 3px 6px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ &.since {
+ background-color: #4caf8f;
+ }
+ &.deprecated {
+ background-color: #c84c3d;
+ }
+ }
+ }
+ }
+ .version-comment {
+ display: block;
+ margin: 8px 0 12px 0;
+ padding: 8px 8px;
+ background-color: #fff8e6;
+ border-radius: 6px;
+ border-left: 4px solid #e6a700;
+ color: #4d3800;
+ font-size: 14px;
+ font-weight: normal;
}
}
\ No newline at end of file
diff --git a/src/scss/components/markdown.scss
b/src/scss/components/markdown.scss
index 7936d65f758..fd812534ed9 100644
--- a/src/scss/components/markdown.scss
+++ b/src/scss/components/markdown.scss
@@ -1,7 +1,7 @@
.markdown {
color: #4c4e4d;
font-weight: 200;
-
+ padding-left: 1rem;
h1,
h2,
h3,
diff --git a/src/theme/MDXComponents.js b/src/theme/MDXComponents.js
index e00f3395f98..d053504bcbf 100644
--- a/src/theme/MDXComponents.js
+++ b/src/theme/MDXComponents.js
@@ -3,7 +3,7 @@ import MDXComponents from '@theme-original/MDXComponents';
import VersionsDoc from '@site/src/components/VersionsDoc';
export default {
- // 复用默认的映射
- ...MDXComponents,
- versions: VersionsDoc,
-};
\ No newline at end of file
+ // 复用默认的映射
+ ...MDXComponents,
+ version: VersionsDoc,
+};
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
