aboutsummaryrefslogtreecommitdiffstats
path: root/web/index.html
blob: d34255aa7b9e9732b5eb6da023649d8843ef0572 (plain) (blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slosh — a terminal multiplexer</title>
<meta name="description" content="slosh: panes, tabs, sessions you can detach from. One static binary, written in C on libghostty-vt.">
<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="recordings/player.css">
</head>
<body>

<!-- The little logo: the big one, shrunk into the corner the stage's
     v-centering leaves empty. It fades in when the hero scrolls away
     (the observer at the bottom of the page) and is a road back up. -->
<a class="logo-float" href="#" aria-label="slosh — back to top">
<pre aria-hidden="true">
▄██████▄ ███      ▄██████▄ ▄██████▄ ▄██  ▄██
███   ▀▀ ███      ███  ███ ███   ▀▀ ███  ███
▀██████▄ ███  ▄▄▄ ███  ███ ▀██████▄ ████████
▄▄   ███ ███  ███ ███  ███ ▄▄   ███ ███  ███
▀██████▀ ███████▀ ▀██████▀ ███████▀ ███  ███
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
</pre>
</a>

<main>

<header class="hero">
<pre class="logo">
▄██████▄ ███      ▄██████▄ ▄██████▄ ▄██  ▄██
███   ▀▀ ███      ███  ███ ███   ▀▀ ███  ███
▀██████▄ ███  ▄▄▄ ███  ███ ▀██████▄ ████████
▄▄   ███ ███  ███ ███  ███ ▄▄   ███ ███  ███
▀██████▀ ███████▀ ▀██████▀ ███████▀ ███  ███
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄
</pre>
  <p class="tagline">a modern terminal multiplexer written in C on top of
  <a href="https://github.com/ghostty-org/ghostty">libghostty-vt</a>.</p>

  <p class="hero-links">
    <a class="btn" href="#install">install</a>
    <a class="btn ghost" href="#try">try it in the browser</a>
    <a class="btn ghost" href="docs/">browse docs</a>
  </p>
</header>

<section id="different" style='margin-top:0;'>
  <!-- The feature tour: a terminal pinned on the left, the features scrolling
       by on the right. The step under the middle of the viewport is the
       active one, and its data-cast picks which recording the terminal
       replays (web/recordings/demos/, one script per step). -->
  <div class="scrolly">
    <div class="scrolly-stage">
      <div class="stage-pin">
        <div data-sloshcast="recordings/panes.json" data-loop data-name="panes" class="stage-active"></div>
        <div data-sloshcast="recordings/sessions.json" data-loop data-name="sessions"></div>
        <div data-sloshcast="recordings/reflow.json" data-loop data-name="reflow"></div>
        <div data-sloshcast="recordings/config.json" data-loop data-name="config"></div>
        <div data-sloshcast="recordings/shaders.json" data-loop data-name="shaders"></div>
        <div data-sloshcast="recordings/scripting.json" data-loop data-name="scripting"></div>
        <div data-sloshcast="recordings/extras.json" data-loop data-name="extras"></div>
      </div>
    </div>

    <div class="scrolly-steps">
      <article class="step active" data-cast="panes">
        <h3>Panes and tabs, the way your hands expect.</h3>
        <p>One chord to split — or just click, because everything drawn is a
        real target.</p>
        <ul>
          <li>click the middle of a border to split toward it</li>
          <li>drag the gap to move the boundary</li>
          <li>drag a pane by its title — the middle swaps, an edge band
          tucks it in beside</li>
          <li>zoom, tab away, come back — nothing lost</li>
        </ul>
      </article>

      <article class="step" data-cast="sessions">
        <h3>Sessions outlive everything.</h3>
        <p>Detach, let the ssh connection die, come back tomorrow: every pane
        exactly where you left it.</p>
        <ul>
          <li>detach mid-thought, reattach mid-thought</li>
          <li>keep separate sessions for separate lives — hop between them</li>
          <li>a command that died while you were away keeps its output, its
          exit status, and offers <code>[re-run]</code></li>
        </ul>
      </article>

      <article class="step" data-cast="reflow">
        <h3>Layouts that reflow the way you expect.</h3>
        <p>The arrangement is derived from the window, never stored — so every
        size gets a sensible layout, and nothing drifts.</p>
        <ul>
          <li>quarter-turn the whole layout in place</li>
          <li>shrink until boxes become a tidy list</li>
          <li>grow back: the exact arrangement returns</li>
        </ul>
      </article>

      <article class="step" data-cast="config">
        <h3>Make it yours, live.</h3>
        <p>One config file, re-read the moment you save — and <kbd>C-a</kbd>
        <kbd>e</kbd> opens it right there, in a pane.</p>
        <ul>
          <li>retheme the whole session in one substitution</li>
          <li>padding, gaps, titles — every knob, applied as you watch</li>
          <li><code>compact true</code>: a different school of borders entirely</li>
        </ul>
      </article>

      <article class="step" data-cast="shaders">
        <h3>Colour passes, written as expressions.</h3>
        <p>Dim, tint, rulers, spotlights — over a pane's cells or over its
        frame, with strengths computed from <code>x</code>, <code>y</code>, the
        cursor, the clock.</p>
        <ul>
          <li>tint a frame, rule a column, scanline the lot</li>
          <li>a spotlight that follows the cursor as you type</li>
          <li><code>:load shine</code> — a shipped preset runs light along the frame</li>
          <li>a pane rings unfocused — its border flashes</li>
        </ul>
      </article>

      <article class="step" data-cast="scripting">
        <h3>Built to be driven.</h3>
        <p>One JSON object per line over the session's socket — the same depth
        the keyboard gets. An agent can hold the other end.</p>
        <ul>
          <li>split and rename panes from a script, replies and all</li>
          <li>a program draws status and buttons into its own frame</li>
          <li>the click comes back on that program's stdin</li>
        </ul>
      </article>

      <article class="step" data-cast="extras">
        <h3>Floats, and the small comforts.</h3>
        <p><kbd>C-a</kbd> <kbd>F</kbd> drops a throwaway shell on top of
        whatever you are doing — a monitor, a man page, a quick command.</p>
        <ul>
          <li>it casts a shadow, so it never passes for a tile</li>
          <li>move it with the keys that move boundaries; grow it about its
          centre</li>
          <li><kbd>C-a</kbd> <kbd>?</kbd> — a cheatsheet built from the
          bindings actually in force, so it cannot disagree with your
          keyboard</li>
          <li><code>exit</code> closes it like any shell — the layout never
          flinched</li>
        </ul>
      </article>

                        <!--
      <article class="step step-cta">
        <h3>Convinced?</h3>
        <p class="hero-links">
          <a class="btn" href="#install">install</a>
          <a class="btn ghost" href="demo/">try it in the browser</a>
        </p>
      </article>
-->
    </div>
  </div>

</section>

<!-- ================================================================ -->

<section id="try">
  <h2>try it</h2>

  <p>A riscv64 Linux with slosh as the thing you land in, booted right here.
  Nothing is installed, nothing leaves the tab, and the machine is throwaway
  — reload for a fresh one. About 11&nbsp;MiB streams in while it boots.
  <a href="demo/">Prefer a whole tab?</a></p>

  <!-- The facade: this section costs a poster until the button is pushed.
       The click swaps in an iframe on demo/ -- an iframe because the
       emulator's emscripten glue owns its globals by name, and isolation is
       what keeps this page's scripts and that blob out of each other's
       namespaces. Phones navigate to the page instead (the script at the
       bottom): wasm under a soft keyboard in an iframe helps nobody. -->
  <div class="try-stage" id="try_stage">
    <button class="boot" type="button" id="boot_btn">boot the machine</button>
    <p class="aside">riscv64 · TinyEMU, compiled to wasm · yours until you reload</p>
  </div>
  <p class="try-live" id="try_live" hidden>
    <button class="boot ghost" type="button" id="kill_btn">power off</button>
    <span class="aside">forgets the machine entirely — boot another any time</span>
  </p>
</section>

<!-- ================================================================ -->

<section id="install">
  <h2>install</h2>

<p>Prebuilt binaries for the popular platforms live at
<a href="dist/">slosh.foo/dist</a> — one static file each, checksummed. The
tabs below are the short roads to one: an installer for linux, a brew formula
for macos, a signed pacman repo for arch, a zip for windows. Building from
source works too, but you never need to.</p>

  <!-- Pure CSS tabs: hidden radios, labels drawn like a slosh tab strip,
       one panel per platform. The only JavaScript is the preselect at the
       bottom of the page, which checks the radio for the platform reading
       this; without it the linux tab is simply checked in the HTML. -->
  <div class="install">
    <input class="os" type="radio" name="os" id="os-linux" checked>
    <input class="os" type="radio" name="os" id="os-macos">
    <input class="os" type="radio" name="os" id="os-arch">
    <input class="os" type="radio" name="os" id="os-windows">
    <input class="os" type="radio" name="os" id="os-source">

    <div class="os-tabs">
      <label for="os-linux">linux</label>
      <label for="os-macos">macos</label>
      <label for="os-arch">arch</label>
      <label for="os-windows">windows</label>
      <label for="os-source">source</label>
    </div>

    <div class="os-panel" id="install-linux">
      <div class="cmd" data-copy="curl -fsSL https://slosh.foo/install.sh | sudo sh">
        <pre><code><span class="prompt">$</span> curl -fsSL https://slosh.foo/install.sh | sudo sh</code></pre>
        <button class="copy" type="button" aria-label="Copy command">copy</button>
      </div>
      <div class="cmd" data-copy="curl -fsSL https://slosh.foo/install.sh | PREFIX=$HOME/.local sh">
        <pre><code><span class="prompt">$</span> curl -fsSL https://slosh.foo/install.sh | PREFIX=$HOME/.local sh   <span class="c"># no root</span></code></pre>
        <button class="copy" type="button" aria-label="Copy command">copy</button>
      </div>
      <p class="aside">Piping a URL into a shell should make you flinch —
      <a href="install.sh">read it first</a>, it is short: it picks the
      prebuilt static binary for your architecture from
      <a href="dist/">dist/</a>, checks it against the published SHA256SUMS,
      and puts the one file in <code>PREFIX/bin</code>. The sudo in the first
      line is only for writing to <code>/usr/local/bin</code>; the second line
      needs no root at any step and lands it in <code>~/.local/bin</code>.
      Nothing compiled, nothing else touched.</p>
    </div>

    <div class="os-panel" id="install-macos">
      <div class="cmd" data-copy="brew tap sl0p/slosh https://git.sl0p.foo/homebrew-slosh.git &amp;&amp; brew install slosh">
        <pre><code><span class="prompt">$</span> brew tap sl0p/slosh https://git.sl0p.foo/homebrew-slosh.git
<span class="prompt">$</span> brew install slosh</code></pre>
        <button class="copy" type="button" aria-label="Copy commands">copy</button>
      </div>
      <p class="aside">No Homebrew? The linux tab's installer works here too —
      on Apple silicon it fetches the signed prebuilt binary from
      <a href="dist/">dist/</a>, verifies it, and installs that. No Xcode, no
      build.</p>
    </div>

    <div class="os-panel" id="install-arch">
      <div class="cmd" data-copy="sudo pacman -Sy slosh">
        <pre><code><span class="c"># /etc/pacman.conf</span>
[slosh]
Server = https://slosh.foo/arch/$arch

<span class="prompt">$</span> sudo pacman -Sy slosh</code></pre>
        <button class="copy" type="button" aria-label="Copy command">copy</button>
      </div>
      <p class="aside">Built, signed packages. Enroll the signing key first —
      the key, the fingerprint to check and the PKGBUILD are in
      <a href="https://git.sl0p.foo/slosh.git/tree/contrib/arch">contrib/arch</a>,
      the same instructions at <a href="arch/">arch/</a>.</p>
    </div>

    <div class="os-panel" id="install-windows">
      <div class="cmd">
        <pre><code><span class="prompt">&gt;</span> curl.exe -LO https://slosh.foo/dist/slosh-&lt;version&gt;-windows-x86_64.zip
<span class="prompt">&gt;</span> tar xf slosh-*-windows-x86_64.zip   <span class="c"># tar ships with Windows 10+</span></code></pre>
      </div>
      <p class="aside">Pick the newest zip from <a href="dist/">dist/</a> —
      x86-64 and ARM64, Windows 10/11. Inside is the same one binary:
      <code>slosh.exe</code>, no runtime dependency beyond the OS. Panes are
      ConPTYs, sessions are AF_UNIX sockets, everything on this page works
      there — <a href="docs/windows.html">the details</a>.</p>
    </div>

    <div class="os-panel" id="install-source">
      <div class="cmd">
        <pre><code><span class="prompt">$</span> git clone https://slosh.foo/src slosh &amp;&amp; cd slosh
<span class="prompt">$</span> make vendor    <span class="c"># the vendored terminal core, once</span>
<span class="prompt">$</span> make           <span class="c"># about a second</span>
<span class="prompt">$</span> sudo install build/slosh /usr/local/bin/</code></pre>
      </div>
      <p class="aside">For the curious — the tabs above hand you this same
      binary prebuilt. Needs <a href="https://ziglang.org">zig</a> 0.16 and
      nothing else: no cmake, no autotools, no libraries. The result is one
      static binary.</p>
    </div>
  </div>
</section>
</main>

<script src="recordings/player.js"></script>
<script>
// The scripts on the page: the copy buttons, the install preselect and the
// feature tour. No framework, no tracker, nothing fetched from anywhere but
// here.
for (const box of document.querySelectorAll(".cmd[data-copy]")) {
  const btn = box.querySelector(".copy");
  btn.addEventListener("click", async () => {
    try {
      await navigator.clipboard.writeText(box.dataset.copy);
      btn.textContent = "copied";
      setTimeout(() => (btn.textContent = "copy"), 1200);
    } catch {
      btn.textContent = "select it";
    }
  });
}

// The little logo in the corner: on while the tour is what you are looking
// at. The big logo scrolling away opens the show; the try section arriving
// closes it -- the dead space the little one floats in is the tour's, and
// over the demo box or the install tabs it is just in the way. The tour
// itself is the wrong closing signal: its negative bottom margin leaves its
// border box under the sections that follow. The rootMargin keeps the last
// tour step from tripping it (the try section already rides high in the viewport there, pulled up by the tour's exit margin),
// and a section already scrolled past counts as arrived, not as gone.
const bigLogo = document.querySelector(".hero .logo");
const littleLogo = document.querySelector(".logo-float");
const tryEl = document.getElementById("try");
if (bigLogo && littleLogo && "IntersectionObserver" in window) {
  const seen = { heroGone: false, pastTour: false };
  const apply = () =>
    littleLogo.classList.toggle("show", seen.heroGone && !seen.pastTour);
  new IntersectionObserver(([e]) => {
    seen.heroGone = !e.isIntersecting;
    apply();
  }).observe(bigLogo);
  if (tryEl)
    new IntersectionObserver(
      ([e]) => {
        seen.pastTour = e.isIntersecting || e.boundingClientRect.top < 0;
        apply();
      },
      { rootMargin: "0px 0px -45% 0px" }
    ).observe(tryEl);
}

// ...and vertically centred in the air between the viewport top and the
// pinned terminal's top edge. That edge is (viewport - the stage's lift
// padding) / 2 - half the player, which moves with both the window and the
// player's own height -- so it is measured, not guessed in CSS. Hidden when
// the air runs out rather than allowed to overlap the terminal.
const stagePin = document.querySelector(".stage-pin");
function placeLittleLogo() {
  const player = stagePin && stagePin.querySelector(".stage-active");
  if (!player || !littleLogo) return;
  const pad = parseFloat(getComputedStyle(stagePin).paddingBottom) || 0;
  const termTop = (innerHeight - pad) / 2 - player.offsetHeight / 2;
  const air = termTop - littleLogo.offsetHeight;
  littleLogo.style.top = Math.max(8, air / 2) + "px";
  littleLogo.style.visibility = air >= 16 ? "" : "hidden";
}
if (stagePin && littleLogo) {
  placeLittleLogo();
  window.addEventListener("resize", placeLittleLogo);
  // The players size themselves when their casts arrive -- and the pin is a
  // 100vh box that never resizes, so watch the players, not the pin.
  const ro = new ResizeObserver(placeLittleLogo);
  for (const el of stagePin.querySelectorAll("[data-sloshcast]")) ro.observe(el);
}

// The demo, booted on request: the iframe exists only after the click, so
// the front page keeps costing two files until someone asks for a machine.
// Small screens go to the page itself instead of embedding it.
const bootBtn = document.getElementById("boot_btn");
if (bootBtn) {
  const stage = document.getElementById("try_stage");
  const live = document.getElementById("try_live");
  const poster = [...stage.children]; // stashed while the machine runs
  bootBtn.addEventListener("click", () => {
    if (matchMedia("(max-width: 54rem)").matches) {
      location.href = "demo/";
      return;
    }
    stage.classList.add("booted"); // full height first: the guest reads the
    const frame = document.createElement("iframe"); // room once, at boot
    frame.src = "demo/?embed=1";
    frame.className = "try-frame";
    frame.title = "slosh, running in a riscv64 machine in this page";
    stage.replaceChildren(frame);
    // The stage just grew from a strip to most of a viewport, which shoves
    // the layout around under the reader; follow it, and land the machine
    // centred. Smooth for free -- the page scrolls smooth globally.
    stage.scrollIntoView({ block: "center" });
    frame.addEventListener("load", () => frame.contentWindow.focus());
    live.hidden = false;
  });
  // Power off: dropping the iframe out of the DOM tears the whole machine
  // down -- emulator, kernel, disk cache, the lot -- and the poster returns
  // from the stash, offering to do it all again.
  document.getElementById("kill_btn").addEventListener("click", () => {
    stage.classList.remove("booted");
    stage.replaceChildren(...poster);
    live.hidden = true;
    stage.scrollIntoView({ block: "center" });
  });
}

// The install box opens on the platform reading it; the tabs are CSS.
const ua = navigator.userAgent;
const os = /Windows/i.test(ua) ? "windows" : /Mac/i.test(ua) ? "macos" : "linux";
const radio = document.getElementById("os-" + os);
if (radio) radio.checked = true;

// The feature tour: the step under the middle of the viewport is active,
// and picks which recording plays on the pinned terminal.
const tour = document.querySelector(".scrolly");
if (tour) {
  const mounts = [...tour.querySelectorAll(".stage-pin [data-sloshcast]")];
  const steps = [...tour.querySelectorAll(".step")];
  const ctl = (el) => el._sloshcast;
  let current = null; // the first activation always plays

  const show = (name) => {
    if (!name || name === current) return;
    current = name;
    for (const el of mounts) {
      const on = el.dataset.name === name;
      el.classList.toggle("stage-active", on);
      if (!ctl(el)) continue; // still fetching; the sloshcast event catches up
      if (on) {
        ctl(el).restart();
        ctl(el).play();
      } else ctl(el).pause();
    }
  };

  const mid = new IntersectionObserver(
    (entries) => {
      for (const e of entries)
        if (e.isIntersecting) {
          for (const s of steps) s.classList.toggle("active", s === e.target);
          show(e.target.dataset.cast);
        }
    },
    { rootMargin: "-45% 0px -45% 0px" },
  );
  for (const s of steps) mid.observe(s);

  // Nothing plays while the tour is off screen.
  new IntersectionObserver((entries) => {
    for (const e of entries) {
      const active = mounts.find((m) => m.classList.contains("stage-active"));
      if (!active || !ctl(active)) continue;
      if (e.isIntersecting) ctl(active).play();
      else ctl(active).pause();
    }
  }).observe(tour);

  // A cast that finished loading while its step was already active.
  tour.addEventListener("sloshcast", (e) => {
    if (e.target.classList.contains("stage-active")) {
      ctl(e.target).fit();
      ctl(e.target).play();
    }
  });
}
</script>

</body>
</html>