karolis-sh / gatsby-mdx Goto Github PK

View Code? Open in Web Editor NEW

59.0 2.0 9.0 6.04 MB

Utilities to work with MDX and netlify-cms in Gatsby sites

License: MIT License

JavaScript 99.18% Shell 0.82%

gatsby mdx netlify-cms

gatsby-mdx's Introduction

Hey, I'm Karolis Šarapnickis 👋

🔈 /ˈkarolɪs ʃarapnətskɪs/

I guess I like building things with JavaScript 🤷‍♂️

gatsby-mdx's People

Stargazers

Watchers

Forkers

erikdstock whoisryosuke sekmet anishd19 jb1905 dpooleffdc jwcherney h4ad-forks uzunhair

gatsby-mdx's Issues

process.cwd is not a function error for netlify-cms-widget-mdx

Hello, I'm using netlify-cms-app (^2.15.72) with netlify-cms-widget-mdx (0.5.0). When I try to use the Markdown Editor the Preview Panel displays "Invalid MDX: TypeError: process.cwd is not a function" and the console message below.

netlifycms.config.ts

 {
      name: 'docs_mdx',
      label: 'Docs (MDX)',
      label_singular: 'MDX Doc',
      folder: 'docs',
      identifier_field: 'title',
      // editor: {
      //   preview: false,
      // },
      extension: 'mdx',
      create: true,
      format: 'frontmatter',
      fields: [
        {
          name: 'title',
          label: 'Title',
          widget: 'string',
        },
        // @ts-ignore
        {
          name: 'body',
          label: 'Body',
          widget: 'mdx',
        },
]}

index.tsx

import CMS from 'netlify-cms-app'
// @ts-ignore
import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx'
import { DocPreview } from './components/DocPreview'
import { config } from './netlifycms.config'

const isDev = process.env.NODE_ENV === 'development'

if (isDev) {
  config.backend.name = 'test-repo'
}

// Initialize the CMS object
CMS.init({ config })

// Load content preview css
CMS.registerPreviewStyle('css/theme.css')
CMS.registerPreviewStyle('css/preview.css')

// Register the preview template for the `docs` collection
CMS.registerPreviewTemplate('docs', DocPreview)

CMS.registerWidget('mdx', MdxControl, MdxPreview)

Am I missing something with my configuration?

Better editor widget

As rich text editor can break MDX content, a better editor is needed.

