← back to Ventura Corridor
iter 151: /quotes — typographic 3-col wall of every editorial pull quote w/ size variation
0c9c392ff5f63e5332c703ebee16fdb07ab659f7 · 2026-05-06 19:19:58 -0700 · SteveStudio2
Files touched
Diff
commit 0c9c392ff5f63e5332c703ebee16fdb07ab659f7
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Wed May 6 19:19:58 2026 -0700
iter 151: /quotes — typographic 3-col wall of every editorial pull quote w/ size variation
---
src/server/index.ts | 79 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 79 insertions(+)
diff --git a/src/server/index.ts b/src/server/index.ts
index 281bb82..27c8b10 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -81,6 +81,7 @@ const ADMIN_PATHS = [
/^\/find(\.html)?\/?$/i,
/^\/api\/find\/?$/i,
/^\/words\/?$/i,
+ /^\/quotes\/?$/i,
/^\/sitemap\.xml\/?$/i,
/^\/robots\.txt\/?$/i,
/^\/issue(\/[\w-]+)?\/feed\.xml\/?$/i,
@@ -2535,6 +2536,7 @@ article .biz small{display:block;font-family:monospace;font-size:9px;color:var(-
<a href="/issue.pdf${cat ? '?cat=' + encodeURIComponent(cat) : ''}" download>⬇ PDF</a>
<a href="/issue.epub${cat ? '?cat=' + encodeURIComponent(cat) : ''}" download>📖 EPUB</a>
<a href="/issue/archive">🗂 Archive</a>
+ <a href="/quotes">" Quotes</a>
<a href="javascript:window.print()">🖨 Print</a>
</div>
<header>
@@ -2636,6 +2638,83 @@ Disallow: /
`);
});
+// /quotes — wall of every editorial pull quote across every published feature.
+// Reads as a typographic gallery; click any quote to jump to its feature.
+app.get('/quotes', async (_req, res) => {
+ try {
+ const r = await query(`
+ SELECT mf.id, mf.pull_quote, mf.headline, mf.category_tag,
+ b.name AS biz_name, b.city
+ FROM magazine_features mf
+ JOIN businesses b ON b.id = mf.business_id
+ WHERE mf.status = 'published'
+ AND mf.pull_quote IS NOT NULL
+ AND length(mf.pull_quote) > 16
+ ORDER BY length(mf.pull_quote) ASC
+ `);
+ const esc = (s: any) => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&','<':'<','>':'>','"':'"',"'":'''}[c]!));
+ const rows = r.rows;
+ res.setHeader('Content-Type', 'text/html; charset=utf-8');
+ res.send(`<!doctype html><html lang="en"><head><meta charset="utf-8">
+<title>Quotes · The Corridor</title>
+<meta name="viewport" content="width=device-width,initial-scale=1">
+<meta name="description" content="${rows.length} editorial pull quotes from features on Ventura Boulevard.">
+<style>
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter:wght@300;400;500&display=swap');
+:root{--paper:#faf6ee;--ink:#1a1815;--ink-mute:#6e6356;--metal:#8a6d3b;--metal-glow:#b89968;--accent:#6a3a1a;--rule:#d8cdb8}
+*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'Inter',sans-serif;font-weight:300;line-height:1.5}
+header{text-align:center;padding:64px 24px 36px;border-bottom:4px double var(--ink)}
+header .kicker{font-size:10px;letter-spacing:.45em;text-transform:uppercase;color:var(--metal);font-weight:500}
+header h1{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:500;font-size:84px;line-height:.95;margin:14px 0 0;letter-spacing:-0.02em}
+header h1 em{font-style:normal;color:var(--metal)}
+header .deck{font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--ink-mute);font-size:18px;margin-top:12px}
+.toolbar{position:fixed;top:14px;right:14px;display:flex;gap:6px;z-index:100}.toolbar a{font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);background:var(--paper);padding:5px 10px;border:1px solid var(--rule);text-decoration:none}.toolbar a:hover{color:var(--metal);border-color:var(--metal)}
+main{max-width:1200px;margin:0 auto;padding:48px 32px 80px;column-count:3;column-gap:36px;column-rule:1px dotted var(--rule)}
+@media (max-width: 900px){main{column-count:2}}
+@media (max-width: 600px){main{column-count:1}}
+figure{break-inside:avoid;margin:0 0 36px;padding:0 4px;page-break-inside:avoid}
+figure blockquote{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;line-height:1.35;color:var(--ink);margin:0;text-indent:-0.45em;padding-left:0.45em}
+figure blockquote::before{content:'"';color:var(--accent);font-weight:600}
+figure blockquote::after{content:'"';color:var(--accent);font-weight:600}
+figure.s blockquote{font-size:18px}
+figure.m blockquote{font-size:22px}
+figure.l blockquote{font-size:26px}
+figure.xl blockquote{font-size:30px}
+figure figcaption{margin-top:10px;font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--ink-mute)}
+figure figcaption a{color:var(--metal);text-decoration:none}
+figure figcaption a:hover{color:var(--accent)}
+.empty{text-align:center;padding:80px;column-span:all;font-style:italic;font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--ink-mute)}
+@media print{.toolbar{display:none}main{column-count:2}}
+</style></head><body>
+<div class="toolbar">
+ <a href="/issue">Issue</a>
+ <a href="/words">Words</a>
+ <a href="/about.html">About</a>
+</div>
+<header>
+ <div class="kicker">The Corridor · in their own pages</div>
+ <h1>Pull <em>quotes</em>.</h1>
+ <div class="deck">${rows.length} editorial flourish${rows.length === 1 ? '' : 'es'} drawn from every published feature.</div>
+</header>
+<main>
+${rows.length === 0 ? `<div class="empty">No quotes yet. Check back after the next batch.</div>` :
+ rows.map((q, i) => {
+ const len = (q.pull_quote || '').length;
+ const cls = len < 60 ? 'l' : len < 100 ? 'm' : len < 160 ? 's' : 's';
+ // Hero-rotation: every 7th quote gets xl treatment
+ const finalCls = i % 7 === 3 ? 'xl' : cls;
+ return `<figure class="${finalCls}">
+ <blockquote>${esc(q.pull_quote)}</blockquote>
+ <figcaption><a href="/magazine/${q.id}">${esc(q.headline)}</a> · ${esc(q.biz_name)}${q.city ? ' · ' + esc(q.city) : ''}</figcaption>
+ </figure>`;
+ }).join('')}
+</main>
+</body></html>`);
+ } catch (e: any) {
+ res.status(500).send('quotes failed: ' + e.message);
+ }
+});
+
// /words — what words does The Corridor desk reach for most? frequency analysis
// of all editorial bodies, minus a stop-word list. Renders a typographic word
// cloud sized by frequency.
← 6dc50d0 iter 150: /magazine.html 🆕 since-last filter — localStorage
·
back to Ventura Corridor
·
iter 152: /api/magazine/activity unified event feed across g fa49655 →