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(admin): migrate ui.ts to ui.tsx with JSX Layout component

Browse Source 
Replace hono/html tagged template layout() function with a typed JSX
<Layout> component. CSS and interactive scripts are injected via
dangerouslySetInnerHTML to preserve exact output. clampText() is
preserved and re-exported for consumers.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Herr
2026-05-22 13:17:24 +02:00
parent f5bac1bd7d
commit 996aa5e211
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/admin/ui.ts → src/routes/admin/ui.tsx
+15 -15
View File
@@ -1,29 +1,29 @@
import { html, raw } from "hono/html";
import { designSystem } from "../../styles/index"; import { designSystem } from "../../styles/index";
import { interactiveScripts } from "../../scripts/index"; import { interactiveScripts } from "../../scripts/index";
// eslint-disable-next-line @typescript-eslint/no-explicit-any type LayoutProps = {
export const layout = (title: string, content: any) => { title: string;
return html`<!DOCTYPE html> children: unknown;
};
export const Layout = ({ title, children }: LayoutProps) => {
return (
<html> <html>
<head> <head>
<title>${title} - Email to RSS Admin</title> <title>{title} - Email to RSS Admin</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<style> <style dangerouslySetInnerHTML={{ __html: designSystem }} />
${raw(designSystem)} <script dangerouslySetInnerHTML={{ __html: interactiveScripts + ";" }} />
</style>
<script>
${raw(interactiveScripts)};
</script>
</head> </head>
<body class="page"> <body class="page">{children as any}</body>
${content} </html>
</body> );
</html>`;
}; };
export { Layout as layout };
export function clampText(value: string, maxLen: number): string { export function clampText(value: string, maxLen: number): string {
const raw = `${value || ""}`; const raw = `${value || ""}`;
if (raw.length <= maxLen) { if (raw.length <= maxLen) {