feat: Set default home (#2206)

* fix: default home's link

* feat: To adjust home's jump way("_blank")

Author: Chasen-Zhang

docusaurus.config.ts

@@ -249,11 +249,10 @@ const config: Config = {
       content: `⭐️ If you like Databend, give it a star on <a target="_blank" rel="noopener noreferrer" href="https://github.com/datafuselabs/databend">GitHub</a> and follow us on <a target="_blank" rel="noopener noreferrer" href="https://x.com/DatabendLabs" >Twitter</a> ${TwitterSvg}`,
     },
     navbar: {
-      title: "Databend",
+      title: "DOCUMENTATION",
       logo: {
-        alt: "Databend Logo",
         href: homeLink,
-        target: "_self",
+        target: "_blank",
         srcDark: "img/logo-dark.svg",
         src: "img/logo.svg",
       },

src/css/navbar.scss

@@ -23,7 +23,7 @@
       width: 88%;
     }
     @include media {
-      img{
+      img {
         width: 70%;
       }
     }
@@ -38,12 +38,13 @@
 .navbar__search-input {
   cursor: pointer;
   border-radius: calc(var(--radius) - 2px);
-  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
   border: 1px solid hsl(var(--input));
-  &:hover{
-    border: 2px solid var(--ifm-menu-color-active) ;
+  &:hover {
+    border: 2px solid var(--ifm-menu-color-active);
   }
-  &::placeholder{
+  &::placeholder {
     font-weight: bold;
     color: var(--color-text-2);
   }
@@ -52,9 +53,9 @@
   font-weight: 600;
 }
 
-.navbar__search-input{
-  border-radius: 3px!important;
-  --ifm-navbar-search-input-background-color: var(--color-fill-0)!important;
+.navbar__search-input {
+  border-radius: 3px !important;
+  --ifm-navbar-search-input-background-color: var(--color-fill-0) !important;
   --ifm-navbar-search-input-color: var(--color-text-1);
 }
 .navbar__items {
@@ -64,24 +65,14 @@
 }
 // navbar end
 
-// .navbar.navbar--fixed-top {
-//   background-color: transparent !important;
-//   backdrop-filter: blur(4px);
-//   border: var(--color-border);
-// }
-// .navbar__inner .navbar__item {
-//   font-weight: 600;
-// }
-
-// .navbar-sidebar {
-//   height: 100vh;
-// }
-
-// .navbar-sidebar__items {
-//   padding-bottom: 4rem;
-// }
 .navbar__title {
-  display: none;
+  font-size: 14px;
+  font-weight: 600;
+  position: relative;
+  top: 2.4px;
+}
+.navbar__brand:hover {
+  color: var(----ifm-navbar-link-color);
 }
 div[class^="searchBox"] {
   width: 167.4px;
@@ -91,4 +82,4 @@ div[class^="searchBox"] {
   @include media {
     width: auto;
   }
-}
+}

src/theme/Logo/index.tsx

@@ -0,0 +1,77 @@
+import React, { type ReactNode } from "react";
+import Link from "@docusaurus/Link";
+import useBaseUrl from "@docusaurus/useBaseUrl";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import { useThemeConfig, type NavbarLogo } from "@docusaurus/theme-common";
+import ThemedImage from "@theme/ThemedImage";
+import type { Props } from "@theme/Logo";
+
+function LogoThemedImage({
+  logo,
+  alt,
+  imageClassName,
+}: {
+  logo: NavbarLogo;
+  alt: string;
+  imageClassName?: string;
+}) {
+  const sources = {
+    light: useBaseUrl(logo.src),
+    dark: useBaseUrl(logo.srcDark || logo.src),
+  };
+  const themedImage = (
+    <ThemedImage
+      className={logo.className}
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={alt}
+      style={logo.style}
+    />
+  );
+
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  );
+}
+
+export default function Logo(props: Props): ReactNode {
+  const {
+    siteConfig: { title },
+  } = useDocusaurusContext();
+  const {
+    navbar: { title: navbarTitle, logo },
+  } = useThemeConfig();
+
+  const { imageClassName, titleClassName, ...propsRest } = props;
+  const logoLink = useBaseUrl(logo?.href || "/");
+
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? "" : title;
+
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt;
+
+  return (
+    <Link
+      to={logoLink}
+      {...propsRest}
+      {...(logo?.target && { target: logo.target })}
+    >
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
+      {navbarTitle != null && <b className={titleClassName}>DOCUMENTATION</b>}
+    </Link>
+  );
+}