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

111
web/index.html
View File

@ -11,7 +11,7 @@
:root {
--bg: #fff;
--fg: #444;
--bright: #1a1a1a;
--bright: #000;
--green: #1a7f37;
--red: #cf222e;
--dim: #888;
@ -64,6 +64,7 @@
line-height: 1;
display: flex;
align-items: baseline;
vertical-align: baseline;
}
h1 .dollar {
@ -126,17 +127,14 @@
opacity: 0.85;
}
/* ---- "Write a test" box ---- */
.hero-section {
padding: 40px 0 24px;
}
.write-box {
/* ---- Section boxes ---- */
.section-box {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 8px;
padding: 20px;
padding-top: 16px;
margin-bottom: 24px;
}
.two-col {
@ -148,7 +146,6 @@
.two-col .explain h2 {
margin-bottom: 16px;
color: var(--fg);
}
.two-col .explain p {
@ -162,41 +159,48 @@
}
.two-col .explain .feature code {
padding: 2px 6px;
padding: 2px 0px;
border-radius: 3px;
font-size: 13px;
}
.write-box pre {
.section-box pre {
background: var(--bg);
margin-bottom: 0;
}
.section-box pre + pre {
margin-top: 12px;
}
.section-box p:last-child {
margin-bottom: 0;
}
@media (max-width: 680px) {
.two-col {
grid-template-columns: 1fr;
gap: 24px;
}
.write-box {
.section-box {
padding: 19px;
}
}
/* ---- Sections ---- */
section {
padding: 0 0 32px 0;
}
h2 {
font-size: 13px;
font-weight: 600;
color: var(--dim);
color: var(--fg);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 24px;
margin-bottom: 16px;
}
section {
padding: 0 0 32px 0;
}
p {
margin-bottom: 16px;
font-size: 15px;
@ -259,7 +263,6 @@
header { padding: 40px 0 0; }
h1 { font-size: 44px; }
.subtitle { font-size: 16px; }
section { padding: 24px 0; }
}
</style>
</head>
@ -274,17 +277,18 @@
</div>
</header>
<div class="hero-section">
<div class="write-box">
<div style="padding: 40px 0 0;">
<div class="section-box">
<div class="two-col">
<div class="explain">
<h2>✓ Write a test</h2>
<p>A <code class="bright">.shout</code> file is a shell session.</p>
<p class="feature">Commands start with <code class="bright">$</code>.</p>
<p class="feature">Everything else is the expected output.</p>
<p>Each <code class="bright">.shout</code> file is a session.</p>
<p class="feature">Commands start with <code class="prompt">$</code>.</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="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">(<code class="dim">\#</code> matches output starting with <code class="dim">#</code>.)</p>
</div>
<div class="example">
<pre><code><span class="prompt">$</span> <span class="cmd">echo hello</span>
@ -306,9 +310,15 @@
</div>
</div>
<section>
<h2>Setup &amp; teardown</h2>
<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="section-box">
<div class="two-col">
<div class="explain">
<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="bright">@teardown</span> <span class="cmd">rm -f "$SHOUT_PROJECT_DIR/data/test.db"</span></code></pre>
@ -317,32 +327,51 @@
<span class="prompt">$</span> <span class="cmd">create-db &amp;&amp; run-tests</span>
<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>
</section>
</div>
</div>
</div>
<section>
<h2>Macros</h2>
<div class="section-box">
<div class="two-col">
<div class="explain">
<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="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>
</section>
</div>
</div>
</div>
<section>
<h2>Run it</h2>
<div class="section-box">
<div class="two-col">
<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">...............
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>
</div>
</div>
</div>
<section>
<h2>Update expectations</h2>
<pre><code><span class="prompt">$</span> <span class="cmd">shout test --update</span></code></pre>
<div class="section-box">
<div class="two-col">
<div class="explain">
<h2>✓ Update expectations</h2>
<p>Rewrites your <code>.shout</code> files with the actual output. No more copy-pasting from the terminal.</p>
</section>
</div>
<div class="example">
<pre><code><span class="prompt">$</span> <span class="cmd">shout test --update</span></code></pre>
</div>
</div>
</div>
<section>
<h2>Usage</h2>