homepage/src/index.js

141 lines
4.1 KiB
JavaScript
Raw Normal View History

const fs = require("node:fs/promises");
const path = require("node:path");
const fetch = (...args) => import('node-fetch').then(({default: fetch}) => fetch(...args));
const { html: beautifyHtml } = require('js-beautify');
const data = {
outputDirectory: "./out",
navigationLinks: [
2022-08-27 15:49:19 +03:00
{link: "index.html", text: "home", name: "index"},
{link: "projects.html", text: "projects", name: "projects"},
{link: "https://git.hippoz.xyz", text: "git", name: "__ext_git"},
],
postProcessing: {
beautifyOutput: true,
beautifyOutputOptions: {
indent_size: 2,
preserve_newlines: false
},
minifyOutputOptions: {
indent_size: 0,
preserve_newlines: false,
end_with_newline: false,
eol: ""
}
},
repositoryList: {
gitTargetUsername: "hippoz",
repositoryFetchUrl: `https://git.hippoz.xyz/api/v1/users/hippoz/repos?page=1&limit=100`,
_cache: null,
fetchProjects: async function() {
if (this._cache) return this._cache;
const response = await fetch(this.repositoryFetchUrl);
const json = await response.json();
this._cache = json;
return json;
}
},
navigationBrandingText: "hippoz."
};
const linkButton = ({ link, text, selected=false }) => `
<a href="${link}" class="button-default${selected ? " button-selected" : ""}">${text}</a>
`;
const navigation = ({currentName}) => `
2022-08-27 15:49:19 +03:00
<nav class="card layout-card noselect">
<div class="float-left">
<b class="navigation-branding-text">${data.navigationBrandingText}</b>
</div>
<div class="align-right">
${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
</div>
2022-08-27 15:49:19 +03:00
</nav>
`;
const makePage = ({ name, description, title }) => content => [`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="${description}">
<title>${title}</title>
<link rel="stylesheet" href="res/style.css">
</head>
<body>
${navigation({currentName: name})}
2022-08-27 15:49:19 +03:00
<main class="card layout-card" id="content">
${content}
2022-08-27 15:49:19 +03:00
</main>
</body>
</html>
`, content];
const indexPage = () => makePage({
title: "hippoz",
description: "hippoz website homepage",
2022-08-27 15:49:19 +03:00
name: "index",
})(`
<h2>hippoz's website</h2>
<p>i think</p>
`);
const projectsPage = async () => makePage({
title: "hippoz",
description: "hippoz projects",
name: "projects",
})(`
${
(await data.repositoryList.fetchProjects())
.sort((a, b) => b.size - a.size) // biggest projects first
.filter(a => !a.archived)
.map(
repo =>`
<div class="card inner-card">
<div>
<b>${repo.fork ? "🍴" : "📘"} ${repo.name}</b>
<a class="button-default float-right" href=${repo.html_url}>view >></a>
</div>
2022-08-27 15:49:19 +03:00
${repo.description ? `<p>${repo.description}</p>` : ""}
</div>`
)
.join("\n")
}
`);
const pages = {
"projects.html": projectsPage,
"index.html": indexPage
};
let renderedPageCache = null;
const renderPages = async () => {
if (renderedPageCache) return renderedPageCache;
renderedPageCache = {};
for (const [pageName, builder] of Object.entries(pages)) {
renderedPageCache[pageName] = await builder();
}
return renderedPageCache;
};
const deployPages = async () => {
const renderedPages = await renderPages();
for (let [pageName, content] of Object.entries(renderedPages)) {
if (data.postProcessing.beautifyOutput) {
content = beautifyHtml(content[0], data.postProcessing.beautifyOutputOptions);
}
await fs.writeFile(path.join(data.outputDirectory, pageName), content);
}
};
const deployAll = async () => {
await deployPages();
};
deployAll();