fix: margins, title, live code, and hot reloading on "Layout" and "CS…

…S Utilities" pages
openedx · Jan 9, 2025 · b77c6a9 · b77c6a9
1 parent 38d736f
commit b77c6a9
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 31 deletions.
diff --git a/www/src/pages/foundations/css-utilities.mdx → ...ges/foundations/css-utilities-content.mdx b/www/src/pages/foundations/css-utilities.mdx → ...ges/foundations/css-utilities-content.mdx
diff --git a/www/src/pages/foundations/css-utilities.tsx b/www/src/pages/foundations/css-utilities.tsx
@@ -1,25 +1,20 @@
 import React from 'react';
 import { graphql, type PageProps } from 'gatsby';
-import Layout from '../../components/PageLayout';
+import PageTemplate, { type StandardContext } from '../../templates/default-mdx-page-template';
 
 // Import the MDX file as a React component, which we'll then render with data to form this page
-import CSSUtilitiesMdx from './css-utilities.mdx';
+import CSSUtilitiesMdx from './css-utilities-content.mdx';
 
 /** Data from the GraphQL query below */
 interface PageData {
   utilities: Record<string, any>;
 }
 
-/** context data added to props by createsPages()/onCreatePage() */
-interface StandardContext {
-  githubEditPath: string;
-}
-
 export default function CSSUtilitiesPage({ data, pageContext }: PageProps<PageData, StandardContext>) {
   return (
-    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
+    <PageTemplate pageContext={pageContext}>
       <CSSUtilitiesMdx data={data} />
-    </Layout>
+    </PageTemplate>
   );
 }
 

diff --git a/www/src/pages/foundations/layout.mdx → www/src/pages/foundations/layout-content.mdx b/www/src/pages/foundations/layout.mdx → www/src/pages/foundations/layout-content.mdx
@@ -15,12 +15,8 @@ Paragon's layout is controlled by the Bootstrap grid system. Documentation can b
 
 ## Components
 
-<p>
-  These components are pass throughs from React-Bootstrap.<br/>
-  <a href="https://react-bootstrap-v4.netlify.app/layout/grid/" target="_blank" rel="noopener noreferrer">
-    See React-Bootstrap for documentation.
-  </a>
-</p>
+These components are pass throughs from React-Bootstrap.<br />
+<a href="https://react-bootstrap-v4.netlify.app/layout/grid/" target="_blank" rel="noopener noreferrer">See React-Bootstrap for documentation.</a>
 
 ```jsx live
 <Container className="border">

diff --git a/www/src/pages/foundations/layout.tsx b/www/src/pages/foundations/layout.tsx
@@ -1,25 +1,20 @@
 import React from 'react';
 import { graphql, type PageProps } from 'gatsby';
-import Layout from '../../components/PageLayout';
+import PageTemplate, { type StandardContext } from '../../templates/default-mdx-page-template';
 
 // Import the MDX file as a React component, which we'll then render with data to form this page
-import LayoutMdx from './layout.mdx';
+import LayoutMdx from './layout-content.mdx';
 
 /** Data from the GraphQL query below */
 interface PageData {
   utilities: Record<string, any>;
 }
 
-/** context data added to props by createsPages()/onCreatePage() */
-interface StandardContext {
-  githubEditPath: string;
-}
-
 export default function LayoutPage({ data, pageContext }: PageProps<PageData, StandardContext>) {
   return (
-    <Layout isAutoToc githubEditPath={pageContext.githubEditPath}>
+    <PageTemplate pageContext={pageContext}>
       <LayoutMdx data={data} />
-    </Layout>
+    </PageTemplate>
   );
 }
 

diff --git a/www/src/templates/default-mdx-page-template.tsx b/www/src/templates/default-mdx-page-template.tsx
@@ -21,14 +21,15 @@ const shortcodes = {
   Link,
 };
 
+/** context data added to props by createsPages()/onCreatePage() */
+export interface StandardContext {
+  frontmatter: { title: string; };
+  githubEditPath: string;
+}
+
 export interface IPageTemplateType {
-  children: React.ReactNode,
-  pageContext: {
-    frontmatter: {
-      title: string,
-    },
-    githubEditPath: string,
-  },
+  children: React.ReactNode;
+  pageContext: StandardContext;
 }
 
 export default function PageTemplate({ children, pageContext }: IPageTemplateType) {