From b77c6a90651282cd6c813aaa1613d58098826dc4 Mon Sep 17 00:00:00 2001
From: Braden MacDonald <braden@opencraft.com>
Date: Thu, 9 Jan 2025 14:55:15 -0800
Subject: [PATCH] fix: margins, title, live code, and hot reloading on "Layout"
 and "CSS Utilities" pages

---
 ...ss-utilities.mdx => css-utilities-content.mdx} |  0
 www/src/pages/foundations/css-utilities.tsx       | 13 ++++---------
 .../{layout.mdx => layout-content.mdx}            |  8 ++------
 www/src/pages/foundations/layout.tsx              | 13 ++++---------
 www/src/templates/default-mdx-page-template.tsx   | 15 ++++++++-------
 5 files changed, 18 insertions(+), 31 deletions(-)
 rename www/src/pages/foundations/{css-utilities.mdx => css-utilities-content.mdx} (100%)
 rename www/src/pages/foundations/{layout.mdx => layout-content.mdx} (93%)

diff --git a/www/src/pages/foundations/css-utilities.mdx b/www/src/pages/foundations/css-utilities-content.mdx
similarity index 100%
rename from www/src/pages/foundations/css-utilities.mdx
rename to www/src/pages/foundations/css-utilities-content.mdx
diff --git a/www/src/pages/foundations/css-utilities.tsx b/www/src/pages/foundations/css-utilities.tsx
index 95a3e0a307..110a2b0e13 100644
--- 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 b/www/src/pages/foundations/layout-content.mdx
similarity index 93%
rename from www/src/pages/foundations/layout.mdx
rename to www/src/pages/foundations/layout-content.mdx
index 63b4f87ecd..e754bce05c 100644
--- a/www/src/pages/foundations/layout.mdx
+++ b/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
index 0ed6457fd9..22dedec5b7 100644
--- 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
index 860285fd34..88b0b5d3b7 100644
--- 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) {