Skip to content

Commit 78d4f95

Browse files
Copilotpethers
Copilot
and
pethers
committed
feat: Add news article styles to styles.css and update workflow to use external CSS
- Added comprehensive "News Article Styles" section to styles.css * .news-article, .article-header, .article-meta styles * .lede (lead paragraph with left border) * .context-box, .watch-section styles * .event-calendar (for Week Ahead articles) * .article-footer, .article-sources styles * Responsive design for mobile devices - Updated .github/workflows/news-evening-analysis.md * Added explicit requirement to use external styles.css * Added complete HTML template with proper structure * Documented all available CSS classes * Included style guide: "Latest news and analysis from Sweden's Riksdag. The Economist-style political journalism covering parliament, government, and agencies with systematic transparency." * Removed embedded CSS instructions - Added CSS validation tests to tests/news-evening-analysis.test.js * Test ensures articles use <link rel="stylesheet" href="../styles.css"> * Test ensures NO embedded <style> tags * Test validates Economist-style journalism standards * 32 total tests (31 passing, 1 expected to fail on old articles) ✅ Future generated articles will use centralized CSS ✅ Easier maintenance and consistent styling across all articles ✅ Reduced file sizes (no 438-line embedded CSS blocks) Co-authored-by: pethers <1726836+pethers@users.noreply.github.com>
1 parent e27822d commit 78d4f95

File tree

3 files changed

+456
-30
lines changed

3 files changed

+456
-30
lines changed

‎.github/workflows/news-evening-analysis.md‎

Lines changed: 110 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -176,46 +176,126 @@ Structure the analysis around these editorial pillars:
176176

177177
**Article Type:** `analysis`
178178

179+
**HTML Template Requirements:**
180+
- **MUST** use `<link rel="stylesheet" href="../styles.css">` - NO embedded `<style>` tags
181+
- Follow "Latest news and analysis from Sweden's Riksdag. The Economist-style political journalism covering parliament, government, and agencies with systematic transparency."
182+
- Include proper meta tags, Open Graph, Twitter Card, and Schema.org structured data
183+
- Use semantic HTML5 structure with `<article>`, `<header>`, `<section>`, `<footer>`
184+
179185
**Structure for each language version:**
180186

