fix: stabilize DocItem/Layout (#1216)

Swizzles the `DocItem/Layout` component anew and ports the features (Giscus comments). It solves the issue of moving the layout across different docs pages. Closes #1193 https://github.com/user-attachments/assets/a6abdbc3-bd04-429a-b719-73366b8534c7
apify · Sep 16, 2024 · c4c2855 · c4c2855
1 parent e60d3a4
commit c4c2855
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 49 deletions.
diff --git a/src/theme/DocItem/Layout/index.js b/src/theme/DocItem/Layout/index.js
@@ -1,29 +1,27 @@
-/* eslint-disable import/order */
-import React from 'react';
-import clsx from 'clsx';
-import Giscus from '@giscus/react';
-import { useWindowSize, useColorMode } from '@docusaurus/theme-common';
 import { useDoc } from '@docusaurus/plugin-content-docs/client';
-import DocItemPaginator from '@theme/DocItem/Paginator';
-import DocVersionBanner from '@theme/DocVersionBanner';
-import DocVersionBadge from '@theme/DocVersionBadge';
+import { useLocation } from '@docusaurus/router';
+import { useColorMode, useWindowSize } from '@docusaurus/theme-common';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Giscus from '@giscus/react';
+import ContentVisibility from '@theme/ContentVisibility';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import DocItemContent from '@theme/DocItem/Content';
 import DocItemFooter from '@theme/DocItem/Footer';
-import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemPaginator from '@theme/DocItem/Paginator';
 import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
-import DocItemContent from '@theme/DocItem/Content';
-import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import clsx from 'clsx';
+import React, { useCallback } from 'react';
+
 import styles from './styles.module.css';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import { useLocation } from '@docusaurus/router';
 
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
  */
 function useDocTOC() {
-    const {
-        frontMatter,
-        toc,
-    } = useDoc();
+    const { frontMatter, toc } = useDoc();
     const windowSize = useWindowSize();
     const hidden = frontMatter.hide_table_of_contents;
     const canRender = !hidden && toc.length > 0;
@@ -38,21 +36,8 @@ function useDocTOC() {
     };
 }
 
-function shouldShowGiscus(rxStrings, pathname) {
-    return rxStrings.some((rxs) => {
-        const pathRegExp = new RegExp(rxs);
-        const isForbidden = pathRegExp.test(pathname);
-        return !isForbidden;
-    });
-}
-
-export default function DocItemLayout({ children }) {
-    const docTOC = useDocTOC();
-    const { colorMode } = useColorMode();
-    const location = useLocation();
-    const { siteConfig } = useDocusaurusContext();
-    const { forbiddenGiscusDocRegExpStrings } = siteConfig.customFields;
-    const giscus = (
+function GiscusWrapper({ colorMode }) {
+    return (
         <React.Fragment>
             <div className={styles.giscus}>
                 <Giscus
@@ -72,23 +57,40 @@ export default function DocItemLayout({ children }) {
             </div>
         </React.Fragment>
     );
+}
+
+export default function DocItemLayout({ children }) {
+    const docTOC = useDocTOC();
+    const { metadata } = useDoc();
+    const { colorMode } = useColorMode();
+    const location = useLocation();
+    const { siteConfig } = useDocusaurusContext();
+
+    const { forbiddenGiscusDocRegExpStrings } = siteConfig.customFields;
+
+    const shouldShowGiscus = useCallback((rxStrings) => {
+        return rxStrings.some((rxs) => {
+            const pathRegExp = new RegExp(rxs);
+            const isForbidden = pathRegExp.test(location.pathname);
+            return !isForbidden;
+        });
+    }, [location.pathname]);
+
     return (
-        <div
-            className={clsx('row', styles.row)}>
-            <div
-                className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
-                <DocVersionBanner/>
-                <div
-                    className={styles.docItemContainer}>
+        <div className="row">
+            <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+                <ContentVisibility metadata={metadata} />
+                <DocVersionBanner />
+                <div className={styles.docItemContainer}>
                     <article>
-                        <DocBreadcrumbs/>
-                        <DocVersionBadge/>
+                        <DocBreadcrumbs />
+                        <DocVersionBadge />
                         {docTOC.mobile}
                         <DocItemContent>{children}</DocItemContent>
-                        <DocItemFooter/>
+                        <DocItemFooter />
                     </article>
-                    <DocItemPaginator/>
-                    {shouldShowGiscus(forbiddenGiscusDocRegExpStrings, location.pathname) && giscus}
+                    <DocItemPaginator />
+                    {shouldShowGiscus(forbiddenGiscusDocRegExpStrings) && <GiscusWrapper colorMode={colorMode} />}
                 </div>
             </div>
             {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}

diff --git a/src/theme/DocItem/Layout/styles.module.css b/src/theme/DocItem/Layout/styles.module.css
@@ -19,10 +19,6 @@
 
 @media (min-width: 997px) {
   .docItemCol {
-    max-width: 820px !important;
+    max-width: 75% !important;
   }
 }
-
-.row {
-  flex-wrap: nowrap;
-}