docs: added Edit this page CTA to non-component pages (#2667)

* feat: added Edit this page CTA to non-component pages * refactor: adeed page context fot foundtation pages * refactor: code refactoring * refactor: refactoring after review * refactor: playground link removed
openedx · Oct 6, 2023 · 39d9676 · 39d9676
1 parent c283f65
commit 39d9676
Show file tree

Hide file tree

Showing 15 changed files with 110 additions and 37 deletions.
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -8,6 +8,7 @@ const createPages = require('./utils/createPages');
 const onCreateNode = require('./utils/onCreateNode');
 const onCreateWebpackConfig = require('./utils/onCreateWebpackConfig');
 const createCssUtilityClassNodes = require('./utils/createCssUtilityClassNodes');
+const onCreatePage = require('./utils/onCreatePage');
 
 exports.onCreateWebpackConfig = ({ actions }) => onCreateWebpackConfig(actions);
 
@@ -18,3 +19,5 @@ exports.createPages = ({ graphql, actions, reporter }) => createPages(graphql, a
 exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
   createCssUtilityClassNodes({ actions, createNodeId, createContentDigest });
 };
+
+exports.onCreatePage = ({ page, actions }) => onCreatePage(page, actions);
diff --git a/www/src/components/PageEditBtn/index.tsx b/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;
 }
 

diff --git a/www/src/components/PageLayout.tsx b/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>
@@ -151,14 +149,14 @@ function Layout({
           <Nav.Item>
             <LeaveFeedback className="muted-link" isNavLink />
           </Nav.Item>
-          {isMdx && (
-            <Nav.Item>
-              <PageEditBtn
-                className="muted-link"
-                githubEditPath={githubEditPath ?? ''}
-                isNavLink
-              />
-            </Nav.Item>
+          {!hideFooterComponentMenu && (
+          <Nav.Item>
+            <PageEditBtn
+              className="muted-link"
+              githubEditPath={githubEditPath ?? ''}
+              isNavLink
+            />
+          </Nav.Item>
           )}
           <div className="flex-grow-1" />
           <Nav.Link

diff --git a/www/src/pages/404.tsx b/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;
diff --git a/www/src/pages/foundations/colors.tsx b/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">

diff --git a/www/src/pages/foundations/elevation.jsx b/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,
+};
diff --git a/www/src/pages/foundations/responsive.jsx b/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({

diff --git a/www/src/pages/foundations/spacing.tsx b/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,
+};
diff --git a/www/src/pages/foundations/typography.tsx b/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,
+};
diff --git a/www/src/pages/insights.tsx b/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,
 };
diff --git a/www/src/pages/playground.tsx b/www/src/pages/playground.tsx
@@ -120,4 +120,7 @@ Playground.propTypes = {
     search: PropTypes.string,
     href: PropTypes.string,
   }).isRequired,
+  pageContext: PropTypes.shape({
+    githubEditPath: PropTypes.string,
+  }).isRequired,
 };
diff --git a/www/src/pages/status.tsx b/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,
+};
diff --git a/www/src/templates/default-mdx-page-template.tsx b/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,
 };
diff --git a/www/utils/createPages.js b/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 },
     });
   });