You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@doris.apache.org by ji...@apache.org on 2022/07/21 09:14:03 UTC

[doris-website] branch master updated: add github star (#14)

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 80729d06e1 add github star (#14)
80729d06e1 is described below

commit 80729d06e1f80a3b6eef307ff1e33f3fd5f0579c
Author: wangyongfeng <94...@qq.com>
AuthorDate: Thu Jul 21 17:13:59 2022 +0800

    add github star (#14)
    
    * update users wall and download style
    
    * add github star
    
    Co-authored-by: wangyf0555 <wa...@flywheels.com>
---
 .gitignore                                         |   3 +-
 docusaurus.config.js                               | 424 ++++++++++-----------
 package.json                                       |   1 +
 src/scss/components/navbar.scss                    | 115 +++++-
 src/theme/Navbar/Content/index.d.ts                |   2 +
 src/theme/Navbar/Content/index.tsx                 |  83 ++++
 src/theme/Navbar/Content/styles.module.css         |   8 +
 .../Navbar/MobileSidebar/PrimaryMenu/index.d.ts    |   2 +
 .../Navbar/MobileSidebar/PrimaryMenu/index.tsx     |  41 ++
 9 files changed, 459 insertions(+), 220 deletions(-)

diff --git a/.gitignore b/.gitignore
index ead04b614e..c1d977f9ed 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,5 +20,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-*.zip
-*.zip
+*.zip
\ No newline at end of file
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 888d754fc7..fce2d93dd1 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -1,229 +1,229 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 // @ts-ignore
-const versions = require('./versions.json');
-const lightCodeTheme = require('prism-react-renderer/themes/github');
+const versions = require("./versions.json");
+const lightCodeTheme = require("prism-react-renderer/themes/github");
 const showAllVersions = true;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {
-    title: 'Apache Doris',
-    titleDelimiter: '-',
-    tagline: 'Apache Doris',
-    url: 'https://doris.apache.org',
-    baseUrl: '/',
-    onBrokenLinks: 'ignore',
-    onBrokenMarkdownLinks: 'ignore',
-    favicon: 'images/favicon.ico',
-    i18n: {
-        defaultLocale: 'en',
-        locales: ['en', 'zh-CN'],
-        localeConfigs: {
-            en: {
-                label: 'EN',
+  title: "Apache Doris",
+  titleDelimiter: "-",
+  tagline: "Apache Doris",
+  url: "https://doris.apache.org",
+  baseUrl: "/",
+  onBrokenLinks: "ignore",
+  onBrokenMarkdownLinks: "ignore",
+  favicon: "images/favicon.ico",
+  i18n: {
+    defaultLocale: "en",
+    locales: ["en", "zh-CN"],
+    localeConfigs: {
+      en: {
+        label: "EN",
+      },
+      "zh-CN": {
+        label: "中文",
+      },
+    },
+  },
+  // scripts: ['/js/redirect.js'],
+  stylesheets: [
+    "https://fonts.googleapis.com/css?family=Montserrat:500",
+    "https://fonts.googleapis.com/css?family=Noto+Sans+SC:400",
+  ],
+  organizationName: "doris", // Usually your GitHub org/user name.
+  projectName: "doris", // Usually your repo name.
+  plugins: [
+    "docusaurus-plugin-sass",
+    [
+      "content-docs",
+      /** @type {import('@docusaurus/plugin-content-docs').Options} */
+      ({
+        id: "community",
+        path: "community",
+        routeBasePath: "/community",
+        sidebarPath: require.resolve("./sidebarsCommunity.json"),
+      }),
+    ],
+  ],
+  presets: [
+    [
+      "classic",
+      /** @type {import('@docusaurus/preset-classic').Options} */
+      ({
+        docs: {
+          lastVersion: "current",
+          versions: {
+            current: {
+              label: "1.1",
+              path: "",
+            },
+            "1.0": {
+              banner: "none",
             },
-            'zh-CN': {
-                label: '中文',
+            0.15: {
+              banner: "none",
             },
+          },
+          sidebarPath: require.resolve("./sidebars.json"),
+          onlyIncludeVersions:
+            process.env.NODE_ENV === "development" && !showAllVersions
+              ? ["current"]
+              : ["current", ...versions],
         },
-    },
-    // scripts: ['/js/redirect.js'],
-    stylesheets: [
-        'https://fonts.googleapis.com/css?family=Montserrat:500',
-        'https://fonts.googleapis.com/css?family=Noto+Sans+SC:400',
-    ],
-    organizationName: 'doris', // Usually your GitHub org/user name.
-    projectName: 'doris', // Usually your repo name.
-    plugins: [
-        'docusaurus-plugin-sass',
-        [
-            'content-docs',
-            /** @type {import('@docusaurus/plugin-content-docs').Options} */
-            ({
-                id: 'community',
-                path: 'community',
-                routeBasePath: '/community',
-                sidebarPath: require.resolve('./sidebarsCommunity.json'),
-            }),
-        ],
+        blog: {
+          blogTitle: "Blog",
+          blogDescription: "blog",
+          postsPerPage: "ALL",
+          blogSidebarCount: 0,
+          showReadingTime: false,
+        },
+        theme: {
+          customCss: require.resolve("./src/scss/custom.scss"),
+        },
+        gtag: {
+          trackingID: "G-DT7W9E9722",
+          anonymizeIP: true,
+        },
+      }),
     ],
-    presets: [
-        [
-            'classic',
-            /** @type {import('@docusaurus/preset-classic').Options} */
-            ({
-                docs: {
-                    lastVersion: 'current',
-                    versions: {
-                        current: {
-                            label: '1.1',
-                            path: '',
-                        },
-                        '1.0': {
-                            banner: 'none',
-                        },
-                        0.15: {
-                            banner: 'none',
-                        },
-                    },
-                    sidebarPath: require.resolve('./sidebars.json'),
-                    onlyIncludeVersions:
-                        process.env.NODE_ENV === 'development' && !showAllVersions
-                            ? ['current']
-                            : ['current', ...versions],
-                },
-                blog: {
-                    blogTitle: 'Blog',
-                    blogDescription: 'blog',
-                    postsPerPage: 'ALL',
-                    blogSidebarCount: 0,
-                    showReadingTime: false,
-                },
-                theme: {
-                    customCss: require.resolve('./src/scss/custom.scss'),
-                },
-                gtag: {
-                    trackingID: 'G-DT7W9E9722',
-                    anonymizeIP: true,
-                },
-            }),
-        ],
+  ],
+  themes: [
+    [
+      "@easyops-cn/docusaurus-search-local",
+      {
+        hashed: true,
+        language: ["en", "zh"],
+        highlightSearchTermsOnTargetPage: true,
+        // indexPages: true,
+        indexDocs: true,
+        docsDir: ["docs", "community"],
+        indexBlog: false,
+        explicitSearchResultPath: true,
+      },
     ],
-    themes: [
-        [
-            '@easyops-cn/docusaurus-search-local',
-            {
-                hashed: true,
-                language: ['en', 'zh'],
-                highlightSearchTermsOnTargetPage: true,
-                // indexPages: true,
-                indexDocs: true,
-                docsDir: ['docs', 'community'],
-                indexBlog: false,
-                explicitSearchResultPath: true,
-            },
+  ],
+  themeConfig:
+    /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
+    ({
+      navbar: {
+        title: "",
+        logo: {
+          alt: "Doris",
+          src: "images/logo.svg",
+        },
+        items: [
+          { to: "/", label: "Home", position: "left", exact: true },
+          {
+            type: "doc",
+            position: "left",
+            label: "Docs",
+            docId: "get-starting/get-starting",
+            to: "/get-starting",
+          },
+          { to: "/blog", label: "Blog", position: "left" },
+          {
+            label: "Community",
+            type: "doc",
+            docId: "team",
+            position: "left",
+            docsPluginId: "community",
+          },
+          { to: "/users", label: "Users", position: "left" },
+          {
+            type: "docsVersionDropdown",
+            position: "right",
+          },
+          {
+            type: "localeDropdown",
+            position: "right",
+          },
+          //   {
+          //     href: "https://github.com/apache/doris",
+          //     className: "header-right-button-github",
+          //     position: "right",
+          //     label: "GitHub",
+          //   },
+          {
+            href: "/download",
+            className: "header-right-button-primary navbar-download-mobile",
+            label: "Download",
+            position: "right",
+          },
         ],
-    ],
-    themeConfig:
-        /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-        ({
-            navbar: {
-                title: '',
-                logo: {
-                    alt: 'Doris',
-                    src: 'images/logo.svg',
-                },
-                items: [
-                    { to: '/', label: 'Home', position: 'left', exact: true },
-                    {
-                        type: 'doc',
-                        position: 'left',
-                        label: 'Docs',
-                        docId: 'get-starting/get-starting',
-                        to: '/get-starting',
-                    },
-                    { to: '/blog', label: 'Blog', position: 'left' },
-                    {
-                        label: 'Community',
-                        type: 'doc',
-                        docId: 'team',
-                        position: 'left',
-                        docsPluginId: 'community',
-                    },
-                    { to: '/users', label: 'Users', position: 'left' },
-                    {
-                        type: 'docsVersionDropdown',
-                        position: 'right',
-                    },
-                    {
-                        type: 'localeDropdown',
-                        position: 'right',
-                    },
-                    {
-                        href: 'https://github.com/apache/doris',
-                        className: 'header-right-button-github',
-                        position: 'right',
-                        label: 'GitHub',
-                    },
-                    {
-                        href: '/download',
-                        className: 'header-right-button-primary',
-                        label: 'Download',
-                        position: 'right',
-                    },
-                ],
-            },
-            footer: {
-                links: [
-                    {
-                        title: 'Resource',
-                        items: [
-                            {
-                                label: 'Download',
-                                href: '/download',
-                            },
-                            {
-                                label: 'Docs',
-                                href: '/docs/get-starting',
-                            },
-                        ],
-                    },
-                    {
-                        title: 'ASF',
-                        items: [
-                            {
-                                label: 'Foundation',
-                                href: 'https://www.apache.org/',
-                            },
-                            {
-                                label: 'License',
-                                href: 'https://www.apache.org/licenses/',
-                            },
-                            {
-                                label: 'Events',
-                                href: 'https://www.apache.org/events/current-event',
-                            },
-                            {
-                                label: 'Sponsorship',
-                                href: 'https://www.apache.org/foundation/sponsorship.html',
-                            },
-                            {
-                                label: 'Privacy',
-                                href: 'https://privacy.apache.org/policies/privacy-policy-public.html',
-                            },
-                            {
-                                label: 'Thanks',
-                                href: 'https://www.apache.org/foundation/thanks.html',
-                            },
-                        ],
-                    },
-                ],
-                logo: {
-                    alt: '',
-                    src: '/images/asf_logo_apache.svg',
-                },
-                copyright: `Copyright © ${new Date().getFullYear()} The Apache Software Foundation,Licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>. Apache, Doris, Apache Doris, the Apache feather logo and the Apache Doris logo are trademarks of The Apache Software Foundation.`,
-            },
-            docs: {
-                sidebar: {
-                    autoCollapseCategories: true,
-                },
-            },
-            prism: {
-                theme: lightCodeTheme,
-                additionalLanguages: ['java'],
-            },
-            colorMode: {
-                disableSwitch: true,
-            },
-            metadata: [
-                {
-                    name: 'viewport',
-                    content:
-                        'width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no',
-                },
+      },
+      footer: {
+        links: [
+          {
+            title: "Resource",
+            items: [
+              {
+                label: "Download",
+                href: "/download",
+              },
+              {
+                label: "Docs",
+                href: "/docs/get-starting",
+              },
             ],
-        }),
+          },
+          {
+            title: "ASF",
+            items: [
+              {
+                label: "Foundation",
+                href: "https://www.apache.org/",
+              },
+              {
+                label: "License",
+                href: "https://www.apache.org/licenses/",
+              },
+              {
+                label: "Events",
+                href: "https://www.apache.org/events/current-event",
+              },
+              {
+                label: "Sponsorship",
+                href: "https://www.apache.org/foundation/sponsorship.html",
+              },
+              {
+                label: "Privacy",
+                href: "https://privacy.apache.org/policies/privacy-policy-public.html",
+              },
+              {
+                label: "Thanks",
+                href: "https://www.apache.org/foundation/thanks.html",
+              },
+            ],
+          },
+        ],
+        logo: {
+          alt: "",
+          src: "/images/asf_logo_apache.svg",
+        },
+        copyright: `Copyright © ${new Date().getFullYear()} The Apache Software Foundation,Licensed under the <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License, Version 2.0</a>. Apache, Doris, Apache Doris, the Apache feather logo and the Apache Doris logo are trademarks of The Apache Software Foundation.`,
+      },
+      docs: {
+        sidebar: {
+          autoCollapseCategories: true,
+        },
+      },
+      prism: {
+        theme: lightCodeTheme,
+        additionalLanguages: ["java"],
+      },
+      colorMode: {
+        disableSwitch: true,
+      },
+      metadata: [
+        {
+          name: "viewport",
+          content:
+            "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no",
+        },
+      ],
+    }),
 };
 
 module.exports = config;
diff --git a/package.json b/package.json
index 46b2cb5bcc..106febe7f3 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
         "prism-react-renderer": "^1.3.3",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
+        "react-github-button": "^0.1.11",
         "sass": "^1.53.0"
     },
     "devDependencies": {
diff --git a/src/scss/components/navbar.scss b/src/scss/components/navbar.scss
index bdd470ce86..24f975c121 100644
--- a/src/scss/components/navbar.scss
+++ b/src/scss/components/navbar.scss
@@ -117,18 +117,20 @@
         }
 
         .header-right-button-github {
-            width: 2.25rem;
+            min-width: 2.25rem;
+            padding-left: 2.25rem;
             height: 2.25rem;
-            background: url('@site/static/images/icon/github.svg') no-repeat center;
+            background: url('@site/static/images/icon/github.svg') no-repeat left center;
             background-size: contain;
-            text-indent: -9999px;
+            position: relative;
 
             &:hover {
                 opacity: .8;
             }
         }
 
-        > :last-child {
+
+        .navbar-search {
             display: none;
         }
 
@@ -197,8 +199,66 @@
             }
         }
     }
-}
 
+    .navbar-download-mobile {
+        display: none;
+    }
+
+    .github-btn {
+
+        .gh-text {
+            display: none;
+        }
+
+        .gh-btn {
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+        }
+
+        .gh-count {
+            font-size: 12px;
+            color: var(--global-colors-text-primary);
+            padding: 0.3rem 0.5rem;
+            border-radius: 2px;
+            line-height: 1.2;
+            text-decoration: none;
+            pointer-events: none;
+            background-color: #F0F1FC;
+            margin-top: 0.4rem;
+            position: relative;
+            margin-left: 0.3rem;
+
+            &:empty {
+                display: none;
+            }
+        }
+
+        .gh-count:before,
+        .gh-count:after {
+            content: "";
+            position: absolute;
+            display: inline-block;
+            width: 0;
+            height: 0;
+            border-color: transparent;
+            border-style: solid;
+        }
+
+        .gh-count:before {
+            top: 50%;
+            left: -10px;
+            margin-top: -5px;
+            border: 5px solid transparent;
+            border-right-color: #F0F1FC;
+        }
+
+    }
+
+
+}
 
 
 @media screen and (max-width: 996px) {
@@ -296,9 +356,17 @@
                 border: none;
             }
 
-            >div:last-child {
+            .navbar-search {
                 display: block;
             }
+
+            .navbar-download-mobile {
+                display: none;
+            }
+
+            .github-btn-desktop {
+                display: none;
+            }
         }
 
         &__search {
@@ -311,6 +379,41 @@
         .locale-box {
             display: none;
         }
+
+        .navbar-download-mobile {
+            display: block;
+        }
+
+        .navbar-download-desktop {
+            display: none;
+        }
+    }
+
+    .desktop.github-btn {
+        display: none;
+    }
+
+    .github-btn-mobile {
+        min-width: 2.25rem;
+        padding-left: 2.25rem;
+        height: 2.25rem;
+        background: url('@site/static/images/icon/github.svg') no-repeat left center;
+        background-size: contain;
+        position: relative;
+        display: flex;
+        margin-top: 0.5rem;
+        margin-left: -0.2rem;
+
+        &:hover {
+            opacity: .8;
+        }
+
+        .github-btn {
+            .gh-count {
+                margin-top: 0.2rem;
+                margin-left: 0.5rem;
+            }
+        }
     }
 
 }
\ No newline at end of file
diff --git a/src/theme/Navbar/Content/index.d.ts b/src/theme/Navbar/Content/index.d.ts
new file mode 100644
index 0000000000..a56b59c3fc
--- /dev/null
+++ b/src/theme/Navbar/Content/index.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function NavbarContent(): JSX.Element;
diff --git a/src/theme/Navbar/Content/index.tsx b/src/theme/Navbar/Content/index.tsx
new file mode 100644
index 0000000000..31d6de2f2f
--- /dev/null
+++ b/src/theme/Navbar/Content/index.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import {
+  splitNavbarItems,
+  useNavbarMobileSidebar,
+  useThemeConfig,
+} from "@docusaurus/theme-common";
+import NavbarItem from "@theme/NavbarItem";
+import NavbarColorModeToggle from "@theme/Navbar/ColorModeToggle";
+import SearchBar from "@theme/SearchBar";
+import NavbarMobileSidebarToggle from "@theme/Navbar/MobileSidebar/Toggle";
+import NavbarLogo from "@theme/Navbar/Logo";
+import NavbarSearch from "@theme/Navbar/Search";
+import styles from "./styles.module.css";
+import Link from "@docusaurus/Link";
+import Translate from "@docusaurus/Translate";
+import GitHubButton from "react-github-button";
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items;
+}
+function NavbarItems({ items }) {
+  return (
+    <>
+      {items.map((item, i) => (
+        <NavbarItem {...item} key={i} />
+      ))}
+    </>
+  );
+}
+function NavbarContentLayout({ left, right }) {
+  return (
+    <div className="navbar__inner">
+      <div className="navbar__items">{left}</div>
+      <div className="navbar__items navbar__items--right">{right}</div>
+    </div>
+  );
+}
+export default function NavbarContent({ mobile }) {
+  const mobileSidebar = useNavbarMobileSidebar();
+  const items = useNavbarItems();
+  const [leftItems, rightItems] = splitNavbarItems(items);
+  const searchBarItem = items.find((item) => item.type === "search");
+  return (
+    <NavbarContentLayout
+      left={
+        // TODO stop hardcoding items?
+        <>
+          {!mobileSidebar.disabled && <NavbarMobileSidebarToggle />}
+          <NavbarLogo />
+          <NavbarItems items={leftItems} />
+        </>
+      }
+      right={
+        // TODO stop hardcoding items?
+        // Ask the user to add the respective navbar items => more flexible
+        <>
+          <NavbarItems items={rightItems} />
+          <NavbarColorModeToggle className={styles.colorModeToggle} />
+          {!searchBarItem && (
+            <NavbarSearch className="navbar-search">
+              <SearchBar />
+            </NavbarSearch>
+          )}
+          <span className="github-btn desktop header-right-button-github">
+            <GitHubButton
+              type="stargazers"
+              size="large"
+              namespace="apache"
+              repo="doris"
+            />
+          </span>
+
+          <Link
+            className="header-right-button-primary navbar-download-desktop"
+            to="/download"
+          >
+            <Translate id="navbar.download">Download</Translate>
+          </Link>
+        </>
+      }
+    />
+  );
+}
diff --git a/src/theme/Navbar/Content/styles.module.css b/src/theme/Navbar/Content/styles.module.css
new file mode 100644
index 0000000000..4c9471e109
--- /dev/null
+++ b/src/theme/Navbar/Content/styles.module.css
@@ -0,0 +1,8 @@
+/*
+Hide color mode toggle in small viewports
+ */
+@media (max-width: 996px) {
+  .colorModeToggle {
+    display: none;
+  }
+}
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.d.ts b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.d.ts
new file mode 100644
index 0000000000..5cf526b54c
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function NavbarMobilePrimaryMenu(): JSX.Element;
diff --git a/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
new file mode 100644
index 0000000000..3bf5776c2a
--- /dev/null
+++ b/src/theme/Navbar/MobileSidebar/PrimaryMenu/index.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import {
+  useNavbarMobileSidebar,
+  useThemeConfig,
+} from "@docusaurus/theme-common";
+import NavbarItem from "@theme/NavbarItem";
+import GitHubButton from "react-github-button";
+
+function useNavbarItems() {
+  // TODO temporary casting until ThemeConfig type is improved
+  return useThemeConfig().navbar.items;
+}
+// The primary menu displays the navbar items
+export default function NavbarMobilePrimaryMenu() {
+  const mobileSidebar = useNavbarMobileSidebar();
+  // TODO how can the order be defined for mobile?
+  // Should we allow providing a different list of items?
+  const items = useNavbarItems();
+  return (
+    <>
+      <ul className="menu__list">
+        {items.map((item, i) => (
+          <NavbarItem
+            mobile
+            {...item}
+            onClick={() => mobileSidebar.toggle()}
+            key={i}
+          />
+        ))}
+      </ul>
+      <span className="github-btn-mobile">
+        <GitHubButton
+          type="stargazers"
+          size="large"
+          namespace="apache"
+          repo="doris"
+        />
+      </span>
+    </>
+  );
+}


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@doris.apache.org
For additional commands, e-mail: commits-help@doris.apache.org