feat: add products page

2025-06-27 16:27:00 -07:00
parent 94b481b9a2
commit 96eb46a6ea
3 changed files with 380 additions and 0 deletions
--- a/products/index.html
+++ b/products/index.html
@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>NHCarrigan Product Directory</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="An automated list of the products offered by NHCarrigan." />
+    <script src="https://cdn.nhcarrigan.com/headers/index.js" async defer></script>
+  </head>
+  <body>
+    <main>
+    <h1>NHCarrigan Product Directory</h1>
+    <section>
+      <p>An automated list of the products offered by NHCarrigan.</p>
+      <p>Products without a link to a public page are either not hosted or still under active development and not shipped yet. </p>
+      <p id="count">Loading directory...</p>
+    </section>
+    <section id="data">
+    </section>
+    </main>
+  </body>
+  <script>
+    const titleCase = (name) => {
+        // Repository names are in kebab-case, so we need to convert them to Title Case.
+        return name
+            .split("-")
+            .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+            .join(" ");
+    }
+    const loadProducts = (products) => {
+        const public = products.filter(product => product.category === "public").sort((a, b) => a.name.localeCompare(b.name));
+        const private = products.filter(product => product.category === "private").sort((a, b) => a.name.localeCompare(b.name));
+        const games = products.filter(product => product.category === "games").sort((a, b) => a.name.localeCompare(b.name));
+        const archived = products.filter(product => product.category === "archived").sort((a, b) => a.name.localeCompare(b.name));
+
+        const html = `
+            <h2>Public Products</h2>
+            <p>These are our products which are open source and completely available to the public.</p>
+            ${public.map(product => `<h3>${titleCase(product.name)}</h3><p>${product.description}</p>${product.url ? `<p class="italic"><a href="${product.url}" target="_blank">View Product</a></p>` : `<p class="italic">Not hosted.</p>`}`).join("")}
+            <h2>Public Games</h2>
+            <p>The games we have developed are available to the public, but due to licensing we cannot open source them.</p>
+            ${games.map(product => `<h3>${titleCase(product.name)}</h3><p>${product.description}</p>${product.url ? `<p class="italic"><a href="${product.url}" target="_blank">Play Game</a></p>` : `<p class="italic">Not hosted.</p>`}`).join("")}
+            <h2>Private Products</h2>
+            <p>These are our products which are closed-source, either due to proprietary information or a client request. However, a hosted version may be available.</p>
+            ${private.map(product => `<h3>${titleCase(product.name)}</h3><p>${product.description}</p>${product.url ? `<p class="italic"><a href="${product.url}" target="_blank">View Product</a></p>` : `<p class="italic">Not hosted.</p>`}`).join("")}
+            <h2>Archived Products</h2>
+            <p>These are our products which are no longer maintained, but are still available to the public.</p>
+            ${archived.map(product => `<h3>${titleCase(product.name)}</h3><p>${product.description}</p>${product.url ? `<p class="italic"><a href="${product.url}" target="_blank">View Product</a></p>` : `<p class="italic">Not hosted.</p>`}`).join("")}
+            `;
+
+            const count = document.getElementById("count");
+            const data = document.getElementById("data");
+            count.innerText = `Found ${products.length} products.`;
+            data.innerHTML = html;
+    }
+    fetch("./data.json").then(res => res.json()).then(data => loadProducts(data.filter(el => el.name !== "template")))
+  </script>
+  <style>
+        .italic {
+            font-style: italic;
+        }
+  </style>
+</html>