Web developer and autodidact with an interest in creative coding.
Published
Edited
May 27, 2022
6 stars
octokit = new Octokit()
files = octokit.rest.repos.getContent({
owner: 'aaronkyle',
repo: 'social-development',
path: 'social-policy'
})
html`<div class=gh-list>
<ul>${files.data
// Sort: folders (type "dir") first, files (type "file") next
.slice().sort(({type:a},{type:b})=>a<b?-1:a>b?1:0)
.map(({name, html_url, type}) => html`<li data-type=${type}><a href="${html_url}">${DOM.text(name)}`)}
`
html`<style>
.gh-list {position:relative; max-height: 20em; overflow: auto; font: .95em sans-serif }
.gh-list li + li { margin-top: .2em }
.gh-list li:before { content: " "; margin-left: -1.5em; font: .8em/1.6em sans-serif}
.gh-list li[data-type="file"]:before { content: "📄" }
.gh-list li[data-type="dir"]:before { content: "📁" }
`
Octokit = (await import('https://cdn.skypack.dev/@octokit/rest@18.12.0')).Octokit
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
