From 1429e328856f0395dcbdae8599e2f7e0e65bb810 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Tue, 3 Oct 2023 23:44:49 +0300 Subject: [PATCH] refactor: adeed page context fot foundtation pages --- www/gatsby-node.js | 15 +++++++++++++++ www/src/components/PageLayout.tsx | 13 +------------ www/src/pages/foundations/colors.tsx | 6 +++--- www/src/pages/foundations/elevation.jsx | 4 ++-- www/src/pages/foundations/responsive.jsx | 4 ++-- www/src/pages/foundations/spacing.tsx | 4 ++-- www/src/pages/foundations/typography.tsx | 4 ++-- www/src/pages/playground.tsx | 9 ++++++++- www/src/pages/status.tsx | 4 ++-- www/utils/createPages.js | 2 +- 10 files changed, 38 insertions(+), 27 deletions(-) diff --git a/www/gatsby-node.js b/www/gatsby-node.js index 525ea7fb38..8d2dd1f84f 100644 --- 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 index ae8a1fe070..e1f35fd4df 100644 --- 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 (
- + diff --git a/www/src/pages/foundations/colors.tsx b/www/src/pages/foundations/colors.tsx index dac5493007..37129d39e9 100644 --- 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 ( - + {/* eslint-disable-next-line react/jsx-pascal-case */} diff --git a/www/src/pages/foundations/elevation.jsx b/www/src/pages/foundations/elevation.jsx index 52dac1b816..ba85f6bf31 100644 --- 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 ( - + {/* eslint-disable-next-line react/jsx-pascal-case */} diff --git a/www/src/pages/foundations/responsive.jsx b/www/src/pages/foundations/responsive.jsx index 4e97c975cc..16f9b22e80 100644 --- a/www/src/pages/foundations/responsive.jsx +++ b/www/src/pages/foundations/responsive.jsx @@ -49,7 +49,7 @@ function MaxWidthCell({ row }) { return {row.values.maxWidth ? `${row.values.maxWidth}px` : '-'}; } -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 ( - + {/* eslint-disable-next-line react/jsx-pascal-case */} diff --git a/www/src/pages/foundations/spacing.tsx b/www/src/pages/foundations/spacing.tsx index be2a639df1..419403ea25 100644 --- 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(3); const [direction, setDirection] = useState('r'); @@ -96,7 +96,7 @@ export default function SpacingPage() { })); return ( - + {/* eslint-disable-next-line react/jsx-pascal-case */} diff --git a/www/src/pages/foundations/typography.tsx b/www/src/pages/foundations/typography.tsx index 816260798f..e2834dade8 100644 --- 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 ( - + {/* eslint-disable-next-line react/jsx-pascal-case */} diff --git a/www/src/pages/playground.tsx b/www/src/pages/playground.tsx index 7496b4a719..f4ff247aa2 100644 --- 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(null); const [initialSearchParams, setInitialSearchParams] = useState(''); const searchValue = useRef(location.search || ''); @@ -84,6 +84,13 @@ export default function Playground({ location }) { copied: , }} /> + + Edit this page + + {/* eslint-disable-next-line react/jsx-pascal-case */} diff --git a/www/utils/createPages.js b/www/utils/createPages.js index 3e027132fc..3553050e2d 100644 --- 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' }, }); });