-
Notifications
You must be signed in to change notification settings - Fork 61
/
watch.js
104 lines (88 loc) · 2.63 KB
/
watch.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import chokidar from "chokidar";
import { install } from "./install.js";
import express from "express";
import livereload from "livereload";
import fs from "node:fs";
install(process.argv[2]);
// launch express server with livereload
const liveReloadServer = livereload.createServer();
const app = express({
root: "./dist",
index: "index.html",
});
app.get("*", (req, res) => {
// Build the path of the file using the URL pathname of the request.
if (req.url.indexOf("font.woff2") > 0) {
res.sendFile("sketchybar-app-font.woff2", {root: "./dist"});
return;
}
res.send(getPreviewHTML());
});
const PORT = 3003;
app.listen(PORT, () => {
console.log("listening on port ", PORT);
});
chokidar.watch(["./mappings", "./svgs"]).on("change", (event, path) => {
install(process.argv[2], false);
liveReloadServer.refresh("/");
});
function getPreviewHTML() {
const iconMap = fs
.readdirSync("./mappings")
.map((file) => file.replace(".svg", ""));
return `
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sketchybar App Font Preview</title>
<script>
document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] +
':35729/livereload.js?snipver=1"></' + 'script>')
</script>
<style>
@font-face {
font-family: 'preview-font';
src: url('./font.woff2?v=${new Date().getTime()}') format('woff2');
}
body {
font-family: monospace;
}
.icon-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
grid-gap: 1em;
}
.icon-container {
display: flex; flex-direction: column; align-items: center;
}
.icon-title {
font-size: 0.8em;
display: inline-block;
margin-bottom: 0.5em;
}
.icon {
font-family: preview-font;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
font-size: 4em;
}
</style>
</head>
<body>
<h1>Sketchybar App Font Preview</h1>
<div class="icon-grid">
${iconMap
.map(
(iconName) =>
`<div class="icon-container"><span class="icon-title">${iconName}</span><span class="icon">${iconName}</span></div>`
)
.join("\n")}
</div>
</p>
</body>
</html>
`;
}