defunkt/shout
1
0
Fork 0
Code Pull Requests Activity

Refactor sections to use consistent box styling

Browse Source
This commit is contained in:
user.email 2026-04-03 09:59:08 -07:00
parent 691cebbfee
commit 6fe643bf19
1 changed files with 80 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

131
web/index.html
View File

@ -11,7 +11,7 @@
:root { :root {
--bg: #fff; --bg: #fff;
--fg: #444; --fg: #444;
--bright: #1a1a1a; --bright: #000;
--green: #1a7f37; --green: #1a7f37;
--red: #cf222e; --red: #cf222e;
--dim: #888; --dim: #888;
@ -64,6 +64,7 @@
line-height: 1; line-height: 1;
display: flex; display: flex;
align-items: baseline; align-items: baseline;
vertical-align: baseline;
} }
h1 .dollar { h1 .dollar {
@ -126,17 +127,14 @@
opacity: 0.85; opacity: 0.85;
} }
/* ---- "Write a test" box ---- */ /* ---- Section boxes ---- */
.hero-section { .section-box {
padding: 40px 0 24px;
}
.write-box {
background: var(--code-bg); background: var(--code-bg);
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 8px;
padding: 20px; padding: 20px;
padding-top: 16px; padding-top: 16px;
margin-bottom: 24px;
} }
.two-col { .two-col {
@ -148,7 +146,6 @@
.two-col .explain h2 { .two-col .explain h2 {
margin-bottom: 16px; margin-bottom: 16px;
color: var(--fg);
} }
.two-col .explain p { .two-col .explain p {
@ -162,41 +159,48 @@
} }
.two-col .explain .feature code { .two-col .explain .feature code {
padding: 2px 6px; padding: 2px 0px;
border-radius: 3px; border-radius: 3px;
font-size: 13px; font-size: 13px;
} }
.write-box pre { .section-box pre {
background: var(--bg); background: var(--bg);
margin-bottom: 0; margin-bottom: 0;
} }
.section-box pre + pre {
margin-top: 12px;
}
.section-box p:last-child {
margin-bottom: 0;
}
@media (max-width: 680px) { @media (max-width: 680px) {
.two-col { .two-col {
grid-template-columns: 1fr; grid-template-columns: 1fr;
gap: 24px; gap: 24px;
} }
.write-box { .section-box {
padding: 19px; padding: 19px;
} }
} }
/* ---- Sections ---- */
section {
padding: 0 0 32px 0;
}
h2 { h2 {
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
color: var(--dim); color: var(--fg);
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.1em; letter-spacing: 0.1em;
margin-bottom: 24px; margin-bottom: 16px;
} }
section {
padding: 0 0 32px 0;
}
p { p {
margin-bottom: 16px; margin-bottom: 16px;
font-size: 15px; font-size: 15px;
@ -259,7 +263,6 @@
header { padding: 40px 0 0; } header { padding: 40px 0 0; }
h1 { font-size: 44px; } h1 { font-size: 44px; }
.subtitle { font-size: 16px; } .subtitle { font-size: 16px; }
section { padding: 24px 0; }
} }
</style> </style>
</head> </head>
@ -274,17 +277,18 @@
</div> </div>
</header> </header>
<div class="hero-section"> <div style="padding: 40px 0 0;">
<div class="write-box"> <div class="section-box">
<div class="two-col"> <div class="two-col">
<div class="explain"> <div class="explain">
<h2>✓ Write a test</h2> <h2>✓ Write a test</h2>
<p>A <code class="bright">.shout</code> file is a shell session.</p> <p>Each <code class="bright">.shout</code> file is a session.</p>
<p class="feature">Commands start with <code class="bright">$</code>.</p> <p class="feature">Commands start with <code class="prompt">$</code>.</p>
<p class="feature">Everything else is the expected output.</p> <p class="feature">Everything else is expected output.</p>
<p class="feature"><code class="wildcard">...</code> matches anything &mdash; inline or across lines.</p> <p class="feature"><code class="wildcard">...</code> matches anything &mdash; inline or across lines.</p>
<p class="feature"><code class="exit-code">[1]</code> asserts the exit code. Default expects 0.</p> <p class="feature"><code class="exit-code">[1]</code> asserts the exit code. Default expects 0.</p>
<p class="feature">Lines starting with <code class="dim">#</code> are comments.</p> <p class="feature">Lines starting with <code class="dim">#</code> are comments.</p>
<p class="feature">(<code class="dim">\#</code> matches output starting with <code class="dim">#</code>.)</p>
</div> </div>
<div class="example"> <div class="example">
<pre><code><span class="prompt">$</span> <span class="cmd">echo hello</span> <pre><code><span class="prompt">$</span> <span class="cmd">echo hello</span>
@ -306,43 +310,68 @@
</div> </div>
</div> </div>
<section> <div class="section-box">
<h2>Setup &amp; teardown</h2> <div class="two-col">
<p>Use <code class="bright">@setup</code> to share commands across test files. Use <code class="bright">@teardown</code> to clean up after tests &mdash; it runs regardless of pass/fail.</p> <div class="explain">
<pre><code><span class="comment"># setup.shout</span> <h2>✓ Setup &amp; teardown</h2>
<p>Use <code class="bright">@setup</code> to share commands across test files.</p>
<p>Use <code class="bright">@teardown</code> to clean up after tests &mdash; it runs regardless of pass/fail.</p>
<p><code>@teardown</code> can appear in both <code>.shout</code> files and setup files. Teardown failures produce warnings but don't affect test results.</p>
</div>
<div class="example">
<pre><code><span class="comment"># setup.shout</span>
<span class="output">export DB_URL=sqlite:data/test.db</span> <span class="output">export DB_URL=sqlite:data/test.db</span>
<span class="bright">@teardown</span> <span class="cmd">rm -f "$SHOUT_PROJECT_DIR/data/test.db"</span></code></pre> <span class="bright">@teardown</span> <span class="cmd">rm -f "$SHOUT_PROJECT_DIR/data/test.db"</span></code></pre>
<pre><code><span class="bright">@setup</span> <span class="cmd">setup.shout</span> <pre><code><span class="bright">@setup</span> <span class="cmd">setup.shout</span>
<span class="bright">@teardown</span> <span class="cmd">rm -f /tmp/extra-cleanup</span> <span class="bright">@teardown</span> <span class="cmd">rm -f /tmp/extra-cleanup</span>
<span class="prompt">$</span> <span class="cmd">create-db &amp;&amp; run-tests</span> <span class="prompt">$</span> <span class="cmd">create-db &amp;&amp; run-tests</span>
<span class="wildcard">...</span></code></pre> <span class="wildcard">...</span></code></pre>
<p><code>@teardown</code> can appear in both <code>.shout</code> files and setup files. Teardown failures produce warnings but don't affect test results.</p> </div>
</section> </div>
</div>
<section> <div class="section-box">
<h2>Macros</h2> <div class="two-col">
<p>Use <code class="bright">@def</code> to define reusable command macros.</p> <div class="explain">
<pre><code><span class="bright">@def</span> <span class="cmd">greet echo "hello world"</span> <h2>✓ Macros</h2>
<p>Use <code class="bright">@def</code> to define reusable command macros.</p>
<p>If a command matches a macro name exactly, the body is substituted. Use <code>\</code> for multi-line bodies. Macros from setup files are inherited; user-file macros override them.</p>
</div>
<div class="example">
<pre><code><span class="bright">@def</span> <span class="cmd">greet echo "hello world"</span>
<span class="prompt">$</span> <span class="cmd">greet</span> <span class="prompt">$</span> <span class="cmd">greet</span>
<span class="output">hello world</span></code></pre> <span class="output">hello world</span></code></pre>
<p>If a command matches a macro name exactly, the body is substituted. Use <code>\</code> for multi-line bodies — the body can start on the same line or on the next continuation line. Macros from setup files are inherited; user-file macros override them.</p> </div>
</section> </div>
</div>
<section> <div class="section-box">
<h2>Run it</h2> <div class="two-col">
<pre><code><span class="prompt">$</span> <span class="cmd">shout test</span> <div class="explain">
<h2>✓ Run it</h2>
<p>Each file gets a fresh temp directory and its own <code>/bin/sh</code> session. State carries between commands within a file.</p>
</div>
<div class="example">
<pre><code><span class="prompt">$</span> <span class="cmd">shout test</span>
<span class="pass">............... <span class="pass">...............
15 passed</span> <span class="dim">in 23ms</span></code></pre> 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> </div>
</section> </div>
</div>
<section> <div class="section-box">
<h2>Update expectations</h2> <div class="two-col">
<pre><code><span class="prompt">$</span> <span class="cmd">shout test --update</span></code></pre> <div class="explain">
<p>Rewrites your <code>.shout</code> files with the actual output. No more copy-pasting from the terminal.</p> <h2>✓ Update expectations</h2>
</section> <p>Rewrites your <code>.shout</code> files with the actual output. No more copy-pasting from the terminal.</p>
</div>
<div class="example">
<pre><code><span class="prompt">$</span> <span class="cmd">shout test --update</span></code></pre>
</div>
</div>
</div>
<section> <section>
<h2>Usage</h2> <h2>Usage</h2>
@ -370,12 +399,12 @@ Options:
<section> <section>
<h2>Environment</h2> <h2>Environment</h2>
<p>Shout sets these variables before running your commands:</p> <p>Shout sets these variables before running your commands:</p>
<pre><code><span class="bright">HOME</span> <span class="dim">→</span> <span class="output">temp directory for this test file</span> <pre><code><span class="bright">HOME</span> <span class="dim">→</span> <span class="output">temp directory for this test file</span>
<span class="bright">SHOUT_DIR</span> <span class="dim">→</span> <span class="output">same temp directory</span> <span class="bright">SHOUT_DIR</span> <span class="dim">→</span> <span class="output">same temp directory</span>
<span class="bright">SHOUT_SOURCE_DIR</span> <span class="dim">→</span> <span class="output">directory containing the .shout file</span> <span class="bright">SHOUT_SOURCE_DIR</span> <span class="dim">→</span> <span class="output">directory containing the .shout file</span>
<span class="bright">SHOUT_PROJECT_DIR</span> <span class="dim">→</span> <span class="output">directory where shout was invoked</span> <span class="bright">SHOUT_PROJECT_DIR</span> <span class="dim">→</span> <span class="output">directory where shout was invoked</span>
<span class="bright">PORT</span> <span class="dim">→</span> <span class="output">auto-assigned from 5400 (or --port-from), increments per file</span> <span class="bright">PORT</span> <span class="dim">→</span> <span class="output">auto-assigned from 5400 (or --port-from), increments per file</span>
<span class="bright">PATH</span> <span class="dim">→</span> <span class="output">prepended with --path dirs, if any</span></code></pre> <span class="bright">PATH</span> <span class="dim">→</span> <span class="output">prepended with --path dirs, if any</span></code></pre>
<p>Each file runs in its own temp directory. <code>--clean-env</code> starts with an empty environment instead of inheriting yours.</p> <p>Each file runs in its own temp directory. <code>--clean-env</code> starts with an empty environment instead of inheriting yours.</p>
</section> </section>