kayomn.net/templates/base.html

55 lines
1.6 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="/base.css" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>[ Kayomn ]</title>
</head>
<body>
<nav><a href="/"><img src="/logo.png" /></a></nav>
<main style="min-height: 700px;" class="columns">
<div style="min-width: 70%;">
{% block content %}{% endblock content %}
</div>
<div style="min-width: 30%;">
<h1>Projects</h1>
<div id="git-feed"></div>
</div>
</main>
<footer>
<span>Website written by <a href="https://sauce.pizzawednes.day/kayomn/kayomn.net">Me</a> and powered by the <a href="https://www.getzola.org/">Zola</a> site generation tool.</span>
</footer>
</body>
<script type="module">
import {fetchRepos} from "/scripts/gitea.js"
window.addEventListener("load", async () => {
const feed = document.getElementById("git-feed")
fetchRepos("kayomn").catch(reason => {
console.warn(reason)
feed.innerHTML = `<div style="font-style: italic;">Feed unavailable at this time.</div>`
}).then(repos => {
const htmlBlocks = []
for (const repo of repos.sort((a, b) => (b.stars_count - a.stars_count))) {
if (!repo.fork) htmlBlocks.push(`<div style="animation: slide-up 0.4s ease; margin: 15px 0;">
<a class="subtitle" href="${repo.html_url}">${repo.name}</a>
<div>${repo.description || `<span style="font-style: italic;">No description.</span>`}</div>
</div>`)
}
feed.innerHTML = htmlBlocks.join("\n")
})
})
</script>
</html>