Merge branch 'master' of gitlab.alibaba-inc.com:goat/astro-nacos

openwharf-group · Dec 25, 2023 · 14ae5d3 · 14ae5d3
2 parents 3b38b3c + 98fd640
commit 14ae5d3
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 12 deletions.
diff --git a/src/components/blog/BlogHeader.astro b/src/components/blog/BlogHeader.astro
@@ -1,6 +1,6 @@
 ---
 import TocComponent from "@components/blog/TocComponents/TocComponent.astro";
-const { align = "home", post } = Astro.props;
+const { align = "home", headings } = Astro.props;
 const justifyContent = align === "detail" ? "flex-start" : "space-between";
 const isBlock = align === "detail" ? "block" : "none";
 const isFlexNone = align === "detail" ? "none" : 1;
@@ -146,10 +146,9 @@ const isRight = align === "detail" ? "auto" : "0px";
           </svg>
         </div>
         <div
-          data-blog-tocComponent-content
-          class="hidden absolute right-0 top-full w-96 bg-gray-12 text-gray-01 pl-8 pb-8"
+          class="blog-tocComponent-content hidden absolute right-0 top-full w-96 bg-gray-12 text-gray-01 pl-8 pb-8 pt-4"
         >
-          {post && <TocComponent content={post} isFold={true}/>}
+          <TocComponent headings={headings}/>
         </div>
       </div>
     </div>
