Add template and lineage metadata info into homepage view

lib/createGraphic.js

@@ -54,6 +54,11 @@ module.exports = async function(config, template, slug, sheetID) {
     console.log(`Using existing sheet ${sheetID}`);
   }
 
+  // add template info to manifest
+  if (template) {
+    manifest.templateType = template;
+  }
+
   try {
     // snapshot the current global packages for the record, in case we upgrade later
     var package = await readJSON(path.join(config.root, "package.json"));

lib/duplicateGraphic.js

@@ -29,7 +29,7 @@ module.exports = async function(config, original, slug) {
   console.log("Loading manifest");
   var manifestPath = path.join(dest, "manifest.json");
   var manifest = await readJSON(manifestPath);
-  var { sheet } = manifest;
+  var { sheet,parent } = manifest;
 
   if (sheet) {
     console.log("Duplicating existing sheet");
@@ -42,6 +42,13 @@ module.exports = async function(config, original, slug) {
     }
   }
 
+  //load/create parent info
+  if (parent) {
+    manifest.parent.push(original)
+  } else {
+    manifest.parent = [original]
+  }
+
   await fs.writeFile(manifestPath, JSON.stringify(manifest, null, 2));
   console.log(`Duplicate of ${original} created as ${fullSlug} -- you got this!`);
 

server/handlers/root.js

@@ -1,5 +1,6 @@
 var fs = require("fs").promises;
 var path = require("path");
+var readJSON = require("../../lib/readJSON");
 
 var getFolders = async function(dir) {
   var listing = await fs.readdir(dir);
@@ -18,12 +19,40 @@ var getFolders = async function(dir) {
   return matching;
 };
 
+var getMetadata = async function(data,dir) {
+  var metadata = {};
+  for (var i = 0; i < data.length; i++) {
+    var manifestPath = path.join(dir, data[i], "manifest.json");
+    var manifest = await readJSON(manifestPath);
+    if (manifest.templateType) {
+      var template = manifest.templateType;
+    } else {
+      template = "";
+    }
+
+    if (manifest.parent) {
+      var parent = manifest.parent;
+    } else {
+      var parent = [];
+    }
+
+    metadata[data[i]] = {
+      "templateType":template,
+      "parent":parent
+    }
+  }
+  return metadata;
+};
+
+
 module.exports = async function(request, response) {
   var app = request.app;
   var config = app.get("config");
 
   var graphics = await getFolders(config.root);
   var templates = await getFolders(config.templateRoot);
 
-  response.render("rootList.html", { graphics, templates });
+  var graphicMetadata = await getMetadata(graphics,config.root)
+
+  response.render("rootList.html", { graphics, templates, graphicMetadata });
 };

server/static/rootPage.js

@@ -1,20 +1,31 @@
 import { showToast } from "./toast.js";
 import { $ } from "./qsa.js";
 
-var searchInput = $.one(".search-graphics");
+var slugInput = $.one(".search-graphics");
+var templateInput = $.one(".search-templates");
+
 var graphicItems = $(".graphics-list .item");
 
-var filterGraphics = function() {
-  var value = searchInput.value;
+var filterGraphics = function(inputBox,items,key) {
+  var value = inputBox.value;
+
+  if (key == "template") {
+    value = value.replaceAll(" ","_")
+  } 
+
   var re = new RegExp(value);
-  graphicItems.forEach(li => {
-    var { slug } = li.dataset;
-    li.classList.toggle("hide", !slug.match(re));
+
+  items.forEach(tr => {
+    var thing = tr.dataset[key];
+    tr.classList.toggle("hide", !thing.match(re));
   });
 };
 
-searchInput.addEventListener("keyup", filterGraphics);
-filterGraphics();
+slugInput.addEventListener("keyup", () => filterGraphics(slugInput,graphicItems,"slug"));
+filterGraphics(slugInput,graphicItems,"slug");
+
+templateInput.addEventListener("keyup", () => filterGraphics(templateInput,graphicItems,"template"));
+filterGraphics(templateInput,graphicItems,"template");
 
 var createShade = $.one(".create.shade");
 var toggleCreate = $.one(".new-graphic");

server/static/style.css

@@ -173,6 +173,7 @@ select {
   border: 0;
   background: var(--off-white);
   padding: 0 10px;
+  margin: 0 5px;
 }
 
 .toolbar .spacer {
@@ -258,7 +259,7 @@ select {
 }
 
 .root-list .graphics-list {
-  max-width: 400px;
+  /*max-width: 600px;*/
   margin: 40px auto;
 }
 
@@ -283,6 +284,41 @@ select {
   display: none;
 }
 
+
+/* Table view home page */
+
+
+/*// Base table styles*/
+div.graphics-list {
+  max-width: 1000px;
+}
+
+table {
+  border-collapse: collapse;
+  padding: 0;
+  width: 100%;
+  color: #666;
+}
+
+table th {  
+  line-height: 1.2;
+  text-align: left;
+  vertical-align: bottom;
+}
+
+table td { 
+  vertical-align: top;   
+  margin: 2px 0;
+  padding: 2px;
+  font-size: 18px;
+  border-bottom: 1px dashed var(--light-gray);
+  height: 20px;
+}
+
+table tr.hide {
+  display: none;
+}
+
 /* preview page */
 
 .preview-page a.back {

server/templates/rootList.html

@@ -11,7 +11,8 @@
     <header class="toolbar">
       <h1 class="title">daily.graphics</h1>
       <button class="new-graphic">new()</button>
-      <input type="search" placeholder="Search list" class="search-graphics"/>
+      <input type="search" placeholder="Search slugs" class="search-graphics"/>
+      <input type="search" placeholder="Search templates" class="search-templates"/>
     </header>
     <div class="create shade">
       <form method="POST" action="/graphic">
@@ -27,16 +28,46 @@ <h1 class="title">daily.graphics</h1>
         <button type="submit">Create</button>
       </form>
     </div>
-
-    <ol class="graphics-list">
-    <% graphics.forEach(function(g) { %>
-      <li data-slug="<%= g %>" class="item">
-        <div class="contents">
-          <a href="/graphic/<%= g %>/"><%= g %></a>
-        </div>
-    <% }); %>
-    </ol>
 
+    <div class="graphics-list">
+      <table id="state-table" role="table">
+        <thead role="rowgroup">
+          <tr role="row">
+            <th role="columnheader">
+              <div><div class="icon"></div></div>
+              <div class="header">Slug</div>
+            </th>
+            <!-- <th role="columnheader">
+              <div><div class="icon"></div></div>
+              <div class="header">Creation Date</div>
+            </th> -->
+            <th role="columnheader">
+              <div><div class="icon"></div></div>
+              <div class="header">Original template</div>
+            </th>
+            <th class="amt sort-header" role="columnheader">
+              <div><div class="icon"></div></div>
+              <div class="header">Lineage</div>
+            </th>
+          </tr>
+        </thead>
+
+        <% graphics.forEach(function(g) {
+          let lineage = graphicMetadata[g].parent.join("👉")
+        %>
+          <tr data-slug="<%= g %>" data-template="<%= graphicMetadata[g].templateType %>" class="item" role="row">
+            <td data-slug="<%= g %>" role="cell" data-title="Slug">
+              <div class="contents">
+                <a href="/graphic/<%= g %>/"><%= g %></a>
+              </div>
+            </td>
+            <td role="cell" data-title="template"><%= graphicMetadata[g].templateType.replace(/(_|^)(\w)/g, (_, p, s) => " " + s.toUpperCase()) %></td>
+            <td role="cell" data-title="lineage"><%= lineage %></td>
+          </tr>
+        <% }); %>
+
+      </table>
+    </div>
     <script type="module" src="rootPage.js"></script>
   </body>
 </html>