refactor: adeed page context fot foundtation pages

openedx · Oct 3, 2023 · 1429e32 · 1429e32
1 parent ad358f6
commit 1429e32
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 27 deletions.
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
@@ -18,3 +18,18 @@ exports.createPages = ({ graphql, actions, reporter }) => createPages(graphql, a
 exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => {
   createCssUtilityClassNodes({ actions, createNodeId, createContentDigest });
 };
+
+exports.onCreatePage = ({ page, actions }) => {
+  const { createPage, deletePage } = actions;
+  const githubEditPath = `https://github.com/openedx/paragon/edit/master/www/src${page.componentPath.split('src')[1]}`;
+  deletePage(page);
+  // console.log('=================== page ====================', page.component);
+  // You can access the variable "house" in your page queries now
+  createPage({
+    ...page,
+    context: {
+      ...page.context,
+      githubEditPath,
+    },
+  });
+};
diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx
@@ -64,20 +64,9 @@ function Layout({
           title
         }
       }
-    allSitePage {
-      nodes {
-        component
-      }
-    }
     }
   `);
 
-  const currentURL = typeof window !== 'undefined' ? window.location.pathname.split('/')[2] : '';
-  const filteredData = data.allSitePage.nodes.filter(item => !item.component.includes('components'));
-  const elementWithLayout = filteredData.find(item => item.component.includes(currentURL))?.component;
-  const componentName = elementWithLayout?.split('src')[1];
-  const foundationLinkBase = `https://github.com/openedx/paragon/blob/master/www/src${componentName}`;
-
   return (
     <div className="d-flex flex-column">
       <Header
@@ -104,7 +93,7 @@ function Layout({
               <Container size="md">
                 <hr />
                 <Stack direction="horizontal" gap={2}>
-                  <PageEditBtn className="mb-5" githubEditPath={githubEditPath || foundationLinkBase} />
+                  <PageEditBtn className="mb-5" githubEditPath={githubEditPath} />
                   <LeaveFeedback className="mb-5" />
                 </Stack>
               </Container>

diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx
@@ -124,12 +124,12 @@ export interface IColorsPage {
 }
 
 // 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
-
+  // console.log('====================== pageContext ========================', pageContext);
   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">

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">

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">

diff --git a/www/src/pages/foundations/typography.tsx b/www/src/pages/foundations/typography.tsx
@@ -42,11 +42,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">

diff --git a/www/src/pages/playground.tsx b/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"

diff --git a/www/src/pages/status.tsx b/www/src/pages/status.tsx
@@ -11,11 +11,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">

diff --git a/www/utils/createPages.js b/www/utils/createPages.js
@@ -78,7 +78,7 @@ async function createPages(graphql, actions, reporter) {
     createPage({
       path: pagePath,
       component: require.resolve('../src/pages/insights.tsx'),
-      context: { tab, githubEditPath: 'https://github.com/openedx/paragon/blob/master/www/src/pages/insights.tsx' },
+      context: { tab, githubEditPath: 'https://github.com/openedx/paragon/edit/master/www/src/pages/insights.tsx' },
     });
   });