Introduce jupyter notebook format (ipynb)

[rgbkrk]

Jupyter (née IPython) Notebooks are a format used by data scientists and others to communicate their work along with a live REPL.

Example notebook on GitHub

I don't know if you actually support the idea of new file extensions here - I wasn't sure how to extend it. I see how to override current loaders (for JSON or Markdown e.g.), just not how to set other file types.

[emilyaviva]

Jupyter simply outputs JSON, doesn't it? You should be able to extend the JSON loader to cover Jupyter files.

[rgbkrk]

Yup, it's just JSON as the file format. Where should I be setting gatsby to pick up the .ipynb file extension?

[KyleAMathews]

Unfortunately the only way to do that is as you've done. V1 will make this
a lot simpler.

I'll make a new release in the morning.
On Wed, Sep 21, 2016 at 11:19 PM Kyle Kelley notifications@github.com
wrote:

Yup, it's just JSON. Where should I be setting gatsby to pick up the
.ipynb file extension?

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#456 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAEVhyQ28C2BFMrEe7r6yd7iv75merbNks5qsh3WgaJpZM4KDjiV
.

[rgbkrk]

Cool, I installed the latest alpha and I look forward to the morning release. Happy to make this an awesome way for people to write sites with notebooks, whether an extension point or a built in.

[rgbkrk]

I'll probably end up wanting to do the same with RMarkdown as well (.rmd), which is not truly markdown (extension on the spec).

[KyleAMathews]

Cool — it's not that big of deal to do this. And 1.0 is coming along so hopefully will hit stable in a month or so and then we can just move things over there.

[KyleAMathews]

Oh... yet another place where file types are defined https://github.com/gatsbyjs/gatsby/blob/master/lib/utils/page-file-types.js

I'll just add that after merging. Really looking forward to dropping all this w/ 1.0. It works but it's a pain to extend as you've found.

[rgbkrk]

Thank you so much!

[rgbkrk]

I'll work on a default rendering setup, though we can likely use https://github.com/nteract/notebook-preview as is.

[KyleAMathews]

A starter demoing this would be great!

On Thu, Sep 22, 2016 at 12:17 PM Kyle Kelley notifications@github.com
wrote:

I'll work on a default rendering setup, though we can likely use
https://github.com/nteract/notebook-preview as is.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
#456 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAEVh2PBcjSgHZWwCgR2bZqTegvy3zjuks5qstRJgaJpZM4KDjiV
.

[rgbkrk]

What's the best way for me to test/evaluate this now? I can write a wrapper (like I started to before making this PR). I'm not sure how to use a dev copy with a site.

[KyleAMathews]

https://github.com/gatsbyjs/gatsby/blob/master/CONTRIBUTING.md

On Thu, Sep 22, 2016 at 12:21 PM Kyle Kelley notifications@github.com
wrote:

What's the best way for me to test/evaluate this now? I can write a
wrapper (like I started to before making this PR). I'm not sure how to use
a dev copy with a site.

—
You are receiving this because you modified the open/close state.

Reply to this email directly, view it on GitHub
#456 (comment), or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAEVhyVdKzk4rdCzAWdds-jcQcC6FTLPks5qstVMgaJpZM4KDjiV
.

[KyleAMathews]

Also just published 0.12.9

[rgbkrk]

Woo, got this to load ipynb files when using gatsby-starter-default. 🎉

However, the React component I set up for notebooks relies on CSS variables being set via a theme:

// import styles directly if using the css-loader
import 'codemirror/lib/codemirror.css';
import 'notebook-preview/styles/main.css';
import 'notebook-preview/styles/theme-light.css';

import NotebookPreview from 'notebook-preview';
ReactDOM.render(<NotebookPreview notebook={notebookJSON}/>, document.querySelector('nb'));

When webpack gets to this, it says the variables are undefined when dealing with main.css.

