Add homepage, styles, and script

nicfv · Mar 20, 2024 · 37cb2b7 · 37cb2b7
1 parent dc4a542
commit 37cb2b7
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 0 deletions.
diff --git a/.github/workflows/home/index.html b/.github/workflows/home/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <title>nicfv | npm</title>
+    <meta charset="UTF-8">
+    <meta name="description" content="nicfv's public NPM packages in one repository">
+    <meta name="keywords" content="npm">
+    <meta name="author" content="Nicolas Ventura">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="main.css">
+    <script type="text/javascript" src="index.js"></script>
+</head>
+
+<body>
+</body>
+
+</html>
diff --git a/.github/workflows/home/index.js b/.github/workflows/home/index.js
@@ -0,0 +1,21 @@
+const packages = {};
+
+window.addEventListener('load', init);
+
+function init() {
+    for (let package in packages) {
+        const a = document.createElement('a'),
+            h1 = document.createElement('h1'),
+            h2a = document.createElement('h2'),
+            h2b = document.createElement('h2');
+        a.href = '/' + packages[package].dir;
+        h1.textContent = package + ' - v' + packages[package].ver;
+        h2a.textContent = 'Updated ' + new Date(packages[package].time * 1e3).toDateString();
+        h2b.textContent = packages[package].desc;
+        a.appendChild(h1);
+        a.appendChild(h2a);
+        a.appendChild(h2b);
+        document.body.appendChild(a);
+        console.log(package, packages[package]);
+    }
+}
diff --git a/.github/workflows/home/main.css b/.github/workflows/home/main.css
@@ -0,0 +1,38 @@
+* {
+    outline: none;
+    border-collapse: collapse;
+    box-sizing: border-box;
+}
+
+body {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    font-family: monospace;
+    background: #ddd;
+}
+
+a {
+    margin: 1rem;
+    padding: 1rem;
+    background: slategray;
+    text-decoration: none;
+    cursor: pointer;
+    border-radius: 0.25rem;
+    width: 20rem;
+    color: white;
+}
+
+a:hover {
+    background: slateblue;
+}
+
+a:active {
+    background: steelblue;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background: #222;
+    }
+}