custom component support for mdx

.eslintrc.json

@@ -1,3 +1,6 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next/core-web-vitals",
+  "rules": {
+    "import/no-anonymous-default-export": "off"
+  }
 }

app/about/me/content.mdx

@@ -0,0 +1,79 @@
+# What I Do
+
+## CREATE FULL STACK WEB APPLICATIONS
+
+I have experience building web applications with and without back-end integrations.
+
+I am comfortable conceptualizing and organizing complex structures, and as such, my projects tend to be natural in their structure and easy to maintain.
+
+## COLLABORATIVE SOFTWARE ENGINEERING
+
+I have consulted on small teams with:
+
+- Dization, a Pittsburgh-based company developing an enterprise resource planning solution for small businesses
+- Metazu Studio, a Nashville-based startup connecting clients with services in video production, AR/VR, social media, photography, and web design.
+
+My work on these projects deals with managing the complexities of full-stack web engineering, as well as delivering beautiful user experiences to end customers.
+
+## CREATIVE MINDED PROBLEM SOLVER
+
+My background as a musician, composer, producer, and artistic collaborator provide me with a unique frame of reference for solving technical problems and adapting to dynamic environments.
+
+## DATABASE OPERATIONS AND MANAGEMENT
+
+My projects have featured both relational and non-relational databases, in particular PostgreSQL and MongoDB. I also have experience with various methods of connecting these to front-end applications.
+
+# Education
+
+## BACHELORS OF ARTS, MUSIC
+
+Southern Methodist University, 2014 - 2017
+
+Concentrations: Piano Performance, Music Composition, Music Theory
+
+Minor: French Language and Culture
+
+## SELF DIRECTED STUDY, WEB ENGINEERING
+
+2021 - present
+
+Codecademy Pro, Front End Engineer Career Path
+
+Concentrations: React, Redux, Express, PostgreSQL
+
+# Employment
+
+## SOFTWARE ENGINEER
+
+Dropper Studio | Nashville, TN
+Mar 2023 - present
+Relevant Duties: developing a full-stack web application for a client in the music industry.
+
+- Next.js
+- tRPC, MongoDB
+- Integrating additional services (Redis, S3)
+- Networking and cloud management (on premise)
+- UI/UX Design
+
+## FULL STACK ENGINEER, INTERN
+
+Dization, Inc | Pittsburgh, PA (remote)
+Sept 2022 - Mar 2023
+Relevant Duties: contributing to the development of a full-stack enterprise resource planning application built using the LAMP stack hosted on AWS.
+
+- Enterprise Resource Planning
+- AWS
+- System Design
+- UI/UX Design
+- Database management
+
+## FULL STACK ENGINEER, INTERN
+Dization, Inc | Pittsburgh, PA (remote)
+Sept 2022 - present
+Relevant Duties: contributing to the development of a full-stack enterprise resource planning application built using the LAMP stack hosted on AWS.
+
+Enterprise Resource Planning
+AWS
+System Design
+UI/UX Design
+Database management

app/about/me/page.tsx

@@ -1,7 +1,2 @@
-export default function AboutMePage() {
-    return (
-        <div>
-            <h1>About Me Page</h1>
-        </div>
-    )
-}
+'use client'
+export { default } from "./content.mdx"

app/about/skills/content.mdx

@@ -0,0 +1,24 @@
+Check out my skills, and some of the technologies I work with the most:
+
+# Programming Languages
+
+## JavaScript
+
+- Typescript
+- React / Next.js
+    - Redux
+    - tRPC
+- Node.js
+    - Express.js
+    - ToneJS
+- jQuery
+- Jest
+
+## Python
+
+- Pandas
+- Micropython
+
+# Front End Skills
+
+

app/about/skills/page.tsx

@@ -1,7 +1,2 @@
-export default function SkillsPage() {
-    return (
-        <div>
-            <h1>Skills Page</h1>
-        </div>
-    )
-}
+'use client'
+export { default } from "./content.mdx"

app/content.mdx

@@ -6,12 +6,14 @@ Software design at the confluence of efficiency, ingenuity, and artistry.
 
 Here are some things I've provided for my teams in the past:
 
