-
Notifications
You must be signed in to change notification settings - Fork 129
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
embedded api #1637
embedded api #1637
Conversation
Would be simpler to just invert the precedence and have |
Boo, one of our tests has a page |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is fantastic! and I couldn't find how to break it 👍
Adding a few suggestions for the documentation.
```js run=false | ||
import postgres from "postgres"; | ||
|
||
const sql = postgres(); // Note: uses psql environment variables |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
const sql = postgres(); // Note: uses psql environment variables | |
const sql = postgres(); // See https://github.com/porsager/postgres to set up the environment variables |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This comment exists in multiple places. (I’ve been copying it every time I use Postgres.js.) I’m not sure we need it. The link from the text is probably enough, but I did think it was useful to mention that it depends on environment variables.
}, []); | ||
|
||
return <div ref={ref} />; | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I had to test this and log every line of it! it works :)
|
||
<div class="tip"> | ||
|
||
You can alternatively embed Framework pages using [iframe embeds](https://observablehq.observablehq.cloud/framework-example-responsive-iframe/). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Speaking of which, an example of a responsive chart (that reruns to adapt to the container's width) might be welcome here, or separately in a full-blown example.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yes. That should just be the resize
helper, as normal.
}; | ||
``` | ||
|
||
Or for [parameterized routes](./params), name the component `product-[id]/chart.js`, then load a list of product identifiers from a database with a SQL query: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is a bit too allusive. It might be worth developing an example of how to use observable.params.id
within chart.js
so that it corresponds to the requested product and displays data from the corresponding (parametrized) data loader. The example can live as a stand-alone example app, and we'd just add a link here.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Yeah, I didn’t want to duplicate the documentation of parameterized routes here, but I also wanted to allude to it, since it feels like a natural question (how would I show multiple views?) with perhaps a surprising answer (the views bake-in their data rather than expecting it to be passed in as a prop from the host app).
Co-authored-by: Philippe Rivière <fil@rezo.net>
TODO:
/chart.js
) during preview/chart.js
) during build viaembedPathsdynamicPaths/chart.js.md
)/chart.js.md
given/chart.js
) in the sidebar & pagerFixes #1084.
Fixes #1583.