Merge branch 'main' into toph/onramp

README.md

@@ -7,7 +7,7 @@
   <img alt="Daily downloads of Observable Framework" src="https://observablehq.observablehq.cloud/oss-analytics/@observablehq/framework/downloads.svg">
 </picture>
 
-<sub>Daily downloads of Observable Framework · [oss-analytics](https://github.com/observablehq/oss-analytics/)</sub>
+<sub>Daily downloads of Observable Framework · [oss-analytics](https://observablehq.observablehq.cloud/oss-analytics/)</sub>
 
 ## Documentation 📚
 

docs/imports.md

@@ -230,7 +230,7 @@ Click on any of the imported symbols below to learn more.
 <pre><code class="language-js">import * as <a href="./lib/duckdb">duckdb</a> from "npm:@duckdb/duckdb-wasm";</code></pre>
 <pre><code class="language-js">import {<a href="./lib/duckdb">DuckDBClient</a>} from "npm:@observablehq/duckdb";</code></pre>
 <pre><code class="language-js">import {<a href="./sql">sql</a>} from "npm:@observablehq/duckdb";</code></pre>
-<pre><code class="language-js">import * as <a href="./lib/inputs">Inputs</a> from "npm:@observablehq/inputs";</code></pre>
+<pre><code class="language-js">import * as <a href="./inputs/">Inputs</a> from "npm:@observablehq/inputs";</code></pre>
 <pre><code class="language-js">import <a href="./lib/mapbox-gl">mapboxgl</a> from "npm:mapbox-gl";</code></pre>
 <pre><code class="language-js">import <a href="./lib/mermaid">mermaid</a> from "npm:@observablehq/mermaid";</code></pre>
 <pre><code class="language-js">import * as <a href="./lib/plot">Plot</a> from "npm:@observablehq/plot";</code></pre>

docs/lib/inputs.md → docs/inputs/index.md

@@ -30,10 +30,10 @@ const checkout = view(
 checkout
 ```
 
-To demonstrate Observable Inputs, let’s look at a sample dataset of athletes from the 2016 Rio olympics via [Matt Riggott](https://flother.is/2017/olympic-games-data/). Here’s a [table input](../inputs/table) — always a good starting point for an agnostic view of the data:
+To demonstrate Observable Inputs, let’s look at a sample dataset of athletes from the 2016 Rio olympics via [Matt Riggott](https://flother.is/2017/olympic-games-data/). Here’s a [table input](./table) — always a good starting point for an agnostic view of the data:
 
 ```js
-const olympians = await d3.csv("https://static.observableusercontent.com/files/31ca24545a0603dce099d10ee89ee5ae72d29fa55e8fc7c9ffb5ded87ac83060d80f1d9e21f4ae8eb04c1e8940b7287d179fe8060d887fb1f055f430e210007c", (d) => (delete d.id, delete d.info, d3.autoType(d)));
+const olympians = await d3.csv(import.meta.resolve("npm:@observablehq/sample-datasets/olympians.csv"), (d) => (delete d.id, delete d.info, d3.autoType(d)));
 ```
 
 ```js echo
@@ -42,7 +42,7 @@ Inputs.table(olympians)
 
 <div class="tip">Tables can be inputs, too! The value of the table is the subset of rows that you select using the checkboxes in the first column.</div>
 
-Now let’s wire up the table to a [search input](../inputs/search). Type anything into the box and the search input will find the matching rows in the data. The value of the search input is the subset of rows that match the query.
+Now let’s wire up the table to a [search input](./search). Type anything into the box and the search input will find the matching rows in the data. The value of the search input is the subset of rows that match the query.
 
 A few examples to try: **[mal]** will match _sex_ = male, but also names that start with “mal”, such as Anna Malova; **[1986]** will match anyone born in 1986 (and a few other results); **[USA gym]** will match USA’s gymnastics team. Each space-separated term in your query is prefix-matched against all columns in the data.
 
@@ -80,7 +80,7 @@ Plot.plot({
 })
 ```
 
-You can pass grouped data to a [select input](../inputs/select) as a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) from key to array of values, say using [d3.group](https://d3js.org/d3-array/group). The value of the select input in this mode is the data in the selected group. Note that _unique_ is no longer required, and that _sort_ works here, too, sorting the keys of the map returned by d3.group.
+You can pass grouped data to a [select input](./select) as a [Map](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map) from key to array of values, say using [d3.group](https://d3js.org/d3-array/group). The value of the select input in this mode is the data in the selected group. Note that _unique_ is no longer required, and that _sort_ works here, too, sorting the keys of the map returned by d3.group.
 
 ```js echo
 const sportAthletes = view(
@@ -95,7 +95,7 @@ const sportAthletes = view(
 Inputs.table(sportAthletes)
 ```
 
-The select input works well for categorical data, such as sports or nationalities, but how about quantitative dimensions such as height or weight? Here’s a [range input](../inputs/range) that lets you pick a target weight; we then filter the table rows for any athlete within 10% of the target weight. Notice that some columns, such as sport, are strongly correlated with weight.
+The select input works well for categorical data, such as sports or nationalities, but how about quantitative dimensions such as height or weight? Here’s a [range input](./range) that lets you pick a target weight; we then filter the table rows for any athlete within 10% of the target weight. Notice that some columns, such as sport, are strongly correlated with weight.
 
 ```js echo
 const weight = view(
@@ -115,16 +115,16 @@ Inputs.table(
 
 For more, see the individual input pages:
 
-- [Button](../inputs/button) - do something when a button is clicked
-- [Toggle](../inputs/toggle) - toggle between two values (on or off)
-- [Checkbox](../inputs/checkbox) - choose any from a set
-- [Radio](../inputs/radio) - choose one from a set
-- [Range](../inputs/range) or [Number](../inputs/range) - choose a number in a range (slider)
-- [Select](../inputs/select) - choose one or any from a set (drop-down menu)
-- [Text](../inputs/text) - enter freeform single-line text
-- [Textarea](../inputs/textarea) - enter freeform multi-line text
-- [Date](../inputs/date) or [Datetime](../inputs/date) - choose a date
-- [Color](../inputs/color) - choose a color
-- [File](../inputs/file) - choose a local file
-- [Search](../inputs/search) - query a tabular dataset
-- [Table](../inputs/table) - browse a tabular dataset
+- [Button](./button) - do something when a button is clicked
+- [Toggle](./toggle) - toggle between two values (on or off)
+- [Checkbox](./checkbox) - choose any from a set
+- [Radio](./radio) - choose one from a set
+- [Range](./range) or [Number](./range) - choose a number in a range (slider)
+- [Select](./select) - choose one or any from a set (drop-down menu)
+- [Text](./text) - enter freeform single-line text
+- [Textarea](./textarea) - enter freeform multi-line text
+- [Date](./date) or [Datetime](./date) - choose a date
+- [Color](./color) - choose a color
+- [File](./file) - choose a local file
+- [Search](./search) - query a tabular dataset
+- [Table](./table) - browse a tabular dataset

docs/lib/sqlite.md

@@ -2,13 +2,13 @@
 
 [SQLite](https://sqlite.org/) is “a small, fast, self-contained, high-reliability, full-featured, SQL database engine” and “the most used database engine in the world.” Observable provides a ESM-compatible distribution of [sql.js](https://sql.js.org), a WASM-based distribution of SQLite. It is available by default as `SQLite` in Markdown, but you can import it like so:
 
-```js echo
+```js run=false
 import SQLite from "npm:@observablehq/sqlite";
 ```
 
 We also provide `SQLiteDatabaseClient`, a [`DatabaseClient`](https://observablehq.com/@observablehq/database-client-specification) implementation.
 
-```js echo
+```js run=false
 import {SQLiteDatabaseClient} from "npm:@observablehq/sqlite";
 ```
 

docs/reactivity.md

@@ -267,7 +267,7 @@ My favorite baseball team is the ${team}!
 My favorite baseball team is the ${team}!
 ```
 
-The above example uses `Inputs.radio`, which is provided by [Observable Inputs](./lib/inputs). You can also implement custom inputs using arbitrary HTML. For example, here is a [range input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) that lets you choose an integer between 1 and 15 (inclusive):
+The above example uses `Inputs.radio`, which is provided by [Observable Inputs](./inputs/). You can also implement custom inputs using arbitrary HTML. For example, here is a [range input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range) that lets you choose an integer between 1 and 15 (inclusive):
 
 ```js echo
 const n = view(html`<input type=range step=1 min=1 max=15>`);

docs/sql.md

@@ -174,11 +174,12 @@ Plot.plot({
   marks: [
     Plot.axisY({tickFormat: (d) => d / 1000, label: "count (thousands)"}),
     Plot.rectY(await sql`
-      SELECT
-        FLOOR(phot_g_mean_mag / 0.2) * 0.2 AS mag1
-      , mag1 + 0.2 AS mag2
-      , COUNT() AS count
-      FROM gaia GROUP BY 1
+      SELECT FLOOR(phot_g_mean_mag / 0.2) * 0.2 AS mag1
+           , mag1 + 0.2 AS mag2
+           , COUNT() AS count
+        FROM gaia
+       WHERE phot_g_mean_mag IS NOT NULL
+       GROUP BY 1
     `, {x1: "mag1", x2: "mag2", y: "count", tip: true})
   ]
 })

docs/style.css

@@ -51,17 +51,13 @@ code:not(pre code, h1 code, h2 code, h3 code, h4 code, h5 code, h6 code) {
   text-decoration: underline;
 }
 
-#observablehq-header a[target="_blank"]::after,
-.observablehq-link a[target="_blank"]::after {
-  content: "\2197";
-}
-
 #observablehq-header a[target="_blank"][data-decoration]::after {
   content: attr(data-decoration);
 }
 
-#observablehq-header a[target="_blank"]:not(:hover, :focus)::after {
-  color: var(--theme-foreground-muted);
+#observablehq-header a[target="_blank"]:is(:hover, :focus),
+#observablehq-header a[target="_blank"]:is(:hover, :focus)::after {
+  color: var(--theme-foreground-focus);
 }
 
 .observablehq-link a[target="_blank"]:not(:hover, :focus)::after {
@@ -90,11 +86,13 @@ h1 {
   font-weight: 500;
 }
 
-#observablehq-header {
-  container-type: inline-size;
+@media (min-width: 640px) {
+  .hide-if-large {
+    display: none !important;
+  }
 }
 
-@container not (min-width: 640px) {
+@media not (min-width: 640px) {
   .hide-if-small {
     display: none !important;
   }