# presentation/views/home.view.ts

> 156 lines of code and 23 definitions.

Tree: Site tree
Language: typescript
Layer: product
Canonical: https://banes-lab.com/anatomy/tree#file-presentation-views-home-view-ts
Source text: https://banes-lab.com/assets/sources/source.8733e5d2459416205a3f2e300ab3a3291201ee87d7d0da2d3bd8a1a25adfa128.generated.txt

## Definitions

- `hero` (lexical_declaration, line 119)
- `learningFigure` (lexical_declaration, line 111)
- `actions` (lexical_declaration, line 83)
- `mapHead` (lexical_declaration, line 99)
- `renderHome` (lexical_declaration, line 146)
- `thesis` (lexical_declaration, line 75)
- `DELAY_THESIS` (lexical_declaration, line 49)
- `DELAY_LEAD` (lexical_declaration, line 50)
- `DELAY_ACTIONS` (lexical_declaration, line 51)
- `DELAY_MAP_HEAD` (lexical_declaration, line 52)
- `DELAY_MAP` (lexical_declaration, line 53)
- `DELAY_STATS` (lexical_declaration, line 54)
- `DELAY_ROWS` (lexical_declaration, line 55)
- `WORD_STEP` (lexical_declaration, line 56)
- `WORD_SPACE` (lexical_declaration, line 57)
- `ROWS` (lexical_declaration, line 59)
- `STATS` (lexical_declaration, line 68)
- `words` (lexical_declaration, line 76)
- `shell` (lexical_declaration, line 112)
- `brand` (lexical_declaration, line 120)
- `column` (lexical_declaration, line 132)
- `glow` (lexical_declaration, line 142)
- `PAGE` (lexical_declaration, line 153, exported)

## Uses

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

## Source

