🏠 back to Observable

data cards are amazing; how to link to a folder with YAML metadata and Markdown?

I love @j-f1’s data cards and @mootari’s notebook teasers. Anyone willing to demonstrate how one would point a card renderer to a GitHub folder with YAML [or other] metadata - and text formatted with CommonMark?

1 Like

You will have to use a static list of your folder contents if you want to avoid dealing with access tokens and Github’s API. Edit: Not true, see If Observable authenticates via GitHub, can I easily write to it?).

The metadata at the top of markdown files is often referred to as “frontmatter”. Reading it currently requires fetching each individual file. One could probably stream each file up to the second -- delimiter, but a better solution might be to generate an index file that contains the frontmatter and file name of each file, and to put it in the same directory. Then you’d only have to fetch and read that index file.

This would allow the viewer to also capture amounts of text after the -- delimiter (like up to first paragraph break) and dynamically change on edit? Sounds good, but are you suggesting that it has a higher computational cost to it?

Can a simple JS function do this? Or is this not allowed from a browser, or only executed on a server?

Sounds like a feature! :slight_smile: Would allow one to easily curate the list of published content.

Can this be done programatically with JS within the browser?


It sounds like what you’re suggesting may be that there’s a high client side cost to these operations? And maybe they wouldn’t be allowed under ToS (like when executing too many fetch/HTTP requests )?

The highest cost would be a ton of requests (one for each listed markdown file, + thumbnails where applicable). Streaming the files would help to limit the amount of data that needs to be fetched (because you can stop fetching once you have all the lines you need).

Should be possible from within the browser.

If you absolutely don’t want to deal with the command line then yes, I suppose it can be made to work in the browser. But I’d recommend to use something like https://github.com/tscanlin/processmd instead.

Some more links for reference:

2 Likes