Fix:Adaptive width&add ebook (#312)

higress-group · Sep 4, 2024 · 08d9412 · 08d9412
1 parent a7a36ea
commit 08d9412
Show file tree

Hide file tree

Showing 16 changed files with 8,369 additions and 2 deletions.
diff --git a/src/components/starlight/ContentPanel.astro b/src/components/starlight/ContentPanel.astro
@@ -2,7 +2,7 @@
 import type { Props } from "../props";
 ---
 
-<div class="content-panel content-panel-wrapper">
+<div class="content-panel content-panel-wrapper large-screen-width">
   <div class="sl-container"><slot /></div>
 </div>
 
@@ -28,4 +28,9 @@ import type { Props } from "../props";
       }
     }
   }
+  @media (min-width: 100rem) {
+      .large-screen-width .max-unfold{
+        max-width: 100%!important;
+      }
+    }
 </style>
diff --git a/src/components/starlight/TwoColumnContent.astro b/src/components/starlight/TwoColumnContent.astro
@@ -90,6 +90,14 @@ import { Icon } from "@astrojs/starlight/components";
         );
       }
     }
+    @media (min-width: 100rem) {
+      .collapsed {
+        max-width: 20rem!important;
+      }
+      .max-unfold .sl-markdown-content .expressive-code{
+        max-width: calc(100vw - var(--sl-sidebar-width) - 20rem);
+      }
+    }
   }
 </style>
 
@@ -151,7 +159,21 @@ import { Icon } from "@astrojs/starlight/components";
     }
   }
 
-  document.addEventListener("astro:page-load", toggleSidebar);
+  // 大屏幕下文档三栏宽度自适应 100rem
+  function largeScreen() {
+    const toggleBtn = document.getElementById("toggle-btn");
+    const remwidth = parseFloat(getComputedStyle(document.documentElement).fontSize) * 100;
+    const windowWidth = window.innerWidth;
+    if (toggleBtn && windowWidth > remwidth) {
+      toggleBtn.click();
+    }
+  };
+
+  document.addEventListener("astro:page-load", ()=> {
+    toggleSidebar()
+    largeScreen()
+  });
+
   document.addEventListener("DOMContentLoaded", toggleSidebar);
   document.addEventListener("astro:page-load", addBackBtnClick);
   document.addEventListener("DOMContentLoaded", addBackBtnClick);

diff --git a/src/constant.ts b/src/constant.ts
@@ -489,6 +489,14 @@ export const COMMUNITY_MENU_LIST = [
           en: "Blog",
         },
       },
+      {
+        label: "电子书",
+        target: "_self",
+        link: "/docs/ebook/wasm14/",
+        translations: {
+          en: "E-book",
+        },
+      },
     ],
   },
 ];

diff --git a/src/content/docs/ebook/_sidebar.json b/src/content/docs/ebook/_sidebar.json
@@ -0,0 +1,52 @@
+[
+  {
+    "label": "Wasm 插件和开发篇",
+    "translations": {
+      "en": "Development Wasm Plugin"
+    },
+    "items": [
+      {
+        "label": "Wasm 插件介绍和开发自定义插件",
+        "translations": {
+          "en": "Plugins and Development custom"
+        },
+        "link": "docs/ebook/wasm14/"
+      },
+      {
+        "label": "Wasm 插件原理",
+        "translations": {
+          "en": "Wasm Plugin principle"
+        },
+        "link": "docs/ebook/wasm15/"
+      },
+      {
+        "label": "Higress 插件GoSDK与处理流程",
+        "translations": {
+          "en": "Higress GoSDK Processing "
+        },
+        "link": "docs/ebook/wasm16/"
+      },
+      {
+        "label": "HTTP 调用",
+        "translations": {
+          "en": "HTTP Call"
+        },
+        "link": "docs/ebook/wasm17/"
+      },
+      {
+        "label": "Redis 调用",
+        "translations": {
+          "en": "Redis Call"
+        },
+        "link": "docs/ebook/wasm18/"
+      },
+      {
+        "label": "Wasm 生效原理",
+        "translations": {
+          "en": "Wasm Effective Principle "
+        },
+        "link": "docs/ebook/wasm19/"
+      }
+    ]
+  }
+]