diff options
| author | funemy | 2022-10-25 07:14:52 +0000 |
|---|---|---|
| committer | funemy | 2022-10-25 07:14:52 +0000 |
| commit | 998ef837b43203319397f191036a97a5adc42220 (patch) | |
| tree | 920558bd60d282c663fd2da1cd4144cac1849a1d /index.html | |
| parent | fdac6c60e115297a58f5b81da0c4b7f18ac758f2 (diff) | |
| parent | ce7544a6db594f7d3dfad0d7dc65d01515e57ad6 (diff) | |
Merge branch 'main' of github.com:braxtonhall/fib
Diffstat (limited to 'index.html')
| -rw-r--r-- | index.html | 93 |
1 files changed, 93 insertions, 0 deletions
diff --git a/index.html b/index.html new file mode 100644 index 0000000..b3a7b9c --- /dev/null +++ b/index.html @@ -0,0 +1,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; + margin-bottom: 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> + + <a href="https://github.com/braxtonhall/fib#contributing"><span>Want to contribute?</span></a> +<script> + const getContributors = _ => fetch(`/fib/people.json`).then(res => res.json()); + + const toPersonNode = person => $("<div>", {class: "person"}).append( + toPersonHeader(person), + ...person.entries.sort(cmpName).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 cmpName = (a, b) => a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1; + + $(document).ready( + _ => getContributors() + .then(people => people.sort(cmpName)) + .then(people => people.map(toPersonNode)) + .then(nodes => $("#contributors").append(...nodes)) + ); +</script> +</body> +</html> |