Update support for @mdx-js/*@0.16.x

Depends - mdx-js/mdx#372

Plugin gatsby-transformer-mdx is not compatible with your gatsby version 3.2.0 - It requires gatsby@^2

When will gatsby-transformer-mdx be compatible with gatsby version 3?

TypeError: Cannot read property 'validate' of undefined

Hi
This is a really cool project! I am having trouble getting it to work though. For now, I just cloned the gatsby-starter-mdx, set up netlify and am now trying to add this widget.

My cms.js file looks as follows:

import CMS from 'netlify-cms-app'
import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx'

CMS.registerWidget('mdx', MdxControl, MdxPreview)

And I edited my config.yml as follows:

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: 'blog'
    label: 'Blog'
    folder: 'content/blog'
    create: true
    slug: '{{year}}-{{month}}-{{day}}-{{slug}}'
    editor:
      preview: false
    extension: 'mdx'
    format: 'frontmatter'
    fields:
      - { label: 'Title', name: 'title', widget: 'string' }
      - { label: 'Publish Date', name: 'date', widget: 'datetime' }
      - { label: 'Description', name: 'description', widget: 'string' }
      - { label: 'Body', name: 'body', widget: 'mdx' }

Oh and in my gatsby-config

plugins: [
    {
      resolve: `gatsby-plugin-netlify-cms`,
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },

I'm not sure what I did wrong exactly. The error I get is (whenver I click on New Blog in the Netlify CMS) :

TypeError: Cannot read property 'validate' of undefined

Thanks a lot in advance!

Update @mdx-js/runtime version

Depends on mdx-js/mdx#372

Fix preview image in npm

[netlify-cms-widget-mdx] Broken compatibility with latest netlify-cms-app

I'm not sure of the best place to report this, but a recent change to netlify-cms-widget-markdown changed its export name from MarkdownControl to controlComponent. For those using netlify-cms > 2.6.2, this seems to break the markdown/mdx widget setup. Complicating matters the upgrade in netlify-cms was necessary due to another issue in gatsbyjs/gatsby#12776.

Again, not sure which is the best place to bring this up, but any advice would be appreciated. I tried a simple change of the import in the package locally but this just led to another error.

SyntaxError: Unterminated string constant

import { List } from "./ui escapes the error boundary and breaks whole app

Frontmatter export

Add ability to get frontmatter from MDX file, when importing as a component.

Create docs site

Auto MDX page detection

gatsby-transformer-mdx should identify mdx files in the src/pages directory and create pages just like gatsby does with js files

Default layout

Add ability to define default layout, that can be overridden manually via export default

Props spreading + props

<div className="test" {...{children: 'test'}} />

Results in:

CompileError: Mixed JSX attributes ending in spread requires specified objectAssign option with 'Object.assign' or polyfill helper.

Unite with other Gatsby MDX?

I've been playing around with your very cool netlify widget and was able to get it to do just what I needed. Thank you for that! Along the way i realized that a lot of the abstractions in this project follow those in https://github.com/ChristopherBiscardi/gatsby-mdx and was wondering if you've seen it? For example, to pluck out the context scope including imports and so on there's withMDXScope as used here and a lot of other useful items. Just curious about your thoughts, since y'all even have the same project name :)

Update to MDX v1

Blocked by mdx-js/mdx#704 or gatsbyjs/gatsby#10326

mdx widget invalid mdx

I created a simple components in src/components/MyComponent but i get this error:

Invalid MDX:
ReferenceError: MyComponent is not defined

when i try to use it like this:

import MyComponent from '../../src/components/MyComponent';
<MyComponent />

My config.yml:

backend:
  name: git-gateway
  branch: master

media_folder: "static/media"
public_folder: "/media"

collections:
  - name: "posts"
    label: "Posts"
    folder: "content/posts"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    fields:
      - {label: "Template", name: "template", widget: "hidden", default: "post"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string"}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Publish Date", name: "date", widget: "datetime"}
      - {label: "Description", name: "description", widget: "text"}
      - {label: "Category", name: "category", widget: "string"}
      - {label: "Body", name: "body", widget: "markdown"}
      - {label: "Tags", name: "tags", widget: "list"}

  - name: "pages"
    label: "Pages"
    folder: "content/pages"
    extension: "mdx"
    format: "frontmatter"
    widget: "mdx"
    create: true
    slug: "{{slug}}"
    fields:
      - {label: "Template", name: "template", widget: "hidden", default: "page"}
      - {label: "Title", name: "title", widget: "string"}
      - {label: "Slug", name: "slug", widget: "string"}
      - {label: "Draft", name: "draft", widget: "boolean", default: true}
      - {label: "Body", name: "body", widget: "mdx"}

and my cms config:

import CMS from 'netlify-cms';
import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';
import PagePreview from './preview-templates/page-preview';
import PostPreview from './preview-templates/post-preview';

CMS.registerPreviewTemplate('pages', PagePreview);
CMS.registerPreviewTemplate('posts', PostPreview);
CMS.registerWidget('mdx', MdxControl, MdxPreview);

Am i missing something? 🤔

PS:
After clearing cache and rerunning things i get:

Invalid MDX:
CompileError: Transforming import is not implemented. Use `transforms: { moduleImport: false }` to skip transformation and disable this error. (1:0)
1 : import MyComponent from '../../src/components/MyComponent';

No control for widget 'mdx'.

Installed and changed my Netlify config to use the widget (+ necessary frontmatter setting).
Push code to Netlify
Admin loads, can view posts, but the body section displays error:

No control for widget 'mdx'.

The preview if enabled also displays:

No preview for widget 'mdx'

Version

MDX Widget: ^0.4.1
Gatsby:

  System:
    OS: macOS 10.14
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 8.12.0 - /usr/local/bin/node
    npm: 6.4.1 - /usr/local/bin/npm
  Languages:
    Python: 2.7.10 - /usr/bin/python
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 61.0.2
    Safari: 12.0
  npmPackages:
    gatsby: ^2.13.67 => 2.13.67 
    gatsby-image: ^2.2.8 => 2.2.8 
    gatsby-plugin-feed: ^2.3.6 => 2.3.6 
    gatsby-plugin-google-analytics: ^2.1.7 => 2.1.7 
    gatsby-plugin-manifest: ^2.2.5 => 2.2.5 
    gatsby-plugin-mdx: ^1.0.24 => 1.0.24 
    gatsby-plugin-netlify-cms: ^4.1.7 => 4.1.7 
    gatsby-plugin-offline: ^2.2.6 => 2.2.6 
    gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3 
    gatsby-remark-copy-linked-files: ^2.1.6 => 2.1.6 
    gatsby-remark-prismjs: ^3.3.5 => 3.3.5 
    gatsby-remark-responsive-iframe: ^2.2.4 => 2.2.4 
    gatsby-remark-smartypants: ^2.1.2 => 2.1.2 
    gatsby-source-filesystem: ^2.1.9 => 2.1.9 
  npmGlobalPackages:
    gatsby-cli: 2.7.8

Here's my config.yml:

backend:
  name: git-gateway
  branch: master

media_folder: static/img
public_folder: /img

collections:
  - name: "blog"
    label: "Blog"
    description: "KSC blog posts"
    folder: "content/blog"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "markdown" }
  - name: "pages"
    label: "Pages"
    description: "Main site pages"
    folder: "content/pages"
    extension: "mdx"
    format: "frontmatter"
    widget: "mdx"
    create: true
    slug: "{{year}}-{{month}}-{{day}}-{{slug}}"
    editor:
      preview: false
    fields:
      - { label: "Title", name: "title", widget: "string" }
      - { label: "Publish Date", name: "date", widget: "datetime" }
      - { label: "Description", name: "description", widget: "string" }
      - { label: "Body", name: "body", widget: "mdx" }

how to configure netlify-cms-widget-mdx with NextJS ?

I am using Netlify CMS and Next JS. I am not sure where to inject the code

import { MdxControl, MdxPreview } from 'netlify-cms-widget-mdx';
CMS.registerWidget('mdx', MdxControl, MdxPreview);

Please tell me how to make this widget work with Next JS & Netlify CMS combination. Thanks.

import React from 'react';
import styled from 'styled-components';

const StyledCoolQuote = styled.div`
  i {
    background-color: ${({theme}) => theme.colors.fourthLight};
    padding: 0 6px;
  }
`;

const CoolQuote = ({children}) => {

  console.log(children);
  return (
    <StyledCoolQuote>
      {children}
    </StyledCoolQuote>
  )
}

export default CoolQuote;