181187
```html
182-
<!-- Evening Analysis article structure -->
183-
<article>
184-
<h1>{Analytical headline capturing day's key theme}</h1>
185-
<h2>{Subtitle with specific data point}</h2>
188+
<!DOCTYPE html>
189+
<html lang="{lang}">
190+
<head>
191+
<meta charset="UTF-8">
192+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
193+
<title>{title}</title>
194+
<meta name="description" content="{subtitle}">
195+
<meta name="keywords" content="{keywords}">
196+
<meta name="author" content="James Pether Sörling, CISSP, CISM">
197+
<link rel="canonical" href="https://riksdagsmonitor.com/news/{slug}">
186198

187-
<div class="article-meta">
188-
<time>{date}</time>
189-
<span class="read-time">{X} min read</span>
190-
<span class="article-type">Evening Analysis</span>
191-
</div>
199+
<!-- Open Graph / Social Media -->
200+
<meta property="og:title" content="{title}">
201+
<meta property="og:description" content="{subtitle}">
202+
<meta property="og:type" content="article">
203+
<meta property="og:url" content="https://riksdagsmonitor.com/news/{slug}">
204+
<meta property="og:image" content="https://cia.sourceforge.io/cia-logo.png">
192205

193-
<div class="article-content">
194-
<p class="lead">{Opening paragraph: analytical thesis}</p>
195-
196-
<h3>The Day's Main Story</h3>
197-
<p>{400-800 words of lead story analysis}</p>
198-
199-
<h3>Parliamentary Pulse</h3>
200-
<p>{200-400 words summarizing legislative activity}</p>
201-
202-
<h3>Government Watch</h3>
203-
<p>{200-300 words on executive activity}</p>
206+
<!-- Twitter Card -->
207+
<meta name="twitter:card" content="summary_large_image">
208+
<meta name="twitter:title" content="{title}">
209+
<meta name="twitter:description" content="{subtitle}">
210+
211+
<!-- Hreflang for all language alternatives -->
212+
<link rel="alternate" hreflang="en" href="https://riksdagsmonitor.com/news/{baseSlug}-en.html">
213+
<link rel="alternate" hreflang="sv" href="https://riksdagsmonitor.com/news/{baseSlug}-sv.html">
214+
<!-- ... (all 14 languages) -->
215+
216+
<!-- Google Fonts -->
217+
<link rel="preconnect" href="https://fonts.googleapis.com">
218+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
219+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Orbitron:wght@400;500;600;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
220+
221+
<!-- CRITICAL: Use external stylesheet, NO embedded CSS -->
222+
<link rel="stylesheet" href="../styles.css">
223+
224+
<!-- Schema.org NewsArticle structured data -->
225+
<script type="application/ld+json">{...}</script>
226+
</head>
227+
<body>
228+
<div class="news-article">
229+
<header class="article-header">
230+
<h1>{Analytical headline capturing day's key theme}</h1>
231+
<div class="article-meta">
232+
<time datetime="{isoDate}">{formattedDate}</time>
233+
<span class="separator">•</span>
234+
<span class="read-time">{X} min read</span>
235+
<span class="separator">•</span>
236+
<span class="article-type">Evening Analysis</span>
237+
</div>
238+
</header>
204239

205-
<h3>Opposition Dynamics</h3>
206-
<p>{200-300 words on opposition and cross-party}</p>
240+
<article class="article-content">
241+
<p class="lede">{Opening paragraph: analytical thesis}</p>
242+
243+
<h2>The Day's Main Story</h2>
244+
<p>{400-800 words of lead story analysis}</p>
245+
246+
<h2>Parliamentary Pulse</h2>
247+
<p>{200-400 words summarizing legislative activity}</p>
248+
249+
<h2>Government Watch</h2>
250+
<p>{200-300 words on executive activity}</p>
251+
252+
<h2>Opposition Dynamics</h2>
253+
<p>{200-300 words on opposition and cross-party}</p>
254+
255+
<h2>Looking Ahead</h2>
256+
<p>{100-200 words on tomorrow's agenda}</p>
257+
258+
<div class="context-box">
259+
<h3>By the Numbers</h3>
260+
<ul>{Key statistics from today's data}</ul>
261+
</div>
262+
263+
<section class="watch-section">
264+
<h2>What to Watch This Week</h2>
265+
<ul class="watch-list">
266+
<li><strong>{Topic}:</strong> {Description}</li>
267+
</ul>
268+
</section>
269+
</article>
207270

208-
<h3>Looking Ahead</h3>
209-
<p>{100-200 words on tomorrow's agenda}</p>
271+
<footer class="article-footer">
272+
<div class="article-sources">
273+
<h3>Sources and Data</h3>
274+
<p><strong>Data Sources:</strong> {List riksdag-regering-mcp tools with document IDs}</p>
275+
<p><strong>Generated by:</strong> Automated News System using riksdag-regering-mcp</p>
276+
<p><strong>Analysis Tools:</strong> AI-assisted journalism with human editorial oversight</p>
277+
</div>
278+
<div class="article-nav">
279+
<a href="../index.html" class="back-to-news">Back to News</a>
280+
</div>
281+
</footer>
210282
</div>
211-
212-
<div class="sources">
213-
<h4>Sources</h4>
214-
<ul>{List all riksdag-regering-mcp tools used with document IDs}</ul>
215-
</div>
216-
</article>
283+
</body>
284+
</html>
217285
```
218286

287+
**CSS Classes Available in styles.css:**
288+
- `.news-article` - Main container
289+
- `.article-header` - Header section
290+
- `.article-meta` - Date, time, type info
291+
- `.lede` - Lead paragraph with left border
292+
- `.article-content` - Main content area
293+
- `.context-box` - Information boxes
294+
- `.watch-section` - "What to Watch" section
295+
- `.article-footer` - Footer with sources
296+
- `.article-sources` - Sources section
297+
- `.back-to-news` - Back button
298+
219299
### Step 4: Generate All Language Versions
220300

221301
For each language in the requested set:

0 commit comments

Comments
 (0)