Add shout landing page
This commit is contained in:
parent
56d982db17
commit
60eb31cfc9
263
index.html
Normal file
263
index.html
Normal file
|
|
@ -0,0 +1,263 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>shout — test your CLI</title>
|
||||||
|
<meta name="description" content="Write shell sessions. Run them as tests. That's it.">
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg: #0a0a0a;
|
||||||
|
--fg: #b0b0b0;
|
||||||
|
--bright: #e0e0e0;
|
||||||
|
--green: #4ec966;
|
||||||
|
--red: #e55;
|
||||||
|
--dim: #555;
|
||||||
|
--accent: #4ec966;
|
||||||
|
--code-bg: #111;
|
||||||
|
--border: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
html { font-size: 16px; }
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: var(--bg);
|
||||||
|
color: var(--fg);
|
||||||
|
font-family: 'SF Mono', 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Menlo', 'Consolas', monospace;
|
||||||
|
line-height: 1.6;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
max-width: 680px;
|
||||||
|
margin: 0 auto;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 6rem 0 3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2.5rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--bright);
|
||||||
|
letter-spacing: -0.03em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1 span {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tagline {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: var(--dim);
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.install {
|
||||||
|
margin-top: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--code-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
padding: 0.6rem 1.2rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: var(--bright);
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
transition: border-color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.install:hover {
|
||||||
|
border-color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.install .hint {
|
||||||
|
color: var(--dim);
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 3rem 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--dim);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bright { color: var(--bright); }
|
||||||
|
.green { color: var(--green); }
|
||||||
|
.red { color: var(--red); }
|
||||||
|
.dim { color: var(--dim); }
|
||||||
|
|
||||||
|
pre {
|
||||||
|
background: var(--code-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 1.2rem 1.4rem;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
line-height: 1.7;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre code {
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prompt { color: var(--dim); }
|
||||||
|
.cmd { color: var(--bright); }
|
||||||
|
.output { color: var(--fg); }
|
||||||
|
.comment { color: var(--dim); font-style: italic; }
|
||||||
|
.wildcard { color: var(--accent); }
|
||||||
|
.exit-code { color: var(--red); }
|
||||||
|
.pass { color: var(--green); }
|
||||||
|
|
||||||
|
.features {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
gap: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature {
|
||||||
|
padding: 1.2rem;
|
||||||
|
background: var(--code-bg);
|
||||||
|
border: 1px solid var(--border);
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature h3 {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--bright);
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature p {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: var(--dim);
|
||||||
|
margin: 0;
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
padding: 3rem 0;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
color: var(--dim);
|
||||||
|
font-size: 0.8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a {
|
||||||
|
color: var(--fg);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:hover {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (max-width: 520px) {
|
||||||
|
header { padding: 3rem 0 2rem; }
|
||||||
|
h1 { font-size: 2rem; }
|
||||||
|
.features { grid-template-columns: 1fr; }
|
||||||
|
section { padding: 2rem 0; }
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<header>
|
||||||
|
<h1><span>$</span> shout</h1>
|
||||||
|
<p class="tagline">Write shell sessions. Run them as tests.</p>
|
||||||
|
<div class="install" onclick="navigator.clipboard.writeText('bun install -g @because/shout')">
|
||||||
|
<span class="prompt">$</span> <span class="cmd">bun install -g @because/shout</span>
|
||||||
|
<span class="hint">click to copy</span>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Write a test</h2>
|
||||||
|
<p>A <code>.shout</code> file is just a shell session. Commands start with <code class="bright">$</code>, everything else is expected output.</p>
|
||||||
|
<pre><code><span class="prompt">$</span> <span class="cmd">echo hello</span>
|
||||||
|
<span class="output">hello</span>
|
||||||
|
|
||||||
|
<span class="prompt">$</span> <span class="cmd">ls missing</span>
|
||||||
|
<span class="output">ls: missing: No such file or directory</span>
|
||||||
|
<span class="exit-code">[1]</span>
|
||||||
|
|
||||||
|
<span class="prompt">$</span> <span class="cmd">brew --version</span>
|
||||||
|
<span class="output">Homebrew </span><span class="wildcard">...</span></code></pre>
|
||||||
|
<p><code class="wildcard">...</code> matches anything — inline or across lines. <code class="exit-code">[1]</code> asserts the exit code.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Run it</h2>
|
||||||
|
<pre><code><span class="prompt">$</span> <span class="cmd">shout</span>
|
||||||
|
<span class="pass">...............
|
||||||
|
15 passed</span> <span class="dim">in 23ms</span></code></pre>
|
||||||
|
<p>Each file gets a fresh temp directory and its own <code>/bin/sh</code> session. State carries between commands within a file.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Update expectations</h2>
|
||||||
|
<pre><code><span class="prompt">$</span> <span class="cmd">shout --update</span></code></pre>
|
||||||
|
<p>Rewrites your <code>.shout</code> files with the actual output. No more copy-pasting from the terminal.</p>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h2>Features</h2>
|
||||||
|
<div class="features">
|
||||||
|
<div class="feature">
|
||||||
|
<h3>Wildcards</h3>
|
||||||
|
<p><code>...</code> matches anything — inline for partial lines, standalone for multiple lines.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<h3>Exit codes</h3>
|
||||||
|
<p><code>[N]</code> asserts a specific exit code. <code>[*]</code> matches any non-zero code.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<h3>Parallel</h3>
|
||||||
|
<p><code>--parallel</code> runs test files concurrently. Each gets its own shell.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<h3>Timeouts</h3>
|
||||||
|
<p><code>--timeout 5s</code> per-command timeout. Supports <code>ms</code>, <code>s</code>, <code>m</code>.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<h3>PATH control</h3>
|
||||||
|
<p><code>--path ./bin</code> prepends to PATH. Test your local builds.</p>
|
||||||
|
</div>
|
||||||
|
<div class="feature">
|
||||||
|
<h3>Verbose</h3>
|
||||||
|
<p><code>-v</code> prints each command as it runs. See what's happening.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<a href="https://github.com/because/shout">GitHub</a> · <a href="https://www.npmjs.com/package/@because/shout">npm</a>
|
||||||
|
</footer>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user