migrate: Finish tag.html page; Add <tag-post-list> WebC component (…

…#75)

_app/tag-filters.plugin.js

@@ -16,13 +16,14 @@ module.exports = (eleventyConfig) => {
 function getAllTags (collection) {
   const TAGS = [];
   // let tagSet = new Set();
-  for(let item of collection) {
+  for (let item of collection) {
     splitTags(item.data.tags).forEach((tag) => {
       const found = TAGS.find(el => el.tag === tag);
       if (found) {
         found.count++;
+        found.posts.push(item);
       } else {
-        TAGS.push({ tag, count: 1 });
+        TAGS.push({ tag, count: 1, posts: [ item ] });
       }
       // tagSet.add(tag)
     });

_components/tag-list.webc

@@ -11,6 +11,7 @@
 
   const { slugify, getGlobal, getAllTags, filterTagList } = this.helpers;
   const { Math } = getGlobal();
+  const PATH = '#';
 
   // console.log('>>> tag-list.webc:', this.helpers);
 
@@ -22,7 +23,7 @@
     TAGS.sort((A, B) => A.tag < B.tag ? -1 : 1);
 
     return TAGS.map((tag) => `<li data-n="${tag.count}">
-      <a href="/tag/${slugify(tag.tag)}" todo="@TODO slugify" style="${fontSizeVar(tag.count)}"><u>${tag.tag}</u> <n>(${tag.count})</n></a>
+      <a href="${PATH + slugify(tag.tag)}" todo="@TODO slugify" style="${fontSizeVar(tag.count)}"><u>${tag.tag}</u> <n>(${tag.count})</n></a>
     </li>`)
       .join('\n');
   }
@@ -39,7 +40,7 @@
 
     X-display: inline-flex;
     list-style: none;
-    margin: 0;
+    margin: 2rem 0;
     padding: 0;
   }
   .tag-cloud > * {

_components/tag-post-list.webc

@@ -0,0 +1,28 @@
+<script webc:type="js" webc:is="template">
+  /**
+   * Output a list of posts for the tags in a collection.
+   *
+   * @attribute collection -
+   */
+
+  const { slugify, getAllTags, filterTagList } = this.helpers;
+  const PATH = nav.pathPrefix || '';
+
+  tagPostList(collection || collections.posts);
+
+  function tagPostList (collection) {
+    const TAGS = filterTagList(getAllTags(collection));
+
+    TAGS.sort((A, B) => A.tag < B.tag ? -1 : 1);
+
+    return TAGS.map((tag) => `<h2 id="${slugify(tag.tag)}">${tag.tag}</h2>
+    <ul>${listPostsForTag(tag)}</ul>`)
+      .join('\n');
+  }
+
+  function listPostsForTag (tag) {
+    return tag.posts.map((post) => `<li>
+    <a href="${PATH + post.url}">${post.data.title}</a></li>`)
+      .join('\n');
+  }
+</script>

_data/site.js

@@ -5,6 +5,7 @@
 const frontendJavascript = () => process.env.JS === '1';
 
 module.exports = {
+  enableJavascript: frontendJavascript(),
   frontendJavascript: frontendJavascript(),
   googSearchId: '001222343498871500969:-u73i2qfu2s',
 

_pages/tag.html

@@ -14,6 +14,13 @@ <h1 class="page-heading">Tags</h1>
   <ul class="tag-cloud">
     <tag-list :collection="collections.posts" webc:nokeep></tag-list>
   </ul>
+</div>
+
+<hr>
+
+<div class="tag-post-list">
+
+  <tag-post-list :collection="collections.posts" webc:nokeep></tag-post-list>
 
 
   {% assign sorted_tags = site.tags | sort %}