feat: version-compare-component

locale/en/translation.json

@@ -117,5 +117,22 @@
   "fab": {
     "scrollToTop": "Scroll to top",
     "goToFeedback": "Was this page helpful?"
+  },
+  "versionFilter": {
+    "yes": "Yes",
+    "no": "No",
+    "filterModeVersion": "Version",
+    "filterModeDiff": "Diff",
+    "diffModeOlderVersion": "Older Version",
+    "diffModeNewerVersion": "Newer Version",
+    "involvedInitVersion": "From the beginning",
+    "involvedVersion": "New in {{version}}",
+    "type": "Type: ",
+    "persists": "Persists to cluster: ",
+    "hintSetVar": "Applies to hint <0>SET_VAR</0>: ",
+    "default": "Default value: ",
+    "range": "Range: ",
+    "possibleValues": "Possible values: ",
+    "unit": "Unit: "
   }
 }

locale/ja/translation.json

@@ -117,5 +117,22 @@
   "fab": {
     "scrollToTop": "トップへ戻る",
     "goToFeedback": "このページは役に立ちましたか？"
+  },
+  "versionFilter": {
+    "yes": "はい",
+    "no": "いいえ",
+    "filterModeVersion": "バージョン",
+    "filterModeDiff": "差異",
+    "diffModeOlderVersion": "古いバージョン",
+    "diffModeNewerVersion": "新しいバージョン",
+    "involvedInitVersion": "最初から",
+    "involvedVersion": "{{version}} から新しい",
+    "type": "タイプ：",
+    "persists": "クラスターに保持：",
+    "hintSetVar": "ヒント <0>SET_VAR</0> に適用：",
+    "default": "デフォルト値：",
+    "range": "範囲：",
+    "possibleValues": "可能な値：",
+    "unit": "単位："
   }
 }

locale/zh/translation.json

@@ -114,5 +114,22 @@
   "fab": {
     "scrollToTop": "回到顶部",
     "goToFeedback": "文档内容是否有帮助？"
+  },
+  "versionFilter": {
+    "yes": "是",
+    "no": "否",
+    "filterModeVersion": "版本号",
+    "filterModeDiff": "差异比较",
+    "diffModeOlderVersion": "较旧版本",
+    "diffModeNewerVersion": "较新版本",
+    "involvedInitVersion": "初始版本引入",
+    "involvedVersion": "从 {{version}} 版本开始引入",
+    "type": "类型：",
+    "persists": "是否持久化到集群：",
+    "hintSetVar": "是否受 Hint <0>SET_VAR</0> 控制：",
+    "default": "默认值：",
+    "range": "范围：",
+    "possibleValues": "可选值：",
+    "unit": "单位："
   }
 }

src/components/Layout/MDXContent.tsx

@@ -17,6 +17,7 @@ import { Locale, PathConfig, FrontMatter, BuildType } from "static/Type";
 import { useTotalContributors } from "components/Avatar/Contributors";
 import replaceInternalHref from "utils/anchor";
 import { Pre } from "components/MDXComponents/Pre";
+import { MdxContext } from "context/MdxContext";
 
 export default function MDXContent(props: {
   data: any;
@@ -74,15 +75,19 @@ export default function MDXContent(props: {
             availIn={availIn}
           />
         )}
-        <MDXProvider
-          components={{
-            ...MDXConponents,
-            Link,
-            pre: Pre,
-          }}
+        <MdxContext.Provider
+          value={{pathConfig}}
         >
-          <MDXRenderer>{data}</MDXRenderer>
-        </MDXProvider>
+          <MDXProvider
+            components={{
+              ...MDXConponents,
+              Link,
+              pre: Pre,
+            }}
+          >
+            <MDXRenderer>{data}</MDXRenderer>
+          </MDXProvider>
+        </MdxContext.Provider>
       </Box>
     </Container>
   );

src/components/MDXComponents/MDLink.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+
+import { MdxContext } from "context/MdxContext";
+import { Link } from "gatsby-plugin-react-i18next";
+import { Locale } from "static/Type";
+
+export function MDLink(props: {
+    url: string;
+    children?: any;
+  }) {
+    const mdxContextData = React.useContext(MdxContext);
+    const { pathConfig } = mdxContextData;
+    const {url} = props;
+    const localeURL = pathConfig.locale === Locale.en ? "" : "/" + pathConfig.locale;
+    const relativeURL = url.startsWith("/") ? url : "/" + url;
+    const realURL = localeURL + "/" + pathConfig.repo + "/" + pathConfig.version + relativeURL;
+
+    return (
+        <Link to={realURL}>{props.children}</Link>
+    )
+}

src/components/MDXComponents/VersionVars.tsx

@@ -0,0 +1,60 @@
+import * as React from "react";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { Card, CardContent, Chip } from '@mui/material';
+
+type ScopeType = "SESSION" | "GLOBAL" | "BOTH";
+
+export function VersionVars(props: {
+    name: string;
+    scope: ScopeType;
+    type: string;
+    applyHint: boolean;
+    defaultValue: string;
+    involveVersion?: string;
+    possibleValues?: string;
+    range?: string;
+    unit?: string;
+    children?: any;
+  }) {
+
+  const INIT_VERSION = "v0.0.1"
+  const {
+    name = "",
+    involveVersion = INIT_VERSION,
+    scope = "GLOBAL",
+    type = "",
+    applyHint = false,
+    defaultValue = "",
+    children = [],
+    possibleValues = "",
+    range = "",
+    unit = "",
+  } = props;
+
+  return (
+    <Card sx={{ minWidth: 275 }}>
+      <CardContent>
+        <Typography variant="h5" component="div"> {name} </Typography>
+        <Typography sx={{ mb: 1.5 }} color="text.secondary">
+          { involveVersion === INIT_VERSION ? "From the beginning" : "New in " + involveVersion }
+        </Typography>
+        <Stack direction="row" spacing={1}>
+          {scope === "SESSION" || scope === "BOTH" ? <Chip label="SESSION" color="primary" /> : null}
+          {scope === "GLOBAL" || scope === "BOTH" ? <Chip label="GLOBAL" color="success" /> : null}
+        </Stack>
+
+        <Typography> Type: {type} </Typography>
+        <Typography> Applies to hint SET_VAR: {applyHint ? "Yes" : "No"} </Typography>
+        <Typography> Default value: {defaultValue} </Typography>
+        {range === "" ? "" : <Typography> Range: {range} </Typography>}
+        {possibleValues === "" ? "" : <Typography> Possible values: {possibleValues} </Typography>}
+        {unit === "" ? "" : <Typography> Unit: {unit} </Typography>}
+
+        <Typography variant="body2">
+          {...children}
+        </Typography>
+      </CardContent>
+    </Card>
+  );
+}