fix 20 broken links (#1699)

Fil · web-flow · commit 6c384f4d73cc · 2024-09-30T08:15:44.000-07:00
diff --git a/docs/files.md b/docs/files.md
@@ -154,7 +154,7 @@ A common gotcha with JSON is that it has no built-in date type; dates are theref
 
 ### Media
 
-To display an image, you can use a static image in [Markdown](../markdown) such as `<img src="horse.jpg">` or `![horse](horse.jpg)`. Likewise, you can use a `video` or `audio` element. Per [file-based routing](#routing), static references to these files are automatically detected and therefore these files will be included in the built output.
+To display an image, you can use a static image in [Markdown](./markdown) such as `<img src="horse.jpg">` or `![horse](horse.jpg)`. Likewise, you can use a `video` or `audio` element. Per [file-based routing](#routing), static references to these files are automatically detected and therefore these files will be included in the built output.
 
 <video src="horse.mp4" autoplay muted loop controls></video>
 
diff --git a/docs/getting-started.md b/docs/getting-started.md
@@ -74,7 +74,7 @@ const digraph = dot`digraph {
   ${digraph}
 </figure>
 
-First you’ll setup your local development environment by [**creating**](#1.-create) a new project. A project contains all the source code needed to build an app. Next you’ll [**develop**](#2.-develop): an iterative process where you save changes to source files in your editor while previewing the result in your browser. When you’re ready to share, it’s time to [**publish**](#3.-publish): you can either build a static site for self-hosting or deploy directly to Observable. Lastly, you can invite people to view your app!
+First you’ll setup your local development environment by [**creating**](#1-create) a new project. A project contains all the source code needed to build an app. Next you’ll [**develop**](#2-develop): an iterative process where you save changes to source files in your editor while previewing the result in your browser. When you’re ready to share, it’s time to [**publish**](#3-publish): you can either build a static site for self-hosting or deploy directly to Observable. Lastly, you can invite people to view your app!
 
 These are just first steps. You can continue to develop apps after publishing, and republish as needed. You can also setup continuous deployment to publish your app automatically on commit or on schedule. We’ll cover these [next steps](#next-steps) briefly below.
 
@@ -535,7 +535,7 @@ The <code>build</code> command generates the `dist` directory; you can then copy
 
 <pre data-copy>npx http-server dist</pre>
 
-<div class="tip">By default, Framework generates “clean” URLs by dropping the `.html` extension from page links. Not all webhosts support this; some need the <a href="./config#cleanUrls"><b>cleanUrls</b> config option</a> set to false.</div>
+<div class="tip">By default, Framework generates “clean” URLs by dropping the `.html` extension from page links. Not all webhosts support this; some need the <a href="./config#clean-urls"><b>cleanUrls</b> config option</a> set to false.</div>
 
 <div class="tip">When deploying to GitHub Pages without using GitHub’s related actions (<a href="https://github.com/actions/configure-pages">configure-pages</a>,
 <a href="https://github.com/actions/deploy-pages">deploy-pages</a>, and
diff --git a/docs/imports.md b/docs/imports.md
@@ -245,10 +245,10 @@ Click on any of the imported symbols below to learn more.
 <pre><code class="language-js">import {<a href="./lib/htl">html</a>} from "npm:htl";</code></pre>
 <pre><code class="language-js">import {<a href="./lib/htl">svg</a>} from "npm:htl";</code></pre>
 <pre><code class="language-js">import * as <a href="./lib/leaflet">L</a> from "npm:leaflet";</code></pre>
-<pre><code class="language-js">import <a href="../lib/lodash">_</a> from "npm:lodash";</code></pre>
+<pre><code class="language-js">import <a href="./lib/lodash">_</a> from "npm:lodash";</code></pre>
 <pre><code class="language-js">import * as <a href="./jsx">React</a> from "npm:react";</code></pre>
 <pre><code class="language-js">import * as <a href="./jsx">ReactDOM</a> from "npm:react-dom";</code></pre>
-<pre><code class="language-js">import * as <a href="../lib/topojson">topojson</a> from "npm:topojson-client";</code></pre>
+<pre><code class="language-js">import * as <a href="./lib/topojson">topojson</a> from "npm:topojson-client";</code></pre>
 
 In addition to the above, several implicit imports have slightly more involved definitions: [`now`](./lib/generators#now), [`width`](./lib/generators#width-element), [`dark`](./lib/generators#dark), [`vg`](./lib/mosaic), and [`vl`](./lib/vega-lite).
 
diff --git a/docs/lib/arquero.md b/docs/lib/arquero.md
@@ -25,7 +25,7 @@ const dt = aq.table({
 });
 ```
 
-Arquero is column-oriented: each column is an array of values of a given type. Here, numbers representing hours of sunshine per month. But an Arquero table is also iterable and as such, its contents can be displayed with [`Inputs.table`](/lib/inputs#table).
+Arquero is column-oriented: each column is an array of values of a given type. Here, numbers representing hours of sunshine per month. But an Arquero table is also iterable and as such, its contents can be displayed with [`Inputs.table`](/inputs/table).
 
 ```js echo
 Inputs.table(dt)
@@ -85,7 +85,7 @@ dt.fold(aq.all(), {as: ["city", "sun"]})
   .objects()
 ```
 
-To load an Arquero table from an Apache Arrow, Apache Parquet, CSV, TSV, or JSON file, use [`file.arquero`](../files#arquero) <a href="https://github.com/observablehq/framework/releases/tag/v1.10.0" class="observablehq-version-badge" data-version="^1.10.0" title="Added in 1.10.0"></a>:
+To load an Arquero table from an Apache Arrow, Apache Parquet, CSV, TSV, or JSON file, use [`file.arquero`](../files#supported-formats) <a href="https://github.com/observablehq/framework/releases/tag/v1.10.0" class="observablehq-version-badge" data-version="^1.10.0" title="Added in 1.10.0"></a>:
 
 ```js run=false
 const flights = FileAttachment("flights-200k.arrow").arquero();
diff --git a/docs/lib/deckgl.md b/docs/lib/deckgl.md
@@ -192,7 +192,7 @@ deckInstance.setProps({
 });
 ```
 
-Lastly, the `t` variable controls the height of the extruded hexagons with a [generator](../javascript/generators) (that can be reset with a button input):
+Lastly, the `t` variable controls the height of the extruded hexagons with a [generator](../reactivity#generators) (that can be reset with a button input):
 
 ```js echo
 const t = (function* () {
diff --git a/docs/lib/duckdb.md b/docs/lib/duckdb.md
@@ -14,7 +14,7 @@ For convenience, we provide a [`DatabaseClient`](https://observablehq.com/@obser
 import {DuckDBClient} from "npm:@observablehq/duckdb";
 ```
 
-To get a DuckDB client, pass zero or more named tables to `DuckDBClient.of`. Each table can be expressed as a [`FileAttachment`](../files), [Arquero table](./arquero), [Arrow table](./arrow), an array of objects, or a promise to the same. For file attachments, the following formats are supported: [CSV](./csv), [TSV](./csv), [JSON](./files#json), [Apache Arrow](./arrow), and [Apache Parquet](./arrow#apache-parquet). For example, below we load a sample of 250,000 stars from the [Gaia Star Catalog](https://observablehq.com/@cmudig/peeking-into-the-gaia-star-catalog) as a Parquet file:
+To get a DuckDB client, pass zero or more named tables to `DuckDBClient.of`. Each table can be expressed as a [`FileAttachment`](../files), [Arquero table](./arquero), [Arrow table](./arrow), an array of objects, or a promise to the same. For file attachments, the following formats are supported: [CSV](./csv), [TSV](./csv), [JSON](../files#json), [Apache Arrow](./arrow), and [Apache Parquet](./arrow#apache-parquet). For example, below we load a sample of 250,000 stars from the [Gaia Star Catalog](https://observablehq.com/@cmudig/peeking-into-the-gaia-star-catalog) as a Parquet file:
 
 ```js echo
 const db = DuckDBClient.of({gaia: FileAttachment("gaia-sample.parquet")});
diff --git a/docs/lib/echarts.md b/docs/lib/echarts.md
@@ -10,7 +10,7 @@ index: true
 import * as echarts from "npm:echarts";
 ```
 
-To use ECharts, declare a container element with the desired dimensions, [display it](../javascript#display), and then call `echarts.init`.
+To use ECharts, declare a container element with the desired dimensions, [display it](../javascript#explicit-display), and then call `echarts.init`.
 
 ```js echo
 const myChart = echarts.init(display(html`<div style="width: 600px; height:400px;"></div>`));
diff --git a/docs/lib/vega-lite.md b/docs/lib/vega-lite.md
@@ -38,4 +38,4 @@ vl.render({
 })
 ```
 
-<div class="tip">When loading data from a file as above, use <a href="../files"><code>FileAttachment</code></a> so that referenced files are included on <a href="../getting-started#build">build</a>.</div>
+<div class="tip">When loading data from a file as above, use <a href="../files"><code>FileAttachment</code></a> so that referenced files are included on <a href="../files#static-analysis">build</a>.</div>
diff --git a/docs/markdown.md b/docs/markdown.md
@@ -71,7 +71,7 @@ This is **Markdown** inside of _HTML_!
 
 ## Grids
 
-The `grid` class declares a [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) container. The `grid` class is designed to pair with the [`card` class](#card) and the [`dashboard` theme](./themes) for dashboard layout.
+The `grid` class declares a [CSS grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout) container. The `grid` class is designed to pair with the [`card` class](#cards) and the [`dashboard` theme](./themes) for dashboard layout.
 
 ```html echo
 <div class="grid grid-cols-4">
@@ -166,7 +166,7 @@ The `card` class is used to group and delineate content. The `card` classes appl
 
 <div class="tip"><a href="./lib/plot">Observable Plot</a>’s <b>title</b> and <b>subtitle</b> options generate <code>h2</code> and <code>h3</code> elements, respectively, and so will inherit these card styles.</div>
 
-Cards can be used on their own, but they most often exist in a [grid](#grid). Cards can contain whatever you like, including text, images, charts, tables, inputs, and more.
+Cards can be used on their own, but they most often exist in a [grid](#grids). Cards can contain whatever you like, including text, images, charts, tables, inputs, and more.
 
 ```html echo
 <div class="grid grid-cols-2">
@@ -183,7 +183,7 @@ Cards can be used on their own, but they most often exist in a [grid](#grid). Ca
 
 <div class="tip">Remove the padding from a card if it contains only a table.</div>
 
-To place an input inside a card, first declare a detached input as a [top-level variable](./reactivity#top-level-variables) and use [`Generators.input`](./lib/generators#inputelement) to expose its reactive value:
+To place an input inside a card, first declare a detached input as a [top-level variable](./reactivity#top-level-variables) and use [`Generators.input`](./lib/generators#input-element) to expose its reactive value:
 
 ```js echo
 const industryInput = Inputs.select(industries.map((d) => d.industry), {unique: true, sort: true, label: "Industry:"});
diff --git a/docs/project-structure.md b/docs/project-structure.md
@@ -99,7 +99,7 @@ For this site, routes map to files as:
 /hello → dist/hello.html → src/hello.md
 ```
 
-This assumes [“clean URLs”](./config#cleanurls) as supported by most static site servers; `/hello` can also be accessed as `/hello.html`, and `/` can be accessed as `/index` and `/index.html`. (Some static site servers automatically redirect to clean URLs, but we recommend being consistent when linking to your site.)
+This assumes [“clean URLs”](./config#clean-urls) as supported by most static site servers; `/hello` can also be accessed as `/hello.html`, and `/` can be accessed as `/index` and `/index.html`. (Some static site servers automatically redirect to clean URLs, but we recommend being consistent when linking to your site.)
 
 Apps should always have a top-level `index.md` in the source root; this is your app’s home page, and it’s what people visit by default.
 
diff --git a/docs/reactivity.md b/docs/reactivity.md
@@ -126,7 +126,7 @@ Values that change over time — such as interactive inputs, animation parameter
 
 <div class="note">As with implicit await and promises, implicit iteration of generators only applies <i>across</i> code blocks, not <i>within</i> a code block.</div>
 
-As an example, here’s an HTML input element. By passing it to [`Generators.input`](<../lib/generators#input-element>), we can define a generator that yields the input’s value each time it changes.
+As an example, here’s an HTML input element. By passing it to [`Generators.input`](./lib/generators#input-element), we can define a generator that yields the input’s value each time it changes.
 
 <input id="nameInput">
 
@@ -253,7 +253,7 @@ Inputs might prompt a viewer to:
 - Select a URL from a dropdown to view traffic to a specific page
 - Choose a date range to explore data within a period of interest
 
-Inputs are typically displayed using the built-in `view` function, which [displays](../javascript#explicit-display) the given element and returns a corresponding value generator (`Generators.input`) to expose the input’s value to the page. For example, the radio input below prompts for your favorite team:
+Inputs are typically displayed using the built-in `view` function, which [displays](./javascript#explicit-display) the given element and returns a corresponding value generator (`Generators.input`) to expose the input’s value to the page. For example, the radio input below prompts for your favorite team:
 
 ```js echo
 const team = view(Inputs.radio(["Metropolis Meteors", "Rockford Peaches", "Bears"], {label: "Favorite team:", value: "Metropolis Meteors"}));
@@ -277,7 +277,7 @@ const n = view(html`<input type=range step=1 min=1 max=15>`);
 n // Try dragging the slider above
 ```
 
-<div class="tip">To be compatible with <code>view</code>, custom inputs must emit <code>input</code> events when their value changes, and expose their current value as <i>element</i>.value. See <a href="./lib/generators#input(element)"><code>Generators.input</code></a> for more.</div>
+<div class="tip">To be compatible with <code>view</code>, custom inputs must emit <code>input</code> events when their value changes, and expose their current value as <i>element</i>.value. See <a href="./lib/generators#input-element"><code>Generators.input</code></a> for more.</div>
 
 To use a chart as an input, you can use Plot’s [pointer interaction](https://observablehq.com/plot/interactions/pointer), say by setting the **tip** option on a mark. In the scatterplot below, the penguin closest to the pointer is exposed as the reactive variable `penguin`.
 
@@ -293,10 +293,10 @@ In the future, Plot will support more interaction methods, including brushing. P
 
 The `view` function does two things:
 
-1. it [displays](../javascript#explicit-display) the given DOM *element*, and then
+1. it [displays](./javascript#explicit-display) the given DOM *element*, and then
 2. returns a corresponding value generator.
 
-The `view` function uses [`Generators.input`](../lib/generators#input-element) under the hood. As shown above, you can call `Generators.input` directly, say to declare the input as a top-level variable without immediately displaying it.
+The `view` function uses [`Generators.input`](./lib/generators#input-element) under the hood. As shown above, you can call `Generators.input` directly, say to declare the input as a top-level variable without immediately displaying it.
 
 ```js echo
 const subjectInput = html`<input type="text" placeholder="anonymous">`;
