Skip to content

Commit a343cd1

Browse files
mbostockmbostock
committed
desktop page
1 parent d6154fe commit a343cd1

File tree

2 files changed

+132
-1
lines changed

2 files changed

+132
-1
lines changed

‎docs/desktop.html‎

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!doctype html>
2+
<notebook theme="slate">
3+
<title>Observable Desktop</title>
4+
<script id="1" type="text/markdown">
5+
# Observable Desktop
6+
</script>
7+
<script id="4" type="text/markdown">
8+
**Observable Desktop** is a notebook editor for macOS, editing notebooks as local files in an open, human-readable file format. It is built on [**Notebook Kit**](./kit), our open-source tooling for generating static sites from notebooks.
9+
</script>
10+
<script id="46" type="text/markdown">
11+
Here's a short demo:
12+
13+
<div style="border: solid 1px currentColor; max-width: 100%; width: 640px; display: flex; justify-content: center; align-items: center; aspect-ratio: 640 / 315; font: 14px var(--sans-serif);">VIDEO TK</div>
14+
</script>
15+
<script id="43" type="text/markdown">
16+
Observable Desktop is available as part of [**Notebooks 2.0 Technology Preview**](./).
17+
</script>
18+
<script id="7" type="text/markdown">
19+
---
20+
21+
## Installing
22+
23+
You can download Observable Desktop here:
24+
25+
<p><button style="display: flex; flex-direction: column; align-items: center; padding: 1rem 1rem 2rem; border: none; border-radius: 4px; cursor: pointer; font: 500 14px var(--sans-serif); background: none; color: inherit; margin: auto;">
26+
<svg id="icon" width="256" height="256" viewBox="0 0 1024 1024" style="overflow: visible; color: black;">
27+
<defs>
28+
<filter id="shadow-10">
29+
<feDropShadow result="drop-shadow-0" in="SourceGraphic" style="flood-opacity: 0.3;" stdDeviation="10" dx="0" dy="10"/>
30+
</filter>
31+
<filter id="shadow-1">
32+
<feDropShadow result="drop-shadow-0" in="SourceGraphic" style="flood-opacity: 0.3;" stdDeviation="1" dx="0" dy="1"/>
33+
</filter>
34+
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
35+
<stop offset="0%" style="stop-color:#fff;" />
36+
<stop offset="100%" style="stop-color:#ddd;" />
37+
</linearGradient>
38+
</defs>
39+
<g filter="url(#shadow-10)">
40+
<g clip-path="url(#clip-0)">
41+
<path style="stroke-width: 3px; fill: url(#gradient);" d="M 100 724 L 100 300 C 100 185.001 170 99.995 300.026 100 L 724 99.995 C 854 100 924 185.001 924 300 L 924 724 C 924 839.001 854 923.995 724 924 L 300.026 924 C 170 924 100 839.001 100 724 Z" />
42+
</g>
43+
</g>
44+
<g transform="translate(512,512) translate(1.5,21) scale(32.2) translate(-11,-12)">
45+
<path filter="url(#shadow-1)" fill="currentColor" d="M10.9646 18.9046C9.95224 18.9046 9.07507 18.6853 8.33313 18.2467C7.59386 17.8098 7.0028 17.1909 6.62722 16.4604C6.22789 15.7003 5.93558 14.8965 5.75735 14.0684C5.56825 13.1704 5.47613 12.2574 5.48232 11.3427C5.48232 10.6185 5.52984 9.92616 5.62578 9.26408C5.7208 8.60284 5.89715 7.93067 6.15391 7.24843C6.41066 6.56618 6.74143 5.97468 7.14438 5.47308C7.56389 4.9592 8.1063 4.54092 8.72969 4.25059C9.38391 3.93719 10.1277 3.78091 10.9646 3.78091C11.977 3.78091 12.8542 4.00021 13.5962 4.43879C14.3354 4.87564 14.9265 5.49454 15.3021 6.22506C15.6986 6.97704 15.9883 7.7744 16.1719 8.61712C16.3547 9.459 16.447 10.3681 16.447 11.3427C16.447 12.067 16.3995 12.7593 16.3035 13.4214C16.2013 14.1088 16.0206 14.7844 15.7644 15.437C15.4994 16.1193 15.1705 16.7108 14.7739 17.2124C14.3774 17.714 13.8529 18.1215 13.1996 18.4349C12.5463 18.7483 11.8016 18.9046 10.9646 18.9046ZM12.8999 13.3447C13.4242 12.8211 13.7159 12.0966 13.7058 11.3427C13.7058 10.5639 13.4436 9.89654 12.92 9.34074C12.3955 8.78495 11.7441 8.50705 10.9646 8.50705C10.1852 8.50705 9.53376 8.78495 9.00928 9.34074C8.49569 9.87018 8.21207 10.5928 8.22348 11.3427C8.22348 12.1216 8.48572 12.7889 9.00928 13.3447C9.53376 13.9005 10.1852 14.1784 10.9646 14.1784C11.7441 14.1784 12.3891 13.9005 12.8999 13.3447ZM10.9646 22.6855C17.0199 22.6855 21.9293 17.6068 21.9293 11.3427C21.9293 5.07871 17.0199 0 10.9646 0C4.90942 0 0 5.07871 0 11.3427C0 17.6068 4.90942 22.6855 10.9646 22.6855Z " />
46+
</g>
47+
</svg>
48+
<div style="display: flex; align-items: center; gap: 0.5rem;">
49+
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" width="16" height="16"><path fill="currentColor" d="M12.665 15.358c-.905.844-1.893.711-2.843.311-1.006-.409-1.93-.427-2.991 0-1.33.551-2.03.391-2.825-.31C-.498 10.886.166 4.078 5.28 3.83c1.246.062 2.114.657 2.843.71 1.09-.213 2.133-.826 3.296-.746 1.393.107 2.446.64 3.138 1.6-2.88 1.662-2.197 5.315.443 6.337-.526 1.333-1.21 2.657-2.345 3.635zM8.03 3.778C7.892 1.794 9.563.16 11.483 0c.268 2.293-2.16 4-3.452 3.777"></path></svg>
50+
Download for macOS
51+
</div>
52+
</button></p>
53+
54+
Observable Desktop requires Apple Silicon and macOS 15+ (Sequoia). By downloading and using Observable Desktop, you agree to our [terms of service](https://observablehq.com/terms-of-service).
55+
</script>
56+
<script id="47" type="text/markdown">
57+
---
58+
59+
## Documentation
60+
61+
We're working on it! Please check back again soon.
62+
</script>
63+
<script id="3" type="text/markdown">
64+
<style>
65+
66+
.observablehq--cell:first-of-type {
67+
position: relative;
68+
color: var(--theme-background);
69+
padding-bottom: 5rem;
70+
}
71+
72+
.observablehq--cell:first-of-type h1 {
73+
color: inherit;
74+
}
75+
76+
.observablehq--cell:first-of-type h1 + h2 {
77+
color: inherit;
78+
font-style: normal;
79+
font-weight: 500;
80+
opacity: 0.7;
81+
margin-top: 1rem;
82+
}
83+
84+
.observablehq--cell:first-of-type::before {
85+
content: "";
86+
display: block;
87+
position: absolute;
88+
background: var(--theme-foreground);
89+
inset: 0;
90+
width: 100vw;
91+
margin: -68px calc((100% - 100vw) / 2) 2rem;
92+
z-index: -1;
93+
}
94+
95+
h1 {
96+
color: var(--theme-foreground);
97+
font-size: clamp(3rem, 8vw, 4rem);
98+
}
99+
100+
h1,
101+
h2,
102+
h3,
103+
h4,
104+
h5,
105+
h6 {
106+
font-family: var(--sans-serif);
107+
}
108+
109+
aside {
110+
font: small var(--sans-serif);
111+
color: var(--theme-foreground-muted);
112+
max-width: 640px;
113+
}
114+
115+
aside code {
116+
font-size: inherit;
117+
}
118+
119+
@media (min-width: calc(640px + 17rem)) {
120+
aside {
121+
float: right;
122+
width: 12rem;
123+
}
124+
}
125+
126+
</style>
127+
</script>
128+
</notebook>

‎docs/index.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@
3333
To achieve these goals, we've developed an open **notebook file format** and are releasing **Observable Notebook Kit**, an open-source command-line interface (and Vite plugin) for generating static sites from notebooks. You can use Notebook Kit for self-hosting and continuous deployment of notebooks, to deeply integrate notebooks into custom web applications, and more.
3434
</script>
3535
<script id="30" type="text/markdown">
36-
In addition to growing notebooks as reusable, extensible technology, we want to improve the experience of authoring notebooks. We are therefore also developing **Observable Desktop**, a cross-platform desktop application for editing notebooks that brings the magic ✨ of Observable Notebooks to file-based workflows.
36+
In addition to growing notebooks as reusable, extensible technology, we want to improve the experience of authoring notebooks. We are therefore also developing **Observable Desktop**, a desktop application for editing notebooks that brings the magic ✨ of Observable Notebooks to file-based workflows.
3737
</script>
3838
<script id="31" type="text/markdown">
3939
Our goals for a next-generation notebook editor are:
@@ -236,6 +236,9 @@
236236
<script id="59" type="text/markdown">
237237
TODO AI
238238
</script>
239+
<script id="80" type="text/markdown">
240+
See the [Desktop documentation](./desktop) for more.
241+
</script>
239242
<script id="4" type="text/markdown">
240243
---
241244

0 commit comments

Comments
 (0)