Hi,

Do you know why images are being displayed this way?

Link: https://gatsby-starter-blog-mdx-demo.netlify.com/hello-world

Thanks

Hi!

I just would like to let you know it currently isn't working in Windows 10. Created a brand new project with this builder, ran yarn start and the error message below appears.

Yarn version: 1.12.3
Node version: 10.14.2
Gatsby-cli version: 2.4.8

Looks like some path issues because the file does exist:

But the error is printing out stuff without slashes so might be some other package conflicting. Would you happen to know which?

Hey, just wanted to point out a small little thing on the readme, thanks for a great template!

Currently on readme.md:

# create a new Gatsby site using the blog starter
npx gatsby new my-blog-starter
https://github.com/hagner/gatsby-starter-blog-mdx

Should be:

# create a new Gatsby site using the blog starter
npx gatsby new my-blog-starter
https://github.com/hagnerd/gatsby-starter-blog-mdx

The issue is a missing 'd' in your username on the git command.

Hi Matt @hagnerd,

I am struggling with adding components to the MDXProviders global scope and I am seeing this error when compiling a blogpost using this component:
Component SCM was not imported, exported, or provided by MDXProvider as global scope

I simply extended the existing wrap-root-element.js

const components = {
  pre: preProps => {
    const props = preToCodeBlock(preProps)
    // if there's a codeString and some props, we passed the test
    if (props) {
      return <Code {...props} />
    } else {
      // it's possible to have a pre without a code in it
      return <pre {...preProps} />
    }
  },
  SCM: props => {return <SCM {...props} />}
}

export const wrapRootElement = ({ element }) => (
  <MDXProvider components={components}>
    {element}
  </MDXProvider>
)

I started wondering whether this MDXProvider was being used at all? Even if I inspect the code elements in your live demo this is what I am seeing

instead of something like this (from the code.js):

export const Code = ({ codeString, language, ...props }) => {
  if (props['react-live']) {
    return (
      <LiveProvider code={codeString} noInline={true}>
        <LiveEditor />
        <LiveError />
        <LivePreview />
      </LiveProvider>
    )
  } else {
    return (
      <Highlight {...defaultProps} code={codeString} language={language}>
        {({ className, style, tokens, getLineProps, getTokenProps }) => (
          <pre className={className} style={style}>
            {tokens.map((line, i) => (
              <div {...getLineProps({ line, key: i })}>
                {line.map((token, key) => (
                  <span {...getTokenProps({ token, key })} />
                ))}
              </div>
            ))}
          </pre>
        )}
      </Highlight>
    )
  }
}

So it seems to me pre isn't overwritten by the MDXProvider either and this just has gone unnoticed since there is an existing component for pre. I am pretty new to Gatsby and frontend dev in general so I kinda hit a wall here and was wondering if there was something wrong that you would spot?

Best,
Thomas

I can't seem to figure out how to change the font-size. Could someone help me out?

<LiveProvider code={codeString} noInline={true}>
        <LiveEditor theme={dracula} padding={`15px`} fontSize={26} ???? />
        <LiveError />
        <LivePreview />
</LiveProvider>

Let me know, thanks!

It is my understanding, per https://mdxjs.com/advanced/components , that React components can be imported into MDX files.

When I run the starter and add a blog to the content folder it crashes.

content
  - my-new-blog
      - index.mdx
      - MyComponent.js

index.mdx:

---
title: Brian's Brain!
date: '2020-01-01'
---

import MyComponent from './MyComponent.js'

## Above component

<MyComponent />

## Below Component

MyComponent.js:

import React from 'react';

const MyComponent = props => {
    return (
        <div>
            <h3>Hello MyComponent</h3>
        </div>
    );
};

export default MyComponent;

Is importing React components not supported?

I was using this starter for a project, but I try to write as much of my code in TS as possible.
It wasn't too difficult to get it working with TS.

I'm open to submitting a PR for this. Let me know your thoughts on this.

Steps to reproduce: build the current version on Netlify.

This is because the imports import a file called Layout when the file is actually called layout.js but filesystems with case insensitivty, like Mac, don't care.

I'll submit a PR renaming layout.js to Layout.js to match the blog starter.

Navigate to: https://gatsby-starter-blog-mdx-demo.netlify.com/hi-folks/

Scroll all the way down... Code sample not working. I assume it's supposed to do something?