Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vanilla stdlib; server-side render implicit stylesheets; async Generators; width(target) #294

Merged
merged 24 commits into from
Dec 4, 2023
Merged
Show file tree
Hide file tree
Changes from 17 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,8 +24,8 @@
"@typescript-eslint/no-unused-vars": ["error", {"ignoreRestSiblings": true}],
"import/first": "warn",
"import/newline-after-import": "warn",
"import/no-duplicates": "off",
"import/no-import-module-exports": "warn",
"import/no-namespace": "error",
"import/no-relative-packages": "warn",
"import/no-unresolved": "off",
"import/no-unused-modules": "error",
Expand Down
24 changes: 17 additions & 7 deletions docs/.observablehq/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@ export default {
title: "Observable CLI",
pages: [
{name: "Getting started", path: "/getting-started"},
{name: "Markdown", path: "/markdown"},
{name: "JavaScript", path: "/javascript"},
{name: "Data loaders", path: "/loaders"},
{name: "Markdown", path: "/markdown"},
{name: "HTML", path: "/html"},
{
name: "JavaScript",
open: false,
Expand All @@ -17,17 +18,26 @@ export default {
{name: "Mutables", path: "/javascript/mutables"},
{name: "Imports", path: "/javascript/imports"},
{name: "Inputs", path: "/javascript/inputs"},
{name: "DuckDB", path: "/javascript/duckdb"}
]
},
{
name: "Features",
name: "Libraries",
open: false,
pages: [
{name: "HTML", path: "/html"},
{name: "DOT", path: "/dot"},
{name: "Mermaid", path: "/mermaid"},
{name: "TeX", path: "/tex"}
{name: "Arquero", path: "/lib/arquero"},
{name: "Apache Arrow", path: "/lib/arrow"},
{name: "D3", path: "/lib/d3"},
{name: "DOT (Graphviz)", path: "/lib/dot"},
{name: "DuckDB", path: "/lib/duckdb"},
{name: "Hypertext Literal", path: "/lib/htl"},
{name: "Leaflet", path: "/lib/leaflet"},
{name: "Lodash", path: "/lib/lodash"},
{name: "Mermaid", path: "/lib/mermaid"},
{name: "Observable Inputs", path: "/lib/inputs"},
{name: "Observable Plot", path: "/lib/plot"},
{name: "SQLite", path: "/lib/sqlite"},
{name: "TeX", path: "/lib/tex"},
{name: "TopoJSON", path: "/lib/topojson"}
]
},
{name: "Contributing", path: "/contributing"}
Expand Down
220 changes: 0 additions & 220 deletions docs/javascript/inputs.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,223 +17,3 @@ The current gain is ${gain.toFixed(1)}!
## view(*input*)

As described above, this function [displays](./display) the given input element and then returns its corresponding [generator](./generators) via `Generators.input`. Use this to display an input element while also exposing the input’s value as a [reactive top-level variable](./reactivity).

## Built-in inputs

These basic inputs will get you started.

* [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](https://observablehq.com/@observablehq/input-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](https://observablehq.com/@observablehq/input-date) - choose a date
* [Color](#color) - choose a color
* [File](#file) - choose a local file

These fancy inputs are designed to work with tabular data such as CSV or TSV [file attachments](./files).

* [Search](#search) - query a tabular dataset
* [Table](#table) - browse a tabular dataset

---

### Button

Do something when a button is clicked. [Examples ›](https://observablehq.com/@observablehq/input-button) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#button)

```js echo
const clicks = view(Inputs.button("Click me"));
```

```js
clicks
```

---

### Toggle

Toggle between two values (on or off). [Examples ›](https://observablehq.com/@observablehq/input-toggle) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#toggle)

```js echo
const mute = view(Inputs.toggle({label: "Mute"}));
```

```js
mute
```

---

### Checkbox

Choose any from a set. [Examples ›](https://observablehq.com/@observablehq/input-checkbox) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#checkbox)

```js echo
const flavors = view(Inputs.checkbox(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavors"}));
```

```js
flavors
```

---

### Radio

Choose one from a set. [Examples ›](https://observablehq.com/@observablehq/input-radio) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#radio)

```js echo
const flavor = view(Inputs.radio(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavor"}));
```

```js
flavor
```

---

### Range

Pick a number. [Examples ›](https://observablehq.com/@observablehq/input-range) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#range)

```js echo
const n = view(Inputs.range([0, 255], {step: 1, label: "Favorite number"}));
```

```js
n
```

---

### Select

Choose one, or any, from a menu. [Examples ›](https://observablehq.com/@observablehq/input-select) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#select)

```js
const capitals = FileAttachment("us-state-capitals.tsv").tsv({typed: true});
const stateNames = capitals.then((capitals) => capitals.map(d => d.State));
```

```js echo
const homeState = view(Inputs.select([null].concat(stateNames), {label: "Home state"}));
```

```js
homeState
```

```js echo
const visitedStates = view(Inputs.select(stateNames, {label: "Visited states", multiple: true}));
```

```js
visitedStates
```

---

### Text

Enter freeform single-line text. [Examples ›](https://observablehq.com/@observablehq/input-text) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#text)

```js echo
const name = view(Inputs.text({label: "Name", placeholder: "What’s your name?"}));
```

```js
name
```

---

### Textarea

Enter freeform multi-line text. [Examples ›](https://observablehq.com/@observablehq/input-textarea) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#textarea)

```js echo
const bio = view(Inputs.textarea({label: "Biography", placeholder: "What’s your story?"}));
```

```js
bio
```

---

### Date

Choose a date, or a date and time. [Examples ›](https://observablehq.com/@observablehq/input-date) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#date)

```js echo
const birthday = view(Inputs.date({label: "Birthday"}));
```

```js
birthday
```

---

### Color

Choose a color. [Examples ›](https://observablehq.com/@observablehq/input-color) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#color)

```js echo
const color = view(Inputs.color({label: "Favorite color", value: "#4682b4"}));
```

```js
color
```

---

### File

Choose a local file. [Examples ›](https://observablehq.com/@observablehq/input-file) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#file)

```js echo
const file = view(Inputs.file({label: "CSV file", accept: ".csv", required: true}));
```

```js
data = file.csv({typed: true})
```

---

### Search

Query a tabular dataset. [Examples ›](https://observablehq.com/@observablehq/input-search) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#search)

```js echo
const search = view(Inputs.search(capitals, {placeholder: "Search U.S. capitals"}));
```

```js
search // see table below!
```

---

### Table

Browse a tabular dataset. [Examples ›](https://observablehq.com/@observablehq/input-table) [API Reference ›](https://github.com/observablehq/inputs/blob/main/README.md#table)

```js echo
const rows = view(Inputs.table(search));
```

```js
rows // click a checkbox in the leftmost column
```

---

* [Form](https://observablehq.com/@observablehq/input-form?collection=@observablehq/inputs) - combine multiple inputs for a compact display
5 changes: 5 additions & 0 deletions docs/lib/arquero.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Arquero

```js echo
aq
```
5 changes: 5 additions & 0 deletions docs/lib/arrow.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Apache Arrow

```js echo
Arrow
```
Binary file added docs/lib/chinook.db
Binary file not shown.
5 changes: 5 additions & 0 deletions docs/lib/d3.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# D3

```js echo
d3
```
File renamed without changes.
6 changes: 5 additions & 1 deletion docs/javascript/duckdb.md → docs/lib/duckdb.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
# DuckDB

Observable Markdown has built-in support for DuckDB via [duckdb-wasm](https://github.com/duckdb/duckdb-wasm). It’s easiest to use in conjunction with [`FileAttachment`](./files). Declare a database with `DuckDBClient`, passing in a set of named tables:
Observable Markdown has built-in support for DuckDB via [duckdb-wasm](https://github.com/duckdb/duckdb-wasm). It’s easiest to use in conjunction with [`FileAttachment`](../javascript/files). Declare a database with `DuckDBClient`, passing in a set of named tables:

```js echo
duckdb
```

```js echo
const db = DuckDBClient.of({gaia: FileAttachment("gaia-sample.parquet")});
Expand Down
File renamed without changes.
13 changes: 13 additions & 0 deletions docs/lib/htl.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# Hypertext Literal

```js echo
htl
```

```js echo
html
```

```js echo
svg
```
Loading