generated from Luis/nextjs-python-web-template
47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { writeFile } from "fs";
|
|
import palette from "./colors.json" assert { type: "json" };
|
|
import { config } from "./config.js";
|
|
|
|
type PaletteFile = typeof palette;
|
|
|
|
const html = (palette: PaletteFile): string => {
|
|
const colors = Object.keys(config.baseColors).map((baseName) => {
|
|
const colors = Object.entries(palette.ref.palette)
|
|
.filter(([name, _]) => name.includes(baseName))
|
|
.sort((a, b) => {
|
|
return a[1].meta.color.shade - b[1].meta.color.shade;
|
|
})
|
|
.map(([key, color]) => {
|
|
console.log({ key, color });
|
|
return `<div style="background-color:${color.value}; color:${
|
|
color.meta.color.shade < 48 ? "#fff" : "#000"
|
|
}; height: 10rem; border:solid 1px grey; display:grid; place-items:end;">${key}</div>`;
|
|
});
|
|
return `<div style="display: grid; grid-template-columns: repeat(${13}, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem">${colors.join(
|
|
"\n",
|
|
)}</div>`;
|
|
});
|
|
|
|
return `<!DOCTYPE html>
|
|
<html lang="en">
|
|
<meta charset="UTF-8">
|
|
<title>Page Title</title>
|
|
<style>
|
|
</style>
|
|
<body>
|
|
|
|
${colors.join("\n")}
|
|
|
|
</body>
|
|
</html>
|
|
`;
|
|
};
|
|
|
|
writeFile("index.html", html(palette), (err) => {
|
|
if (err) {
|
|
console.error({ err });
|
|
} else {
|
|
console.log("Exported colors to html");
|
|
}
|
|
});
|