dasig-solid/frontend/@dasig/components/HTML.tsx
2026-01-21 18:49:23 +08:00

79 lines
2.5 KiB
TypeScript

/** biome-ignore-all lint/complexity/noUselessFragments: <_> */
import * as fs from "node:fs";
import { type JSXElement, Show } from "solid-js";
import * as toml from 'toml';
import background1 from "../images/background.avif";
import background2 from "../images/background.webp";
import "../styles/HTML.sass";
interface Props {
name: string;
description: string;
children: JSXElement;
font?:
| "roboto"
| "inter"
| "montserrat"
| "open-sans"
| "public-sans"
| string;
preloadBackground?: boolean;
author: string;
assets: JSXElement;
scripts: JSXElement;
}
export default (props: Props) => {
const config = toml.parse(fs.readFileSync('configs/config.site.toml', 'utf8'))
return (
<>
<html lang="en">
<head>
<base href="/" />
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, viewport-fit=cover"
/>
<meta name="name" content={props.name} />
<meta name="description" content={props.description} />
<meta name="title" property="og:title" content={props.name} />
<meta name="keywords" content="HTML, CSS, JavaScript" />
<meta name="developer" content={props.author} />
<meta property="og:description" content={props.description} />
<meta property="og:type" content="website" />
<link rel="icon" type="image/png" href="/favicon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
<link rel="manifest" href="/site.webmanifest" />
<Show when={config.font.source === "cdn"}>
<link rel="preconnect" href="https://cdn.jsdelivr.net" />
</Show>
<Show when={props.preloadBackground}>
<link
rel="preload"
href={background1}
as="image"
type="image/svg+xml"
/>
<link
rel="preload"
href={background2}
as="image"
type="image/svg+xml"
/>
</Show>
{props.assets}
</head>
<body>
<div class={props.font} id="app">
{props.children}
</div>
{props.scripts}
</body>
</html>
</>
);
};