Merge pull request #10640 from Chasen-Zhang/main

feat(front): Add [fetch-databend-releases] plugin and refactor download page

Author: BohuTANG

docs/doc/00-overview/index.md

@@ -2,7 +2,6 @@
 title: Welcome
 slug: /
 ---
-import GetLatest from '@site/src/components/GetLatest';
 
 Welcome to the Databend documentation! Databend is an **open-source**, **elastic**, and **workload-aware** modern cloud data warehouse designed to meet businesses' massive-scale analytics needs at low cost and with low complexity.
 

docs/doc/03-develop/01-python.md

@@ -4,7 +4,6 @@ sidebar_label: Python
 description:
    Develop with Databend using Python.
 ---
-import GetLatest from '@site/src/components/GetLatest';
 
 Databend offers the following options enabling you to develop applications using the Python programming language and establish connectivity with Databend:
 

website/docusaurus.config.js

@@ -31,7 +31,7 @@ const config = {
     },
 
     customFields: {
-        blogTags: ['weekly','databend']
+      blogTags: ['weekly','databend']
     },
 
     presets: [
@@ -80,7 +80,8 @@ const config = {
     ],
     plugins: [
         'docusaurus-plugin-sass',
-        './src/plugins/globalSassVarInject',
+        './src/plugins/global-sass-var-inject',
+        './src/plugins/fetch-databend-releases',
         [
             '@docusaurus/plugin-content-docs',
             /** @type {import('@docusaurus/plugin-content-docs').Options} */
@@ -179,4 +180,4 @@ const config = {
         }),
 };
 
-module.exports = config;
+module.exports = config;

website/package.json

@@ -27,19 +27,21 @@
     "bytes": "^3.1.2",
     "clsx": "^1.1.1",
     "copyforjs": "^1.0.6",
+    "dayjs": "^1.11.7",
     "docusaurus-plugin-sass": "^0.2.1",
     "node": "^17.7.2",
     "prism-react-renderer": "^1.2.1",
     "rc-table": "^7.27.1",
     "rc-texty": "^0.2.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-markdown": "^8.0.5",
+    "remark-gfm": "^3.0.1",
     "sass": "^1.45.0"
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "^2.2.0",
     "@tsconfig/docusaurus": "^1.0.4",
-    "postcss-px-to-viewport-8-plugin": "^1.1.3",
     "sass-resources-loader": "^2.2.4",
     "typescript": "^4.3.5"
   },

website/src/components/BaseComponents/Card/index.tsx

@@ -0,0 +1,31 @@
+// Copyright 2023 Datafuse Labs.
+import React from 'react';
+import { FC, ReactElement } from 'react';
+import styles from './styles.module.scss';
+import clsx from 'clsx';
+import { ICommonProps } from '@site/src/types';
+interface IProps extends ICommonProps{
+  href?: string;
+  isDownload?: boolean;
+  padding?: number[]; 
+}
+const Card: FC<IProps> = ({children, padding, className, href, isDownload, style}): ReactElement=> {
+  const props = {
+    style:{padding: `${padding[0]}px ${padding[1]}px`, ...style},
+    className: clsx(styles.wrap, className)
+  }
+  return (
+    <>
+      {
+        href
+        ? <a download={isDownload} href={href} {...props}>{children}</a>
+        : <div {...props}>{children}</div>
+      }
+    </>
+  );
+};
+Card.defaultProps = {
+  padding: [28, 24],
+  isDownload: false
+}
+export default Card;

website/src/components/BaseComponents/Card/styles.module.scss

@@ -0,0 +1,6 @@
+.wrap {
+  background-color: var(--color-fill-0);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  display: block;
+}

website/src/components/BaseComponents/Tag/index.tsx

@@ -0,0 +1,13 @@
+// Copyright 2023 Datafuse Labs.
+import { FC, ReactElement } from 'react';
+import styles from './styles.module.scss';
+import React from 'react';
+import clsx from 'clsx';
+import { ICommonProps } from '@site/src/types';
+
+const Tag: FC<ICommonProps> = ({children, className}): ReactElement=> {
+  return (
+  <span className={clsx(styles.tag, className)}>{children}</span>
+  );
+};
+export default Tag;

website/src/components/BaseComponents/Tag/styles.module.scss

@@ -0,0 +1,11 @@
+.tag {
+  display: inline-block;
+  height: 20px;
+  font-size: 14px;
+  line-height: 20px;
+  padding-left: 8px;
+  padding-right: 8px;
+  color: var(--color-white);
+  background-color: var(--color-primary );
+  border-radius: 100px;
+}

website/src/components/CustomBlog/BlogList.js

@@ -3,11 +3,15 @@ import styles from "./styles.module.scss";
 import clsx from "clsx";
 import WeeklyCover from "./WeeklyCover";
 import DefaultCover from "./DefaultCover";
-import useBaseUrl from "@docusaurus/useBaseUrl";
 
 const BlogList = (metadatas) => {
   const items = metadatas.metadatas.items.map((item) => {
     const metadata = item.content.metadata;
+    function innerTagAction(e, permalink) {
+      e.stopPropagation();
+      e.preventDefault();
+      window.open(permalink, '_self')
+    }
     return (
       <li
         className={clsx("post-list-item", styles.postListItem)}
@@ -30,7 +34,7 @@ const BlogList = (metadatas) => {
             {metadata.tags.map((tag, index) => {
               return (
                 <span className={clsx("tag", styles.Tag)} key={index}>
-                  <a href={tag.permalink}># {tag.label}</a>
+                  <span onClick={(e)=> innerTagAction(e, tag.permalink)}># {tag.label}</span>
                 </span>
               );
             })}
@@ -52,9 +56,9 @@ const BlogList = (metadatas) => {
             className={clsx("post-list-item-description", styles.postListDesc)}
           >
             By{" "}
-            <a href={metadata.authors[0].url}>
+            <span onClick={(e)=> innerTagAction(e, metadata.authors[0].url)}>
               <strong>{metadata.authors[0].name}</strong>
-            </a>{" "}
+            </span>{" "}
             on {metadata.formattedDate}
           </p>
         </a>

website/src/components/CustomBlog/styles.module.scss

@@ -138,6 +138,10 @@
                 .postListDesc {
                     color: var(--color-text-2) !important;
                     font-size: 14px;
+                    span{
+                      color: var(--color-primary);
+                      font-weight: bold;
+                    }
                 }
 
                 @include media{