node_modules/notebook-preview/styles/main.css
29:5    ⚠  variable '--main-bg-color' is undefined and used without a fallback [postcss-custom-properties]
30:5    ⚠  variable '--main-fg-color' is undefined and used without a fallback [postcss-custom-properties]
45:5    ⚠  variable '--primary-border' is undefined and used without a fallback [postcss-custom-properties]
69:5    ⚠  variable '--cell-bg' is undefined and used without a fallback [postcss-custom-properties]
76:5    ⚠  variable '--cell-bg-focus' is undefined and used without a fallback [postcss-custom-properties]
96:5    ⚠  variable '--toolbar-bg' is undefined and used without a fallback [postcss-custom-properties]
128:5   ⚠  variable '--pager-bg' is undefined and used without a fallback [postcss-custom-properties]
159:5   ⚠  variable '--input-color' is undefined and used without a fallback [postcss-custom-properties]
160:5   ⚠  variable '--pager-bg' is undefined and used without a fallback [postcss-custom-properties]
191:3   ⚠  variable '--main-bg-color' is undefined and used without a fallback [postcss-custom-properties]
218:3   ⚠  variable '--toolbar-button' is undefined and used without a fallback [postcss-custom-properties]
222:3   ⚠  variable '--toolbar-button' is undefined and used without a fallback [postcss-custom-properties]
255:5   ⚠  variable '--cm-color' is undefined and used without a fallback [postcss-custom-properties]
292:2   ⚠  variable '--cm-background' is undefined and used without a fallback [postcss-custom-properties]
293:2   ⚠  variable '--cm-color' is undefined and used without a fallback [postcss-custom-properties]
301:2   ⚠  variable '--cm-gutter-bg' is undefined and used without a fallback [postcss-custom-properties]
307:37  ⚠  variable '--cm-comment' is undefined and used without a fallback [postcss-custom-properties]
308:74  ⚠  variable '--cm-keyword' is undefined and used without a fallback [postcss-custom-properties]
309:36  ⚠  variable '--cm-string' is undefined and used without a fallback [postcss-custom-properties]
310:74  ⚠  variable '--cm-builtin' is undefined and used without a fallback [postcss-custom-properties]
311:74  ⚠  variable '--cm-special' is undefined and used without a fallback [postcss-custom-properties]
312:38  ⚠  variable '--cm-variable' is undefined and used without a fallback [postcss-custom-properties]
313:68  ⚠  variable '--cm-number' is undefined and used without a fallback [postcss-custom-properties]
314:34  ⚠  variable '--cm-meta' is undefined and used without a fallback [postcss-custom-properties]
315:34  ⚠  variable '--cm-link' is undefined and used without a fallback [postcss-custom-properties]
317:55  ⚠  variable '--cm-activeline-bg' is undefined and used without a fallback [postcss-custom-properties]
318:49  ⚠  variable '--cm-matchingbracket-outline' is undefined and used without a fallback [postcss-custom-properties]
318:102 ⚠  variable '--cm-matchingbracket-color' is undefined and used without a fallback [postcss-custom-properties]
331:3   ⚠  variable '--cm-hint-bg' is undefined and used without a fallback [postcss-custom-properties]
343:3   ⚠  variable '--cm-hint-color' is undefined and used without a fallback [postcss-custom-properties]
347:3   ⚠  variable '--cm-hint-bg-active' is undefined and used without a fallback [postcss-custom-properties]
348:3   ⚠  variable '--cm-hint-color-active' is undefined and used without a fallback [postcss-custom-properties]

These work well in our app, though I've never used them in a webpack setup with PostCSS.

Happy to open an exploratory PR so you can see things in action on gatsby-starter-default.

[KyleAMathews]

Huh, I don't have any experience with variables in PostCSS — can anyone else help out?

Perhaps you just need to import the theme first? Or maybe you have to import the theme inside main.css?

And yeah, if you don't want to create your own starter, adding a page in the default starter would be 👍

[rgbkrk]

Yeah, I'll hack around it. I tried importing the theme first, no luck. In reality, I'd want to defer to the "theme" of the blog itself to style the notebook components.

[KyleAMathews]

Inline styles are nice — just keep everything in Javascript.

[manrajgrover]

Hey guys,

Any official support/starter code for Jupyter notebooks? I'm working on a blog where I'm planning to add support for rendering notebooks. I tried converting the notebook to markdown which failed to render things like tables well.

[rgbkrk]

Yeah! Check out https://github.com/nteract/nteract/blob/master/packages/gatsby-transformer-ipynb/README.md

Cc @benjaminabel