77 lines
1.8 KiB
TypeScript
77 lines
1.8 KiB
TypeScript
import { component$, isDev } from "@builder.io/qwik";
|
|
import { QwikCityProvider, RouterOutlet } from "@builder.io/qwik-city";
|
|
import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
|
|
|
|
|
|
import "./global.css";
|
|
|
|
export default component$(() => {
|
|
/**
|
|
* The root of a QwikCity site always start with the <QwikCityProvider> component,
|
|
* immediately followed by the document's <head> and <body>.
|
|
*
|
|
* Don't remove the `<head>` and `<body>` elements.
|
|
*/
|
|
|
|
return (
|
|
<QwikCityProvider>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
{!isDev && (
|
|
<link
|
|
rel="manifest"
|
|
href={`${import.meta.env.BASE_URL}manifest.json`}
|
|
/>
|
|
)}
|
|
<RouterHead />
|
|
</head>
|
|
<body lang="en">
|
|
<RouterOutlet />
|
|
</body>
|
|
</QwikCityProvider>
|
|
);
|
|
});
|
|
|
|
|
|
export const RouterHead = component$(() => {
|
|
const head = useDocumentHead();
|
|
const loc = useLocation();
|
|
|
|
return (
|
|
<>
|
|
<title>{head.title}</title>
|
|
|
|
<link rel="canonical" href={loc.url.href} />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
|
|
|
{head.meta.map((m) => (
|
|
<meta key={m.key} {...m} />
|
|
))}
|
|
|
|
{head.links.map((l) => (
|
|
<link key={l.key} {...l} />
|
|
))}
|
|
|
|
{head.styles.map((s) => (
|
|
<style
|
|
key={s.key}
|
|
{...s.props}
|
|
{...(s.props?.dangerouslySetInnerHTML
|
|
? {}
|
|
: { dangerouslySetInnerHTML: s.style })}
|
|
/>
|
|
))}
|
|
|
|
{head.scripts.map((s) => (
|
|
<script
|
|
key={s.key}
|
|
{...s.props}
|
|
{...(s.props?.dangerouslySetInnerHTML
|
|
? {}
|
|
: { dangerouslySetInnerHTML: s.script })}
|
|
/>
|
|
))}
|
|
</>
|
|
);
|
|
}); |