```typescript
import {
    ANATOMY_CARD_LINK,
    ARCHITECTURE_CARD_LINK,
    FAQ_CARD_LINK,
    GRAMMAR_CARD_LINK,
    METHODOLOGY_CARD_LINK,
    ONTOLOGY_CARD_LINK,
} from "#configuration/icons/home.icons";
import {
    ANATOMY_ROW,
    ARCHITECTURE_ROW,
    FAQ_ROW,
    GRAMMAR_ROW,
    METHODOLOGY_ROW,
    ONTOLOGY_ROW,
} from "#configuration/strings/home.fragment.strings";
import { FADE_IN, FADE_IN_UP, FADE_IN_UP_LARGE } from "#configuration/constants/element.constants";
import { GRAMMAR_PAGE, HOME_PAGE, METHODOLOGY_PAGE } from "#core/ids/page.ids";
import { HOME_DESCRIPTION, HOME_TITLE } from "#configuration/strings/page.strings";
import {
    HOME_EYEBROW,
    HOME_HEADING,
    HOME_LEAD,
    HOME_THESIS,
    MAP_LEAD,
    MAP_TITLE,
    PAYLOAD_ACTION,
    PRIMARY_ACTION,
    PRINCIPLES_LABEL,
    RULES_LABEL,
    SECONDARY_ACTION,
    STEPS_LABEL,
    TERMS_LABEL,
} from "#configuration/strings/home.strings";
import type { HomeRowCopy, HomeRowLink, HomeStat } from "#types/home.types";
import { createExternalLink, createPageLink } from "#presentation/components/link.component";
import { renderRows, renderStats } from "#presentation/renderers/home.renderer";
import { LEARNING } from "#assets/learning.generated";
import { LLMS_ROUTE } from "#assets/link.assets";
import type { PageDefinition } from "#types/page.types";
import { SITE_MARK } from "#assets/image.assets";
import { SITE_METRICS } from "#assets/metric.generated";
import { animated } from "#presentation/renderers/element.renderer";
import { createElement } from "#core/factories/element.factory";
import { fillMarkup } from "#presentation/renderers/text.renderer";
import { layoutLearning } from "#domain/converters/learning.converter";
import { renderLearning } from "#presentation/renderers/learning.renderer";

const DELAY_THESIS = 90;
const DELAY_LEAD = 240;
const DELAY_ACTIONS = 300;
const DELAY_MAP_HEAD = 360;
const DELAY_MAP = 180;
const DELAY_STATS = 60;
const DELAY_ROWS = 80;
const WORD_STEP = 60;
const WORD_SPACE = " ";

const ROWS: readonly (readonly [HomeRowCopy, HomeRowLink])[] = [
    [METHODOLOGY_ROW, METHODOLOGY_CARD_LINK],
    [GRAMMAR_ROW, GRAMMAR_CARD_LINK],
    [ARCHITECTURE_ROW, ARCHITECTURE_CARD_LINK],
    [ONTOLOGY_ROW, ONTOLOGY_CARD_LINK],
    [ANATOMY_ROW, ANATOMY_CARD_LINK],
    [FAQ_ROW, FAQ_CARD_LINK],
];

const STATS: readonly HomeStat[] = [
    { label: RULES_LABEL, value: SITE_METRICS.rules },
    { label: STEPS_LABEL, value: SITE_METRICS.steps },
    { label: PRINCIPLES_LABEL, value: SITE_METRICS.principles },
    { label: TERMS_LABEL, value: SITE_METRICS.terms },
];

const thesis = function thesis(): HTMLElement {
    const words = HOME_THESIS.split(WORD_SPACE).flatMap((word, index) => [
        animated("span", { className: "word", text: word }, FADE_IN_UP, DELAY_THESIS + index * WORD_STEP),
        WORD_SPACE,
    ]);
    return createElement("h1", { children: words, className: "home-thesis" });
};

const actions = function actions(): HTMLElement {
    return animated(
        "div",
        {
            children: [
                createPageLink(METHODOLOGY_PAGE, "btn", [PRIMARY_ACTION]),
                createPageLink(GRAMMAR_PAGE, "btn ghost", [SECONDARY_ACTION]),
                createExternalLink(LLMS_ROUTE, "go", [PAYLOAD_ACTION]),
            ],
            className: "home-actions",
        },
        FADE_IN,
        DELAY_ACTIONS,
    );
};

const mapHead = function mapHead(): HTMLElement {
    return animated(
        "div",
        {
            children: [createElement("h2", { text: MAP_TITLE }), fillMarkup(createElement("p"), MAP_LEAD)],
            className: "map-head",
        },
        FADE_IN,
        DELAY_MAP_HEAD,
    );
};

const learningFigure = function learningFigure(): HTMLElement {
    const shell = createElement("div", {
        children: [renderLearning(layoutLearning(LEARNING)).vector],
        className: "learning-map",
    });
    return animated("figure", { children: [shell], className: "learning-card" }, FADE_IN_UP_LARGE, DELAY_MAP);
};

const hero = function hero(): HTMLElement {
    const brand = animated(
        "div",
        {
            children: [
                createElement("img", { attributes: { alt: HOME_HEADING, src: SITE_MARK }, className: "home-mark" }),
                createElement("p", { className: "home-eyebrow", text: HOME_EYEBROW }),
            ],
            className: "home-brand",
        },
        FADE_IN,
        0,
    );
    const column = createElement("div", {
        children: [
            brand,
            thesis(),
            animated("p", { className: "home-lead", text: HOME_LEAD }, FADE_IN, DELAY_LEAD),
            actions(),
            mapHead(),
        ],
        className: "home-intro",
    });
    const glow = createElement("div", { className: "home-glow" });
    return createElement("section", { children: [glow, column, learningFigure()], className: "home-hero" });
};

const renderHome = function renderHome(): Element {
    return createElement("div", {
        children: [hero(), renderStats(STATS, DELAY_STATS), renderRows(ROWS, DELAY_ROWS)],
        className: "home-content",
    });
};

export const PAGE: PageDefinition = {
    content: {
        heading: HOME_HEADING,
        kind: "home",
        lead: HOME_LEAD,
        rows: ROWS.map(([copy]) => copy),
        stats: STATS,
        thesis: HOME_THESIS,
    },
    description: HOME_DESCRIPTION,
    id: HOME_PAGE,
    render: renderHome,
    title: HOME_TITLE,
};
```