Gatsby static blog template with content from observable

Community Help
1

Hi all,

I have built a minimal template of a Gatsby blog/website that allows you to author posts in Observable. It’s taken me quite a while to make it work, so I thought it may be useful to others.

You can find the site readme/code here and you can see the notebooks in action here e.g. here

Thanks,

Robin

5 Likes
2

I’m now using this template for my personal website, and thought others may be interested in a fully-fledged example - see here

1 Like
3

Hi,

Thanks for the great examples! I’m trying to follow your setup and use a similar workflow (observable + gatsbyjs + github pages) but I can’t seem to import my notebook into Gabsy after yarn install-ing.

The notebook I want to add is here.

I’ve gone through the “Download code” followed by:

yarn add @observablehq/runtime@4
yarn add https://api.observablehq.com/d/b98216c7af6b40c2.tgz?v=3

and then in my Gatsby code

import {Runtime, Inspector} from "@observablehq/runtime";
import define from "@horatiubota/romanias-population-from-1992-to-2017";

but the import kept failing with an Unexpected token 6:217 error which wasn’t very helpful. So I created a simple react app with npx create-react-app test-app just to check if I can import the notebook in react directly, but that also fails with:

SyntaxError: /node_modules/@horatiubota/romanias-population-from-1992-to-2017/b98216c7af6b40c2@220.js: 

Support for the experimental syntax 'importMeta' isn't currently enabled (6:219). 

Add @babel/plugin-syntax-import-meta (https://git.io/vbKK6) to the 'plugins' section of your Babel config to enable parsing.

Adding the @babel/plugin-syntax-import-meta to webpack.config.js leads to:

Module parse failed: Unexpected token (5:219)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.

The notebook I’m trying to embed contains two file uploads and the error messages listed above seem to be referring to parts of the code where the file uploads happen. Did you managed to successfully embed a notebook with file uploads in your gatsby blog?

1 Like
4

Hiya. Yeah, I’ve run into the same problem. Didn’t look in too much detail in afriaid, I solved it just by hosting the file elsewhere

5

Thanks for the quick reply!

6

Hi @hbot! I ran into the same problem when importing an observable notebook in Gatsby. Did you eventually figure out how to get around the import.meta issue?

7

I’m also dealing with this. I wish there were a better solution available than just hosting the file elsewhere

8

hi @anchpop and @markusschanta I guess the way around this right now is to download the notebook do some manual changes

following this example

and more discussion here

1 Like
9

I’ve just upgraded to the latest version of Gatsby and just to note the problem with file attachments is now magically solved!

2 Likes
10

what I had to do was:

run the yarn commands that it tells you to in the embed options of observable, for example:

yarn add @observablehq/runtime@4
yarn add "https://api.observablehq.com/@heaversm/mozilla-ecosystem.tgz?v=3"

copy the json file from the node_modules/[your_directory]/files directory into create react app’s /public directory, give it an extension of .json (it has no extension by default), and then edit the javascript in the node_modules/[your_directory]/[your_file].js file so that the import is, for example:

new Map([["flare-2@2.json","/files/af12b2c45618d5de452c00b06fedb7419a7733e49ba65d051f45b3f9c754b41b842343db07d77422daa2137734c5eb09737342b5a5dda9ca509055fcd8f9a758.json"]]);

instead of:

new Map([["flare-2@2.json",new URL("./files/af12b2c45618d5de452c00b06fedb7419a7733e49ba65d051f45b3f9c754b41b842343db07d77422daa2137734c5eb09737342b5a5dda9ca509055fcd8f9a758",import.meta.url)]]);

then re-run yarn start

1 Like