Improve title

app/components/Title.tsx

@@ -0,0 +1,9 @@
+import { h, Component } from "zheleznaya";
+let title: HTMLTitleElement = globalThis?.document?.querySelector("title")!;
+
+export const Title: Component<{ label: string }> = ({ label }) => {
+  if (title) {
+    title.innerText = label;
+  }
+  return <div></div>
+}

app/pages/documents/_id_.tsx

@@ -5,6 +5,7 @@ import { Content } from "../../components/Content";
 import { Html } from "../../components/Html";
 import { readFileAsync } from "../../FSUtils";
 import { styled } from "zstyl";
+import { Title } from "../../components/Title";
 
 function markedAsync(md: string) {
   return new Promise<string>((ok, ng) => marked(md, (e, d) => e ? ng(e) : ok(d)));
@@ -87,6 +88,7 @@ const Document: Component<{
   return (
     <div>
       <Header />
+      <Title label={`${current.title} | nzxt document`} />
       <Content>
         <CenteredFlex>
           <TableOfContents>

app/pages/documents/index.tsx

@@ -3,6 +3,7 @@ import { Content } from "../../components/Content";
 import { Header } from "../../components/Header";
 import { join } from "path"
 import { readFileAsync } from "../../FSUtils";
+import { Title } from "../../components/Title";
 
 interface Props {
   toc: Content[];
@@ -33,6 +34,7 @@ const Documents: Component<Props> = ({ toc }) => {
   return (
     <div>
       <Header />
+      <Title label="contents | nzxt document" />
       <Content>
         <h1>Contents</h1>
         <ContentList toc={toc} />

app/pages/index.tsx

@@ -2,6 +2,7 @@ import { h, Component } from "nzxt/h";
 import { styled } from "zstyl";
 import { Content } from "../components/Content";
 import { Header } from "../components/Header";
+import { Title } from "../components/Title";
 
 const CenteredFlex = styled.div`
   display: flex;
@@ -21,6 +22,7 @@ const Index: Component = () => {
   return (
     <div>
       <Header />
+      <Title label="nzxt document" />
       <Content>
         <CenteredFlex>
           <div>