feat: fix doc

README.md

@@ -1,4 +1,4 @@
-# Starlight Starter Kit: Basic
+# Starlight Starter Kit: Basics
 
 [![Built with Starlight](https://astro.badg.es/v2/built-with-starlight/tiny.svg)](https://starlight.astro.build)
 

goat.config.ts

@@ -37,7 +37,7 @@ const replaceNavigation = async () => {
 		sideBarRegex,
 		`export function getSidebar(pathname: string, locale: string | undefined, categories: any): SidebarEntry[] {
 		const routes = getLocaleRoutes(locale);
-		const versionRegex = /\\/docs\\/(next|latest|ebook|v[0-9]\\.[0-9]\\.[0-9]|v[0-9]\\.[0-9]|v[0-9]|[0-9]\\.[0-9]\\.[0-9]|[0-9]\\.[0-9]|[0-9])/;
+		const versionRegex = /\\/docs\\/([^/]+)\\//;
 		const match = versionRegex.exec(pathname);
 		const version = match ? match[1] : 'latest';
 		if(categories && categories[version]){
@@ -56,7 +56,7 @@ const replaceNavigation = async () => {
 	const sideBarLinkContent = sideBarContent.replace(
 		sideBarLinkRegex,
 		`href = formatPath(href);
-		const regex = /\\/(next|latest|ebook|v[0-9]\\.[0-9]\\.[0-9]|v[0-9]\\.[0-9]|v[0-9]|[0-9]\\.[0-9]\\.[0-9]|[0-9]\\.[0-9]|[0-9])\\/(en|zh-cn)/;
+		const regex = /\\docs\\/([^/]+)\\/(en|zh-cn)/;
 		href = href.replace(regex, '/docs/$1');
 		}`
 	);
@@ -71,7 +71,7 @@ const replaceNavigation = async () => {
 	const localeDirRegex = /const localeDir = locale \? locale \+ \'\/\' \+ directory \: directory\;/;
 	const localeDirContent = sideBarLinkContent.replace(
 		localeDirRegex,
-		`const regex = /(next|latest|ebook|v[0-9]\\.[0-9]\\.[0-9]|v[0-9]\\.[0-9]|v[0-9]|[0-9]\\.[0-9]\\.[0-9]|[0-9]\\.[0-9]|[0-9])\\/(en|zh-cn)/;
+		`const regex =  /\\docs\\/([^/]+)\\/(en|zh-cn)/;
 		const localeDir = locale ? locale + '/' + directory.replace(regex, "$1/"+locale) : directory;`
 	);
 

package.json

@@ -20,15 +20,15 @@
     "@iconify-json/ant-design": "^1.1.15",
     "@iconify-json/basil": "^1.1.5",
     "@iconify-json/tabler": "^1.1.108",
-    "@serverless-cd/goat-ui": "^0.0.23",
-    "sharp": "^0.32.5",
+    "@serverless-cd/goat-ui": "^0.0.25",
     "astro": "^4.3.5",
     "astro-compress": "^2.2.11",
     "date-fns": "^3.4.0",
     "lodash": "^4.17.21",
     "lodash.merge": "^4.6.2",
     "qs": "^6.12.0",
     "rehype-external-links": "^3.0.0",
+    "sharp": "^0.32.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   },

src/components/common/Footer.astro

@@ -34,7 +34,7 @@ import Button from '@components/common/Button.astro';
     >
       <div>
         <p
-          class="text-link text-[0.75rem] leading-4 tracking-[.15em] lg:mb-[3.0625rem]"
+          class="text-neutral text-[0.75rem] leading-4 tracking-[.15em] lg:mb-[3.0625rem]"
         >
           {t("commmon.footer.docs")}
         </p>
@@ -67,7 +67,7 @@ import Button from '@components/common/Button.astro';
       </div>
       <div>
         <p
-          class="text-link text-[0.75rem] leading-4 tracking-[.15em] lg:mb-[3.0625rem]"
+          class="text-neutral text-[0.75rem] leading-4 tracking-[.15em] lg:mb-[3.0625rem]"
         >
           {t("commmon.footer.resource")}
         </p>

src/components/common/Header/CommunityMenu.astro

@@ -193,7 +193,7 @@ const posts = (await getEntries(simplifiedPosts as any)) || [];
                     width="254"
                     height="185"
                   />
-                  <p class="w-[15.875rem] text-lg line-clamp-2 mt-3 text-link">
+                  <p class="w-[15.875rem] text-lg line-clamp-2 mt-3 text-neutral">
                     {blogDescrip[index] || item.data.title}
                   </p>
                   <Button class="rounded-3xl w-[8.5rem] h-[2.5rem] absolute bottom-2" theme="moss" href={`/${item.collection}/${item.slug}/?source=${categoryMap[item.data.category]}`} text={t("commmon.header.comm.shortcut")} />

src/components/common/Header/DocsMenu.astro

@@ -10,16 +10,17 @@ interface Props {
   }[];
 }
 
