Proper style for document title

Changes

2 changed files (+42/-2)

• page_builder/default_theme/components/atoms/title.tsx (new)
  • @@ -0,0 +1,38 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + /** @jsx h */ + + import { h } from "../../../../deps/deno.land/x/nano_jsx/mod.ts"; + + import { css } from "../../css.ts"; + + const enum C { + Title = "a--title", + } + + export const styles = css` + .${C.Title} { + font-weight: 700; + font-size: 2rem; + margin: 0; + line-height: calc(var(--baseline) * 2rem); + + color: var(--color-fg-sub); + } + `; + + export interface ViewProps { + className?: string; + + children: JSX.ElementChildrenAttribute["children"]; + } + + export function View({ className, children }: ViewProps) { + return ( + <h1 className={[className, C.Title].filter((s) => !!s).join(" ")}> + {children} + </h1> + ); + }
• page_builder/default_theme/components/html.tsx
  • @@ -24,6 +24,7 @@ import type { Assets } from "../builder.tsx";
    import * as LucideIcons from "./lucide_icons.tsx"; + import * as Title from "./atoms/title.tsx"; import * as HastRenderer from "./atoms/hast_renderer.tsx"; import * as JSONCanvasRenderer from "./atoms/json_canvas_renderer.tsx"; import * as DocumentTreeUI from "./organisms/document_tree.tsx";
  • @@ -33,6 +34,7 @@ import * as SiteLayout from "./templates/site_layout.tsx";
    export const styles = css.join( globalStyles, + Title.styles, LucideIcons.styles, DocumentTreeUI.styles, Footer.styles,
  • @@ -174,7 +176,7 @@ footer={<Footer.View copyright={copyright} />}
    logoImage={assets.siteLogo} defaultDocument={tree.defaultDocument} > - <h1>{document.metadata.title}</h1> + <Title.View>{document.metadata.title}</Title.View> <MetadataDates metadata={document.metadata} /> {content} </SiteLayout.View>
  • @@ -209,7 +211,7 @@ footer={<Footer.View copyright={copyright} />}
    logoImage={assets.siteLogo} defaultDocument={tree.defaultDocument} > - <h1>{document.metadata.title}</h1> + <Title.View>{document.metadata.title}</Title.View> <MetadataDates metadata={document.metadata} /> <JSONCanvasRenderer.View data={content} /> </SiteLayout.View>