GitHub/kill-the-news
1
0
Fork 0
mirror of https://github.com/juherr/kill-the-news.git synced 2026-06-20 22:03:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: extract inline view CSS into dedicated stylesheets

Browse Source 
Move the hardcoded <style> blocks from the single-email view and the admin
email preview iframe into src/styles/*.css so they benefit from Prettier,
linting, and syntax highlighting like the rest of the design system.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Julien Herr
2026-05-24 14:54:33 +02:00
parent 5137637181
commit b002f8ad43
4 changed files with 73 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/emails.tsx
+2 -1
View File
@@ -18,6 +18,7 @@ import { processEmailContent } from "../../infrastructure/html-processor";
import { formatBytes } from "../../domain/format"; import { formatBytes } from "../../domain/format";
import { EmailAddress } from "../../domain/value-objects/email-address"; import { EmailAddress } from "../../domain/value-objects/email-address";
import { emailsPageScript } from "../../scripts/generated/emails-page"; import { emailsPageScript } from "../../scripts/generated/emails-page";
import emailPreviewCss from "../../styles/email-preview.css";
type AppEnv = { Bindings: Env }; type AppEnv = { Bindings: Env };
@@ -476,7 +477,7 @@ emailsRouter.get("/emails/:emailKey", async (c) => {
emailData.attachments, emailData.attachments,
baseUrl(env), baseUrl(env),
); );
const htmlContent = `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>body{font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Arial,sans-serif;line-height:1.5;padding:16px;margin:0;color:#333;box-sizing:border-box}img{max-width:100%;height:auto}a{color:#0070f3}@media(prefers-color-scheme:dark){body{background-color:#1c1c1e;color:#ffffff}a{color:#0a84ff}}</style></head><body>${renderedBody}</body></html>`; const htmlContent = `<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><style>${emailPreviewCss}</style></head><body>${renderedBody}</body></html>`;
const encodedHtmlContent = (() => { const encodedHtmlContent = (() => {
const encoder = new TextEncoder(); const encoder = new TextEncoder();
src/routes/entries.ts
+2 -43
View File
@@ -6,6 +6,7 @@ import { formatBytes } from "../domain/format";
import { FeedRepository } from "../infrastructure/feed-repository"; import { FeedRepository } from "../infrastructure/feed-repository";
import { FeedId } from "../domain/value-objects/feed-id"; import { FeedId } from "../domain/value-objects/feed-id";
import { isExpired } from "../domain/feed"; import { isExpired } from "../domain/feed";
import entryCss from "../styles/entry.css";
export async function handle(c: Context<{ Bindings: Env }>): Promise<Response> { export async function handle(c: Context<{ Bindings: Env }>): Promise<Response> {
const feedId = c.req.param("feedId"); const feedId = c.req.param("feedId");
@@ -80,49 +81,7 @@ export async function handle(c: Context<{ Bindings: Env }>): Promise<Response> {
<title>${emailData.subject}</title> <title>${emailData.subject}</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<style> <style>
body { ${raw(entryCss)}
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
.meta {
color: #666;
font-size: 0.875rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.75rem;
}
.meta dt {
display: inline;
font-weight: bold;
}
.meta dd {
display: inline;
margin: 0 1rem 0 0.25rem;
}
.attachments {
margin-top: 2rem;
border-top: 1px solid #eee;
padding-top: 1rem;
}
.attachments h2 {
font-size: 1rem;
margin: 0 0 0.5rem;
}
.attachments ul {
list-style: none;
padding: 0;
margin: 0;
}
.attachments li {
margin: 0.25rem 0;
}
.attachments .size {
color: #666;
font-size: 0.875rem;
margin-left: 0.5rem;
}
</style> </style>
</head> </head>
<body> <body>
src/styles/email-preview.css
+26
View File
@@ -0,0 +1,26 @@
body {
font-family:
-apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
"Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
padding: 16px;
margin: 0;
color: #333;
box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
}
a {
color: #0070f3;
}
@media (prefers-color-scheme: dark) {
body {
background-color: #1c1c1e;
color: #ffffff;
}
a {
color: #0a84ff;
}
}
src/styles/entry.css
+43
View File
@@ -0,0 +1,43 @@
body {
font-family: sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 1rem;
}
.meta {
color: #666;
font-size: 0.875rem;
margin-bottom: 1.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 0.75rem;
}
.meta dt {
display: inline;
font-weight: bold;
}
.meta dd {
display: inline;
margin: 0 1rem 0 0.25rem;
}
.attachments {
margin-top: 2rem;
border-top: 1px solid #eee;
padding-top: 1rem;
}
.attachments h2 {
font-size: 1rem;
margin: 0 0 0.5rem;
}
.attachments ul {
list-style: none;
padding: 0;
margin: 0;
}
.attachments li {
margin: 0.25rem 0;
}
.attachments .size {
color: #666;
font-size: 0.875rem;
margin-left: 0.5rem;
}