https://exe.dev/static/topbar.js

1(function () {
2    "use strict";
3    var demoButtonEnabled = !window.__EXE_PRESENTATION__ || window.__EXE_PRESENTATION__.demoButtonEnabled !== false;
4    var nav = document.createElement("nav");
5    nav.className = "topbar";
6    nav.setAttribute("data-nav-collapse", "");
7    nav.innerHTML =
8        '<div class="topbar-left" data-nav-collapse-links>' +
9            '<a href="/" class="topbar-logo"><img src="/static/exy.png" alt="exe.dev" width="24" height="24" /></a>' +
10            '<a href="/" class="topbar-logo-text">exe.dev</a>' +
11            '<a href="/docs" class="topbar-link topbar-link-docs">docs</a>' +
12            '<a href="https://blog.exe.dev" class="topbar-link topbar-link-blog">blog</a>' +
13            '<a href="/pricing" class="topbar-link">pricing</a>' +
14            '<div class="nav-dropdown">' +
15                '<button type="button" class="topbar-link nav-dropdown-trigger" aria-haspopup="true" aria-expanded="false">uses<svg class="nav-dropdown-caret" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"/></svg></button>' +
16                '<div class="nav-dropdown-menu" role="menu">' +
17                    '<a href="/sandbox" class="nav-dropdown-item" role="menuitem"><span class="nav-dropdown-title">Sandbox</span><span class="nav-dropdown-desc">Disposable VMs for AI agents, by the second.</span></a>' +
18                    '<a href="/vps" class="nav-dropdown-item" role="menuitem"><span class="nav-dropdown-title">VPS</span><span class="nav-dropdown-desc">Persistent Linux VMs with HTTPS and SSH.</span></a>' +
19                    '<a href="/production" class="nav-dropdown-item" role="menuitem"><span class="nav-dropdown-title">Production</span><span class="nav-dropdown-desc">Cloud infrastructure for your business.</span></a>' +
20                '</div>' +
21            '</div>' +
22        '</div>' +
23        '<div class="topbar-right">' +
24            (demoButtonEnabled ? '<a href="/demo" class="topbar-demo"><span class="topbar-demo-full">Get a Demo</span><span class="topbar-demo-short">Demo</span></a>' : '') +
25            '<a href="/auth" class="topbar-login"><span class="topbar-login-full">Login / Register</span><span class="topbar-login-short">Login</span></a>' +
26        '</div>';
27    document.body.insertBefore(nav, document.body.firstChild);
28
29    // "uses" dropdown: hover opens via CSS; click toggles; Escape / outside click dismiss.
30    var dd = nav.querySelector(".nav-dropdown");
31    if (dd) {
32        var trigger = dd.querySelector(".nav-dropdown-trigger");
33        var setOpen = function (open) {
34            dd.classList.toggle("open", open);
35            trigger.setAttribute("aria-expanded", open ? "true" : "false");
36        };
37        trigger.addEventListener("click", function (e) {
38            e.preventDefault();
39            setOpen(!dd.classList.contains("open"));
40        });
41        document.addEventListener("click", function (e) {
42            if (!dd.contains(e.target)) setOpen(false);
43        });
44        document.addEventListener("keydown", function (e) {
45            if (e.key === "Escape") setOpen(false);
46        });
47    }
48
49    // Keep the bar on one line. Loaded here rather than from each page's HTML
50    // so every page that uses this topbar gets it, and only those pages pay
51    // for it. Deferred so it measures a laid-out bar.
52    var script = document.createElement("script");
53    script.src = "/static/nav-collapse.js";
54    script.defer = true;
55    document.head.appendChild(script);
56})();