path: root/web/index.html

<!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.">
<!-- The embed card, for Discord/X/Slack link previews. card.png is drawn
     from logo.txt by web/gen-card; theme-color is the accent stripe Discord
     puts on the embed. URLs are absolute because scrapers want them so. -->
<meta property="og:title" content="slosh: a terminal multiplexer">
<meta property="og:description" content="Panes, tabs, sessions you can detach from. One static binary, written in C on libghostty-vt.">
<meta property="og:url" content="https://slosh.foo/">
<meta property="og:type" content="website">
<meta property="og:image" content="https://slosh.foo/card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://slosh.foo/card.png">
<meta name="theme-color" content="#ff5fd7">
<link rel="stylesheet" href="site.css">
<link rel="stylesheet" href="recordings/player.css">
</head>
<body>

<a class="logo-float" href="#" aria-label="slosh: back to top">
    <span class="logo-art"></span>
</a>

<main>

<header class="hero">
<div class="logo logo-art" role="img" aria-label="slosh"></div>
  <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</a>
    <a class="btn ghost" href="docs/">browse docs</a>
    <!-- @VERSION@ is stamped by web/build-site from ./VERSION, which the
         release invariant keeps equal to the newest tag -->
    <a class="btn ghost" href="https://github.com/sl0p-foo/slosh/releases/latest">@VERSION@</a>
  </p>
</header>

<section id="different" style='margin-top:0;'>
  <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/themes.json" data-loop data-name="themes"></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, what else?</h3>
        <p>One keycombo to split, or just click, because we don't hate the mouse.</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 </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>attach from two terminals at once, both can type</li>
          <li>keep separate sessions for separate projects and switch between them</li>
          <li>if a command exits while you're away, its output and exit code are still there</li>
        </ul>
      </article>

      <article class="step" data-cast="reflow">
        <h3>Responsive terminal layouts.</h3>
        <p>Layouts (re)flow in the way you expect, nothing drifts.</p>
        <ul>
          <li>rotate the whole layout in place</li>
          <li>shrink the window and panes collapse into a list</li>
          <li>make it bigger again and your layout comes back</li>
        </ul>
      </article>

      <article class="step" data-cast="config">
        <h3>Make it yours, live.</h3>
        <p>One config file, hot-reloaded. Press <kbd>C-a</kbd>
        <kbd>e</kbd> to <kbd>$EDITOR</kbd> it in place.</p>
        <ul>
          <li>retheme the whole session with one magic vimfu substitution</li>
          <li>padding, gaps, titles: every knob, applied as you watch</li>
          <li><code>compact true</code>: for those who value their terminal real estate.</li>
        </ul>
      </article>

      <article class="step" data-cast="themes">
        <h3>Themes, and a picker.</h3>
        <p>Press <kbd>C-a</kbd> <kbd>t</kbd> to browse the shipped themes and
        your own.</p>
        <ul>
          <li>live preview on your actual session as you move through the list</li>
          <li>type to filter, <kbd>Esc</kbd> to back out</li>
          <li><kbd>C-s</kbd> saves your pick to your config</li>
        </ul>
      </article>

      <article class="step" data-cast="shaders">
        <h3>Nifty visual effects.</h3>
        <p>Tints, dimming, spotlights and more, applied to a pane or its
        border. Write your own or load one of the presets.</p>
        <ul>
          <li>a spotlight that follows your cursor</li>
          <li><code>:load shine</code> runs a glint around the border</li>
          <li>a background pane's border flashes when it rings the bell</li>
        </ul>
      </article>

      <article class="step" data-cast="scripting">
        <h3>Built to be driven.</h3>
        <p>Control everything from a script (or an AI agent) with simple
        JSON commands.</p>
        <ul>
          <li>split, rename and arrange panes from a script</li>
          <li>programs can put status text and buttons in their pane's border</li>
          <li>button clicks are sent back to the program</li>
        </ul>
      </article>

      <article class="step" data-cast="extras">
        <h3>Floats, and the small comforts.</h3>
        <p><kbd>C-a</kbd> <kbd>F</kbd> opens a floating shell on top of
        whatever you're doing, for a quick command or a man page.</p>
        <ul>
          <li>move and resize it from the keyboard</li>
          <li><code>exit</code> closes it, your layout stays as it was</li>
          <li><kbd>C-a</kbd> <kbd>?</kbd> shows a cheatsheet of your current
          keybindings</li>
        </ul>
      </article>
    </div>
  </div>

</section>

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

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

  <p>Boot a small Linux machine with slosh in your browser. Nothing gets
  installed, and reloading the page gives you a fresh one.
  <a href="demo/">Open it in its own tab.</a></p>

  <div class="try-stage" id="try_stage">
    <button class="boot" type="button" id="boot_btn">boot the machine</button>
                    <p class="aside">riscv64 · <a href='https://bellard.org/tinyemu/'>TinyEMU</a>, compiled to wasm</p>
  </div>
  <p class="try-live" id="try_live" hidden>
    <button class="boot ghost" type="button" id="kill_btn">power off</button>
  </p>
</section>

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

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

  <p>
    Prebuilt static binaries for Linux, macOS and Windows (x86-64 and ARM64)
    are on the
    <a href="https://github.com/sl0p-foo/slosh/releases/latest">latest release</a>
    page. The macOS binary is signed and notarized.

    Or install with a package manager:
  </p>



  <div class="install">
    <input class="os" type="radio" name="os" id="os-macos" checked>
    <input class="os" type="radio" name="os" id="os-arch">
    <input class="os" type="radio" name="os" id="os-source">

    <div class="os-tabs">
      <label for="os-macos">macOS (homebrew)</label>
      <label for="os-arch">linux (pacman)</label>
      <label for="os-source">source</label>
    </div>

    <div class="os-panel" id="install-macos">
      <div class="cmd" data-copy="brew tap sl0p-foo/slosh &amp;&amp; brew install slosh">
        <pre><code><span class="prompt">$</span> brew tap sl0p-foo/slosh
<span class="prompt">$</span> brew install slosh</code></pre>
        <button class="copy" type="button" aria-label="Copy commands">copy</button>
      </div>
      <p class="aside">Builds from source in under a minute; the only
      dependency is <a href="https://ziglang.org">zig</a>, which the formula
      pulls in.</p>
    </div>

    <div class="os-panel" id="install-arch">
      <div class="cmd" data-copy="curl -fsSLO https://slosh.foo/arch/slosh.asc &amp;&amp; sudo pacman-key --add slosh.asc &amp;&amp; sudo pacman-key --lsign-key 0F67C909938CFFA8A76B59FD8D69B55A0E9056B9">
        <pre><code><span class="c"># enroll the signing key, once</span>
<span class="prompt">$</span> curl -fsSLO https://slosh.foo/arch/slosh.asc
<span class="prompt">$</span> sudo pacman-key --add slosh.asc
<span class="prompt">$</span> sudo pacman-key --lsign-key 0F67C909938CFFA8A76B59FD8D69B55A0E9056B9</code></pre>
        <button class="copy" type="button" aria-label="Copy commands">copy</button>
      </div>
      <div class="cmd" data-copy="[slosh]
Server = https://slosh.foo/arch/$arch">
        <pre><code><span class="c"># add to /etc/pacman.conf</span>
[slosh]
Server = https://slosh.foo/arch/$arch</code></pre>
        <button class="copy" type="button" aria-label="Copy pacman.conf section">copy</button>
      </div>
      <div class="cmd" data-copy="sudo pacman -Sy slosh">
        <pre><code><span class="prompt">$</span> sudo pacman -Sy slosh
<span class="prompt">$</span> sudo pacman -S ghostty-terminfo   <span class="c"># optional (x86_64 only)</span></code></pre>
        <button class="copy" type="button" aria-label="Copy command">copy</button>
      </div>
      <p class="aside">Signed packages. You can check the key against
      <a href="https://github.com/sl0p-foo/slosh/blob/master/contrib/arch/slosh.asc">the copy in the repo</a>.
      To build it yourself, the PKGBUILD is in
      <a href="https://github.com/sl0p-foo/slosh/tree/master/contrib/arch">contrib/arch</a>.
      More details at <a href="arch/">arch/</a>.</p>
    </div>

    <div class="os-panel" id="install-source">
      <div class="cmd">
        <pre><code><span class="prompt">$</span> git clone https://github.com/sl0p-foo/slosh.git &amp;&amp; cd slosh
<span class="prompt">$</span> make vendor    <span class="c"># first time only</span>
<span class="prompt">$</span> make all       <span class="c"># about a second</span>
<span class="prompt">$</span> sudo make install                  <span class="c"># or: make install PREFIX=$HOME/.local</span></code></pre>
      </div>
      <p class="aside">Only needs <a href="https://ziglang.org">zig</a> 0.16,
      and you get a single static binary. <code>make&nbsp;install</code> also
      installs the manpages and an example config. Building for Windows is
      <a href="docs/windows.html">covered here</a>.</p>
    </div>
  </div>
</section>

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

  <p>
    slosh is developed in the open at
    <a href="https://github.com/sl0p-foo/slosh">github.com/sl0p-foo/slosh</a>:
    issues, patches and pull requests welcome.
  </p>

  <p>
    For questions, ideas, or to show off your setup, join the
    <a href="https://discord.gg/9rmHTNsnKY">sl0p discord</a>.
  </p>
</section>
</main>

<footer class="foot">
  slosh is a <a href="https://sl0p.foo">sl0p.foo</a> product
</footer>

<script>
window.SLOSHCAST_SPEED = 1.75;
</script>
<script src="recordings/player.js"></script>
<script>
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";
    }
  });
}

const heroEl = document.querySelector(".hero");
const littleLogo = document.querySelector(".logo-float");
const tryEl = document.getElementById("try");
if (heroEl && littleLogo && "IntersectionObserver" in window) {
  const seen = { heroGone: false, pastTour: false, clear: true };
  const apply = () =>
    littleLogo.classList.toggle(
      "show",
      seen.heroGone && !seen.pastTour && seen.clear
    );
  new IntersectionObserver(([e]) => {
    seen.heroGone = !e.isIntersecting;
    apply();
  }).observe(heroEl);
  if (tryEl)
    new IntersectionObserver(
      ([e]) => {
        seen.pastTour = e.isIntersecting || e.boundingClientRect.top < 0;
        apply();
      },
      { rootMargin: "0px 0px -45% 0px" }
    ).observe(tryEl);

  const stagePinEl = document.querySelector(".stage-pin");
  let measuring = false;
  const collide = () => {
    measuring = false;
    const player = stagePinEl && stagePinEl.querySelector(".stage-active");
    if (!player) return;
    const p = player.getBoundingClientRect();
    const l = littleLogo.getBoundingClientRect();
    seen.clear = p.top > l.bottom + 8 || p.bottom < l.top - 8;
    apply();
  };
  addEventListener(
    "scroll",
    () => {
      if (!measuring) {
        measuring = true;
        requestAnimationFrame(collide);
      }
    },
    { passive: true }
  );
  collide();
}

// One column: the hero itself hovers (position: sticky, in site.css), and
// the stage sticks just under it -- at the hero's height, which wrapping
// buttons keep from being any fixed number. Measured here, spent in the
// stylesheet as --hero-h.
if (heroEl) {
  const setHeroH = () =>
    document.documentElement.style.setProperty(
      "--hero-h",
      heroEl.offsetHeight + "px"
    );
  setHeroH();
  new ResizeObserver(setHeroH).observe(heroEl);
}

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);
  const ro = new ResizeObserver(placeLittleLogo);
  for (const el of stagePin.querySelectorAll("[data-sloshcast]")) ro.observe(el);
}

const bootBtn = document.getElementById("boot_btn");
if (bootBtn) {
  const stage = document.getElementById("try_stage");
  const live = document.getElementById("try_live");
  const poster = [...stage.children];
  bootBtn.addEventListener("click", () => {
    if (matchMedia("(max-width: 54rem)").matches) {
      location.href = "demo/";
      return;
    }
    stage.classList.add("booted");
    const frame = document.createElement("iframe");
    frame.src = "demo/?embed=1";
    frame.className = "try-frame";
    frame.title = "slosh, running in a riscv64 machine in this page";
    stage.replaceChildren(frame);
    stage.scrollIntoView({ block: "center" });
    frame.addEventListener("load", () => frame.contentWindow.focus());
    live.hidden = false;
  });
  document.getElementById("kill_btn").addEventListener("click", () => {
    stage.classList.remove("booted");
    stage.replaceChildren(...poster);
    live.hidden = true;
    stage.scrollIntoView({ block: "center" });
  });
}

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;

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;

  for (const s of steps) {
    s.addEventListener("click", (ev) => {
      if (s.classList.contains("active")) return;
      if (ev.target.closest("a")) return;
      if (!getSelection().isCollapsed) return;
      s.scrollIntoView({ block: "center" });
    });
  }

  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;
      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);

  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);

  tour.addEventListener("sloshcast", (e) => {
    if (e.target.classList.contains("stage-active")) {
      ctl(e.target).fit();
      ctl(e.target).play();
    }
  });
}
</script>

</body>
</html>