framework icon indicating copy to clipboard operation
framework copied to clipboard

examples overhaul; pager option; more link normalization

Open mbostock opened this issue 1 year ago • 6 comments

Browse the new examples here: https://github.com/observablehq/framework/tree/mbostock/more-examples/examples

TODO:

  • [x] Link examples from the Framework docs sidebar
  • [x] New examples README
  • [x] Distinguish “technique” examples from “showcase” examples
  • [ ] Edit all example README.md for greater consistency
  • [x] Edit all example package.json for greater consistency; use ^1.7.0 instead of link:
  • [x] Edit all example observablehq.config.js for greater consistency
  • [x] Publish all the examples manually on Observable instead of using deploy.yml
  • [x] Add brushing/zooming to the primary mortgage market survey dashboard
  • [x] New pager config and front matter option (for pages that are in the sidebar but not pager)
  • [x] Document the new pager option
  • [x] Fix #1316

Required future tasks:

  • Redirect current examples from /framework/examples to observablehq.observablehq.cloud

Additional potential future tasks:

  • Split the existing “Google Analytics” example into several technique examples?
  • Split the existing “Chess” example into several technique examples?
  • Rename the “Penguin classification” example to a Python data loader example?
  • Don’t include the example header boilerplate in all the examples?
  • Extend observable create to instantiate any of our examples on-demand
  • Provide fast search over examples somehow?

mbostock avatar May 03 '24 23:05 mbostock

The new pager option addresses #201.

mbostock avatar May 07 '24 17:05 mbostock

This is not quite done, but I think it’s ready for review @Fil, and perhaps you could help me finish up some of the examples?

mbostock avatar May 10 '24 00:05 mbostock

In #1323 I share a POC where examples are indexed together with the documentation. Basically it's a script that copies the (text) contents of each example into a page called (say) example/chess.md, that consists of:

html redirect to https://observablehq.observablehq.cloud/framework-example-chess/

bunch of text

For now it's not usable in the sense that examples arrive too high in the search results. If we do this, I think we'll want to introduce a multiplicative factor to allow the user to sculpt the results, and apply it to examples with a low value (maybe 0.1).

Capture d’écran 2024-05-10 à 15 39 06

Fil avatar May 10 '24 13:05 Fil

Do you think we could make a separate PR for the new features?

I considered this, but I’d rather not do the work to extract the features given that it’s already done. (I discovered these limitations and bugs in the process of writing the examples and it was blocking example development.) If it’s impeding review, I guess I’m okay with that for the sake of moving fast and shipping, but I’ll try not to make a habit of this in the future!

mbostock avatar May 10 '24 15:05 mbostock

nvm, it's not blocking, just cleaner when we look up something in the history of commits. (Also since I have already reviewed them we could land them now if we wanted 🥕 )

Fil avatar May 10 '24 15:05 Fil

The older examples need some README polish, but otherwise this should be ready to go. 👍

mbostock avatar May 11 '24 17:05 mbostock

I’d like to merge this. I think the main outstanding task is some final polish to the showcase example README’s. Last call for review.

mbostock avatar May 14 '24 15:05 mbostock

I added my README review in #1338

Fil avatar May 14 '24 16:05 Fil

Sounds good. We can start working on the Cloudflare redirects, too.

mbostock avatar May 14 '24 16:05 mbostock