Add postcss nesting and component overrides for resume layout md

gatsby/package.json

@@ -34,6 +34,7 @@
     "gatsby-transformer-sharp": "^3.6.0",
     "node-iptc": "^1.0.5",
     "postcss": "^8.3.4",
+    "postcss-nested": "^5.0.5",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",

gatsby/postcss.config.js

@@ -1,6 +1,7 @@
 module.exports = {
   plugins: {
     tailwindcss: {},
+    'postcss-nested': {},
     autoprefixer: {},
   },
-}
+};

gatsby/src/components/resume-layout.js

@@ -1,11 +1,27 @@
 import * as React from 'react';
 import classnames from 'classnames';
+import { MDXProvider } from '@mdx-js/react';
 
 import '../styles/resume.css';
 
+const MyH1 = props => <h1 style={{ color: 'tomato' }} {...props} />;
+const MyParagraph = props => (
+  <p style={{ fontSize: '18px', lineHeight: 1.6 }} {...props} />
+);
+
+const components = {
+  h1: MyH1,
+  p: MyParagraph,
+};
+
+
 const ResumeLayout = ({ pageContext, children }) => {
   console.log('pc', pageContext);
-  return (<div className={classnames('font-serif container mx-auto resume')}>{children}</div>);
+  return (
+    <MDXProvider components={components}>
+      <div className={classnames('font-serif container mx-auto resume')}>{children}</div>
+    </MDXProvider>
+  );
 };
 
 // TODO: can I use custom components for just this layout/page?

gatsby/src/styles/resume.css

@@ -1,7 +1,6 @@
 .resume {
-  background: green;
-}
-.resume h1 {
+  h1 {
     @apply text-3xl font-bold;
+  }
 }
 

gatsby/yarn.lock

@@ -10541,7 +10541,7 @@ postcss-modules-values@^4.0.0:
   dependencies:
     icss-utils "^5.0.0"
 
-postcss-nested@5.0.5:
+postcss-nested@5.0.5, postcss-nested@^5.0.5:
   version "5.0.5"
   resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.5.tgz#f0a107d33a9fab11d7637205f5321e27223e3603"
   integrity sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew==