# presentation/renderers/glossary.block.renderer.ts

> 37 lines of code and 8 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-renderers-glossary-block-renderer-ts
Source text: https://banes-lab.com/assets/sources/source.70aa87e1fb97242825ac2ea583c4574171cf9420d98cf6348946057b84a0a56a.generated.txt

## Definitions

- `renderGlossary` (lexical_declaration, line 28, exported)
- `renderIconEntry` (lexical_declaration, line 17)
- `renderEntry` (lexical_declaration, line 9)
- `NO_CLASS` (lexical_declaration, line 7)
- `term` (lexical_declaration, line 10)
- `iconic` (lexical_declaration, line 29, exported)
- `grid` (lexical_declaration, line 31, exported)
- `list` (lexical_declaration, line 38, exported)

## Uses

- [core/factories/element.factory.ts](https://banes-lab.com/source/tree/core/factories/element.factory.ts.md)
- [presentation/renderers/text.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/text.renderer.ts.md)

## Used by

- [presentation/renderers/block.renderer.ts](https://banes-lab.com/source/tree/presentation/renderers/block.renderer.ts.md)

## Source

```typescript
import type { GlossaryBlock, GlossaryEntry } from "#types/block.types";
import { appendChildren, createElement } from "#core/factories/element.factory";
import { ICON_BASE_CLASS } from "#configuration/icons/element.icons";
import { createLink } from "#presentation/components/link.component";
import { fillMarkup } from "#presentation/renderers/text.renderer";

const NO_CLASS = "";

const renderEntry = function renderEntry(entry: GlossaryEntry): readonly Element[] {
    const term =
        entry.href === undefined
            ? createElement("dt", { text: entry.term })
            : createElement("dt", { children: [createLink(entry.href, NO_CLASS, [entry.term])] });
    return [term, fillMarkup(createElement("dd", {}), entry.description)];
};

const renderIconEntry = function renderIconEntry(entry: GlossaryEntry, icon: string): Element {
    return createElement("div", {
        children: [
            createElement("i", { className: `${ICON_BASE_CLASS} ${icon} block-icon` }),
            createElement("span", { className: "block-icon-label", text: entry.term }),
            fillMarkup(createElement("span", { className: "block-icon-description" }), entry.description),
        ],
        className: "block-icon-item",
    });
};

export const renderGlossary = function renderGlossary(block: GlossaryBlock): Element {
    const iconic = block.entries.every((entry) => entry.icon !== undefined);
    if (iconic) {
        const grid = createElement("div", { className: "block-icons" });
        appendChildren(
            grid,
            block.entries.map((entry) => renderIconEntry(entry, entry.icon ?? "")),
        );
        return grid;
    }
    const list = createElement("dl", { className: "block-glossary" });
    appendChildren(list, block.entries.flatMap(renderEntry));
    return list;
};
```