-- Connecting the dots
-    - My strength lies in the big picture. My background as a composer of classical music has given me a lasting sense
-    for how to assemble the pieces of a project into a cohesive whole.
-    - As a software engineer, this means:
-        - I'm comfortable living in the world between the front-end and back-end
-        - I love solving emergent problems as a project's stack is expanding
+### Connecting the dots
+
+My strength lies in the big picture. My background as a composer of classical music has given me a lasting sense for how to assemble the pieces of a project into a cohesive whole.
+
+As a software engineer, this means:
+
+- I'm comfortable living in the world between the front-end and back-end
+- I love solving emergent problems as a project's stack is expanding
 
 ---
 

app/layout.tsx

@@ -1,9 +1,11 @@
 'use client'
 
+import Head from 'next/head'
 import Navbar from '@/components/Navbar'
 import SiteTree from '@/components/SiteTree'
 import { MDXProvider } from '@mdx-js/react'
 import { Inter } from 'next/font/google'
+import components from '@/components/mdx'
 import './globals.css'
 
 const inter = Inter({ subsets: ['latin'] })
@@ -13,22 +15,22 @@ export const metadata = {
   description: 'Integrating artistry and technology to create beautiful software',
 }
 
-export default function RootLayout({
-  children,
-}: {
-  children: React.ReactNode
-}) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
-      <MDXProvider /* components={components} */>
-        <body className={inter.className}>
-          <>
-          <Navbar />
-          <SiteTree />
+      <Head>
+        <title>{metadata.title}</title>
+        <meta name="description" content={metadata.description} />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <link rel="icon" href="/favicon.ico" />
+      </Head>
+      <body className={inter.className}>
+        <Navbar />
+        <SiteTree />
+        <MDXProvider components={components}>
           {children}
-          </>
-        </body>
-      </MDXProvider>
+        </MDXProvider>
+      </body>
     </html>
   )
 }

app/page.tsx

@@ -1,3 +1,4 @@
+'use client'
 import Content from "./content.mdx"
 
 export default function Home() {

components/mdx/index.tsx

@@ -1,5 +1,44 @@
-import { ReactNode } from "react";
+import { v4 } from "uuid"
 
-export const P1TAG = ({ children }: { children: ReactNode }) => (
-    <h1>{children}</h1>
+type ElementType<Key extends keyof JSX.IntrinsicElements> = React.FC<JSX.IntrinsicElements[Key]>
+type FormattedTags = {
+    [Key in keyof JSX.IntrinsicElements]: ElementType<Key>
+}
+
+const H1TAG: ElementType<"h1"> = ({ children }) => { return (
+    <h1 key={v4()} className="text-4xl text-red-500">{children}</h1>
+)}
+
+const H2Tag: ElementType<"h2"> = ({ children }) => (
+    <h2 key={v4()}>{children}</h2>
 )
+
+const H3Tag: ElementType<"h3"> = ({ children }) => (
+    <h3 key={v4()}>{children}</h3>
+)
+
+const H4Tag: ElementType<"h4"> = ({ children }) => (
+    <h4 key={v4()}>{children}</h4>
+)
+
+const PTag: ElementType<"p"> = ({ children }) => (
+    <p key={v4()}>{children}</p>
+)
+
+const LiTag: ElementType<"li"> = ({ children }) => (
+    <li key={v4()}>{children}</li>
+)
+
+const BrTag: ElementType<"br"> = () => (
+    <br key={v4()} />
+)
+
+export default {
+    "h1": H1TAG,
+    "h2": H2Tag,
+    "h3": H3Tag,
+    "h4": H4Tag,
+    "p": PTag,
+    "li": LiTag,
+    "br": BrTag
+} satisfies Partial<FormattedTags>

next.config.js

@@ -9,8 +9,7 @@ const withMDX = require('@next/mdx')({
       // https://github.com/remarkjs/remark-gfm#install
       remarkPlugins: [require("remark-prism")],
       rehypePlugins: [],
-      // If you use `MDXProvider`, uncomment the following line.
-      // providerImportSource: "@mdx-js/react",
+      providerImportSource: "@mdx-js/react",
     },
 });
 
@@ -18,9 +17,6 @@ const withMDX = require('@next/mdx')({
 const nextConfig = {
     pageExtensions: ['js', 'jsx', 'ts', 'tsx', 'md', 'mdx'],
     reactStrictMode: true,
-    experimental: {
-      appDir: true,
-    }
 }
 
 module.exports = withMDX(nextConfig);