story: Added tag list, fixed tag not showing when listing by tag.

marko/page/story/components/tags-page/component.js

@@ -0,0 +1,35 @@
+const pluralize = require("pluralize")
+
+// TODO: use graphql for this like with story categories
+const kinds = ["Character", "Event", "Location", "Organization", "Series"]
+
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      tags: [],
+      groups: [],
+    }
+
+    this.update(input.tags)
+  }
+
+  update(newTags) {
+    const tags = newTags.map(t => ({
+      kind: t.kind,
+      name: t.name,
+      url: `/story/by-tag/${t.kind}/${encodeURIComponent(t.name)}`
+    }))
+
+    const groups = kinds.map(k => ({
+      groupClass: "group-" + k.toLowerCase(),
+      colorClass: "color-tag-" + k.toLowerCase(),
+      header: pluralize(k),
+      tags: tags.filter(t => t.kind === k),
+    }))
+
+    this.state = Object.assign({}, this.state, {
+      tags: tags,
+      groups: groups,
+    })
+  }
+}

marko/page/story/components/tags-page/index.marko

@@ -0,0 +1,14 @@
+<div class="tags-page">
+  <h1 class="color-primary">All Tags</h1>
+  <p>These are all distinct tags that appear in at least one listed story.</p>
+  <div class="groups">
+    <div for(group in state.groups) class=["group", group.groupClass]>
+      <h2 class=group.colorClass>${group.header}</h2>
+      <ul>
+        <li for(tag in group.tags)>
+          <a href=tag.url class=group.colorClass>${tag.name}</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+</div>

marko/page/story/components/tags-page/style.less

@@ -0,0 +1,68 @@
+div.tags-page {
+  h1 {
+    font-weight: 100;
+    text-align: center;
+  }
+
+  p {
+    text-align: center;
+  }
+
+  div.groups {
+    column-count: 4;
+    padding: 0.5em;
+
+    div.group {
+      padding: 0.5em 0em;
+      vertical-align: top;
+
+      h2 {
+        font-weight: 100;
+        padding-bottom: 0.125em;
+        border-bottom: 0.5px solid;
+        margin-bottom: 0.25em;
+        margin-top: 0;
+      }
+
+      ul {
+        margin: 0;
+        padding: 0;
+
+        li {
+          list-style: none;
+
+          a:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+    div.group:first-of-type {
+      padding: 0;
+    }
+  }
+}
+
+@media screen and (max-width: 1900px) {
+  div.tags-page {
+    div.groups {
+      column-count: 3;
+    }
+  }
+}
+
+@media screen and (max-width: 1300px) {
+  div.tags-page {
+    div.groups {
+      column-count: 2;
+    }
+  }
+}
+
+@media screen and (max-width: 1000px) {
+  div.tags-page {
+    div.groups {
+      column-count: 1;
+    }
+  }
+}

marko/page/story/list.marko

@@ -1,6 +1,6 @@
 <include("../layout", {title: "Stories", site: "story"})>
   <@body>
     <background src="/assets/images/bg.png" opacity=0.25 />
-    <page user=input.user stories=input.stories categories=input.categories selected=input.selected menuAuthor=input.menuAuthor menuMonth=input.menuMonth />
+    <page user=input.user stories=input.stories categories=input.categories selected=input.selected menuAuthor=input.menuAuthor menuMonth=input.menuMonth menuTags=input.menuTags />
   </@body>
 </include>

marko/page/story/tag-list.marko

@@ -3,6 +3,7 @@
     <background src="/assets/images/bg.png" opacity=0.25 />
     <story-menu categories=input.categories selected=(input.selected || {}) menuTags=input.menuTags user=input.user />
     <main>
+      <tags-page tags=input.tags />
     </main>
   </@body>
 </include>

package-lock.json

@@ -1148,7 +1148,7 @@
     },
     "chai": {
       "version": "3.5.0",
-      "resolved": "http://registry.npmjs.org/chai/-/chai-3.5.0.tgz",
+      "resolved": "https://registry.npmjs.org/chai/-/chai-3.5.0.tgz",
       "integrity": "sha1-TQJjewZ/6Vi9v906QOxW/vc3Mkc=",
       "requires": {
         "assertion-error": "^1.0.1",
@@ -3834,6 +3834,11 @@
       "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
       "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY="
     },
+    "pluralize": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-7.0.0.tgz",
+      "integrity": "sha512-ARhBOdzS3e41FbkW/XWrTEtukqqLoK5+Z/4UeDaLuSW+39JPeFgs4gCGqsrJHVZX0fUrx//4OF0K1CUGwlIFow=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",

package.json

@@ -36,6 +36,7 @@
     "marko": "^4.13.8",
     "moment": "^2.22.2",
     "passport": "^0.4.0",
-    "passport-auth0": "^1.0.0"
+    "passport-auth0": "^1.0.0",
+    "pluralize": "^7.0.0"
   }
 }