version badge (#1793)

* version badge

* fix anchor parsing

Author: mbostock

docs/.vitepress/theme/VersionBadge.vue

@@ -0,0 +1,12 @@
+<script setup>
+
+const {version} = defineProps(["version"]);
+
+</script>
+<template>
+  <Badge type="tip">
+    <a :href="`https://github.com/observablehq/plot/releases/tag/v${version}`" :title="`added in v${version}`" target="_blank" rel="external" style="color: inherit;">
+      ^{{ version }}
+    </a>
+  </Badge>
+</template>

docs/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import {useData} from "vitepress";
 import {watch} from "vue";
 import PlotRender from "../../components/PlotRender.js";
 import CustomLayout from "./CustomLayout.vue";
+import VersionBadge from "./VersionBadge.vue";
 import "./custom.css";
 
 export default {
@@ -11,6 +12,7 @@ export default {
   enhanceApp({app, router}) {
     Object.defineProperty(app.config.globalProperties, "$dark", {get: () => useData().isDark.value});
     app.component("PlotRender", PlotRender);
+    app.component("VersionBadge", VersionBadge);
     enableAnalytics(router);
   }
 };

docs/components/links.js

@@ -2,13 +2,14 @@ import {readdir, readFile, stat} from "fs/promises";
 
 // Anchors can be derived from headers, or explicitly written as {#names}.
 export function getAnchors(text) {
+  text = text.replace(/<(?:Version)?Badge[^/]*\/>/g, ""); // ignore badges
   const anchors = [];
   for (const [, header] of text.matchAll(/^#+ ([*\w][*().,\w\d -]+)\n/gm)) {
     anchors.push(
       header
-        .replaceAll(/[^\w\d\s]+/g, " ")
+        .replace(/[^\w\d\s]+/g, " ")
         .trim()
-        .replaceAll(/ +/g, "-")
+        .replace(/ +/g, "-")
         .toLowerCase()
     );
   }

docs/features/curves.md

@@ -79,7 +79,7 @@ The following named curve methods are supported:
 * *step* - a piecewise constant function where *y* changes at the midpoint of *x*
 * *step-after* - a piecewise constant function where *y* changes after *x*
 * *step-before* - a piecewise constant function where *x* changes after *y*
-* *auto* - like *linear*, but use the (possibly spherical) [projection](./projections.md), if any
+* *auto* - like *linear*, but use the (possibly spherical) [projection](./projections.md), if any <VersionBadge version="0.6.1" />
 
 If **curve** is a function, it will be invoked with a given *context* in the same fashion as a [D3 curve factory](https://d3js.org/d3-shape/curve#custom-curves). The *auto* curve is only available for the [line mark](../marks/line.md) and [link mark](../marks/link.md) and is typically used in conjunction with a spherical [projection](./projections.md) to interpolate along [geodesics](https://en.wikipedia.org/wiki/Geodesic).
 

docs/features/facets.md

@@ -232,7 +232,7 @@ Plot.plot({
 
 ## Mark facet options
 
-Facets can be defined for each mark via the **fx** or **fy** channels. The **fx** and **fy** channels are computed prior to the [mark’s transform](./transforms.md), if any (*i.e.*, facet channels are not transformed). Alternatively, the [**facet** plot option](#plot-facet-options) allows top-level faceting based on data.
+Facets can be defined for each mark via the **fx** or **fy** channels. <VersionBadge version="0.6.1" /> The **fx** and **fy** channels are computed prior to the [mark’s transform](./transforms.md), if any (*i.e.*, facet channels are not transformed). Alternatively, the [**facet** plot option](#plot-facet-options) allows top-level faceting based on data.
 
 Faceting can be explicitly enabled or disabled on a mark with the **facet** option, which accepts the following values:
 
@@ -245,7 +245,7 @@ Faceting can be explicitly enabled or disabled on a mark with the **facet** opti
 When mark-level faceting is used, the default *auto* setting is equivalent to *include*: the mark will be faceted if either the **fx** or **fy** channel option (or both) is specified. The null or false option will disable faceting, while *exclude* draws the subset of the mark’s data *not* in the current facet. When a mark uses *super* faceting, it is not allowed to use position scales (*x*, *y*, *fx*, or *fy*); *super* faceting is intended for decorations, such as labels and legends.
 
 
-The **facetAnchor** option controls the placement of the mark with respect to the facets. Based on the value, the mark will be displayed on:
+The **facetAnchor** option <VersionBadge version="0.6.3" /> controls the placement of the mark with respect to the facets. Based on the value, the mark will be displayed on:
 
 * null - non-empty facets
 * *top*, *right*, *bottom*, or *left* - the given side

docs/features/legends.md

@@ -89,7 +89,7 @@ Categorical and ordinal color legends are rendered as swatches, unless the **leg
 * **columns** - the number of swatches per row
 * **marginLeft** - the legend’s left margin
 * **className** - a class name, that defaults to a randomly generated string scoping the styles
-* **opacity** - the swatch fill opacity
+* **opacity** - the swatch fill opacity <VersionBadge version="0.6.5" />
 * **width** - the legend’s width (in pixels)
 
 Symbol legends are rendered as swatches and support the options above in addition to the following options:

docs/features/marks.md

@@ -476,7 +476,7 @@ All marks support the following style options:
 * **strokeDashoffset** - the [stroke dash offset](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset) (typically in pixels)
 * **opacity** - object opacity (a number between 0 and 1)
 * **mixBlendMode** - the [blend mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) (*e.g.*, *multiply*)
-* **imageFilter** - a CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (*e.g.*, *blur(5px)*)
+* **imageFilter** - a CSS [filter](https://developer.mozilla.org/en-US/docs/Web/CSS/filter) (*e.g.*, *blur(5px)*) <VersionBadge version="0.6.7" />
 * **shapeRendering** - the [shape-rendering mode](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) (*e.g.*, *crispEdges*)
 * **paintOrder** - the [paint order](https://developer.mozilla.org/en-US/docs/Web/CSS/paint-order) (*e.g.*, *stroke*)
 * **dx** - horizontal offset (in pixels; defaults to 0)
@@ -486,7 +486,7 @@ All marks support the following style options:
 * **ariaHidden** - if true, hide this content from the accessibility tree
 * **pointerEvents** - the [pointer events](https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) (*e.g.*, *none*)
 * **clip** - whether and how to clip the mark
-* **tip** - whether to generate an implicit [pointer](../interactions/pointer.md) [tip](../marks/tip.md)
+* **tip** - whether to generate an implicit [pointer](../interactions/pointer.md) [tip](../marks/tip.md) <VersionBadge version="0.6.7" />
 
 If the **clip** option is *frame* (or equivalently true), the mark is clipped to the frame’s dimensions; if the **clip** option is null (or equivalently false), the mark is not clipped. If the **clip** option is *sphere*, then a [geographic projection](./projections.md) is required and the mark will be clipped to the projected sphere (_e.g._, the front hemisphere when using the orthographic projection).
 

docs/features/plots.md

@@ -218,7 +218,7 @@ The default **width** is 640. On Observable, the width can be set to the [standa
 Plot does not adjust margins automatically to make room for long tick labels. If your *y* axis labels are too long, you can increase the **marginLeft** to make more room. Also consider using a different **tickFormat** for short labels (*e.g.*, `s` for SI prefix notation), or a scale **transform** (say to convert units to millions or billions).
 :::
 
-The **aspectRatio** option<a id="aspectratio" class="header-anchor" href="#aspectratio" aria-label="Permalink to &quot;aspectRatio&quot;"></a>, if not null, computes a default **height** such that a variation of one unit in the *x* dimension is represented by the corresponding number of pixels as a variation in the *y* dimension of one unit.
+The **aspectRatio** option<a id="aspectRatio" class="header-anchor" href="#aspectRatio" aria-label="Permalink to &quot;aspectRatio&quot;"></a> <VersionBadge version="0.6.4" />, if not null, computes a default **height** such that a variation of one unit in the *x* dimension is represented by the corresponding number of pixels as a variation in the *y* dimension of one unit.
 
 <p>
   <label class="label-input">

docs/features/projections.md

@@ -28,7 +28,7 @@ onMounted(() => {
 
 </script>
 
-# Projections
+# Projections <VersionBadge version="0.6.1" />
 
 A **projection** maps abstract coordinates in *x* and *y* to pixel positions on screen. Most often, abstract coordinates are spherical (degrees longitude and latitude), as when rendering a geographic map. For example, below we show earthquakes in the last seven days with a magnitude of 2.5 or higher as reported by the [USGS](https://earthquake.usgs.gov/earthquakes/feed/v1.0/geojson.php). Use the slider to adjust the *orthographic* projection’s center of longitude.
 

docs/features/scales.md

@@ -703,7 +703,7 @@ The default range depends on the scale: for position scales (*x*, *y*, *fx*, and
 
 The behavior of the **unknown** scale option depends on the scale type. For quantitative and temporal scales, the unknown value is used whenever the input value is undefined, null, or NaN. For ordinal or categorical scales, the unknown value is returned for any input value outside the domain. For band or point scales, the unknown option has no effect; it is effectively always equal to undefined. If the unknown option is set to undefined (the default), or null or NaN, then the affected input values will be considered undefined and filtered from the output.
 
-For data at regular intervals, such as integer values or daily samples, the [**interval** option](#scale-transforms) can be used to enforce uniformity. The specified *interval* — such as d3.utcMonth — must expose an *interval*.floor(*value*), *interval*.offset(*value*), and *interval*.range(*start*, *stop*) functions. The option can also be specified as a number, in which case it will be promoted to a numeric interval with the given step. The option can alternatively be specified as a string (*second*, *minute*, *hour*, *day*, *week*, *month*, *quarter*, *half*, *year*, *monday*, *tuesday*, *wednesday*, *thursday*, *friday*, *saturday*, *sunday*) naming the corresponding time interval, or a skip interval consisting of a number followed by the interval name (possibly pluralized), such as *3 months* or *10 years*. This option sets the default *scale*.transform to the given interval’s *interval*.floor function. In addition, the default *scale*.domain is an array of uniformly-spaced values spanning the extent of the values associated with the scale.
+For data at regular intervals, such as integer values or daily samples, the [**interval** option](#scale-transforms) can be used to enforce uniformity. The specified *interval* — such as d3.utcMonth — must expose an *interval*.floor(*value*), *interval*.offset(*value*), and *interval*.range(*start*, *stop*) functions. The option can also be specified as a number, in which case it will be promoted to a numeric interval with the given step. The option can alternatively be specified as a string (*second*, *minute*, *hour*, *day*, *week*, *month*, *quarter*, *half*, *year*, *monday*, *tuesday*, *wednesday*, *thursday*, *friday*, *saturday*, *sunday*) <VersionBadge version="0.6.2" /> naming the corresponding time interval, or a skip interval consisting of a number followed by the interval name (possibly pluralized), such as *3 months* or *10 years*. This option sets the default *scale*.transform to the given interval’s *interval*.floor function. In addition, the default *scale*.domain is an array of uniformly-spaced values spanning the extent of the values associated with the scale.
 
 Quantitative scales can be further customized with additional options:
 
@@ -943,7 +943,7 @@ Plot implicitly generates an [axis mark](../marks/axis.md) for position scales i
 * **fontVariant** - the font-variant attribute for ticks; defaults to *tabular-nums* if quantitative
 * **label** - a string to label the axis
 * **labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*
-* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true
+* **labelArrow** - the label arrow: *auto* (default), *up*, *right*, *down*, *left*, *none*, or true <VersionBadge version="0.6.7" />
 * **labelOffset** - the label position offset (in pixels; default depends on margins and orientation)
 * **ariaLabel** - a short label representing the axis in the accessibility tree
 * **ariaDescription** - a textual description for the axis