Style blockquote

Changes

2 changed files (+38/-0)

• page_builder/default_theme/from_mdast/mod.ts
  • @@ -19,6 +19,7 @@ import { listHandlers, listStyles } from "./list.tsx";
    import { mathHandlers } from "./math.ts"; import { codeHandlers, codeStyles } from "./code.tsx"; import { linkHandlers, linkStyles } from "./link.tsx"; + import { quoteHandlers, quoteStyles } from "./quote.tsx"; const c = buildClasses("fm-0", ["wrapper"]);
  • @@ -159,6 +160,7 @@ calloutStyles,
    listStyles, codeStyles, linkStyles, + quoteStyles, ); export function fromMdast(mdast: Mdast.Nodes): Hast.Nodes {
  • @@ -170,6 +172,7 @@ ...listHandlers(),
    ...mathHandlers(), ...codeHandlers(), ...linkHandlers(), + ...quoteHandlers(), }, allowDangerousHtml: true, }));
• page_builder/default_theme/from_mdast/quote.tsx (new)
  • @@ -0,0 +1,35 @@
    + // SPDX-FileCopyrightText: 2024 Shota FUJI <pockawoooh@gmail.com> + // + // SPDX-License-Identifier: Apache-2.0 + + import type * as Mdast from "../../../deps/esm.sh/mdast/types.ts"; + import { h } from "../../../deps/esm.sh/hastscript/mod.ts"; + import { type Handlers } from "../../../deps/esm.sh/mdast-util-to-hast/mod.ts"; + + import { buildClasses, css } from "../css.ts"; + + const c = buildClasses("fm-q", [ + "quote", + ]); + + export const quoteStyles = css` + .${c.quote} { + margin: calc(var(--baseline) * 1rem) 0; + padding: 0; + padding-inline-start: 1em; + font-size: 1rem; + border-left: 0.25em solid var(--color-border); + + font-style: italic; + + opacity: 0.85; + } + `; + + export function quoteHandlers(): Handlers { + return { + blockquote(state, node: Mdast.Blockquote) { + return h("blockquote", { class: c.quote }, state.all(node)); + }, + }; + }