all repos — h3 @ e6944be8d0056c3096d58a82273d403a29bcc694

A tiny, extremely minimalist JavaScript microframework.

docs/js/app.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 
import { h3, h } from "./h3.js";
import marked from "./vendor/marked.js";
import Prism from "./vendor/prism.js";

const labels = {
    overview: "Overview",
    "quick-start": "Quick Start",
    "key-concepts": "Key Concepts",
    tutorial: "Tutorial",
    api: "API",
    about: "About",
};

const pages = {};

const fetchPage = async (pages, id, md) => {
    if (!pages[id]) {
        const response = await fetch(md);
        const text = await response.text();
        pages[id] = marked(text);
        h3.redraw();
    }
};

const Page = () => {
    const id = h3.route.path.slice(1);
    const ids = Object.keys(labels);
    const md = ids.includes(id) ? `md/${id}.md` : `md/overview.md`;
    fetchPage(pages, id, md);
    return h("div.page", [
        Header,
        h("div.row", [
            h("input#drawer-control.drawer", { type: "checkbox" }),
            Navigation(id, ids),
            Content(pages[id]),
            Footer,
        ]),
    ]);
};

const Header = () => {
    return h("header.row.sticky", [
        h("a.logo.col-sm-1", { href: "#/" }, [
            h("img", { alt: "H3", src: "images/h3.svg" }),
        ]),
        h("div.version.col-sm.col-md", [
            h("div.version-number", "v0.10.0"),
            h("div.version-label", "“Jittery Jem'Hadar“"),
        ]),
        h("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }),
    ]);
};

const Footer = () => {
    return h("footer", [h("div", "© 2020 Fabio Cevasco")]);
};

const Navigation = (id, ids) => {
    const menu = ids.map((p) =>
        h(`a${p === id ? ".active" : ""}`, { href: `#/${p}` }, labels[p])
    );
    return h("nav#navigation.col-md-3", [
        h("label.drawer-close", { for: "drawer-control" }),
        ...menu,
    ]);
};

const Content = (html) => {
    const content = html
        ? h("div.content", { $html: html })
        : h("div.spinner-container", h("span.spinner"));
    return h("main.col-sm-12.col-md-9", [
        h("div.card.fluid", h("div.section", content)),
    ]);
};

h3.init(Page);
h3.on("$redraw", () => Prism.highlightAll());