From 9f0cf9f0f43d892811ddb31fcff4f09730f365e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Benedikt=20R=C3=B6tsch?= Date: Wed, 27 Jul 2022 10:36:18 +0200 Subject: [PATCH] MDXv2: update example using-mdx (#36009) * WIP * WIP#2 * ensure loader actually picks up mdx file path and prepare query parsing * avoid issue with false-flag query duplicates * properly inject compiled MDX as children * fix: chunk names now should no more exceed max file path length * fix too long chunk names * fix: ensure page component validation uses clear path * fix: properly set clean path on all page component validations * test: add unit test for chunk name shortening * fix: improve chunk name shortening * refactor: apply breaking changes to using-mdx * Restore js-chunk-names.ts * Restore index.d.ts * Restore blog-post.js * update example * rename dir * baseline * more setup * finish * broken state with head api * update * add mdx test case * fix head api bug * formatting Co-authored-by: LekoArts --- docs/docs/how-to/routing/mdx.md | 2 +- .../mdx/importing-and-using-components.md | 2 +- examples/using-MDX/README.md | 60 --- examples/using-MDX/gatsby-config.js | 44 -- examples/using-MDX/package.json | 54 --- examples/using-MDX/src/components/image.js | 30 -- examples/using-MDX/src/images/gatsby-icon.png | Bin 21212 -> 0 bytes examples/using-MDX/src/pages/chart-info.mdx | 432 ------------------ examples/using-MDX/src/pages/index.js | 19 - examples/using-mdx/.prettierignore | 3 + examples/using-mdx/README.md | 49 ++ examples/using-mdx/content/posts/blog-1.mdx | 14 + examples/using-mdx/content/posts/blog-2.mdx | 18 + .../content/posts}/gatsby-astronaut.png | Bin examples/using-mdx/gatsby-browser.jsx | 6 + examples/using-mdx/gatsby-config.js | 43 ++ examples/using-mdx/gatsby-node.js | 50 ++ examples/using-mdx/gatsby-ssr.jsx | 6 + examples/using-mdx/package.json | 36 ++ .../src/components/header.jsx} | 15 +- .../src/components/layout.css | 2 + .../src/components/layout.jsx} | 19 +- .../using-mdx/src/components/shortcodes.jsx | 29 ++ .../404.js => using-mdx/src/pages/404.jsx} | 8 +- examples/using-mdx/src/pages/chart-info.mdx | 154 +++++++ examples/using-mdx/src/pages/index.jsx | 35 ++ examples/using-mdx/src/templates/posts.jsx | 27 ++ packages/gatsby-plugin-mdx/src/gatsby-node.ts | 14 +- .../fixtures/remove-apis/mdx/input.mjs | 27 ++ .../fixtures/remove-apis/mdx/output.mjs | 27 ++ 30 files changed, 546 insertions(+), 679 deletions(-) delete mode 100644 examples/using-MDX/README.md delete mode 100644 examples/using-MDX/gatsby-config.js delete mode 100644 examples/using-MDX/package.json delete mode 100644 examples/using-MDX/src/components/image.js delete mode 100644 examples/using-MDX/src/images/gatsby-icon.png delete mode 100644 examples/using-MDX/src/pages/chart-info.mdx delete mode 100644 examples/using-MDX/src/pages/index.js create mode 100644 examples/using-mdx/.prettierignore create mode 100644 examples/using-mdx/README.md create mode 100644 examples/using-mdx/content/posts/blog-1.mdx create mode 100644 examples/using-mdx/content/posts/blog-2.mdx rename examples/{using-MDX/src/images => using-mdx/content/posts}/gatsby-astronaut.png (100%) create mode 100644 examples/using-mdx/gatsby-browser.jsx create mode 100644 examples/using-mdx/gatsby-config.js create mode 100644 examples/using-mdx/gatsby-node.js create mode 100644 examples/using-mdx/gatsby-ssr.jsx create mode 100644 examples/using-mdx/package.json rename examples/{using-MDX/src/components/header.js => using-mdx/src/components/header.jsx} (73%) rename examples/{using-MDX => using-mdx}/src/components/layout.css (99%) rename examples/{using-MDX/src/components/layout.js => using-mdx/src/components/layout.jsx} (66%) create mode 100644 examples/using-mdx/src/components/shortcodes.jsx rename examples/{using-MDX/src/pages/404.js => using-mdx/src/pages/404.jsx} (73%) create mode 100644 examples/using-mdx/src/pages/chart-info.mdx create mode 100644 examples/using-mdx/src/pages/index.jsx create mode 100644 examples/using-mdx/src/templates/posts.jsx create mode 100644 packages/gatsby/src/utils/babel/__tests__/fixtures/remove-apis/mdx/input.mjs create mode 100644 packages/gatsby/src/utils/babel/__tests__/fixtures/remove-apis/mdx/output.mjs diff --git a/docs/docs/how-to/routing/mdx.md b/docs/docs/how-to/routing/mdx.md index 1be363c96f45f..d3ecf2765eb1b 100644 --- a/docs/docs/how-to/routing/mdx.md +++ b/docs/docs/how-to/routing/mdx.md @@ -2,7 +2,7 @@ title: Add components to content using MDX examples: - label: Using MDX - href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-MDX" + href: "https://github.com/gatsbyjs/gatsby/tree/master/examples/using-mdx" --- ## Introduction diff --git a/docs/docs/mdx/importing-and-using-components.md b/docs/docs/mdx/importing-and-using-components.md index c1cf58658d5e0..ffe0acb07b77b 100644 --- a/docs/docs/mdx/importing-and-using-components.md +++ b/docs/docs/mdx/importing-and-using-components.md @@ -119,4 +119,4 @@ Here is a demo: ### Additional resources -- Follow this detailed [example on using MDX](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-MDX) to import and render components. +- Follow this detailed [example on using MDX](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-mdx) to import and render components. diff --git a/examples/using-MDX/README.md b/examples/using-MDX/README.md deleted file mode 100644 index e898182d423e7..0000000000000 --- a/examples/using-MDX/README.md +++ /dev/null @@ -1,60 +0,0 @@ -

- - Gatsby logomark - -

-

- Using MDX Example -

- -This repository demonstrates how to add MDX pages to a new Gatsby site. - -In the pages directory of this example you will find the `chart-info.mdx` file which uses a variety of components to display interactive charts. - -## 🔧 Running locally - -The site can be run locally on your own computer as well by following these steps: - -1. Clone the `gatsby` repository - -```shell -git clone git@github.com:gatsbyjs/gatsby.git -``` - -2. Navigate to the example - -```shell -cd gatsby/examples/using-MDX -``` - -3. Install the dependencies for the application by running - -```shell - -npm install - -``` - -4. Run the Gatsby development server - -```shell -gatsby develop -``` - -The site is now running at `http://localhost:8000`, you can see the MDX example page at `http://localhost:8000/chart-info` - -## 🧰 Resources used to create this project - -- [Gatsby default starter repo](https://github.com/gatsbyjs/gatsby-starter-default) -- [Gatsby plugin MDX](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/) -- [Bar chart from Nivo Charts](https://nivo.rocks/bar/) -- [Line chart from Nivo Charts](https://nivo.rocks/line/) -- [Area Bump chart from Nivo Charts](https://nivo.rocks/area-bump/) - -## 🎓 More Guides for Learning Gatsby and MDX - -Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: - -- **For most developers, it's recommended to start with the [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. - -- **To dive straight into code samples, head [to the official Gatsby documentation](https://www.gatsbyjs.com/docs/).** In particular, check out the [MDX section of the sidebar](https://www.gatsbyjs.com/docs/mdx/). diff --git a/examples/using-MDX/gatsby-config.js b/examples/using-MDX/gatsby-config.js deleted file mode 100644 index d7472db9008a9..0000000000000 --- a/examples/using-MDX/gatsby-config.js +++ /dev/null @@ -1,44 +0,0 @@ -module.exports = { - siteMetadata: { - title: `Using MDX example`, - description: `Kick off your next, great Gatsby project with MDX.`, - author: `@pragmaticpat`, - }, - plugins: [ - `gatsby-plugin-react-helmet`, - { - resolve: `gatsby-source-filesystem`, - options: { - name: `images`, - path: `${__dirname}/src/images`, - }, - }, - `gatsby-transformer-sharp`, - `gatsby-plugin-sharp`, - { - resolve: `gatsby-plugin-manifest`, - options: { - name: `gatsby-starter-default`, - short_name: `starter`, - start_url: `/`, - background_color: `#663399`, - theme_color: `#663399`, - display: `minimal-ui`, - icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site. - }, - }, - { - resolve: `gatsby-plugin-mdx`, - options: { - defaultLayouts: { - default: require.resolve(`./src/components/layout.js`), - }, - }, - }, - `gatsby-plugin-image`, - - // this (optional) plugin enables Progressive Web App + Offline functionality - // To learn more, visit: https://gatsby.dev/offline - // `gatsby-plugin-offline`, - ], -} diff --git a/examples/using-MDX/package.json b/examples/using-MDX/package.json deleted file mode 100644 index 5c3e89311f6db..0000000000000 --- a/examples/using-MDX/package.json +++ /dev/null @@ -1,54 +0,0 @@ -{ - "name": "using-mdx-example", - "private": true, - "description": "A simple starter to get up and developing quickly with Gatsby", - "version": "0.1.0", - "author": "Kyle Mathews ", - "dependencies": { - "@mdx-js/mdx": "^1.6.18", - "@mdx-js/react": "^1.6.18", - "@nivo/bar": "0.78.0", - "@nivo/bump": "^0.79.1", - "@nivo/core": "0.78.0", - "@nivo/line": "0.78.0", - "gatsby": "next", - "gatsby-image": "next", - "gatsby-plugin-image": "^2.13.0", - "gatsby-plugin-manifest": "next", - "gatsby-plugin-mdx": "next", - "gatsby-plugin-offline": "next", - "gatsby-plugin-react-helmet": "next", - "gatsby-plugin-sharp": "next", - "gatsby-source-filesystem": "next", - "gatsby-transformer-sharp": "next", - "prop-types": "^15.7.2", - "react": "^18.0.0", - "react-charts": "^2.0.1", - "react-chat-elements": "^10.10.2", - "react-dom": "^18.0.0", - "react-helmet": "^5.2.1" - }, - "devDependencies": { - "prettier": "2.1.1" - }, - "keywords": [ - "gatsby" - ], - "license": "MIT", - "scripts": { - "build": "gatsby build", - "develop": "gatsby develop", - "format": "prettier --write \"**/*.{js,jsx,json,md}\"", - "start": "npm run develop", - "serve": "gatsby serve", - "clean": "gatsby clean", - "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" - }, - "repository": { - "type": "git", - "url": "https://github.com/gatsbyjs/gatsby-starter-default" - }, - "bugs": { - "url": "https://github.com/gatsbyjs/gatsby/issues" - } -} diff --git a/examples/using-MDX/src/components/image.js b/examples/using-MDX/src/components/image.js deleted file mode 100644 index 6b2344f4e93d2..0000000000000 --- a/examples/using-MDX/src/components/image.js +++ /dev/null @@ -1,30 +0,0 @@ -import React from "react" -import { useStaticQuery, graphql } from "gatsby" -import { GatsbyImage, getImage } from "gatsby-plugin-image" - -/* - * This component is built using `gatsby-image` to automatically serve optimized - * images with lazy loading and reduced file sizes. The image is loaded using a - * `useStaticQuery`, which allows us to load the image from directly within this - * component, rather than having to pass the image data down from pages. - * - * For more information, see the docs: - * - `gatsby-image`: https://gatsby.dev/gatsby-image - * - `useStaticQuery`: https://www.gatsbyjs.com/docs/use-static-query/ - */ - -const Image = () => { - const data = useStaticQuery(graphql` - query { - placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) { - childImageSharp { - gatsbyImageData(width: 300) - } - } - } - `) - const image = getImage(data.placeholderImage) - return -} - -export default Image diff --git a/examples/using-MDX/src/images/gatsby-icon.png b/examples/using-MDX/src/images/gatsby-icon.png deleted file mode 100644 index 908bc78a7f5596fab5a638d6ac07e331dc4c74d4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 21212 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 Pwx}U%bK8?;ra1Edyv(7f diff --git a/examples/using-MDX/src/pages/chart-info.mdx b/examples/using-MDX/src/pages/chart-info.mdx deleted file mode 100644 index 3ecd5c37d75c4..0000000000000 --- a/examples/using-MDX/src/pages/chart-info.mdx +++ /dev/null @@ -1,432 +0,0 @@ -import { ResponsiveBar } from "@nivo/bar" -import { ResponsiveLine } from "@nivo/line" -import { ResponsiveAreaBump } from "@nivo/bump" - -## Nivo Charts examples in MDX - -This file is written in MDX and has a live React component you can interact with; try hovering over the data to get more granular information. - -### Data represented in BarChart - -
- -
- -### Data represented in a Line Chart - -
- - - -
- - -### Data represented in AreaChart - -
- -
- -export const areaData = [ - { - id: "JavaScript", - data: [ - { - x: 2000, - y: 15, - }, - { - x: 2001, - y: 30, - }, - { - x: 2002, - y: 25, - }, - { - x: 2003, - y: 29, - }, - { - x: 2004, - y: 11, - }, - { - x: 2005, - y: 28, - }, - ], - }, - { - id: "ReasonML", - data: [ - { - x: 2000, - y: 14, - }, - { - x: 2001, - y: 26, - }, - { - x: 2002, - y: 16, - }, - { - x: 2003, - y: 16, - }, - { - x: 2004, - y: 12, - }, - { - x: 2005, - y: 12, - }, - ], - }, - { - id: "TypeScript", - data: [ - { - x: 2000, - y: 14, - }, - { - x: 2001, - y: 15, - }, - { - x: 2002, - y: 10, - }, - { - x: 2003, - y: 22, - }, - { - x: 2004, - y: 25, - }, - { - x: 2005, - y: 30, - }, - ], - }, - { - id: "Elm", - data: [ - { - x: 2000, - y: 24, - }, - { - x: 2001, - y: 13, - }, - { - x: 2002, - y: 22, - }, - { - x: 2003, - y: 28, - }, - { - x: 2004, - y: 22, - }, - { - x: 2005, - y: 11, - }, - ], - }, - { - id: "CoffeeScript", - data: [ - { - x: 2000, - y: 18, - }, - { - x: 2001, - y: 27, - }, - { - x: 2002, - y: 27, - }, - { - x: 2003, - y: 17, - }, - { - x: 2004, - y: 19, - }, - { - x: 2005, - y: 15, - }, - ], - }, -] -export const barData = [ - { - year: "2014", - InApp: 29, - Advertising: 17, - }, - { - year: "2015", - InApp: 30, - Advertising: 9, - }, - { - year: "2016", - InApp: 38, - Advertising: 10, - }, - { - year: "2017", - InApp: 36, - Advertising: 14, - }, - { - year: "2018", - InApp: 35, - Advertising: 12, - }, - { - year: "2019", - InApp: 32, - Advertising: 3, - }, - { - year: "2020", - InApp: 9, - Advertising: 4, - }, -] - -export const lineData = [ - { - id: "InApp", - data: [ - { - x: "2014", - y: 29, - }, - { - x: "2015", - y: 30, - }, - { - x: "2016", - y: 38, - }, - { - x: "2017", - y: 36, - }, - { - x: "2018", - y: 35, - }, - { - x: "2019", - y: 32, - }, - { - x: "2020", - y: 9, - }, - ], - }, - { - id: "Advertising", - data: [ - { - x: "2014", - y: 17, - }, - { - x: "2015", - y: 9, - }, - { - x: "2016", - y: 10, - }, - { - x: "2017", - y: 14, - }, - { - x: "2018", - y: 12, - }, - { - x: "2019", - y: 3, - }, - { - x: "2020", - y: 4, - }, - ], - }, -] diff --git a/examples/using-MDX/src/pages/index.js b/examples/using-MDX/src/pages/index.js deleted file mode 100644 index 1b89e847f8808..0000000000000 --- a/examples/using-MDX/src/pages/index.js +++ /dev/null @@ -1,19 +0,0 @@ -import React from "react" -import { Link } from "gatsby" - -import Layout from "../components/layout" -import Image from "../components/image" - -const IndexPage = () => ( - -

Hi people

-

Welcome to your new Gatsby site.

-

Now go build something great.

-
- -
- Go to the MDX page - -) - -export default IndexPage diff --git a/examples/using-mdx/.prettierignore b/examples/using-mdx/.prettierignore new file mode 100644 index 0000000000000..4f2858c3c176a --- /dev/null +++ b/examples/using-mdx/.prettierignore @@ -0,0 +1,3 @@ +.cache +public +node_modules \ No newline at end of file diff --git a/examples/using-mdx/README.md b/examples/using-mdx/README.md new file mode 100644 index 0000000000000..e5e88a78b137e --- /dev/null +++ b/examples/using-mdx/README.md @@ -0,0 +1,49 @@ +# using-mdx + +This repository demonstrates how to use MDX with Gatsby. + +## 🔧 Running locally + +The site can be run locally on your own computer as well by following these steps: + +1. Clone the `gatsby` repository + +```shell +git clone git@github.com:gatsbyjs/gatsby.git +``` + +2. Navigate to the example + +```shell +cd gatsby/examples/using-mdx +``` + +3. Install the dependencies for the application by running + +```shell + +npm install + +``` + +4. Run the Gatsby development server + +```shell +gatsby develop +``` + +The site is now running at `http://localhost:8000`, you can see the MDX example page at `http://localhost:8000/chart-info` + +## 🧰 Learn more + +- [gatsby-plugin-mdx README](https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/) +- [Adding MDX Pages](https://www.gatsbyjs.com/docs/how-to/routing/mdx/) +- [Bar chart from Nivo Charts](https://nivo.rocks/bar/) + +## 🎓 More Guides for Learning Gatsby and MDX + +Looking for more guidance? Full documentation for Gatsby lives [on the website](https://www.gatsbyjs.com/). Here are some places to start: + +- **For most developers, it's recommended to start with the [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.com/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process. + +- **To dive straight into code samples, head [to the official Gatsby documentation](https://www.gatsbyjs.com/docs/).** In particular, check out [Adding MDX Pages](https://www.gatsbyjs.com/docs/how-to/routing/mdx/). diff --git a/examples/using-mdx/content/posts/blog-1.mdx b/examples/using-mdx/content/posts/blog-1.mdx new file mode 100644 index 0000000000000..63316dbee5e4e --- /dev/null +++ b/examples/using-mdx/content/posts/blog-1.mdx @@ -0,0 +1,14 @@ +--- +title: Blog Post 1 +slug: /blog-1 +--- + +export const Head = () => Blog Post 1 + +Trying out MDX. + +Some GFM features like tables: + +| Hello | World | | | | +|---------|-------|---|---|---| +| How are | you? | | | | \ No newline at end of file diff --git a/examples/using-mdx/content/posts/blog-2.mdx b/examples/using-mdx/content/posts/blog-2.mdx new file mode 100644 index 0000000000000..65fd05caf6940 --- /dev/null +++ b/examples/using-mdx/content/posts/blog-2.mdx @@ -0,0 +1,18 @@ +--- +title: Blog Post 2 +slug: /blog-2 +--- + +Gatsby is the best. + +Here's an image of an astronaut: + +![Gatsby Astronaut](./gatsby-astronaut.png) + +You can use the Collapsible shortcode here because you provide it in the src/templates/posts.jsx MDXProvider. + +Want to click on me?}> + +You'll find content here! + + \ No newline at end of file diff --git a/examples/using-MDX/src/images/gatsby-astronaut.png b/examples/using-mdx/content/posts/gatsby-astronaut.png similarity index 100% rename from examples/using-MDX/src/images/gatsby-astronaut.png rename to examples/using-mdx/content/posts/gatsby-astronaut.png diff --git a/examples/using-mdx/gatsby-browser.jsx b/examples/using-mdx/gatsby-browser.jsx new file mode 100644 index 0000000000000..e4d234354dd01 --- /dev/null +++ b/examples/using-mdx/gatsby-browser.jsx @@ -0,0 +1,6 @@ +import React from "react" +import { Layout } from "./src/components/layout" + +export const wrapPageElement = ({ element, props }) => { + return {element} +} diff --git a/examples/using-mdx/gatsby-config.js b/examples/using-mdx/gatsby-config.js new file mode 100644 index 0000000000000..0518389adc763 --- /dev/null +++ b/examples/using-mdx/gatsby-config.js @@ -0,0 +1,43 @@ +module.exports = { + siteMetadata: { + title: `Using MDX example`, + description: `Kick off your next, great Gatsby project with MDX.`, + author: `@pragmaticpat`, + }, + plugins: [ + { + resolve: `gatsby-source-filesystem`, + options: { + name: `pages`, + path: `${__dirname}/src/pages/`, + }, + }, + { + resolve: `gatsby-source-filesystem`, + options: { + name: `posts`, + path: `${__dirname}/content/posts/`, + }, + }, + `gatsby-plugin-sharp`, + { + resolve: `gatsby-plugin-mdx`, + options: { + mdxOptions: { + remarkPlugins: [ + require(`remark-gfm`), + require(`remark-unwrap-images`), + ], + }, + gatsbyRemarkPlugins: [ + { + resolve: `gatsby-remark-images`, + options: { + maxWidth: 690, + }, + }, + ], + }, + }, + ], +} diff --git a/examples/using-mdx/gatsby-node.js b/examples/using-mdx/gatsby-node.js new file mode 100644 index 0000000000000..53a14f3748c3c --- /dev/null +++ b/examples/using-mdx/gatsby-node.js @@ -0,0 +1,50 @@ +const path = require("path") + +exports.createPages = async ({ graphql, actions, reporter }) => { + const { createPage } = actions + + const result = await graphql(` + query { + allMdx { + nodes { + id + frontmatter { + slug + } + internal { + contentFilePath + } + } + } + } + `) + + if (result.errors) { + reporter.panicOnBuild("Error loading MDX result", result.errors) + } + + const posts = result.data.allMdx.nodes + + posts.forEach(node => { + // Don't create a page for src/pages/chart-info.mdx since this already gets created + if (node.frontmatter.slug !== `/chart-info`) { + if (node.frontmatter.slug === `/blog-1`) { + // For /blog-1 create a page without defining a contentFilePath and just using the layout defined in src/components/layout.jsx + createPage({ + path: node.frontmatter.slug, + component: node.internal.contentFilePath, + context: { id: node.id }, + }) + } else { + // For /blog-2 define a contentFilePath and thus have two layouts. The src/components/layout.jsx and nested inside that the src/templates/posts.jsx + createPage({ + path: node.frontmatter.slug, + component: `${path.resolve( + `./src/templates/posts.jsx` + )}?__contentFilePath=${node.internal.contentFilePath}`, + context: { id: node.id }, + }) + } + } + }) +} diff --git a/examples/using-mdx/gatsby-ssr.jsx b/examples/using-mdx/gatsby-ssr.jsx new file mode 100644 index 0000000000000..e4d234354dd01 --- /dev/null +++ b/examples/using-mdx/gatsby-ssr.jsx @@ -0,0 +1,6 @@ +import React from "react" +import { Layout } from "./src/components/layout" + +export const wrapPageElement = ({ element, props }) => { + return {element} +} diff --git a/examples/using-mdx/package.json b/examples/using-mdx/package.json new file mode 100644 index 0000000000000..b358e5f8fa03b --- /dev/null +++ b/examples/using-mdx/package.json @@ -0,0 +1,36 @@ +{ + "name": "using-mdx", + "private": true, + "description": "Showing how to use MDX in Gatsby", + "version": "0.0.1", + "author": "LekoArts", + "dependencies": { + "@mdx-js/react": "^2.1.2", + "@nivo/core": "^0.79.0", + "@nivo/line": "^0.79.1", + "gatsby": "next", + "gatsby-plugin-mdx": "next", + "gatsby-plugin-sharp": "next", + "gatsby-remark-images": "next", + "gatsby-source-filesystem": "next", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "remark-gfm": "^1", + "remark-unwrap-images": "^2" + }, + "devDependencies": { + "prettier": "^2.7.1" + }, + "keywords": [ + "gatsby" + ], + "license": "MIT", + "scripts": { + "build": "gatsby build", + "develop": "gatsby develop", + "format": "prettier --write \"**/*.{js,jsx,json,md}\"", + "serve": "gatsby serve", + "clean": "gatsby clean", + "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1" + } +} diff --git a/examples/using-MDX/src/components/header.js b/examples/using-mdx/src/components/header.jsx similarity index 73% rename from examples/using-MDX/src/components/header.js rename to examples/using-mdx/src/components/header.jsx index 8990b7e31bb7a..81a7b2e787862 100644 --- a/examples/using-MDX/src/components/header.js +++ b/examples/using-mdx/src/components/header.jsx @@ -1,8 +1,7 @@ -import { Link } from "gatsby" -import PropTypes from "prop-types" import React from "react" +import { Link } from "gatsby" -const Header = ({ siteTitle }) => ( +export const Header = ({ siteTitle }) => (
(
) - -Header.propTypes = { - siteTitle: PropTypes.string, -} - -Header.defaultProps = { - siteTitle: ``, -} - -export default Header diff --git a/examples/using-MDX/src/components/layout.css b/examples/using-mdx/src/components/layout.css similarity index 99% rename from examples/using-MDX/src/components/layout.css rename to examples/using-mdx/src/components/layout.css index b6f63320fb8ae..4ee929d367d16 100644 --- a/examples/using-MDX/src/components/layout.css +++ b/examples/using-mdx/src/components/layout.css @@ -42,10 +42,12 @@ template { a { background-color: transparent; -webkit-text-decoration-skip: objects; + text-decoration: none; } a:active, a:hover { outline-width: 0; + text-decoration: underline; } abbr[title] { border-bottom: none; diff --git a/examples/using-MDX/src/components/layout.js b/examples/using-mdx/src/components/layout.jsx similarity index 66% rename from examples/using-MDX/src/components/layout.js rename to examples/using-mdx/src/components/layout.jsx index 67ae709096747..702975ad9e025 100644 --- a/examples/using-MDX/src/components/layout.js +++ b/examples/using-mdx/src/components/layout.jsx @@ -1,18 +1,9 @@ -/** - * Layout component that queries for data - * with Gatsby's useStaticQuery component - * - * See: https://www.gatsbyjs.com/docs/use-static-query/ - */ - import React from "react" -import PropTypes from "prop-types" import { useStaticQuery, graphql } from "gatsby" - -import Header from "./header" +import { Header } from "./header" import "./layout.css" -const Layout = ({ children }) => { +export const Layout = ({ children }) => { const data = useStaticQuery(graphql` query SiteTitleQuery { site { @@ -43,9 +34,3 @@ const Layout = ({ children }) => { ) } - -Layout.propTypes = { - children: PropTypes.node.isRequired, -} - -export default Layout diff --git a/examples/using-mdx/src/components/shortcodes.jsx b/examples/using-mdx/src/components/shortcodes.jsx new file mode 100644 index 0000000000000..8641503e7d470 --- /dev/null +++ b/examples/using-mdx/src/components/shortcodes.jsx @@ -0,0 +1,29 @@ +import * as React from "react" + +const Collapsible = ({ summary, children }) => { + return ( +
+ :firstOfType": { display: `inline` }, + }} + > + {summary} + + {children} +
+ ) +} + +export const components = { + Collapsible, +} diff --git a/examples/using-MDX/src/pages/404.js b/examples/using-mdx/src/pages/404.jsx similarity index 73% rename from examples/using-MDX/src/pages/404.js rename to examples/using-mdx/src/pages/404.jsx index 70bc752374a94..1c87297f9bb34 100644 --- a/examples/using-MDX/src/pages/404.js +++ b/examples/using-mdx/src/pages/404.jsx @@ -1,12 +1,12 @@ import React from "react" -import Layout from "../components/layout" - const NotFoundPage = () => ( - + <>

NOT FOUND

You just hit a route that doesn't exist... the sadness.

- + ) export default NotFoundPage + +export const Head = () => 404: Not Found diff --git a/examples/using-mdx/src/pages/chart-info.mdx b/examples/using-mdx/src/pages/chart-info.mdx new file mode 100644 index 0000000000000..91280c7801054 --- /dev/null +++ b/examples/using-mdx/src/pages/chart-info.mdx @@ -0,0 +1,154 @@ +--- +title: Chart Info +slug: /chart-info +--- + +export const Head = () => Chart Info + +import { ResponsiveLine } from "@nivo/line" + +## Nivo Charts examples in MDX + +This file is written in MDX and has a live React component you can interact with; try hovering over the data to get more granular information. + +You can also access data from the frontmatter. + +Title: {props.pageContext.frontmatter.title} + +### Data represented in a Line Chart + +
+ +
+ +export const lineData = [ + { + id: "InApp", + data: [ + { + x: "2014", + y: 29, + }, + { + x: "2015", + y: 30, + }, + { + x: "2016", + y: 38, + }, + { + x: "2017", + y: 36, + }, + { + x: "2018", + y: 35, + }, + { + x: "2019", + y: 32, + }, + { + x: "2020", + y: 9, + }, + ], + }, + { + id: "Advertising", + data: [ + { + x: "2014", + y: 17, + }, + { + x: "2015", + y: 9, + }, + { + x: "2016", + y: 10, + }, + { + x: "2017", + y: 14, + }, + { + x: "2018", + y: 12, + }, + { + x: "2019", + y: 3, + }, + { + x: "2020", + y: 4, + }, + ], + }, +] diff --git a/examples/using-mdx/src/pages/index.jsx b/examples/using-mdx/src/pages/index.jsx new file mode 100644 index 0000000000000..8020e2175581b --- /dev/null +++ b/examples/using-mdx/src/pages/index.jsx @@ -0,0 +1,35 @@ +import React from "react" +import { Link } from "gatsby" + +const IndexPage = () => ( + <> +

MDX Example

+

Overview of MDX pages:

+
    +
  • + + Page created from src/pages/chart-info. It shows how to use React + components from npm in MDX and how to use frontmatter in MDX directly + +
    • +
  • + + Programmatically created page that doesn't use __contentFilePath and + is only wrapped by src/components/layout.jsx + +
    • +
  • + + Programmatically created page that does use __contentFilePath and is + wrapped by src/components/layout.jsx and src/templates/posts.jsx. You + see the difference to the page above because there is an h1 with the + title + +
    • +
+ +) + +export default IndexPage + +export const Head = () => Index Page diff --git a/examples/using-mdx/src/templates/posts.jsx b/examples/using-mdx/src/templates/posts.jsx new file mode 100644 index 0000000000000..d733d1f5aa71a --- /dev/null +++ b/examples/using-mdx/src/templates/posts.jsx @@ -0,0 +1,27 @@ +import React from "react" +import { graphql } from "gatsby" +import { MDXProvider } from "@mdx-js/react" +import { components } from "../components/shortcodes" + +const PostsTemplate = ({ data, children }) => { + return ( + <> +

{data.mdx.frontmatter.title}

+ {children} + + ) +} + +export default PostsTemplate + +export const Head = ({ data }) => {data.mdx.frontmatter.title} + +export const query = graphql` + query ($id: String!) { + mdx(id: { eq: $id }) { + frontmatter { + title + } + } + } +` diff --git a/packages/gatsby-plugin-mdx/src/gatsby-node.ts b/packages/gatsby-plugin-mdx/src/gatsby-node.ts index 4b4e63d9192e6..3f9b032ded189 100644 --- a/packages/gatsby-plugin-mdx/src/gatsby-node.ts +++ b/packages/gatsby-plugin-mdx/src/gatsby-node.ts @@ -53,8 +53,11 @@ export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = rules: [ { test: /\.mdx?$/, - use: [ - loaders.js(), + use: ({ resourceQuery, issuer }): Array => [ + loaders.js({ + isPageTemplate: /async-requires/.test(issuer), + resourceQuery, + }), { loader: path.join(__dirname, `gatsby-mdx-loader`), options: mdxLoaderOptions, @@ -64,8 +67,11 @@ export const onCreateWebpackConfig: GatsbyNode["onCreateWebpackConfig"] = { test: /\.[tj]sx?$/, resourceQuery: /__contentFilePath=.+\.mdx?(&export=.*)?$/, - use: [ - loaders.js(), + use: ({ resourceQuery, issuer }): Array => [ + loaders.js({ + isPageTemplate: /async-requires/.test(issuer), + resourceQuery, + }), { loader: path.join(__dirname, `gatsby-layout-loader`), options: layoutLoaderOptions, diff --git a/packages/gatsby/src/utils/babel/__tests__/fixtures/remove-apis/mdx/input.mjs b/packages/gatsby/src/utils/babel/__tests__/fixtures/remove-apis/mdx/input.mjs new file mode 100644 index 0000000000000..df23bbf395478 --- /dev/null +++ b/packages/gatsby/src/utils/babel/__tests__/fixtures/remove-apis/mdx/input.mjs @@ -0,0 +1,27 @@ +import GATSBY_COMPILED_MDX from "/Users/lejoe/code/work/gatsby/examples/using-mdx/content/posts/blog-2.mdx" +import React from "react" +import {graphql} from "gatsby" +import {MDXProvider} from "@mdx-js/react" +import {components} from "../components/shortcodes" + +const PostsTemplate = ({data, children}) => { + return React.createElement(React.Fragment, null, React.createElement("h1", null, data.mdx.frontmatter.title), React.createElement(MDXProvider, { + components: components + }, children)) +} + +export default function GatsbyMDXWrapper(props) { + return React.createElement(PostsTemplate, props, React.createElement(GATSBY_COMPILED_MDX, props)) +} + +export const Head = ({data}) => React.createElement("title", null, data.mdx.frontmatter.title) + +export const query = graphql` + query($id: String!) { + mdx(id: { eq: $id }) { + frontmatter { + title + } + } + } +`; \ No newline at end of file diff --git a/packages/gatsby/src/utils/babel/__tests__/fixtures/remove-apis/mdx/output.mjs b/packages/gatsby/src/utils/babel/__tests__/fixtures/remove-apis/mdx/output.mjs new file mode 100644 index 0000000000000..f1402c2e45b5f --- /dev/null +++ b/packages/gatsby/src/utils/babel/__tests__/fixtures/remove-apis/mdx/output.mjs @@ -0,0 +1,27 @@ +import GATSBY_COMPILED_MDX from "/Users/lejoe/code/work/gatsby/examples/using-mdx/content/posts/blog-2.mdx"; +import React from "react"; +import { graphql } from "gatsby"; +import { MDXProvider } from "@mdx-js/react"; +import { components } from "../components/shortcodes"; + +const PostsTemplate = ({ + data, + children +}) => { + return React.createElement(React.Fragment, null, React.createElement("h1", null, data.mdx.frontmatter.title), React.createElement(MDXProvider, { + components: components + }, children)); +}; + +export default function GatsbyMDXWrapper(props) { + return React.createElement(PostsTemplate, props, React.createElement(GATSBY_COMPILED_MDX, props)); +} +export const query = graphql` + query($id: String!) { + mdx(id: { eq: $id }) { + frontmatter { + title + } + } + } +`;