From ad358f635f6a199da0fe3418cd8f16c202ed5cb9 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 28 Sep 2023 11:27:24 +0300 Subject: [PATCH 1/5] feat: added Edit this page CTA to non-component pages --- www/src/components/PageLayout.tsx | 15 ++++++++++++--- www/src/pages/insights.tsx | 14 +++++++++++--- www/utils/createPages.js | 2 +- 3 files changed, 24 insertions(+), 7 deletions(-) diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx index 932eaf4fe2..ae8a1fe070 100644 --- a/www/src/components/PageLayout.tsx +++ b/www/src/components/PageLayout.tsx @@ -64,9 +64,20 @@ 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 (
- {isMdx && ( - - )} + diff --git a/www/src/pages/insights.tsx b/www/src/pages/insights.tsx index 44128bd1b6..a2d8626c89 100644 --- 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 ( - + {/* eslint-disable-next-line react/jsx-pascal-case */} @@ -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/utils/createPages.js b/www/utils/createPages.js index 394fbea1e0..3e027132fc 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 }, + context: { tab, githubEditPath: 'https://github.com/openedx/paragon/blob/master/www/src/pages/insights.tsx' }, }); }); From 1429e328856f0395dcbdae8599e2f7e0e65bb810 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Tue, 3 Oct 2023 23:44:49 +0300 Subject: [PATCH 2/5] 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' }, }); }); From 01095157b0e02645a49ef88d1dae446957c3282c Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Wed, 4 Oct 2023 15:33:19 +0300 Subject: [PATCH 3/5] refactor: code refactoring --- www/gatsby-node.js | 6 ++---- www/src/components/PageEditBtn/index.tsx | 2 +- www/src/pages/404.tsx | 11 +++++++++-- www/src/pages/foundations/colors.tsx | 5 ++++- www/src/pages/foundations/elevation.jsx | 6 ++++++ www/src/pages/foundations/responsive.jsx | 7 +++++++ www/src/pages/foundations/spacing.tsx | 15 +++++++++++---- www/src/pages/foundations/typography.tsx | 11 +++++++++-- www/src/pages/playground.tsx | 3 +++ www/src/pages/status.tsx | 7 +++++++ www/src/templates/default-mdx-page-template.tsx | 4 +++- www/utils/createPages.js | 3 ++- 12 files changed, 64 insertions(+), 16 deletions(-) diff --git a/www/gatsby-node.js b/www/gatsby-node.js index 8d2dd1f84f..0edef2e592 100644 --- a/www/gatsby-node.js +++ b/www/gatsby-node.js @@ -20,11 +20,9 @@ exports.sourceNodes = ({ actions, createNodeId, createContentDigest }) => { }; exports.onCreatePage = ({ page, actions }) => { - const { createPage, deletePage } = actions; + const { createPage } = 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: { diff --git a/www/src/components/PageEditBtn/index.tsx b/www/src/components/PageEditBtn/index.tsx index a158090389..39821143fd 100644 --- 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> { - githubEditPath: string, + githubEditPath?: string, isNavLink?: boolean; } diff --git a/www/src/pages/404.tsx b/www/src/pages/404.tsx index e446e19476..57e31c8ff5 100644 --- 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 ( - + {/* eslint-disable-next-line react/jsx-pascal-case */}

404: Not Found

@@ -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 index 37129d39e9..d0c07e73c7 100644 --- a/www/src/pages/foundations/colors.tsx +++ b/www/src/pages/foundations/colors.tsx @@ -121,13 +121,16 @@ export interface IColorsPage { nodes: [], }, }, + pageContext: { + githubEditPath: string, + } } // eslint-disable-next-line react/prop-types 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 ba85f6bf31..68d1421c56 100644 --- a/www/src/pages/foundations/elevation.jsx +++ b/www/src/pages/foundations/elevation.jsx @@ -399,3 +399,9 @@ export default function ElevationPage({ pageContext }) { ); } + +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 index 16f9b22e80..560c2e4161 100644 --- a/www/src/pages/foundations/responsive.jsx +++ b/www/src/pages/foundations/responsive.jsx @@ -79,6 +79,7 @@ function Responsive({ pageContext }) { { Header: 'Min width', accessor: 'minWidth', Cell: MinWidthCell }, { Header: 'Max Width', accessor: 'maxWidth', Cell: MaxWidthCell }, ]} + itemCount={0} > @@ -103,6 +104,12 @@ function Responsive({ pageContext }) { ); } +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 index 419403ea25..2c98bbde58 100644 --- a/www/src/pages/foundations/spacing.tsx +++ b/www/src/pages/foundations/spacing.tsx @@ -109,6 +109,7 @@ export default function SpacingPage({ pageContext }) { { Header: 'Spacer value', accessor: 'spacer' }, { Header: 'Pixel value', accessor: 'pixelValue' }, ]} + itemCount={0} > @@ -197,9 +198,9 @@ export default function SpacingPage({ pageContext }) { {directions.map(({ key }) => ( - + {sizes.map(_size => ( - + .{getUtilityClassName('m', key, _size)} ))} @@ -211,9 +212,9 @@ export default function SpacingPage({ pageContext }) { {directions.map(({ key }) => ( - + {sizes.map(_size => ( - + .{getUtilityClassName('p', key, _size)} ))} @@ -226,3 +227,9 @@ export default function SpacingPage({ pageContext }) { ); } + +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 index e2834dade8..cf72e84bb3 100644 --- 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'; @@ -64,7 +65,7 @@ export default function TypographyPage({ pageContext }) { CSS Class {[1, 2, 3, 4, 5, 6].map(headingSize => ( - +

