feat: add docusaurus-plugin-copy-page-button (#4499)

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
Co-authored-by: Maria Hutt <thetaPC@users.noreply.github.com>

Author: 3 people

docusaurus.config.js

@@ -371,6 +371,12 @@ module.exports = {
         versions: VERSIONS_JSON,
       },
     ],
+    [
+      'docusaurus-plugin-copy-page-button',
+      {
+        injectButton: false,
+      },
+    ],
   ],
   customFields: {},
   themes: [],

package-lock.json

@@ -50,6 +50,7 @@
     "clsx": "^1.1.1",
     "concurrently": "^6.2.0",
     "crowdin": "^3.5.0",
+    "docusaurus-plugin-copy-page-button": "^0.8.2",
     "docusaurus-plugin-module-alias": "^0.0.2",
     "docusaurus-plugin-sass": "^0.2.6",
     "fs-extra": "^9.1.0",

package.json

@@ -1,5 +1,6 @@
 :root {
   --edit-this-page-c: var(--ifm-link-color);
+  --edit-this-page-opacity: 0.7;
 }
 
 .theme-edit-this-page {
@@ -9,8 +10,6 @@
 
   grid-template-columns: 0.875rem 1fr;
 
-  margin-block-start: 1.25rem;
-
   color: var(--edit-this-page-c);
 
   transition: opacity 0.2s ease-out;
@@ -19,6 +18,6 @@
   &:active,
   &:focus {
     color: var(--edit-this-page-c);
-    opacity: 0.7;
+    opacity: var(--edit-this-page-opacity);
   }
 }

src/styles/components/_edit-this-page.scss

@@ -62,6 +62,7 @@ html[data-theme='dark'] {
     .theme-edit-this-page {
       --edit-this-page-c: var(--ifm-heading-color);
 
+      margin-block-start: 1.25rem;
       font-weight: 600;
       font-size: 0.875rem;
     }

src/styles/components/_toc.scss

@@ -0,0 +1,52 @@
+/**
+ * EditMetaRow is a component that renders the edit and last updated
+ * metadata for a page. This component is displayed at the bottom of
+ * each page.
+ *
+ * Original source:
+ * @link https://github.com/facebook/docusaurus/blob/main/packages/docusaurus-theme-classic/src/theme/EditMetaRow/index.tsx
+ *
+ * Reason for overriding:
+ * - Add a copy page button next to the edit this page link
+ * - Wrap the whole last updated section in a conditional, not just
+ * its contents. Otherwise the empty column still reserves half the
+ * row.
+ */
+
+import React, { type ReactNode } from 'react';
+import clsx from 'clsx';
+// CUSTOM CODE
+import CopyPageButton from 'docusaurus-plugin-copy-page-button/react';
+// CUSTOM CODE END
+import EditThisPage from '@theme/EditThisPage';
+import type { Props } from '@theme/EditMetaRow';
+
+import LastUpdated from '@theme/LastUpdated';
+
+import globalStyles from '@docusaurus/theme-classic/lib/theme/EditMetaRow/styles.module.css';
+import styles from './styles.module.css';
+
+export default function EditMetaRow({ className, editUrl, lastUpdatedAt, lastUpdatedBy }: Props): ReactNode {
+  return (
+    <div className={clsx('row', className)}>
+      {/* CUSTOM CODE — "Edit this page | Copy page" as peer links on one row */}
+      <div className={clsx('col', styles.editMetaActions)}>
+        {editUrl && <EditThisPage editUrl={editUrl} />}
+        <CopyPageButton
+          customStyles={{
+            container: { className: styles.copyPageContainer },
+            button: { className: styles.copyPageButton },
+          }}
+        />
+      </div>
+      {/* CUSTOM CODE END */}
+      {/* CUSTOM CODE — wrap the whole column in the conditional, not just its contents */}
+      {(lastUpdatedAt || lastUpdatedBy) && (
+        <div className={clsx('col', globalStyles.lastUpdated)}>
+          <LastUpdated lastUpdatedAt={lastUpdatedAt} lastUpdatedBy={lastUpdatedBy} />
+        </div>
+      )}
+      {/* CUSTOM CODE END */}
+    </div>
+  );
+}

src/theme/EditMetaRow/index.tsx

@@ -0,0 +1,42 @@
+.editMetaActions {
+  display: inline-flex;
+  align-items: center;
+}
+
+.editMetaActions > :not(:first-child) {
+  margin-inline-start: 0.85rem;
+  padding-inline-start: 0.85rem;
+  border-inline-start: 1px solid var(--ifm-color-emphasis-300);
+}
+
+.copyPageContainer {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Make the "Copy page" button look like the "Edit this page" link */
+.copyPageButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.3rem;
+  border: none;
+  background: transparent !important;
+  padding: 0;
+  margin: 0;
+  color: var(--edit-this-page-c) !important;
+  font: inherit;
+}
+
+.copyPageButton:hover,
+.copyPageButton:active,
+.copyPageButton:focus {
+  opacity: var(--edit-this-page-opacity);
+}
+
+/* The plugin hides the button's text label for small screens; keep it visible at all sizes. */
+@media (max-width: 767px) {
+  .copyPageButton [class*='copyPageText'] {
+    display: inline;
+  }
+}
+/* CUSTOM CODE END */