Merge branch 'nacos-group:develop-astro-nacos' into develop-astro-nacos

Tinie13 · May 9, 2024 · ba76000 · ba76000
2 parents 7668dd4 + 5157ec9
commit ba76000
Show file tree

Hide file tree

Showing 9 changed files with 82 additions and 26 deletions.
diff --git a/src/components/common/Header/CommunityMenu.astro b/src/components/common/Header/CommunityMenu.astro
@@ -101,7 +101,7 @@ export const communityItems = [
 
 const categoryMap = {
   article: "blog_article",
-  case: "blog_case.",
+  case: "blog_case",
   ecosystem: "blog_ecosystem",
   release: "news_release",
   committer: "news_personnel",

diff --git a/src/components/common/Header/index.astro b/src/components/common/Header/index.astro
@@ -177,8 +177,8 @@ let height,
       }
     }
 
-    @media (max-width: 50rem) {
-      /** header 特殊处理 屏幕小于 800px 就显示不完全 */
+    @media (max-width: 54rem) {
+      /** header 特殊处理 屏幕小于 860px 就显示不完全 */
       .header-content {
         width: 100%;
         padding-left: 1.5rem;

diff --git a/src/components/common/Header/navbar.ts b/src/components/common/Header/navbar.ts
@@ -42,6 +42,15 @@ export default [
     target: "_self",
     route: "/blog/",
   },
+  {
+    label: "下载",
+    translations: {
+      en: "DOWNLOAD",
+    },
+    trigger: "click",
+    target: "_self",
+    route: "/download/nacos-server/",
+  },
   {
     label: "控制台样例",
     translations: {

diff --git a/src/components/common/Header/searchComp/index.astro b/src/components/common/Header/searchComp/index.astro
@@ -83,7 +83,7 @@ const docsearchTranslations: DocSearchTranslationProps = {
 	.DocSearch-Button-Placeholder {
 		display: block;
 	}
-	@media (max-width: 860px) {
+	@media (max-width: 970px) {
 		.DocSearch-Button {
 			padding-right: 0;
 			background: none;

diff --git a/src/components/common/LanguageToggle.astro b/src/components/common/LanguageToggle.astro
@@ -12,7 +12,7 @@ const initialState = lang === 'zh-cn' ? false : true;
 const t = useTranslations(Astro);
 ---
 <div class='common-languageToggle'>
-  <toggle-content class="switch float-left relative m-0 rounded-[2rem] max-md:hidden">
+  <toggle-content class="switch float-left relative m-0 rounded-[2rem]">
     <input
       data-switch
       class="switch-checkbox hidden"
@@ -30,7 +30,7 @@ const t = useTranslations(Astro);
   </toggle-content>
   <div
     data-switch
-    class="w-[3.5rem] h-[1.5rem] leading-[1.5rem] text-xs text-center rounded-2xl bg-gray-12 text-white max-md:inline-block md:hidden"
+    class="mobile-toggle w-[3.5rem] h-[1.5rem] leading-[1.5rem] text-xs text-center rounded-2xl bg-gray-12 text-white max-md:inline-block"
     id={`${id}-switch`}
   >
     {t('commmon.header.common.translator')}
@@ -147,6 +147,22 @@ const t = useTranslations(Astro);
     align-items: center;
     justify-content: center;
   }
+  .mobile-toggle {
+    display: none;
+  }
+  toggle-content {
+    display: block;
+  }
+  /* 兼容下英文界面 */
+  @media (max-width: 970px) {
+		.mobile-toggle {
+			display: block;
+		}
+
+		toggle-content {
+    display: none;
+  }
+	}
 }
 </style>
 

diff --git a/src/components/markdownSet/BlogTop.astro b/src/components/markdownSet/BlogTop.astro
@@ -22,7 +22,7 @@ const backIconMap = {
       <div class="blog_header_title">{title}</div>
       <div class="blog_category_menu">
         {
-          (type === "home" || type == "blog-sub") &&
+          ["blog-sub", "home"].includes(type) &&
           category &&
             category.map((category) => {
               return (
@@ -36,6 +36,20 @@ const backIconMap = {
               );
             })
         }
+
+        {
+          !["home", "blog-sub"].includes(type) && (
+            <Button
+              type="primary"
+              href={backIconMap[type]}
+              class="rounded-3xl"
+              visibility={false}
+            >
+              <Icon name="left-arrow" class="text-lg align-middle" />
+              <span class="ml-1">BACK</span>
+            </Button>
+          )
+        }
       </div>
     </BaseContainer>
   </div>

diff --git a/src/components/markdownSet/SimpleCard.astro b/src/components/markdownSet/SimpleCard.astro
@@ -38,7 +38,7 @@ const { post, source, posterWidth, type = "blog",index = 0, class: className = "
         {post.data.title}
     </h2>
 
-    <div class="w-full text-lg text-gart-14 leading-8 overflow-hidden">
+    <div class="w-full text-lg leading-8 overflow-hidden mt-[24px] simple-card-desc">
         {post.excerpt || post.data.description}
     </div>
 
@@ -74,4 +74,10 @@ const { post, source, posterWidth, type = "blog",index = 0, class: className = "
   h2 {
     min-height: 3rem;
   }
+  .simple-card-desc {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    color: #848487;
+  }
 </style>
diff --git a/src/components/markdownSet/SimpleContainer.astro b/src/components/markdownSet/SimpleContainer.astro
@@ -40,27 +40,32 @@ const getExcerpt = (content, length = 200, defaultExcerpt = '') => {
 
 if(pageList && pageList.length) {
     pageList.forEach(item => {
-        item.excerpt = getExcerpt(item.body, 120, item.data?.description);
+        item.excerpt = getExcerpt(item.body, 200, item.data?.description);
     });
 };
 ---
 
 <BaseContainer class="flex justify-between">
-    <div class="max-w-[200px] min-w-[200px] hidden 2xl:block xl:block lg:block">
-        <div class="text-lg text-gray-08 mb-[32px]">文章</div>
-        <div class="text-lg text-gray-14">
-            {
-                pageList.map(post=>{
-                    return (
-                        <a 
-                            class="text-gray-14 no-underline font-normal block mb-[24px]"
-                            href={`#${post.slug}`}
-                        >
-                            { post.data.title }
-                        </a>
-                    );
-                })
+    <div class="max-w-[200px] min-w-[200px] hidden 2xl:block xl:block lg:block relative">
+        <div class="sticky top-[100px]">
+            {pageList && pageList.length? 
+                <div class="text-lg text-gray-08 mb-[32px]">文章</div>
+                :null
             }
+            <div class="text-[16px] text-gray-14">
+                {
+                    pageList.map(post=>{
+                        return (
+                            <a 
+                                class="text-gray-14 no-underline font-normal block mb-[24px]"
+                                href={`#${post.slug}`}
+                            >
+                                { post.data.title }
+                            </a>
+                        );
+                    })
+                }
+            </div>
         </div>
     </div>
 
@@ -69,7 +74,7 @@ if(pageList && pageList.length) {
             pageList.map((post) => (
                 <SimpleCard 
                     post={post as Post} 
-                    source="blog_all"
+                    source="blog"
                     useAnchor={true}
                 />
             ))

diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
@@ -120,11 +120,17 @@ const next = articlePosts[0].entries[currentIndex + 1];
 <script>
 	const url = new URL(window.location.href);
 	let source = url.searchParams.get("source");
-	source = source.replace(/_/g, "/");
+	if(source) {
+		source = source.replace(/_/g, "/");
+	};
 	const backBtn: HTMLAnchorElement = document.querySelector("#back-btn a");
 	backBtn.onclick = (e) => {
 		e.preventDefault();
-		location.href = `/${source}/`;
+		if(source && source !== 'undefined') {
+			location.href = `/${source}/`;
+		} else {
+			location.href = `/blog/`;
+		};
 	};
 </script>