From ab7d7f3c591a48549ad79b3556418c96b1d37843 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Tue, 1 Oct 2024 09:58:42 -0700 Subject: [PATCH] 1.12.0 (#1706) * 1.12.0 * better exported files example; img 100% --- docs/config.md | 2 +- docs/embeds.md | 27 ++++++++++++++++++++++++--- docs/getting-started.md | 2 +- docs/imports.md | 2 +- package.json | 2 +- src/style/global.css | 2 +- 6 files changed, 29 insertions(+), 8 deletions(-) diff --git a/docs/config.md b/docs/config.md index 5867d5707..afac78a27 100644 --- a/docs/config.md +++ b/docs/config.md @@ -110,7 +110,7 @@ The app’s title. If specified, this text is appended to page titles with a sep Whether to show the sidebar. Defaults to true if **pages** is not empty. -## home +## home An HTML fragment to render the link to the home page in the top of the sidebar. Defaults to the [app’s title](#title), if any, and otherwise the word “Home”. If specified as a function, receives an object with the page’s `title`, (front-matter) `data`, and `path`, and must return a string. diff --git a/docs/embeds.md b/docs/embeds.md index 8290b5279..156972b99 100644 --- a/docs/embeds.md +++ b/docs/embeds.md @@ -2,7 +2,7 @@ keywords: embedded analytics, embeds, iframe, exporting, exports --- -# Embedding +# Embedding In addition to standalone apps, you can use Framework to embed interactive views within other applications. Framework supports multiple approaches to embedding: @@ -109,16 +109,37 @@ Some web tooling such as Vite and Webpack erroneously rewrite external dynamic i ## Exported files -In addition to modules, you can declare specific files to export using the [**dynamicPaths** config option](./config#dynamic-paths). Exported files are published under a stable URL that can be linked to and loaded from an external application. Exported files can be either [static files](./files) or generated dynamically by [data loaders](./data-loaders), and can use [parameterized routes](./params). For example, to export the file `/robots.txt`: +You can declare specific files to export using the [**dynamicPaths** config option](./config#dynamic-paths). Exported files are published under a stable URL that can be linked to and loaded from an external application. Exported files can be either [static](./files) or generated dynamically by [data loaders](./data-loaders). And you can use [parameterized routes](./params). + +For example, say you want to chart downloads of open-source libraries you maintain. You could use a data loader to server-side render SVG with Observable Plot. (See Plot’s [Getting Started](https://observablehq.com/plot/getting-started#plot-in-node-js) guide.) In your config file, list the charts you want to build: ```js run=false export default { dynamicPaths: [ - "/robots.txt" + "/@observablehq/framework/downloads-dark.svg", + "/@observablehq/framework/downloads.svg", + "/@observablehq/plot/downloads-dark.svg", + "/@observablehq/plot/downloads.svg", + "/@observablehq/runtime/downloads-dark.svg", + "/@observablehq/runtime/downloads.svg" ] }; ``` +Once your app is deployed, you can then load the generated SVG into another app — or READMEs on GitHub — using the `img` tag. For example, below is a chart of daily downloads of Observable Framework powered by our [open-source analytics](https://github.com/observablehq/oss-analytics/). + + + + Daily downloads of Observable Framework + + +```html run=false + + + Daily downloads of Observable Framework + +``` + ## Iframe embeds You can alternatively embed Framework pages using iframes. Pages that are intended to be embedded via iframe typically disable Framework’s built-in user interface using [Markdown front matter](./markdown#front-matter): diff --git a/docs/getting-started.md b/docs/getting-started.md index 91aba528f..9587bec7f 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -148,7 +148,7 @@ Or with Yarn: You should see something like this: -
Observable Framework v1.11.0
+
Observable Framework v1.12.0
 ↳ http://127.0.0.1:3000/

 
 

diff --git a/docs/imports.md b/docs/imports.md
index 7fc06c805..f6f1bed1d 100644
--- a/docs/imports.md
+++ b/docs/imports.md
@@ -98,7 +98,7 @@ Unlike `npm:` imports, Node imports do not support semver ranges: the imported v
 
 Imports from `node_modules` are cached in `.observablehq/cache/_node` within your [source root](./config#root) (typically `src`). You shouldn’t need to clear this cache as it is automatically managed, but feel free to clear it you like.
 
-## JSR imports 
+## JSR imports 
 
 You can import a package from [JSR (the JavaScript Registry)](https://jsr.io/) using the `jsr:` protocol. As an example, to import a [pseudorandom number generator](https://jsr.io/@std/random) from the [Deno Standard Library](https://deno.com/blog/std-on-jsr):
 
diff --git a/package.json b/package.json
index 84d5b776a..2ec036819 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@observablehq/framework",
   "license": "ISC",
-  "version": "1.12.0-alpha.5",
+  "version": "1.12.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
diff --git a/src/style/global.css b/src/style/global.css
index a8c2984ac..948d9791e 100644
--- a/src/style/global.css
+++ b/src/style/global.css
@@ -89,7 +89,7 @@ tt {
 }
 
 img {
-  max-width: calc(100vw - 28px);
+  max-width: 100%;
 }
 
 p,