feat: added [fetch-databend-releases] plugin and refactor download pages

Author: Chasen-Zhang

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,33 @@
+// Copyright 2023 Datafuse Labs.
+import React from 'react';
+import { FC, ReactElement, ReactNode } from 'react';
+import styles from './styles.module.scss';
+import clsx from 'clsx';
+interface IProps {
+  children: ReactNode;
+  padding?: number[];
+  className?: string;
+  href?: string;
+  isDownload?: boolean;
+  style?: React.CSSProperties;
+}
+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,15 @@
+// Copyright 2023 Datafuse Labs.
+import { FC, ReactElement, ReactNode } from 'react';
+import styles from './styles.module.scss';
+import React from 'react';
+import clsx from 'clsx';
+interface IProps {
+  children: ReactNode;
+  className?: string;
+}
+const Tag: FC<IProps> = ({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/BlogPostDetails.js

@@ -34,6 +34,7 @@ const BlogPostNav = ({ nextPost, prevPost }) => {
 const BlogPostDetails = (props) => {
   const metadata = props.content.metadata;
   const BlogPostContent = props.content;
+  console.log(BlogPostContent, 'BlogPostContent')
   return (
     <Layout title={`${metadata.title} | Blog`}>
       <section className={clsx("blog-page", styles.blogPage, styles.blogPost)}>

website/src/components/GetLatest/index.js

@@ -1,8 +1,43 @@
 import React from "react";
-import { getLatest } from '@site/src/plugins/releaseVersion';
+import { useMount } from 'ahooks';
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+import { useGetReleases } from "@site/src/hooks/useGetReleases";
+import { copyToClipboard } from 'copyforjs';
+
 function GetLatest() {
-  return (
-    <>{getLatest()}</>
-  )
+  const { 
+    tagName
+  } = useGetReleases();
+  useMount(()=>{  
+    if (ExecutionEnvironment.canUseDOM) {
+      setTimeout(()=>{
+        setText();
+        const dom = document.querySelectorAll('.clean-btn')
+        for(let button of dom) {
+          if (button?.getAttribute('aria-label') === 'Copy code to clipboard') {
+            button.addEventListener("click", ()=>{
+              setTimeout(()=>{
+                let text = button?.previousSibling?.innerText;
+                if (button?.parentNode?.previousSibling) {
+                  text = button?.parentNode?.previousSibling?.innerText;;
+                }
+                copyToClipboard(String(text).trim())
+               }, 10)
+            }, false);
+          }
+        }
+      });
+    }
+  });
+  function setText() {
+    const name = tagName || 'v1.0.22-nightly';
+    const dom = document.querySelectorAll('.variable');
+    for (let div of dom){
+      if (div.innerHTML === '${version}') {
+        div.innerText = name;
+      }
+    }
+  }
+  return (<></>)
 }
 export default GetLatest;