Add Edit this page button to docs (#751)

* Add Edit this page button to docs

Author: snowystinger

packages/dev/docs/src/Layout.js

@@ -109,7 +109,7 @@ function isBlogSection(section) {
   return section === 'blog' || section === 'releases';
 }
 
-function Page({children, currentPage, publicUrl, styles, scripts}) {
+function Page({children, currentPage, publicUrl, styles, scripts, pathToPage}) {
   let parts = currentPage.name.split('/');
   let isBlog = isBlogSection(parts[0]);
   let isSubpage = parts.length > 1 && !INDEX_RE.test(currentPage.name);
@@ -198,6 +198,7 @@ function Page({children, currentPage, publicUrl, styles, scripts}) {
         <meta property="og:image" content={heroUrl} />
         <meta property="og:description" content={description} />
         <meta property="og:locale" content="en_US" />
+        <meta data-github-src={pathToPage} />
         <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{__html: JSON.stringify(
@@ -365,7 +366,6 @@ function Nav({currentPageName, pages}) {
       </li>
     );
   }
-
   let isActive = (pageMap) => {
     for (let key in pageMap) {
       if (pageMap[key].some(p => p.name === currentPageName)) {
@@ -482,11 +482,11 @@ function Footer() {
     </footer>
   );
 }
-
 export const PageContext = React.createContext();
 export function BaseLayout({scripts, styles, pages, currentPage, publicUrl, children, toc}) {
+  let pathToPage = currentPage.filePath.substring(currentPage.filePath.indexOf('packages/'), currentPage.filePath.length);
   return (
-    <Page scripts={scripts} styles={styles} publicUrl={publicUrl} currentPage={currentPage}>
+    <Page scripts={scripts} styles={styles} publicUrl={publicUrl} currentPage={currentPage} pathToPage={pathToPage}>
       <div style={{isolation: 'isolate'}}>
         <header className={docStyles.pageHeader} />
         <Nav currentPageName={currentPage.name} pages={pages} />
@@ -503,6 +503,7 @@ export function BaseLayout({scripts, styles, pages, currentPage, publicUrl, chil
             </ImageContext.Provider>
           </MDXProvider>
           {toc.length ? <ToC toc={toc} /> : null}
+          {!pathToPage.includes('index.mdx') && <div id="edit-page" className={docStyles.editPageContainer} />}
           <Footer />
         </main>
       </div>

packages/dev/docs/src/client.js

@@ -10,9 +10,10 @@
  * governing permissions and limitations under the License.
  */
 
-import {ActionButton} from '@adobe/react-spectrum';
+import {ActionButton, Flex, Link} from '@adobe/react-spectrum';
 import DocSearch from './DocSearch';
 import docsStyle from './docs.css';
+import LinkOut from '@spectrum-icons/workflow/LinkOut';
 import {listen} from 'quicklink';
 import React, {useEffect, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
@@ -187,6 +188,22 @@ ReactDOM.render(<>
   <ThemeSwitcher />
 </>, document.querySelector('.' + docsStyle.pageHeader));
 
+let pathToPage = document.querySelector('[data-github-src]').getAttribute('data-github-src');
+if (pathToPage) {
+  ReactDOM.render(
+    <Link>
+      <a
+        href={encodeURI(`https://github.com/adobe/react-spectrum/tree/main/${encodeURI(pathToPage)}`)}
+        target="_blank">
+        <Flex gap="size-100" alignItems="center">
+          <span>Edit this page</span><LinkOut size="S" />
+        </Flex>
+      </a>
+    </Link>,
+    document.querySelector('#edit-page')
+  );
+}
+
 document.addEventListener('mousedown', (e) => {
   // Prevent focusing on links to other pages with the mouse to avoid flash of focus ring during navigation.
   let link = e.target.closest('a');

packages/dev/docs/src/docs.css

@@ -228,7 +228,13 @@ html, body {
     vertical-align: text-bottom;
   }
 }
-
+.editPageContainer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 20px 0;
+  width: 100%;
+  max-width: 967px;
+}
 .highlights {
   display: flex;
   flex-wrap: wrap;

packages/dev/parcel-optimizer-ssg/SSGOptimizer.js

@@ -66,6 +66,7 @@ module.exports = new Optimizer({
         })),
         pages,
         currentPage: {
+          filePath: mainAsset.filePath,
           category: mainAsset.meta.category,
           name,
           title: mainAsset.meta.title,