feat: support url query to disable global ui components (#422)

web-infra-dev · Dec 4, 2023 · 0a4b727 · 0a4b727
1 parent a98e9f5
commit 0a4b727
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 19 deletions.
diff --git a/.changeset/tough-teachers-thank.md b/.changeset/tough-teachers-thank.md
@@ -0,0 +1,7 @@
+---
+'@rspress/docs': patch
+'@rspress/shared': patch
+'@rspress/core': patch
+---
+
+feat: support url query to disable global ui components
diff --git a/packages/core/src/runtime/App.tsx b/packages/core/src/runtime/App.tsx
@@ -15,6 +15,11 @@ import 'virtual-global-styles';
 // eslint-disable-next-line import/no-commonjs
 const { default: Theme } = require('@theme');
 
+export enum QueryStatus {
+  Show = '1',
+  Hide = '0',
+}
+
 type RspressPageMeta = Record<
   string,
   {
@@ -46,7 +51,6 @@ export async function initPageData(routePath: string): Promise<PageData> {
     const encodedPagePath = encodeURIComponent(pagePath);
     const {
       toc = [],
-
       title = '',
       frontmatter,
     } = (mod.default.__RSPRESS_PAGE_META as RspressPageMeta)?.[
@@ -91,8 +95,15 @@ export async function initPageData(routePath: string): Promise<PageData> {
 }
 
 export function App({ helmetContext }: { helmetContext?: object }) {
-  const { setData: setPageData } = useContext(DataContext);
-  const { pathname } = useLocation();
+  const { setData: setPageData, data } = useContext(DataContext);
+  const frontmatter = data.page.frontmatter || {};
+  const { pathname, search } = useLocation();
+  const query = new URLSearchParams(search);
+  const GLOBAL_COMPONENTS_KEY = 'globalUIComponents';
+  const hideGlobalUIComponents =
+    // Disable global components in frontmatter or query
+    frontmatter[GLOBAL_COMPONENTS_KEY] === false ||
+    query.get(GLOBAL_COMPONENTS_KEY) === QueryStatus.Hide;
   useLayoutEffect(() => {
     async function refetchData() {
       try {
@@ -104,27 +115,29 @@ export function App({ helmetContext }: { helmetContext?: object }) {
     }
     refetchData();
   }, [pathname, setPageData]);
+
   return (
     <HelmetProvider context={helmetContext}>
       <Theme.Layout />
       {
         // Global UI
-        globalComponents.map((componentInfo, index) => {
-          if (Array.isArray(componentInfo)) {
-            const [component, props] = componentInfo;
-            return React.createElement(component, {
-              // The component order is stable
-              // eslint-disable-next-line react/no-array-index-key
-              key: index,
-              ...props,
-            });
-          } else {
-            return React.createElement(componentInfo, {
-              // eslint-disable-next-line react/no-array-index-key
-              key: index,
-            });
-          }
-        })
+        !hideGlobalUIComponents &&
+          globalComponents.map((componentInfo, index) => {
+            if (Array.isArray(componentInfo)) {
+              const [component, props] = componentInfo;
+              return React.createElement(component, {
+                // The component order is stable
+                // eslint-disable-next-line react/no-array-index-key
+                key: index,
+                ...props,
+              });
+            } else {
+              return React.createElement(componentInfo, {
+                // eslint-disable-next-line react/no-array-index-key
+                key: index,
+              });
+            }
+          })
       }
     </HelmetProvider>
   );

diff --git a/packages/document/docs/en/guide/basic/custom-page.mdx b/packages/document/docs/en/guide/basic/custom-page.mdx
@@ -145,6 +145,7 @@ navbar: false
 sidebar: false
 outline: false
 footer: false
+globalUIComponents: false
 ---
 ```
 
@@ -163,3 +164,4 @@ With URL parameters, you can quickly adjust the layout structure of the page wit
 - `sidebar`: Whether to display the sidebar. When you want to hide the sidebar, you can set it to `0`.
 - `outline`: Whether to display the outline column. When you want to hide the outline column, you can set it to `0`.
 - `footer`: Whether to display the footer. When you want to hide the footer, you can set it to `0`.
+- `globalUIComponents`: Whether to display the global components. When you want to hide the global components, you can set it to `0`.
diff --git a/packages/document/docs/zh/guide/basic/custom-page.mdx b/packages/document/docs/zh/guide/basic/custom-page.mdx
@@ -137,6 +137,7 @@ import PageType from '@zh/fragments/page-type';
 - `sidebar`：是否展示侧边栏，当你想要隐藏侧边栏时，可以配置为 `false`；
 - `outline`：是否展示大纲栏，当你想要隐藏大纲栏时，可以配置为 `false`；
 - `footer`：是否展示页脚，当你想要隐藏页脚时，可以配置为 `false`；
+- `globalComponents`: 是否展示全局组件，当你想要隐藏全局组件时，可以配置为 `false`。
 
 示例：
 
@@ -146,6 +147,7 @@ navbar: false
 sidebar: false
 outline: false
 footer: false
+globalUIComponents: false
 ---
 ```
 
@@ -164,3 +166,4 @@ http://YOUR_DOMAIN/foo?navbar=0&outline=0
 - `sidebar`：是否展示侧边栏，当你想要隐藏侧边栏时，可以配置为 `0`；
 - `outline`：是否展示大纲栏，当你想要隐藏大纲栏时，可以配置为 `0`；
 - `footer`：是否展示页脚，当你想要隐藏页脚时，可以配置为 `0`；
+- `globalUIComponents`：是否展示全局组件，当你想要隐藏全局组件时，可以配置为 `0`。