diff options
| author | braxtonhall | 2022-10-24 04:08:22 +0000 |
|---|---|---|
| committer | braxtonhall | 2022-10-24 04:08:22 +0000 |
| commit | 383b5fe9374f580ef2d1eb3a450cb8b755ad54d4 (patch) | |
| tree | 08a0e37672c50e35ce9cc8210f4f6862bedadec6 /index.html | |
| parent | e2dbb1327f5264080ceb87659ad3cb57b2a0042c (diff) | |
Migrate contributors to static html
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..3755c55 --- /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; + } + </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> |