[BD-46] feat: added Edit this page CTA to non-component pages

www/gatsby-node.js

@@ -18,3 +18,16 @@ exports.createPages = ({ graphql, actions, reporter }) => createPages(graphql, a
 exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
   createCssUtilityClassNodes({ actions, createNodeId, createContentDigest });
 };
+
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage } = actions;
+  const githubEditPath = `https://github.com/openedx/paragon/edit/master/www/src${page.componentPath.split('src')[1]}`;
+
+  createPage({
+    ...page,
+    context: {
+      ...page.context,
+      githubEditPath,
+    },
+  });
+};

www/src/components/PageEditBtn/index.tsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Button, Hyperlink, Nav } from '~paragon-react';
 
 export interface PageEditBtnProps extends Partial<AnchorHTMLAttributes<HTMLAnchorElement>> {
-  githubEditPath: string,
+  githubEditPath?: string,
   isNavLink?: boolean;
 }
 

www/src/components/PageLayout.tsx

@@ -93,9 +93,7 @@ function Layout({
               <Container size="md">
                 <hr />
                 <Stack direction="horizontal" gap={2}>
-                  {isMdx && (
-                    <PageEditBtn className="mb-5" githubEditPath={githubEditPath ?? ''} />
-                  )}
+                  <PageEditBtn className="mb-5" githubEditPath={githubEditPath} />
                   <LeaveFeedback className="mb-5" />
                 </Stack>
               </Container>

www/src/pages/404.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 
 import Layout from '../components/PageLayout';
 import SEO from '../components/SEO';
 
-function NotFoundPage() {
+function NotFoundPage({ pageContext }) {
   return (
-    <Layout>
+    <Layout githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="404: Not found" />
       <h1>404: Not Found</h1>
@@ -14,4 +15,10 @@ function NotFoundPage() {
   );
 }
 
+NotFoundPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};
+
 export default NotFoundPage;

www/src/pages/foundations/colors.tsx

@@ -121,15 +121,18 @@ export interface IColorsPage {
       nodes: [],
     },
   },
+  pageContext: {
+    githubEditPath: string,
+  }
 }
 
 // eslint-disable-next-line react/prop-types
-export default function ColorsPage({ data }: IColorsPage) {
+export default function ColorsPage({ data, pageContext }: IColorsPage) {
   const { settings } = useContext(SettingsContext);
   parseColors(data.allCssUtilityClasses.nodes); // eslint-disable-line react/prop-types
 
   return (
-    <Layout isAutoToc>
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Colors" />
       <Container size={settings.containerWidth} className="py-5">

www/src/pages/foundations/elevation.jsx

@@ -268,7 +268,7 @@ function BoxShadowGenerator() {
   );
 }
 
-export default function ElevationPage() {
+export default function ElevationPage({ pageContext }) {
   const { settings } = useContext(SettingsContext);
 
   const levelTitle = boxShadowLevels.map(level => (
@@ -284,7 +284,7 @@ export default function ElevationPage() {
   ));
 
   return (
-    <Layout isAutoToc>
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Elevation" />
       <Container size={settings.containerWidth} className="py-5">
@@ -399,3 +399,9 @@ export default function ElevationPage() {
     </Layout>
   );
 }
+
+ElevationPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};

www/src/pages/foundations/responsive.jsx

@@ -49,7 +49,7 @@ function MaxWidthCell({ row }) {
   return <code>{row.values.maxWidth ? `${row.values.maxWidth}px` : '-'}</code>;
 }
 
-function Responsive() {
+function Responsive({ pageContext }) {
   const { settings } = useContext(SettingsContext);
   const breakpointsData = Object.keys(breakpoints).map(breakpoint => {
     const { minWidth, maxWidth } = breakpoints[breakpoint];
@@ -60,7 +60,7 @@ function Responsive() {
   });
 
   return (
-    <Layout isAutoToc>
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Responsive" />
       <Container size={settings.containerWidth} className="py-5">
@@ -79,6 +79,7 @@ function Responsive() {
             { Header: 'Min width', accessor: 'minWidth', Cell: MinWidthCell },
             { Header: 'Max Width', accessor: 'maxWidth', Cell: MaxWidthCell },
           ]}
+          itemCount={0}
         >
           <DataTable.Table />
         </DataTable>
@@ -103,6 +104,12 @@ function Responsive() {
   );
 }
 
+Responsive.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};
+
 const cellPropTypes = {
   row: PropTypes.shape({
     values: PropTypes.shape({

www/src/pages/foundations/spacing.tsx

@@ -83,7 +83,7 @@ SpaceBlock.defaultProps = {
   utilityClass: '',
 };
 
-export default function SpacingPage() {
+export default function SpacingPage({ pageContext }) {
   const { settings } = useContext(SettingsContext);
   const [size, setSize] = useState<number>(3);
   const [direction, setDirection] = useState<string>('r');
@@ -96,7 +96,7 @@ export default function SpacingPage() {
   }));
 
   return (
-    <Layout isAutoToc>
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Spacing" />
       <Container size={settings.containerWidth} className="py-5">
@@ -109,6 +109,7 @@ export default function SpacingPage() {
             { Header: 'Spacer value', accessor: 'spacer' },
             { Header: 'Pixel value', accessor: 'pixelValue' },
           ]}
+          itemCount={0}
         >
           <DataTable.Table />
         </DataTable>
@@ -197,9 +198,9 @@ export default function SpacingPage() {
             </tr>
             <tr>
               {directions.map(({ key }) => (
-                <td>
+                <td key={key}>
                   {sizes.map(_size => (
-                    <code className="d-block">
+                    <code key={_size} className="d-block">
                       .{getUtilityClassName('m', key, _size)}
                     </code>
                   ))}
@@ -211,9 +212,9 @@ export default function SpacingPage() {
             </tr>
             <tr>
               {directions.map(({ key }) => (
-                <td>
+                <td key={key}>
                   {sizes.map(_size => (
-                    <code className="d-block">
+                    <code key={_size} className="d-block">
                       .{getUtilityClassName('p', key, _size)}
                     </code>
                   ))}
@@ -226,3 +227,9 @@ export default function SpacingPage() {
     </Layout>
   );
 }
+
+SpacingPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};

www/src/pages/foundations/typography.tsx

@@ -1,5 +1,6 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
 import { Container } from '~paragon-react';
 import SEO from '../../components/SEO';
 import MeasuredItem from '../../components/MeasuredItem';
@@ -42,11 +43,11 @@ const measuredTypeProps = {
   },
 };
 
-export default function TypographyPage() {
+export default function TypographyPage({ pageContext }) {
   const { settings } = useContext(SettingsContext);
 
   return (
-    <Layout isAutoToc>
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Typography" />
       <Container size={settings.containerWidth} className="py-5">
@@ -64,7 +65,7 @@ export default function TypographyPage() {
               <th>CSS Class</th>
             </tr>
             {[1, 2, 3, 4, 5, 6].map(headingSize => (
-              <tr>
+              <tr key={headingSize}>
                 <td>
                   <MeasuredItem {...measuredTypeProps}>
                     <p className={`m-0 h${headingSize}`}>
@@ -166,7 +167,7 @@ export default function TypographyPage() {
               <th>CSS Class</th>
             </tr>
             {[1, 2, 3, 4].map(displaySize => (
-              <tr>
+              <tr key={displaySize}>
                 <td>
                   <MeasuredItem {...measuredTypeProps}>
                     <p className={`m-0 display-${displaySize}`}>
@@ -398,3 +399,9 @@ export default function TypographyPage() {
     </Layout>
   );
 }
+
+TypographyPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};

www/src/pages/insights.tsx

@@ -27,14 +27,21 @@ const {
   lastModified: analysisLastUpdated,
 } = dependentProjectsAnalysis;
 
-interface TabsDataType {
+export interface TabsDataType {
   components: string[],
   hooks: string[],
   utils: string[],
   icons: string[],
 }
 
-export default function InsightsPage({ pageContext: { tab } }: { pageContext: { tab: string } }) {
+export interface InsightsPageTypes {
+  pageContext: {
+    tab: string,
+    githubEditPath: string
+  }
+}
+
+export default function InsightsPage({ pageContext: { tab, githubEditPath } }: InsightsPageTypes) {
   const { settings } = useContext(SettingsContext);
   const { paragonTypes = {}, isParagonIcon = () => false } = useContext(InsightsContext) as IInsightsContext;
   const {
@@ -61,7 +68,7 @@ export default function InsightsPage({ pageContext: { tab } }: { pageContext: {
     }
   };
   return (
-    <Layout isAutoToc tab={tab}>
+    <Layout isAutoToc tab={tab} githubEditPath={githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Usage Insights" />
       <Container size={settings.containerWidth} className="py-5">
@@ -113,5 +120,6 @@ export default function InsightsPage({ pageContext: { tab } }: { pageContext: {
 InsightsPage.propTypes = {
   pageContext: PropTypes.shape({
     tab: PropTypes.oneOf(Object.values(INSIGHTS_TABS)),
+    githubEditPath: PropTypes.string,
   }).isRequired,
 };

www/src/pages/playground.tsx

@@ -20,7 +20,7 @@ const FEEDBACK_URL = 'https://github.com/openedx/paragon/issues/new?assignees=&l
 const playroomStorage = localforage.createInstance({ name: storageKey });
 const EMPTY_PLAYROOM_URL_QUERY = '?code=N4XyA';
 
-export default function Playground({ location }) {
+export default function Playground({ location, pageContext }) {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [initialSearchParams, setInitialSearchParams] = useState('');
   const searchValue = useRef(location.search || '');
@@ -84,6 +84,13 @@ export default function Playground({ location }) {
               copied: <Icon src={Check} />,
             }}
           />
+          <Hyperlink
+            destination={pageContext.githubEditPath}
+            target="_blank"
+            className="text-white"
+          >
+            Edit this page
+          </Hyperlink>
           <Hyperlink
             destination={FEEDBACK_URL}
             target="_blank"
@@ -120,4 +127,7 @@ Playground.propTypes = {
     search: PropTypes.string,
     href: PropTypes.string,
   }).isRequired,
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
 };

www/src/pages/status.tsx

@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
 import { StaticQuery, graphql } from 'gatsby';
 import { Table, Container } from '~paragon-react';
 import { ComponentStatus } from '../components/doc-elements';
@@ -11,11 +12,11 @@ export interface IComponents {
   title?: string,
 }
 
-export default function StatusPage() {
+export default function StatusPage({ pageContext }) {
   const { settings } = useContext(SettingsContext);
 
   return (
-    <Layout isAutoToc>
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title="Status" />
       <Container size={settings.containerWidth} className="py-5">
@@ -91,3 +92,9 @@ export default function StatusPage() {
     </Layout>
   );
 }
+
+StatusPage.propTypes = {
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
+};

www/src/templates/default-mdx-page-template.tsx

@@ -29,14 +29,15 @@ export interface IPageTemplateType {
     frontmatter: {
       title: string,
     },
+    githubEditPath: string,
   },
 }
 
 export default function PageTemplate({ children, pageContext }: IPageTemplateType) {
   const { settings } = useContext(SettingsContext);
 
   return (
-    <Layout isAutoToc>
+    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
       {/* eslint-disable-next-line react/jsx-pascal-case */}
       <SEO title={pageContext?.frontmatter?.title} />
       <Container size={settings.containerWidth} className="py-5">
@@ -53,5 +54,6 @@ PageTemplate.propTypes = {
     frontmatter: PropTypes.shape({
       title: PropTypes.string,
     }),
+    githubEditPath: PropTypes.string,
   }).isRequired,
 };

www/utils/createPages.js

@@ -75,10 +75,11 @@ async function createPages(graphql, actions, reporter) {
   }
 
   INSIGHTS_PAGES.forEach(({ path: pagePath, tab }) => {
+    const githubEditPath = 'https://github.com/openedx/paragon/edit/master/www/src/pages/insights.tsx';
     createPage({
       path: pagePath,
       component: require.resolve('../src/pages/insights.tsx'),
-      context: { tab },
+      context: { tab, githubEditPath },
     });
   });