Skip to content

Commit

Permalink
new cards
Browse files Browse the repository at this point in the history
  • Loading branch information
@mbostock
mbostock committed Jan 25, 2024
1 parent 10e33ab commit 5b9b2d8
Showing 1 changed file with 25 additions and 44 deletions.
69 changes: 25 additions & 44 deletions docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,62 +49,43 @@ hr {
display: none;
}

a.feature {
color: var(--theme-foreground-muted);
}

a.feature:hover,
a.feature:focus {
text-decoration: none;
border-color: var(--theme-foreground-fainter);
}

a.feature:hover h2,
a.feature:focus h2 {
text-decoration: underline;
}

</style>

<div class="grid grid-cols-3" style="margin: 4rem 0; -grid-auto-rows: auto;">
<a class="feature card" href="./javascript">
<div class="grid grid-cols-3" style="margin: 4rem 0;">
<div class="muted card">
<h2>JavaScript-in-Markdown</h2>
<p>Boring Markdown just got imbued with reactive superpowers. Sprinkle charts and inputs into reports and dashboards with ease.</p>
</a>
<a class="feature card" href="./loaders">
<p>Boring Markdown… imbued with reactive superpowers! Sprinkle charts and inputs into reports and dashboards with ease.</p>
</div>
<div class="muted card">
<h2>Data loaders</h2>
<p>Take static snapshots of data at build time for instant dashboards. Loaders can query any data source and be written in any language.</p>
</a>
<a class="feature card" href="./javascript/imports">
<h2>Imports</h2>
<p>Import from npm, instantly. Share code across pages and projects. And automatic module preloads of transitive dependencies!</p>
</a>
<a class="feature card" href="./inputs">
<h2>Reactive inputs</h2>
<p>Accept user input without breaking a sweat. Reactivity is automatic, like a spreadsheet, re-running code when values change.</p>
</a>
<a class="feature card" href="./components">
<p>Take snapshots of data during build for instant dashboards. Write data loaders in any language, with any library.</p>
</div>
<div class="muted card">
<h2>Beautiful by default</h2>
<p>Responsive grids, pleasing colors, dark mode, keyboard-friendly navigation, side pane, table of contents, footer… batteries included.</p>
</a>
<a class="feature card" href="./getting-started">
<h2>File over app</h2>
<p>Edit in your favorite text editor, save changes, then watch your browser update instantly in the background.</p>
</a>
<a class="feature card" href="./getting-started">
<h2>Host anywhere</h2>
<p>…</p>
</a>
<p>Responsive grid layout, pleasing colors, dark mode, keyboard-friendly, automatic side pane and table of contents…</p>
</div>
<div class="muted card">
<h2>Reactive inputs</h2>
<p>Accept user input without breaking a sweat. Code reacts automatically, like a spreadsheet, when values change.</p>
</div>
<div class="muted card">
<h2>Batteries included</h2>
<p>A great standard library for dashboards, plus recommended libraries and sample datasets conveniently built-in.</p>
</div>
<div class="muted card">
<h2>Imports</h2>
<p>Import from npm without having to install first. Share code across pages and projects. Transitive preloads for <i>speed</i>.</p>
</div>
</div>

---

**Observable Framework** is an [open-source](https://github.com/observablehq/cli) command-line interface and static site generator for data apps, dashboards, reports, and more.
**Observable Framework** is an [open-source](https://github.com/observablehq/cli) static site generator for data apps, dashboards, reports, and more.

You write simple [Markdown](./markdown) pages — with interactive charts and inputs in [reactive JavaScript](./javascript), and data snapshots generated by [loaders](./loaders) in any programming language (SQL, Python, R, and more) — and Observable Framework compiles it into a static site with instant page loads for a great user experience.

Observable Framework includes thoughtfully-designed themes and components to help you build displays of data that look great on any device. And you can quickly create custom components using open-source libraries such as [Observable Plot](./lib/plot), [D3.js](./lib/d3), [Vega-Lite](./lib/vega-lite), [Graphviz](./lib/graphviz), [Mermaid](./lib/mermaid), [Leaflet](./lib/leaflet), [KaTeX](./lib/tex), and myriad more. (And for working with data, don’t forget about [Arquero](./lib/arquero), [DuckDB](./lib/duckdb), and [SQLite](./lib/sqlite), too.)
Observable Framework includes thoughtfully-designed [themes and components](./components) to help you build displays of data that look great on any device. And you can quickly create custom components using open-source libraries such as [Observable Plot](./lib/plot), [D3.js](./lib/d3), [Vega-Lite](./lib/vega-lite), [Graphviz](./lib/graphviz), [Mermaid](./lib/mermaid), [Leaflet](./lib/leaflet), [KaTeX](./lib/tex), and myriad more. (And for working with data, don’t forget about [Arquero](./lib/arquero), [DuckDB](./lib/duckdb), and [SQLite](./lib/sqlite), too.)

Since everything is just files, you can use your preferred source control and editor, and host projects anywhere. You can also seamlessly deploy to [Observable](https://observablehq.com) to share your project securely with your team.
Since everything is just files, you can use your preferred source control and editor, and host projects anywhere. Or deploy instantly to [Observable](https://observablehq.com) to share your project securely with your team.

---

0 comments on commit 5b9b2d8

Please sign in to comment.