homepage/index.js

130 lines
3.8 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="${selected ? "Button Button-selected" : "Button"}">${text}</a>
`;
const navigation = ({currentName}) => `
2022-08-27 16:50:42 +03:00
<nav class="Navigation Card Card-layout">
<b class="Navigation-branding">${data.navigationBrandingText}</b>
2022-08-27 16:50:42 +03:00
${data.navigationLinks.map(e => linkButton({ ...e, selected: currentName === e.name })).join("")}
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})}
<main class="Card Card-layout">
${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 Card-inner">
<div class="Project-top">
<b>${repo.fork ? "🍴" : "📘"} ${repo.name}</b>
<a class="Button Project-top-view" 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
};
const renderPages = async () => {
let renderedPages = {};
for (const [pageName, builder] of Object.entries(pages)) {
renderedPages[pageName] = await builder();
}
return renderedPages;
};
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);
}
};
deployPages();