|
49 | 49 | display: none; |
50 | 50 | } |
51 | 51 |
|
52 | | -a.feature { |
53 | | - color: var(--theme-foreground-muted); |
54 | | -} |
55 | | - |
56 | | -a.feature:hover, |
57 | | -a.feature:focus { |
58 | | - text-decoration: none; |
59 | | - border-color: var(--theme-foreground-fainter); |
60 | | -} |
61 | | - |
62 | | -a.feature:hover h2, |
63 | | -a.feature:focus h2 { |
64 | | - text-decoration: underline; |
65 | | -} |
66 | | - |
67 | 52 | </style> |
68 | 53 |
|
69 | | -<div class="grid grid-cols-3" style="margin: 4rem 0; -grid-auto-rows: auto;"> |
70 | | - <a class="feature card" href="./javascript"> |
| 54 | +<div class="grid grid-cols-3" style="margin: 4rem 0;"> |
| 55 | + <div class="muted card"> |
71 | 56 | <h2>JavaScript-in-Markdown</h2> |
72 | | - <p>Boring Markdown just got imbued with reactive superpowers. Sprinkle charts and inputs into reports and dashboards with ease.</p> |
73 | | - </a> |
74 | | - <a class="feature card" href="./loaders"> |
| 57 | + <p>Boring Markdown… imbued with reactive superpowers! Sprinkle charts and inputs into reports and dashboards with ease.</p> |
| 58 | + </div> |
| 59 | + <div class="muted card"> |
75 | 60 | <h2>Data loaders</h2> |
76 | | - <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> |
77 | | - </a> |
78 | | - <a class="feature card" href="./javascript/imports"> |
79 | | - <h2>Imports</h2> |
80 | | - <p>Import from npm, instantly. Share code across pages and projects. And automatic module preloads of transitive dependencies!</p> |
81 | | - </a> |
82 | | - <a class="feature card" href="./inputs"> |
83 | | - <h2>Reactive inputs</h2> |
84 | | - <p>Accept user input without breaking a sweat. Reactivity is automatic, like a spreadsheet, re-running code when values change.</p> |
85 | | - </a> |
86 | | - <a class="feature card" href="./components"> |
| 61 | + <p>Take snapshots of data during build for instant dashboards. Write data loaders in any language, with any library.</p> |
| 62 | + </div> |
| 63 | + <div class="muted card"> |
87 | 64 | <h2>Beautiful by default</h2> |
88 | | - <p>Responsive grids, pleasing colors, dark mode, keyboard-friendly navigation, side pane, table of contents, footer… batteries included.</p> |
89 | | - </a> |
90 | | - <a class="feature card" href="./getting-started"> |
91 | | - <h2>File over app</h2> |
92 | | - <p>Edit in your favorite text editor, save changes, then watch your browser update instantly in the background.</p> |
93 | | - </a> |
94 | | - <a class="feature card" href="./getting-started"> |
95 | | - <h2>Host anywhere</h2> |
96 | | - <p>…</p> |
97 | | - </a> |
| 65 | + <p>Responsive grid layout, pleasing colors, dark mode, keyboard-friendly, automatic side pane and table of contents…</p> |
| 66 | + </div> |
| 67 | + <div class="muted card"> |
| 68 | + <h2>Reactive inputs</h2> |
| 69 | + <p>Accept user input without breaking a sweat. Code reacts automatically, like a spreadsheet, when values change.</p> |
| 70 | + </div> |
| 71 | + <div class="muted card"> |
| 72 | + <h2>Batteries included</h2> |
| 73 | + <p>A great standard library for dashboards, plus recommended libraries and sample datasets conveniently built-in.</p> |
| 74 | + </div> |
| 75 | + <div class="muted card"> |
| 76 | + <h2>Imports</h2> |
| 77 | + <p>Import from npm without having to install first. Share code across pages and projects. Transitive preloads for <i>speed</i>.</p> |
| 78 | + </div> |
98 | 79 | </div> |
99 | 80 |
|
100 | 81 | --- |
101 | 82 |
|
102 | | -**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. |
| 83 | +**Observable Framework** is an [open-source](https://github.com/observablehq/cli) static site generator for data apps, dashboards, reports, and more. |
103 | 84 |
|
104 | 85 | 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. |
105 | 86 |
|
106 | | -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.) |
| 87 | +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.) |
107 | 88 |
|
108 | | -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. |
| 89 | +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. |
109 | 90 |
|
110 | 91 | --- |
0 commit comments