Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[starters] Add MDX to blog starter #19580

Closed
wants to merge 4 commits into from
Closed
Changes from all commits
Commits
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

@@ -9,7 +9,7 @@
Gatsby's blog starter
</h1>

Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React.
Kick off your project with this blog boilerplate. This starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing fast app generator for React. Now, with [MDX](https://github.com/mdx-js/mdx) pre-installed and pre-configured!

_Have another more specific idea? You may want to check out our vibrant collection of [official and community-created starters](https://www.gatsbyjs.org/docs/gatsby-starters/)._

@@ -0,0 +1,18 @@
---
title: MDX!
date: "2019-10-22"
description: "A post showing MDX in action"
---

This is a post showing MDX in action. This starter now comes with MDX out-of-the-box!

```js
// you can write JSX in your Markdown!
<button>test</button>
```

<button>test</button>

## MDX

MDX lets you write JSX embedded inside markdown, perfect for technical blogs. MDX works with Gatsby through [gatsby-plugin-mdx](https://www.gatsbyjs.org/packages/gatsby-plugin-mdx/). You can learn more about it in the Gatsby docs: [Getting Started with MDX](https://www.gatsbyjs.org/docs/mdx/getting-started/).
@@ -24,9 +24,10 @@ module.exports = {
},
},
{
resolve: `gatsby-transformer-remark`,
resolve: `gatsby-plugin-mdx`,
options: {
plugins: [
extensions: [`.mdx`, `.md`],
gatsbyRemarkPlugins: [
{
resolve: `gatsby-remark-images`,
options: {
@@ -39,9 +40,15 @@ module.exports = {
wrapperStyle: `margin-bottom: 1.0725rem`,
},
},
`gatsby-remark-prismjs`,
`gatsby-remark-copy-linked-files`,
`gatsby-remark-smartypants`,
{
resolve: `gatsby-remark-prismjs`,
},
{
resolve: `gatsby-remark-copy-linked-files`,
},
{
resolve: `gatsby-remark-smartypants`,
},
],
},
},
@@ -53,7 +60,7 @@ module.exports = {
//trackingId: `ADD YOUR TRACKING ID HERE`,
},
},
`gatsby-plugin-feed`,
`gatsby-plugin-feed-mdx`,
{
resolve: `gatsby-plugin-manifest`,
options: {
@@ -8,7 +8,7 @@ exports.createPages = async ({ graphql, actions }) => {
const result = await graphql(
`
{
allMarkdownRemark(
allMdx(
sort: { fields: [frontmatter___date], order: DESC }
limit: 1000
) {
@@ -32,7 +32,7 @@ exports.createPages = async ({ graphql, actions }) => {
}

// Create blog posts pages.
const posts = result.data.allMarkdownRemark.edges
const posts = result.data.allMdx.edges

posts.forEach((post, index) => {
const previous = index === posts.length - 1 ? null : posts[index + 1].node
@@ -53,7 +53,7 @@ exports.createPages = async ({ graphql, actions }) => {
exports.onCreateNode = ({ node, actions, getNode }) => {
const { createNodeField } = actions

if (node.internal.type === `MarkdownRemark`) {
if (node.internal.type === `Mdx`) {
const value = createFilePath({ node, getNode })
createNodeField({
name: `slug`,
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.