Skip to content

Commit

Permalink
1.12.0 (#1706)
Browse files Browse the repository at this point in the history
* 1.12.0

* better exported files example; img 100%
  • Loading branch information
mbostock authored Oct 1, 2024
1 parent a598fc2 commit ab7d7f3
Show file tree
Hide file tree
Showing 6 changed files with 29 additions and 8 deletions.
2 changes: 1 addition & 1 deletion docs/config.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://github.com/observablehq/framework/pull/1689" class="observablehq-version-badge" data-version="prerelease" title="Added in #1689"></a>
## home <a href="https://github.com/observablehq/framework/releases/tag/v1.12.0" class="observablehq-version-badge" data-version="^1.12.0" title="Added in 1.12.0"></a>

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.

Expand Down
27 changes: 24 additions & 3 deletions docs/embeds.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
keywords: embedded analytics, embeds, iframe, exporting, exports
---

# Embedding <a href="https://github.com/observablehq/framework/pull/1637" class="observablehq-version-badge" data-version="prerelease" title="Added in #1637"></a>
# Embedding <a href="https://github.com/observablehq/framework/releases/tag/v1.12.0" class="observablehq-version-badge" data-version="^1.12.0" title="Added in 1.12.0"></a>

In addition to standalone apps, you can use Framework to embed interactive views within other applications. Framework supports multiple approaches to embedding:

Expand Down Expand Up @@ -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/).
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://observablehq.observablehq.cloud/oss-analytics/@observablehq/framework/downloads-dark.svg">
<img style="margin-top: 1rem;" alt="Daily downloads of Observable Framework" src="https://observablehq.observablehq.cloud/oss-analytics/@observablehq/framework/downloads.svg">
</picture>
```html run=false
<picture>
<source media="(prefers-color-scheme: dark)" srcset="https://observablehq.observablehq.cloud/oss-analytics/@observablehq/framework/downloads-dark.svg">
<img alt="Daily downloads of Observable Framework" src="https://observablehq.observablehq.cloud/oss-analytics/@observablehq/framework/downloads.svg">
</picture>
```
## 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):
Expand Down
2 changes: 1 addition & 1 deletion docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ Or with Yarn:

You should see something like this:

<pre data-copy="none"><b class="green">Observable Framework</b> v1.11.0
<pre data-copy="none"><b class="green">Observable Framework</b> v1.12.0
↳ <u><a href="http://127.0.0.1:3000/" style="color: inherit;">http://127.0.0.1:3000/</a></u></pre>

<div class="note">
Expand Down
2 changes: 1 addition & 1 deletion docs/imports.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="https://github.com/observablehq/framework/pulls/957" class="observablehq-version-badge" data-version="prerelease" title="Added in #957"></a>
## JSR imports <a href="https://github.com/observablehq/framework/releases/tag/v1.12.0" class="observablehq-version-badge" data-version="^1.12.0" title="Added in 1.12.0"></a>

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):

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@observablehq/framework",
"license": "ISC",
"version": "1.12.0-alpha.5",
"version": "1.12.0",
"type": "module",
"publishConfig": {
"access": "public"
Expand Down
2 changes: 1 addition & 1 deletion src/style/global.css
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ tt {
}

img {
max-width: calc(100vw - 28px);
max-width: 100%;
}

p,
Expand Down

0 comments on commit ab7d7f3

Please sign in to comment.