Adjust the "Edit this page" button to always point to versioned docs (#4371)

* Adjust the "Edit this page" button to always point to versioned docs

* Update editUrl to be a buttons array

* Replace blob URL with edit URL

* Fix eslint script

* Fix merge conflict

* Show normal verbiage on latest release

Author: Abbondanzo

website/docusaurus.config.ts

@@ -5,22 +5,54 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import type {Config} from '@docusaurus/types';
-import type * as Preset from '@docusaurus/preset-classic';
 import type * as PluginContentDocs from '@docusaurus/plugin-content-docs';
+import type * as Preset from '@docusaurus/preset-classic';
+import type {Config} from '@docusaurus/types';
+import path from 'path';
 
 import users from './showcase.json';
 import versions from './versions.json';
 
 const lastVersion = versions[0];
 const copyright = `Copyright © ${new Date().getFullYear()} Meta Platforms, Inc.`;
 
+export interface EditUrlButton {
+  label: string;
+  href: string;
+}
+
 const commonDocsOptions = {
   breadcrumbs: false,
   showLastUpdateAuthor: false,
   showLastUpdateTime: true,
-  editUrl:
-    'https://github.com/facebook/react-native-website/blob/main/website/',
+  editUrl: (options => {
+    const baseUrl =
+      'https://github.com/facebook/react-native-website/edit/main';
+    const nextReleasePath = `docs/${options.docPath}`;
+    const isNextRelease = options.version === 'current';
+    const buttons: EditUrlButton[] = [
+      {
+        label: isNextRelease ? 'Edit this page' : 'Edit page for next release',
+        href: `${baseUrl}/${nextReleasePath}`,
+      },
+    ];
+    if (!isNextRelease) {
+      const label =
+        options.version === lastVersion
+          ? 'Edit page for current release'
+          : `Edit page for ${options.version} release`;
+      const thisVersionPath = path.posix.join(
+        'website',
+        options.versionDocsDirPath,
+        options.docPath
+      );
+      buttons.push({
+        label,
+        href: `${baseUrl}/${thisVersionPath}`,
+      });
+    }
+    return JSON.stringify(buttons);
+  }) as PluginContentDocs.EditUrlFunction,
   remarkPlugins: [
     require('@react-native-website/remark-snackplayer'),
     require('@react-native-website/remark-codeblock-language-as-title'),

website/package.json

@@ -26,7 +26,7 @@
     "format:style": "prettier --write src/**/*.{scss,css}",
     "format:examples": "eslint-examples-js --fix && eslint-examples-tsx --fix",
     "prettier": "yarn format:source && yarn format:markdown && yarn format:style",
-    "lint": "eslint ../docs/** blog/** '{core,src}/**/*.{js,jsx,ts,tsx}'",
+    "lint": "eslint ../docs/** blog/** \"{core,src}/**/*.{js,jsx,ts,tsx}\"",
     "lint:examples": "eslint-examples-js && eslint-examples-tsx && tsc-examples",
     "lint:versioned": "eslint versioned_docs/**",
     "lint:markdown": "remark ../docs --quiet -r .remarkrc.mjs",

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

@@ -2,14 +2,19 @@ import React from 'react';
 import clsx from 'clsx';
 import {ThemeClassNames} from '@docusaurus/theme-common';
 import {useDoc} from '@docusaurus/plugin-content-docs/client';
+import Translate from '@docusaurus/Translate';
+import IconEdit from '@theme/Icon/Edit';
 import LastUpdated from '@theme/LastUpdated';
-import EditThisPage from '@theme/EditThisPage';
-import TagsListInline from '@theme/TagsListInline';
+import Link from '@docusaurus/Link';
+import TagsListInline, {
+  Props as TagsListInlineProps,
+} from '@theme/TagsListInline';
 
+import type {EditUrlButton} from '../../../../docusaurus.config';
 import styles from './styles.module.css';
 import DocsRating from '../../../../core/DocsRating';
 
-function TagsRow(props) {
+function TagsRow(props: TagsListInlineProps) {
   return (
     <div
       className={clsx(
@@ -22,11 +27,35 @@ function TagsRow(props) {
     </div>
   );
 }
+function EditPage({label, href}: {label: string; href: string}) {
+  return (
+    <Link to={href} className={ThemeClassNames.common.editThisPage}>
+      <IconEdit />
+      <Translate
+        id="theme.common.editThisPage"
+        description="The link label to edit the page">
+        {label}
+      </Translate>
+    </Link>
+  );
+}
 function EditMetaRow({editUrl, lastUpdatedAt, lastUpdatedBy}) {
+  const buttons = React.useMemo((): EditUrlButton[] => {
+    try {
+      return JSON.parse(editUrl);
+    } catch (e) {
+      console.error(e);
+      return [{href: editUrl, label: 'Edit this page'}];
+    }
+  }, [editUrl]);
   return (
     <div className={clsx(ThemeClassNames.docs.docFooterEditMetaRow, 'row')}>
-      <div className="col">{editUrl && <EditThisPage editUrl={editUrl} />}</div>
-      <div className={clsx('col', styles.lastUpdated)}>
+      <div className={clsx(styles.editButtons)}>
+        {buttons.map(({label, href}, index) => (
+          <EditPage key={index} label={label} href={href} />
+        ))}
+      </div>
+      <div className={clsx(styles.lastUpdated)}>
         {(lastUpdatedAt || lastUpdatedBy) && (
           <LastUpdated
             lastUpdatedAt={lastUpdatedAt}

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

@@ -4,6 +4,12 @@
   font-size: smaller;
 }
 
+.editButtons {
+  column-gap: 0.4rem;
+  display: flex;
+  flex: 1;
+}
+
 @media (min-width: 997px) {
   .lastUpdated {
     text-align: end;

website/tsconfig.json

@@ -2,6 +2,7 @@
   "extends": "@docusaurus/tsconfig",
   "compilerOptions": {
     "baseUrl": "."
+    // "esModuleInterop": true
   },
   "exclude": ["node_modules", "build"]
 }