Proper styles for ToC

Changes

3 changed files (+44/-11)

• page_builder/default_theme/builder.tsx
  • @@ -403,6 +403,7 @@ node,
    (item) => ( <HastRenderer.View node={{ type: "root", children: item }} + wrapAndStyle={false} /> ), );
• page_builder/default_theme/components/atoms/hast_renderer.tsx
  • @@ -217,13 +217,15 @@
    return ret; } - export function render(hast: Hast.Nodes) { + export function render(hast: Hast.Nodes, wrapAndStyle: boolean = true) { return toJsxRuntime(hast, { - components: { - "macana-ofm-callout": callout.MacanaOfmCallout, - "macana-ofm-callout-title": callout.MacanaOfmCalloutTitle, - "macana-ofm-callout-body": callout.MacanaOfmCalloutBody, - }, + components: wrapAndStyle + ? { + "macana-ofm-callout": callout.MacanaOfmCallout, + "macana-ofm-callout-title": callout.MacanaOfmCalloutTitle, + "macana-ofm-callout-body": callout.MacanaOfmCalloutBody, + } + : {}, Fragment: jsxRuntime.Fragment, jsx(type, props, key) { return jsxRuntime.jsx(type, nanoifyProps(props), key || "");
  • @@ -288,9 +290,15 @@ }
    export interface ViewProps { node: Hast.Nodes; + + wrapAndStyle?: boolean; } - export function View({ node }: ViewProps) { + export function View({ node, wrapAndStyle = true }: ViewProps) { + if (!wrapAndStyle) { + return render(node); + } + return ( <div className={C.Wrapper}> {render(node)}
• page_builder/default_theme/components/organisms/toc.tsx
  • @@ -12,11 +12,35 @@ import { css } from "../../css.ts";
    const enum C { Root = "o-toc--root", + List = "o-toc--l", + Item = "o-toc--i", + Link = "o-toc--k", } export const styles = css` .${C.Root} { - font-size: 0.8em; + font-size: 0.8rem; + } + + .${C.List} { + display: flex; + flex-direction: column; + padding-left: 0.75em; + border-left: 2px solid var(--color-subtle-overlay); + } + + .${C.Item} { + display: flex; + flex-direction: column; + } + + .${C.Link} { + text-decoration: none; + + color: var(--color-fg-sub); + } + .${C.Link}:hover { + text-decoration: underline; } `;
  • @@ -35,10 +59,10 @@ }
    export function Items({ toc }: ViewProps) { return ( - <ul> + <ul className={C.List}> {toc.map((item) => ( - <li> - <a href={`#${item.id}`}>{item.text}</a> + <li className={C.Item}> + <a className={C.Link} href={`#${item.id}`}>{item.text}</a> {item.children.length > 0 && <Items toc={item.children} />} </li> ))}