@@ -170,7 +169,7 @@ const isRight = align === "detail" ? "auto" : "0px";
         "div[data-blog-tocComponent-button]",
       )!;
       const blogTocComponentContent = this.querySelector<HTMLDivElement>(
-        "div[data-blog-tocComponent-content]",
+        "div.blog-tocComponent-content",
       )!;
       // 移动端点击折叠按钮打开/关闭级联菜单
       blogMenu.addEventListener("click", () => {
@@ -251,6 +250,16 @@ const isRight = align === "detail" ? "auto" : "0px";
   .data-blog-menu-content{
     right:var(--isRight);
   }
+  .blog-tocComponent-content :global(h2) {
+		font-size: 1rem;
+	}
+  .blog-tocComponent-content :global(a){
+		display: block;
+		font-size: var(--sl-text-xs);
+		text-decoration: none;
+		color: var(--sl-color-gray-5);
+		overflow-wrap: anywhere;
+  }
   @media (max-width: 48rem) {
     .blog_header_content {
       justify-content: var(--justifyContent) !important;

diff --git a/src/components/blog/TocComponents/TocComponent.astro b/src/components/blog/TocComponents/TocComponent.astro
@@ -3,7 +3,7 @@ import TableOfContentsList from "@components/starlight/TableOfContentsList.astro
 import "./style.css";
 
 // // Props
-const { headings = [], isFold } = Astro.props;
+const { headings = [] } = Astro.props;
 
 const toc = [{ depth: 2, slug: "_top", text: "概述", children: [] }];
 
@@ -23,7 +23,7 @@ const depth = 0;
 
 {
     toc && (
-        <blog-toc data-min-h="1" data-max-h="3" class={isFold && "isMobile"}>
+        <blog-toc data-min-h="1" data-max-h="3" class={"isMobile"}>
             <nav
                 aria-labelledby="starlight__on-this-page"
                 class="starlight__on-this-page"

diff --git a/src/components/common/Header.astro b/src/components/common/Header.astro
@@ -33,6 +33,11 @@ const communitySubMenu = {
       { label: 'E-book', url: '/docs/ebook/iez8a4' },
       { label: 'Download', url: '/download/nacos-service' },
     ],
+    CONTACT_US: [
+      { label: 'Github', url: '/' },
+      { label: 'DingDing', url: '/' },
+      { label: 'E-mail', url: '/' },
+    ],
   },
   shortcutCards: [
     {
@@ -109,9 +114,9 @@ const communitySubMenu = {
         <div 
           data-community-dropdown 
           style={`top: ${height}`} 
-          class="dropdown-panel bg-gray-14 hidden invisible opacity-0 absolute left-0 right-0 z-50"
+          class="dropdown-panel bg-gray-14 hidden invisible opacity-0 absolute left-0 right-0 z-50 px-24"
         >
-          <div class="flex pb-10 pt-14 px-24 justify-center">
+          <div class="flex pb-10 pt-14 justify-center">
             <div class="flex mr-32">
               <div class="shortcut-menu flex flex-col px-7 mr-14">
                 <span class="text-xs text-gray-10 mb-2">COMMUNITY</span>
@@ -160,6 +165,26 @@ const communitySubMenu = {
               }
             </div>
           </div>
+          <div class="flex justify-between mb-14 relative xl:w-[85%] rounded-2xl bg-gray-13 h-9 pl-10 pr-20 xl:ml-28">
+            <span class="text-gray-07 text-xs tracking-[0.15em] leading-9">CONTACT US</span>
+            <div class="leading-9 flex cursor-pointer">
+              <a class="mr-10 text-gray-02" href="">
+                <svg class="icon" viewBox="0 0 1024 800" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3233" width="16" height="16"><path d="M20.48 503.72608c0 214.4256 137.4208 396.73856 328.94976 463.6672 25.8048 6.5536 21.87264-11.8784 21.87264-24.33024v-85.07392c-148.93056 17.44896-154.86976-81.1008-164.94592-97.52576-20.23424-34.52928-67.91168-43.33568-53.69856-59.76064 33.91488-17.44896 68.48512 4.42368 108.46208 63.61088 28.95872 42.88512 85.44256 35.6352 114.15552 28.4672a138.8544 138.8544 0 0 1 38.0928-66.7648c-154.25536-27.60704-218.60352-121.77408-218.60352-233.79968 0-54.31296 17.94048-104.2432 53.0432-144.54784-22.36416-66.43712 2.08896-123.24864 5.3248-131.6864 63.81568-5.7344 130.00704 45.6704 135.168 49.68448 36.2496-9.78944 77.57824-14.9504 123.82208-14.9504 46.4896 0 88.064 5.3248 124.5184 15.23712 12.288-9.4208 73.80992-53.53472 133.12-48.128 3.15392 8.43776 27.0336 63.93856 6.02112 129.4336 35.59424 40.38656 53.69856 90.76736 53.69856 145.24416 0 112.18944-64.7168 206.4384-219.42272 233.71776a140.0832 140.0832 0 0 1 41.7792 99.9424v123.4944c0.86016 9.87136 0 19.6608 16.50688 19.6608 194.31424-65.49504 334.2336-249.15968 334.2336-465.5104C1002.57792 232.48896 782.66368 12.77952 511.5904 12.77952 240.18944 12.65664 20.48 232.40704 20.48 503.72608z" fill="#567BE1" opacity=".65" p-id="3234"></path></svg>
+                Github
+              </a>
+              <div class="hoverable">
+                <img class="tooltip hidden w-40 absolute bottom-9" src="https://img.alicdn.com/imgextra/i4/O1CN01ivNLl61l6i93SDfcz_!!6000000004770-0-tps-854-1102.jpg" alt="">
+                <span class="mr-10 text-gray-02">
+                  <svg class="icon" viewBox="0 0 1024 800" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4747" width="16" height="16"><path d="M0 0h1024v1024H0z" fill="#567BE1" fill-opacity="0" p-id="4748"></path><path d="M786.978133 481.6896c-153.770667-117.5552-327.133867-273.237333-517.188266-440.183467-14.984533-13.141333-28.2624-7.953067-34.952534 9.5232-42.8032 111.957333-1.297067 211.421867 65.774934 268.731734 67.345067 57.582933 167.492267 110.592 228.829866 138.683733 2.389333 1.092267 0.3072 4.573867-2.116266 3.515733-112.674133-49.152-191.044267-84.650667-297.3696-165.819733-11.434667-8.738133-23.04-5.3248-24.405334 11.707733-8.704 107.042133 60.484267 191.146667 137.728 219.5456 47.786667 17.6128 100.0448 27.3408 148.548267 33.109334 2.525867 0.341333 1.9456 4.027733-0.580267 4.027733-62.498133 0.2048-138.001067-14.609067-203.332266-39.458133-13.789867-5.256533-18.5344 5.632-16.418134 14.267733 11.1616 45.226667 67.652267 114.346667 157.5936 128.887467 16.827733 2.730667 34.747733 3.072 50.722134 2.628266 3.7888-0.136533 4.7104 1.9456 3.4816 4.846934 0 0-61.098667 103.6288-63.761067 108.066133-2.082133 3.447467-0.8192 6.212267 3.515733 6.212267h80.622934c3.754667 0 6.0416 2.389333 4.096 5.5296-1.877333 3.140267-107.656533 176.7424-112.64 185.0368-4.369067 7.202133 0.785067 12.731733 8.942933 6.826666 8.192-5.9392 346.180267-250.88 355.805867-257.911466 4.437333-3.208533 3.413333-7.5776-2.833067-7.5776h-72.2944c-4.744533 0-5.768533-3.140267-2.56-6.314667 3.242667-3.1744 82.090667-80.964267 110.08-110.08 29.184-30.378667 44.100267-86.050133-5.290667-123.8016" fill="#567BE1" p-id="4749"></path></svg>
+                  DingDing
+                </span>
+              </div>
+              <a class="text-gray-02" href="">
+                <svg class="icon" viewBox="0 0 1024 800" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5876" width="16" height="16"><path d="M953.344 190.4l-409.6 326.528a53.376 53.376 0 0 1-63.488 0l-409.6-326.528c14.976-12.8 33.984-19.84 53.696-19.712h775.296c20.608 0 39.36 7.424 53.696 19.712z m27.968 82.112v500.672c0 44.288-36.48 80.128-81.664 80.128H124.352c-45.12 0-81.664-35.84-81.664-80.128V272.512l405.76 323.52c35.072 27.968 92.096 27.904 127.104 0l405.76-323.52z" fill="#567BE1" p-id="5877"></path></svg>
+                E-mail
+              </a>
+            </div>
+          </div>
         </div>
       </div>
       <span class="text-gray-06 text-xs">|</span>
@@ -223,7 +248,7 @@ const communitySubMenu = {
               </button>
             </div>
             <div mobile-menu-expand-content-docs
-              class="px-8 hidden invisible opacity-0 w-screen bg-gray-01 absolute left-0 right-0 top-16">
+              class="px-8 hidden invisible opacity-0 w-screen h-screen bg-gray-01 absolute left-0 right-0 top-16">
               <div mobile-menu-fold-docs class="flex items-center pt-8 pb-4">
                 <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" class="rotate-180 mr-4" fill="none" viewBox="0 0 9 14" stroke="#2e3038">
                   <path stroke-width="2" d="M1 1L7 7L1 13"></path>
@@ -321,6 +346,23 @@ const communitySubMenu = {
                     }
                   </ul>
                 </div>
+                <div class="mb-6">
+                  <span class="text-xs text-gray-07">CONTACT US</span>
+                  <ul class="pl-0 list-none">
+                    {
+                      communitySubMenu.shortcutMenus.CONTACT_US.map((menu) => {
+                        const { label, url } = menu;
+                        return (
+                          <a href={url}>
+                            <li class="text-sm text-gray-14 mt-2 cursor-pointer">
+                              {label}
+                            </li>
+                          </a>
+                        );
+                      })
+                    }
+                  </ul>
+                </div>
               </div>
             </div>
           </li>
@@ -349,6 +391,7 @@ const communitySubMenu = {
     private mobileMenuFoldDocs: HTMLDivElement;
     private mobileMenuExpandCom: HTMLDivElement;
     private mobileMenuFoldCom: HTMLDivElement;
+    private hoverable: HTMLDivElement;
 
     constructor() {
 			super();
@@ -408,6 +451,12 @@ const communitySubMenu = {
       const mobileMenuExpandContentCom = this.querySelector<HTMLDivElement>(
         "div[mobile-menu-expand-content-com]",
       )!;
+      this.hoverable = this.querySelector<HTMLDivElement>(
+        "div.hoverable",
+      )!;
+      const tooltip = this.querySelector(
+        "img.tooltip",
+      )!;
 
       this.menuSelectorEffect();
 
@@ -434,6 +483,12 @@ const communitySubMenu = {
       this.mobileMenuFoldCom.addEventListener("click", () => {
         this.hideMobileMenu(mobileMenuExpandContentCom, false);
       });
+      this.hoverable.addEventListener("mouseenter", () => {
+        this.showMobileMenu(tooltip);
+      });
+      this.hoverable.addEventListener("mouseleave", () => {
+        this.hideMobileMenu(tooltip);
+      });
 
       // 点击蒙板关闭下拉菜单
       this.modalPanel.addEventListener("click", () => {
@@ -521,7 +576,7 @@ const communitySubMenu = {
       document.body.classList.add("overflow-hidden");
     };
     // 隐藏移动端二级菜单
-    hideMobileMenu = (htmlElement, value) => {
+    hideMobileMenu = (htmlElement, value?) => {
       htmlElement?.classList.remove("block", "visible", "opacity-100");
       htmlElement?.classList.add("hidden", "invisible", "opacity-0");
       value && document.body.classList.remove("overflow-hidden");

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -20,7 +20,7 @@ const { Content, headings } = await post.render();
 ---
 
 <BaseLayout title="Nacos Blog" position="static">
-	<BlogHeader align="detail" post={post.body} />
+	<BlogHeader align="detail" headings={headings} />
 	<div>
 		<div class="w-full 2xl:w-[75%] xl:w-[75%] lg:w-[75%] md:w-[75%] inline-block">
 			<BlogPost {...post.data}>