aboutsummaryrefslogtreecommitdiff
path: root/index.html
blob: 3755c552627149fbf19074fb3d4831a37cb4b790 (plain) (blame)
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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fib</title>
    <style>
        .person {
            margin-bottom: 1em;
        }
        .person-pic {
            width: 50px;
        }
        .person-header {
            display: flex;
            align-items: end;
        }
        .person-header > * {
            margin: 0.5em;
        }
        .person-name {
            margin-bottom: 0;
        }
        .person-title {
            margin-top: 0;
            font-size: 80%;
        }
        .person > p {
            margin: 0;
            margin-left: 0.5em;
        }
        #contributors-container {
            margin-top: 3em;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <h1><code>fib</code></h1>
    <p>Can you please give me a Fibonacci function? Ideally (but not necessarily) one that only you would give me.</p>

    <p>For a submission to the upcoming "Reclaim your space" exhibition at <a href="https://www.instagram.com/hatch_artgallery">Hatch Art Gallery</a>.</p>

    <div id="contributors-container">
        <h3>Contributors</h3>
        <div id="contributors"></div>
    </div>
<script>
    const getContributors = _ => fetch("/people.json").then(res => res.json());

    const toPersonNode = person => $("<div>", {class: "person"}).append(
        toPersonHeader(person),
        ...person.entries.sort(cmpEntry).map(toPersonEntryNode),
    );

    const toPersonImage = github => github
        ? $("<img>", {class: "person-pic", src: `https://github.com/${github}.png`, alt: github})
        : $("<div>", {class: "person-pic"});
    

    const toPersonDetails = person =>
        $("<div>").append(
            person.github
                ? $("<a>", {href: `https://github.com/${person.github}`})
                    .append($("<p>", {class: "person-name"}).text(person.name))
                : $("<p>", {class: "person-name"}).text(person.name),
            $("<p>", {class: "person-title"}).text(person.title),
        );

    const toPersonHeader = person => $("<div>", {class: "person-header"})
        .append(toPersonImage(person.github), toPersonDetails(person));

    const toPersonEntryNode = entry => $("<p>").append(
        $("<a>", {
            href: entry.link.startsWith("./entries")
                ? `https://github.com/braxtonhall/fib/tree/main/${entry.link.replace(/^\.\//, "")}`
                : entry.link
        }).append($("<code>").text(entry.name)),
    );

    const cmpPeople = () => 1; // TODO

    const cmpEntry = () => 1; // TODO

    $(document).ready(async _ => {
        const contributors = await getContributors()
            .then(people => people.sort(cmpPeople))
            .then(people => people.map(toPersonNode))
            .then(nodes => $("#contributors").append(...nodes));
        console.log(contributors);
    });
</script>
</body>
</html>