Fix copy page button rendering

Author: portdeveloper

website/docusaurus.config.ts

@@ -221,7 +221,6 @@ const config: Config = {
   ],
   plugins: [
     'docusaurus-plugin-sass',
-    'docusaurus-plugin-copy-page-button',
     function disableExpensiveBundlerOptimizationPlugin() {
       return {
         name: 'disable-expensive-bundler-optimizations',

website/src/theme/DocItem/Layout/index.tsx

@@ -0,0 +1,101 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import React, {type ReactNode} from 'react';
+import clsx from 'clsx';
+import {useWindowSize} from '@docusaurus/theme-common';
+import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import CopyPageButton from 'docusaurus-plugin-copy-page-button/src/CopyPageButton';
+import DocItemPaginator from '@theme/DocItem/Paginator';
+import DocVersionBanner from '@theme/DocVersionBanner';
+import DocVersionBadge from '@theme/DocVersionBadge';
+import DocItemFooter from '@theme/DocItem/Footer';
+import DocItemTOCMobile from '@theme/DocItem/TOC/Mobile';
+import DocItemTOCDesktop from '@theme/DocItem/TOC/Desktop';
+import DocItemContent from '@theme/DocItem/Content';
+import DocBreadcrumbs from '@theme/DocBreadcrumbs';
+import ContentVisibility from '@theme/ContentVisibility';
+import type {Props} from '@theme/DocItem/Layout';
+
+import styles from './styles.module.css';
+
+function DocItemCopyPageButton({className}: {className?: string}) {
+  return (
+    <div className={clsx(styles.copyPageAction, className)}>
+      <CopyPageButton
+        customStyles={{
+          container: {className: styles.copyPageButtonContainer},
+          button: {
+            className: styles.copyPageButton,
+            style: {marginBottom: 0},
+          },
+          dropdown: {className: styles.copyPageDropdown},
+        }}
+      />
+    </div>
+  );
+}
+
+/**
+ * Decide if the toc should be rendered, on mobile or desktop viewports
+ */
+function useDocTOC() {
+  const {frontMatter, toc} = useDoc();
+  const windowSize = useWindowSize();
+
+  const hidden = frontMatter.hide_table_of_contents;
+  const canRender = !hidden && toc.length > 0;
+
+  const mobile = canRender ? <DocItemTOCMobile /> : undefined;
+
+  const desktop =
+    canRender && (windowSize === 'desktop' || windowSize === 'ssr') ? (
+      <DocItemTOCDesktop />
+    ) : undefined;
+
+  return {
+    canRender,
+    hidden,
+    mobile,
+    desktop,
+  };
+}
+
+export default function DocItemLayout({children}: Props): ReactNode {
+  const docTOC = useDocTOC();
+  const {metadata} = useDoc();
+  return (
+    <div className="row">
+      <div className={clsx('col', !docTOC.hidden && styles.docItemCol)}>
+        <ContentVisibility metadata={metadata} />
+        <DocVersionBanner />
+        <div className={styles.docItemContainer}>
+          <article>
+            <DocBreadcrumbs />
+            <DocVersionBadge />
+            {docTOC.mobile}
+            <DocItemCopyPageButton
+              className={clsx(
+                styles.copyPageArticleAction,
+                docTOC.canRender && styles.copyPageArticleActionWithToc
+              )}
+            />
+            <DocItemContent>{children}</DocItemContent>
+            <DocItemFooter />
+          </article>
+          <DocItemPaginator />
+        </div>
+      </div>
+      {docTOC.desktop && (
+        <div className="col col--3">
+          <DocItemCopyPageButton className={styles.copyPageAsideAction} />
+          {docTOC.desktop}
+        </div>
+      )}
+    </div>
+  );
+}

website/src/theme/DocItem/Layout/styles.module.css

@@ -0,0 +1,54 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+.docItemContainer header + *,
+.docItemContainer article > *:first-child {
+  margin-top: 0;
+}
+
+.copyPageAction {
+  display: flex;
+}
+
+.copyPageArticleAction {
+  justify-content: flex-end;
+  min-height: 37px;
+  margin-bottom: 1rem;
+}
+
+.copyPageAsideAction {
+  display: none;
+  margin-bottom: 1rem;
+}
+
+.copyPageButtonContainer {
+  display: inline-block;
+}
+
+.copyPageButton {
+  font-family: var(--ifm-font-family-base);
+}
+
+.copyPageDropdown {
+  font-family: var(--ifm-font-family-base);
+}
+
+@media (min-width: 997px) {
+  .docItemCol {
+    max-width: 75% !important;
+  }
+
+  .copyPageArticleActionWithToc {
+    display: none;
+  }
+
+  .copyPageAsideAction {
+    display: flex;
+    justify-content: flex-start;
+    min-height: 37px;
+  }
+}

website/src/types/docusaurus-plugin-copy-page-button.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+declare module 'docusaurus-plugin-copy-page-button/src/CopyPageButton' {
+  import type {ComponentType, CSSProperties} from 'react';
+
+  type StyleConfig = {
+    className?: string;
+    style?: CSSProperties;
+  };
+
+  type CustomStyles = {
+    container?: StyleConfig;
+    button?: StyleConfig;
+    dropdown?: StyleConfig;
+    dropdownItem?: StyleConfig;
+  };
+
+  type CopyPageButtonProps = {
+    customStyles?: CustomStyles;
+    enabledActions?: Array<'copy' | 'view' | 'chatgpt' | 'claude' | 'gemini'>;
+    generateMarkdownRoutes?: boolean;
+  };
+
+  const CopyPageButton: ComponentType<CopyPageButtonProps>;
+  export default CopyPageButton;
+}