presentation/views/home.view.ts

presentation/views/home.view.ts is a file in Bane's Lab Site. 156 lines of code and 22 definitions.

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 "#core/generated/learning.generated";
import { LLMS_ROUTE } from "#core/assets/link.assets";
import type { PageDefinition } from "#types/page.types";
import { SITE_MARK } from "#core/assets/image.assets";
import { SITE_METRICS } from "#core/generated/metric.generated";
import { SPACE } from "#configuration/constants/document.constants";
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 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(SPACE).flatMap((word, index) => [
        animated("span", { className: "word", text: word }, FADE_IN_UP, DELAY_THESIS + index * WORD_STEP),
        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,
};