+const versionList = DOCS_ITEM.map((item)=> item.key)
+
 const getVersion = (pathname) => {
   if (ifzh && !pathname.startsWith('/docs/')) return;
   if (ifzh && pathname.startsWith('/docs/ebook')) return;
   if (!ifzh && !pathname.startsWith('/en/docs/')) return;
   if (!ifzh && pathname.startsWith('/en/docs/ebook')) return;
   const regex = ifzh ? /\/docs\/([^\/]*)/ : /\/en\/docs\/([^\/]*)/;
   const match = pathname.match(regex);
-  // next v1 v2
   const result = match?.[1] || '';
-  return ['next', 'v1', 'v2'].includes(result) ? result : 'latest';
+  return versionList.includes(result) ? result : versionList[0];
 }
 
 const ifactive = (link) => {
@@ -37,7 +38,7 @@ const ifactive = (link) => {
         const { label, link, translations } = item;
         const active = ifactive(ifzh ? link : translations.link);
         return (
-          <li class={`no-underline cursor-pointer my-1 rounded-lg ${active ? 'bg-neutral' : ''} hover:bg-error`}>
+          <li class={`no-underline cursor-pointer my-1 rounded-lg ${active ? 'bg-error' : ''} hover:bg-error`}>
             <a 
               href={ifzh ? link : translations.link}
               class="inline-block w-full p-2 no-underline text-inherit text-neutral" 

src/components/common/Header/index.astro

@@ -41,22 +41,23 @@ let height,
 >
   <!-- 方便控制header宽度 -->
   <div class="header-content flex items-center justify-between">
-    <div class="left-content h-full flex items-center">
+    <div class="left-content h-full flex flex-1 items-center after:content-[''] after:grow after:invisible">
       <a class="no-underline" href="/">
         <img class="logo" src={SITE.logoUrl} alt=`${SITE.name}-logo` />
       </a>
       <MobileNavbar top={height} class="mobile-navbar h-full ml-4" />
     </div>
 
-    <div class="center-content h-full">
+    <div class="center-content justify-center flex-2 h-full">
       <Navbar top={height} class="pc-navbar h-full" />
     </div>
 
-    <div class="right-content flex items-center md:gap-4">
-      <LanguageToggle id="pc-toggle" defaultValue="zh-cn" theme="error"/>
+    <div class="right-content flex flex-1 items-center md:gap-4  before:content-[''] before:grow before:invisible">
+      <LanguageToggle id="pc-toggle" lang={lang} theme="error"/>
       <SearchComp />
     </div>
   </div>
+
 </my-layout>
 
 <script>
@@ -86,7 +87,7 @@ let height,
 <style define:vars={{ width, height, xpadding }}>
   my-layout {
     --header-content-width: var(--width);
-    --logo-width: 96px;
+    --logo-height: 1.125rem;
     --header-height: var(--height);
     --header-xl-padding: var(--xpadding);
   }
@@ -99,7 +100,7 @@ let height,
 
   .left-content .logo {
     vertical-align: sub;
-    width: var(--logo-width);
+    height: var(--logo-height);;
   }
 
   .left-content .mobile-navbar {

src/components/common/Header/navbar.ts

@@ -13,16 +13,6 @@ export default [
       position: "absolute",
       activePath: ['/docs'],
   },
-  {
-      label: "企业版 NACOS",
-      translations: {
-          en: "NACOS CLOUD"
-      },
-      trigger: "click", 
-      route: "/cloud/",
-      target: "_self",
-      activePath: ['/cloud'],
-  },
   {
       label: "社区",
       translations: {
@@ -34,12 +24,23 @@ export default [
       activePath: ['/news', '/activity', '/blog', '/docs/ebook/', '/download'],
   },
   {
-      label: "控制台样例",
-      translations: {
-          en: "DEMO"
-      },
-      trigger: "click", 
-      target: "_blank",
-      route: "http://console.nacos.io/nacos/index.html"
-  }
+    label: "学习",
+    translations: {
+        en: "LEARN"
+    },
+    trigger: "hover",
+    slot: CommunityMenu,
+    position: "fixed",
+    activePath: ['/learn'],
+    },
+    {
+        label: "解决方案",
+        translations: {
+            en: "SOLUTIONS"
+        },
+        trigger: "hover",
+        slot: CommunityMenu,
+        position: "fixed",
+        activePath: ['solutions'],
+    },
 ]

src/components/common/Header/searchComp/index.astro

@@ -74,11 +74,10 @@ const docsearchTranslations: DocSearchTranslationProps = {
 		gap: 0.2rem;
 		border-radius: 1.5rem;
 		cursor: pointer;
-		color: theme("colors.link");
+		color: theme("colors.neutral");
 		background-color: theme("colors.error");
 		font-size: 0.75rem;
 		line-height: 1rem;
-		transform: translateX(0.9rem);
 	}
 	.DocSearch-Button:hover {
 	}
@@ -105,7 +104,7 @@ const docsearchTranslations: DocSearchTranslationProps = {
 		}
 		.DocSearch-Search-Icon {
 			font-size: 1.2rem;
-			color: theme('colors.link');
+			color: theme('colors.neutral');
 		}
 		.DocSearch-Button-Placeholder {
 			display: none;

src/components/common/MobileNavbar.astro

@@ -67,15 +67,15 @@ for (let i = 0; i < dataSource.length; i++) {
       >
         <path
           d="M192.037 287.953h640.124c17.673 0 32-14.327 32-32s-14.327-32-32-32H192.037c-17.673 0-32 14.327-32 32s14.327 32 32 32zM832.161 479.169H438.553c-17.673 0-32 14.327-32 32s14.327 32 32 32h393.608c17.673 0 32-14.327 32-32s-14.327-32-32-32zM832.161 735.802H192.037c-17.673 0-32 14.327-32 32s14.327 32 32 32h640.124c17.673 0 32-14.327 32-32s-14.327-32-32-32zM319.028 351.594l-160 160 160 160z"
-          fill="#f4f4f6"
+          class="fill-neutral"
           p-id="6305"
         >
         </path>
       </svg>
     </button>
   </mobile-menu-button>
 
-  <div class="navbar-panel bg-gray-14">
+  <div class="navbar-panel bg-secondary">
     <div class="navbar-content flex">
       <MobileNavbarSublist sublist={sublist} />
     </div>

src/components/home/HomeSolutionsCard.astro

@@ -36,7 +36,7 @@ const t = useTranslations(Astro);
                   </div>
                   {item.keyword.map((it) => {
                     return (
-                      <span class="item-keyword opacity-0 border border-accent rounded-[2.25rem] h-8 px-6 py-2 text-xs text-base-100 mr-3 inline-block mb-4">
+                      <span class="item-keyword opacity-0 border border-secondary rounded-[2.25rem] h-8 px-6 py-2 text-xs text-base-100 mr-3 inline-block mb-4">
                         {t(it)}
                       </span>
                     );
@@ -62,7 +62,7 @@ const t = useTranslations(Astro);
         return (
           <div class="solutions-mobile-card mx-auto h-[14rem] overflow-hidden flex flex-col justify-between cursor-pointer p-4 rounded-3xl">
             <div class="flex align-center flex-nowrap w-full">
-              <div class="mx-auto text-xs font-normal text-link tracking-wider">
+              <div class="mx-auto text-xs font-normal text-neutral tracking-wider">
                 {t("home.solutions.about")}
               </div>
             </div>

src/components/home/Solution.astro

@@ -4,6 +4,7 @@ import { CarouselCard } from "@serverless-cd/goat-ui";
 import { useTranslations } from "@i18n/util";
 import { Arrow } from "../icon";
 const t = useTranslations(Astro);
+
 const MICROSERVICE_SOLUTION = [
   {title: 'Spring Cloud Alibaba SEATA', image: '/assets/2-1.jpg',detailTitle:"home.introduction.detailTitle.1",detail:'home.introduction.detail.1'},
   {title: 'Spring Cloud Alibaba Sentinel', image: '/assets/2-2.jpg', detailTitle: 'home.introduction.detailTitle.2', detail: 'home.introduction.detail.2'},
@@ -13,12 +14,11 @@ const MICROSERVICE_SOLUTION = [
   {title: 'Spring Cloud Alibaba Nacos', image: '/assets/2-6.jpg', detailTitle: 'home.introduction.detailTitle.6', detail: 'home.introduction.detail.6'},
   {title: 'Spring Cloud Alibaba Nacos', image: '/assets/2-7.jpg', detailTitle: 'home.introduction.detailTitle.7', detail: 'home.introduction.detail.7'},
 ];
-
-
 ---
 <div class='flex flex-col justify-center items-center mt-16'>
     <div class='lg:w-[85.125rem] md:w-full'>
-      <div class='md:w-[438px] h-[41px] text-success text-[16px]  md:text-[20px] leading-4 rounded-[20px] bg-gradient-to-r from-muted from-70% to-success to-110% px-5 py-3'>
+      <div class='solution-slogan md:w-[438px] h-[41px] text-success text-[16px]  md:text-[20px] leading-4 rounded-[20px] px-5 py-3'
+      >
       One-stop Open Source Microservice Solution
       </div>
     </div>
@@ -47,6 +47,10 @@ const MICROSERVICE_SOLUTION = [
 
   </div>
 <style>
+  .solution-slogan {
+    background: linear-gradient(90deg, rgba(157, 215, 162, 0.3) 11%, rgba(165, 198, 230, 0.29) 104%, rgba(143, 168, 166, 0.14) 104%);
+    color:#6B8A88
+  }
   .solution{
     &:hover{
       .solutionDetail{

src/components/home/StarAndFork.astro

@@ -4,6 +4,7 @@ import Fork from "../icon/Fork.astro";
 import Button from "@components/common/Button.astro";
 import sendFetch from "@/utils/sendFetch";
 import { SITE } from "@utils/config";
+import { LinkButton } from "@serverless-cd/goat-ui"
 
 const relativePath = SITE.githubUrl.split("https://github.com/")[1];
 const data = await sendFetch(`https://api.github.com/repos/${relativePath}`);
@@ -12,24 +13,23 @@ const { stargazers_count: startCount = 0, forks_count: forkCount = 0 } =
 ---
 
 <star-and-fork class="shortcut flex">
-  <Button
-    size="large"
-    class="rounded-3xl mr-4"
-    href={SITE.githubUrl}
-    target="_blank"
-  >
-    <Star classes="fill-link"/>
-    <span class="text-[0.875rem] leading-4 ml-2">{startCount}</span>
-  </Button>
-
-  <Button
-    size="large"
-    type="primary"
-    class="rounded-3xl"
-    href="https://github.com/alibaba/nacos/fork"
-    target="_blank"
-  >
-    <Fork classes="fill-base-100" />
-    <span class="ml-2">{forkCount}</span>
-  </Button>
+  <LinkButton  
+    href={SITE.githubUrl}    
+    text={startCount}    
+    theme="secondary"    
+    textTheme="neutral"    
+    useIcon="star"
+    classes={{title: "font-medium"}}
+  />
+  <LinkButton
+    href="https://github.com/alibaba/nacos/fork"    
+    text={forkCount}    
+    theme="primary"    
+    textTheme="base-100"    
+    useIcon="fork"
+    classes={{
+      container:'ml-4',
+      title:'font-medium'
+    }}
+  />
 </star-and-fork>