@@ -166,7 +167,7 @@ export default function TypographyPage({ pageContext }) { CSS Class {[1, 2, 3, 4].map(displaySize => ( - +

@@ -398,3 +399,9 @@ export default function TypographyPage({ pageContext }) { ); } + +TypographyPage.propTypes = { + pageContext: PropTypes.shape({ + githubEditPath: PropTypes.string, + }).isRequired, +}; diff --git a/www/src/pages/playground.tsx b/www/src/pages/playground.tsx index f4ff247aa2..f925e4d1d3 100644 --- a/www/src/pages/playground.tsx +++ b/www/src/pages/playground.tsx @@ -127,4 +127,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 index e0ffdf95d0..9e70298f9d 100644 --- 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'; @@ -91,3 +92,9 @@ export default function StatusPage({ pageContext }) { ); } + +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 index 7742495ce4..29fa854ac2 100644 --- a/www/src/templates/default-mdx-page-template.tsx +++ b/www/src/templates/default-mdx-page-template.tsx @@ -29,6 +29,7 @@ export interface IPageTemplateType { frontmatter: { title: string, }, + githubEditPath: string, }, } @@ -36,7 +37,7 @@ export default function PageTemplate({ children, pageContext }: IPageTemplateTyp const { settings } = useContext(SettingsContext); return ( - + {/* eslint-disable-next-line react/jsx-pascal-case */} @@ -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 index 3553050e2d..cbca6919f4 100644 --- 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, githubEditPath: 'https://github.com/openedx/paragon/edit/master/www/src/pages/insights.tsx' }, + context: { tab, githubEditPath }, }); }); From ff803842c5e7789bb65fd679b5c363c59b52d6c2 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 5 Oct 2023 12:13:33 +0300 Subject: [PATCH 4/5] refactor: refactoring after review --- www/gatsby-node.js | 14 ++------------ www/utils/onCreatePage.js | 14 ++++++++++++++ 2 files changed, 16 insertions(+), 12 deletions(-) create mode 100644 www/utils/onCreatePage.js diff --git a/www/gatsby-node.js b/www/gatsby-node.js index 0edef2e592..3400d41792 100644 --- 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); @@ -19,15 +20,4 @@ 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, - }, - }); -}; +exports.onCreatePage = ({ page, actions }) => onCreatePage(page, actions); diff --git a/www/utils/onCreatePage.js b/www/utils/onCreatePage.js new file mode 100644 index 0000000000..aa5cc1f93d --- /dev/null +++ b/www/utils/onCreatePage.js @@ -0,0 +1,14 @@ +async function 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, + }, + }); +} + +module.exports = onCreatePage; From 2dcec874c1123f70877a5696a1ef33e5a987ed06 Mon Sep 17 00:00:00 2001 From: PKulkoRaccoonGang Date: Thu, 5 Oct 2023 14:17:18 +0300 Subject: [PATCH 5/5] refactor: playground link removed --- www/src/components/PageLayout.tsx | 16 ++++++++-------- www/src/pages/playground.tsx | 9 +-------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/www/src/components/PageLayout.tsx b/www/src/components/PageLayout.tsx index e1f35fd4df..b2bd452395 100644 --- a/www/src/components/PageLayout.tsx +++ b/www/src/components/PageLayout.tsx @@ -149,14 +149,14 @@ function Layout({ - {isMdx && ( - - - + {!hideFooterComponentMenu && ( + + + )}

(null); const [initialSearchParams, setInitialSearchParams] = useState(''); const searchValue = useRef(location.search || ''); @@ -84,13 +84,6 @@ export default function Playground({ location, pageContext }) { copied: , }} /> - - Edit this page -