The words Under construction in black text on a yellow background with diagonal black stipes surrounding it
I'm in the process of moving my site. It's still a work in progress. Please excuse the mess and broken links.

Call A Single MDX File Without Making It A Page In Gatsby

TODO: Pull subtitle into page object

This is a way to setup so an MDX File can be called via a RegEx without making it a page.

Note that there's probably a better way to do this, but I couldn't figure out how to pass variables to graphql

--------------------------------------------------------------------------------

### src/components/title-card.js

code_start_default_section code_end_default_section

Debugging Stuff

I'm moving stuff around right now. All this below is helping me figure out where to put stuff

        -- title

Call A Single MDX File Without Making It A Page In Gatsby

-- p

This is a way to setup so an MDX File can be called via a RegEx without making it a page.

-- p

Note that there's probably a better way to do this, but I couldn't figure out how to pass variables to graphql

-- p

--------------------------------------------------------------------------------

-- p

### src/components/title-card.js

-- code/
-- javascript

import React from "react"
import { MDXRenderer } from 'gatsby-plugin-mdx';
import { useStaticQuery, graphql } from "gatsby"


export default function TitleCard(props) {

    const regex_pattern = new RegExp(`title-card-${props.cardId}.mdx`);

    const data = useStaticQuery(
        graphql`query {
            allMdx(filter: {fileAbsolutePath: {regex: "/title-card-.*.mdx/"}}) {
                edges {
                    node {
                        body
                        fileAbsolutePath
                        id
                        frontmatter {
                            title
                        }
                    }
                }
            }
        }`
    )

    return (
        <React.Fragment>
            {data.allMdx.edges.map(({ node }) => (
                <React.Fragment>
                    {regex_pattern.exec(node.fileAbsolutePath) && 
                        <div key="{node.id}">
                            <h3>
                                {node.frontmatter.title}
                            </h3>
                            <MDXRenderer>{node.body}</MDXRenderer>
                        </div>
                    }
                </React.Fragment>
            ))}
        </React.Fragment>
    )
}

-- /code

-- p

--------------------------------------------------------------------------------

-- p

### src/mds-pages/title-cards/title-card-1.mdx

-- code/
-- markdown

-- hr
title: TITLE CARD 1
-- hr

Here's the body of the first title card.

-- /code

-- p

And then make more changing the number

-- p

--------------------------------------------------------------------------------

-- p

### src/pages/index.js

-- code/
-- javascript

import React from "react"
import TitleCard from "../components/title-card.js"


export default function Home() {
    return (
        <main>
            <TitleCard cardId="2"></TitleCard>
        </main>
    )
}

-- /code

-- p

--------------------------------------------------------------------------------

-- p

### gatsby-config.js

-- code/
-- javascript

module.exports = {
    plugins: [

        {
            resolve: `gatsby-source-filesystem`,
            options: {
                name: `mdx-pages`,
                path: `${__dirname}/src/mdx-pages`,
            },
        },

        {
            resolve: `gatsby-plugin-mdx`,
            options: {
                extensions: ['.mdx', '.md'],
                plugins: [],
                gatsbyRemarkPlugins: [],
            },
        },
    ],
}

-- /code

-- p

--------------------------------------------------------------------------------

-- p

### gatsby-node.js

-- p

Note: This is all commented out since it's not required for the example. But, it's an example of using the `createSchemaCustomization` approach to prevent errors if you have zero files with `slug` frontmatter in them. That won't really be a thing with the transition,  but it's nice to know about.

-- code/
-- javascript

// exports.createSchemaCustomization = ({ actions }) => {
//   const { createTypes } = actions;
//   const typeDefs = `
//     type MdxFrontmatter implements Node @infer {
//       slug: String
//     }
//   `;
//   createTypes(typeDefs);
// };

// exports.createPages = async ({ actions, graphql, reporter }) => {
//   const { createPage } = actions
//   const blogPostV1 = require.resolve(`./src/components/blog-post-v1.js`)
//   const result = await graphql(`{
//         allMdx(filter: {frontmatter: {slug: {ne: null}}}) {
//             edges {
//                 node {
//                         frontmatter {
//                         slug
//                     }
//                 }
//             }
//         }
//     }

//   `)
//   if (result.errors) {
//     reporter.panicOnBuild(`Error while running GraphQL query.`)
//     return
//   }
    
//   result.data.allMdx.edges.forEach(({ node }) => {
//       createPage({
//           path: node.frontmatter.slug,
//           component: blogPostV1,
//           context: {
//               slug: node.frontmatter.slug,
//           },
//       })
//   })
// }

-- /code


-- categories
-- Gatsby
-- GraphQL

-- metadata
-- date: 2021-02-20 14:17:16
-- id: 20enzrph
-- status: published
-- type: post
-- SCRUBBED_NEO: false
-- site: aws