migrate: Re-factored index and tag pages and components to use `webc:…

…for` (#75)
nfreear · Mar 26, 2023 · 77bb9a5 · 77bb9a5
1 parent ab913f9
commit 77bb9a5
Show file tree

Hide file tree

Showing 9 changed files with 95 additions and 76 deletions.
diff --git a/_app/app-filters.plugin.js b/_app/app-filters.plugin.js
@@ -34,6 +34,8 @@ module.exports = (eleventyConfig) => {
     return `&copy; ${now.getFullYear()}`; // ` Yours Truly.`;
   });
 
+  eleventyConfig.addFilter('reverse', (myArray) => [...myArray].reverse());
+
   eleventyConfig.addFilter('console', (ob) => console.log('>>>', ob));
 
   /** 'Math' and 'Date' globals are not directly available in WebC scripts - weird!

diff --git a/_app/liquid-filters.plugin.js b/_app/liquid-filters.plugin.js
@@ -0,0 +1,17 @@
+/**
+ * Add some useful filters from Liquid JS.
+ *
+ * @see https://liquidjs.com/filters/overview.html
+ * @see https://github.com/harttle/liquidjs/tree/master/src/filters
+ */
+
+const { filters } = require('liquidjs');
+const { strip_html, truncatewords } = filters;
+
+module.exports = (eleventyConfig) => {
+
+  eleventyConfig.addFilter('strip_html', (v) => strip_html(v));
+  eleventyConfig.addFilter('truncatewords', (v, words = 15, o = '...') => truncatewords(v, words, o));
+
+  // eleventyConfig.addFilter('truncatewords', eleventyConfig.getLiquidFilter('truncatewords'));
+};
diff --git a/_app/tag-filters.plugin.js b/_app/tag-filters.plugin.js
@@ -1,15 +1,43 @@
 /**
- * Functions to be used in the `tag-list` WebC component.
+ * Filters to be used in the `tag-list` WebC component.
+ *
+ * Add the "myTags" custom collection.
  *
  * @copyright Nick Freear, 05-Mar-2023.
  */
 
 module.exports = (eleventyConfig) => {
+  /**
+   * "myTags" custom collection.
+   */
+  eleventyConfig.addCollection('myTags', (collectionApi) => {
+    const POSTS = collectionApi.getFilteredByTag('posts');
+    const TAGS = sortTags(filterTagList(getAllTags(POSTS)));
+    // console.debug('>> addCollection - myTags:', Array.isArray(TAGS), TAGS.length, TAGS);
+    return TAGS;
+  });
+
+  /** Filters.
+   */
   eleventyConfig.addFilter('getAllTags', (collection) => getAllTags(collection));
 
   eleventyConfig.addFilter('filterTagList', (tags) => filterTagList(tags));
+
+  eleventyConfig.addFilter('sortGetTags', (collection) => {
+    return sortTags(filterTagList(getAllTags(collection)));
+  });
+
+  eleventyConfig.addFilter('fontSizeVar', (count) => {
+    count = parseInt(count);
+    return `--tc-log:${Math.log(count + 1)};--tc-log10:${Math.log10(count + 1)};`;
+    // return `--tc-font-size:${Math.log10(count + 1)}rem;`;
+  });
 };
 
+function sortTags (TAGS) {
+  return TAGS.sort((A, B) => A.tag < B.tag ? -1 : 1);
+}
+
 /**
  * @see https://github.com/11ty/eleventy-base-blog/blob/main/eleventy.config.js#L66-L76
  */
@@ -45,5 +73,3 @@ function splitTags (tagArray) {
   });
   return TAGS;
 }
-
-// module.exports = { Math, getAllTags, filterTagList };
diff --git a/_components/collection-list.webc b/_components/collection-list.webc
@@ -1,7 +1,6 @@
-
 <script webc:type="js" webc:is="template">
   /**
-   * Output a collection as a list.
+   * @DEPRECATED - Output a collection as a list.
    *
    * @TODO reverse
    * @attribute tag - Tag for the collection `tag="posts"`

diff --git a/_components/tag-list.webc b/_components/tag-list.webc
@@ -1,38 +1,23 @@
 <script webc:type="js" webc:is="template">
   /**
-   * Output a list of tags for a collection.
+   * Output a tag-cloud for a collection.
    *
    * @attribute collection -
    */
 
-  // 'Math' is not directly available in WebC scripts - weird!
-  // const { Math, getAllTags, filterTagList } = require('./_app/tags.lib');
-  // const { Math } = require('./_components/externals.js');
-
-  const { slugify, getGlobal, getAllTags, filterTagList } = this.helpers;
-  const { Math } = getGlobal();
-  const PATH = '#';
-
-  // console.log('>>> tag-list.webc:', this.helpers);
-
-  tagList(collection || collections.posts);
-
-  function tagList (collection) {
-    const TAGS = filterTagList(getAllTags(collection));
+''; // Prevent a ghost 'undefined'.
+</script>
 
-    TAGS.sort((A, B) => A.tag < B.tag ? -1 : 1);
 
-    return TAGS.map((tag) => `<li data-n="${tag.count}">
-      <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');
-  }
+<ul class="tag-cloud">
+  <li webc:for="(item, index) of collections.myTags" :data-idx="index + 1" :data-nn="item.count"
+    >
+    <a :href="'#' + slugify(item.tag)" :style="fontSizeVar(item.count)">
+      <u @text="item.tag"></u> <n @text="`(${item.count})`"></n>
+    </a>
+  </li>
+</ul>
 
-  function fontSizeVar (count) {
-    return `--tc-log:${Math.log(count + 1)};--tc-log10:${Math.log10(count + 1)};`;
-    // return `--tc-font-size:${Math.log10(count + 1)}rem;`;
-  }
-</script>
 
 <style>
   .tag-cloud {

diff --git a/_components/tag-post-list.webc b/_components/tag-post-list.webc
@@ -1,14 +1,14 @@
 <script webc:type="js" webc:is="template">
   /**
-   * Output a list of posts for the tags in a collection.
+   * @DEPRECATED - 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);
+  // Was: tagPostList(collection || collections.posts);
 
   function tagPostList (collection) {
     const TAGS = filterTagList(getAllTags(collection));
@@ -25,4 +25,6 @@
     <a href="${PATH + post.url}">${post.data.title}</a></li>`)
       .join('\n');
   }
+
+''; // Prevent a ghost 'undefined'.
 </script>
diff --git a/_pages/index.html b/_pages/index.html
@@ -8,22 +8,19 @@
 
   <h1 class="page-heading">Posts</h1>
 
-  <ul class="post-list">
-    {% for post in collections.posts reversed %}
-      <li>
-        {% capture date_format %}{{ site.date_format | default: "%b %-d, %Y" }}{% endcapture %}
-        <span class="post-meta">{{ post.date | date: date_format }}</span>
-        <h2>
-          <a class="post-link" href="{{ post.url | prepend: nav.baseurl }}">{{ post.data.title }}</a>
-        </h2>
-        {% if site.excerpt_truncate %}
-          <p>{{ post.content | strip_html | truncatewords: site.excerpt_truncate,"&hellip;" }}
-          <a class="more" href="{{ post.url | prepend: nav.baseurl }}">More<i class="sr-only"> on {{ post.data.title }}</i></a>
-        {% endif %}
-      </li>
-    {% endfor %}
-  </ul>
+  <ol reversed class="post-list" :style="'counter-reset: start-from ' + (collections.posts.length + 1)"
+    >
+    <li webc:for="(post, index) of reverse(collections.posts)" :data-idx="index + 1"
+      >
+      <h2><a class="post-link" :href="url(post.url)" @text="post.data.title"></a></h2>
+      <time class="post-meta" @text="readableDate(post.date)"></time>
+      <p webc:if="site.excerpt_truncate">
+        <t @html="strip_html(truncatewords(post.content, site.excerpt_truncate, '&hellip;'))" webc:nokeep></t>
+        <a class="more" :href="url(post.url)">More<i class="sr-only" @text="'on ' + post.data.title"></i></a>
+      </p>
+    </li>
+  </ol>
 
-  <p class="rss-subscribe">subscribe <a href="{{ "/feed.xml" | prepend: site.baseurl }}">via RSS</a></p>
+  <p class="rss-subscribe">Subscribe <a :href="url('/feed.xml')">via RSS</a></p>
 
 </div>
diff --git a/_pages/tag.html b/_pages/tag.html
@@ -9,38 +9,29 @@
 
   <h1 class="page-heading">Tags</h1>
 
-  <p>&rarr; <a href="/search/">You can also use site search</a>.</p>
+  <p>&rarr; <a :href="url('/search/')">You can also use site search</a>.</p>
+
+  <hr>
+
+  <tag-list :collection="collections.myTags" webc:nokeep></tag-list>
 
-  <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 %}
-  {% assign date_format = site.date_format | default: "%b %-d, %Y" %}
-
-  {% for site_tag in sorted_tags %}
-    {% assign tag = site_tag | first %}
-    {% assign posts = site_tag | last %}
-
-  <h2 id="{{ tag | slugify }}">{{ tag }}</h2>
-  <ul>
-  {% for post in posts %}
-    {% if post.tags contains tag %}
-    <li>
-      <a href="{{ post.url }}">{{ post.title }}</a>
-      <time title="{{ post.date }}">{{ post.date | date: date_format  }}</time>
-    </li>
-    {% endif %}
-  {% endfor %}
-  </ul>
-  {% endfor %}
+  <it webc:for="(tag, index) of collections.myTags" webc:nokeep
+    >
+    <h2 :id="slugify(tag.tag)" :data-idx="index + 1" @text="tag.tag"></h2>
+    <ul>
+      <li webc:for="post of tag.posts"
+        >
+        <a :href="url(post.url)" @text="post.data.title"></a> &ndash; <time @text="readableDate(post.date)"></time>
+      </li>
+    </ul>
+  </it>
+
+  <!-- <X-tag-post-list :collection="collections.posts" webc:nokeep></X-tag-post-list> -->
 
 </div>
diff --git a/eleventy.config.js b/eleventy.config.js
@@ -6,7 +6,7 @@
 
 const pluginWebc = require('@11ty/eleventy-plugin-webc');
 
-const APP_PLUGINS = [ 'app-filters', 'tag-filters', 'exclude-drafts', 'post-permalink' ];
+const APP_PLUGINS = [ 'app-filters', 'liquid-filters', 'tag-filters', 'exclude-drafts', 'post-permalink' ];
 const layoutAlias = [ 'base', 'default', 'home', 'page', 'post' ];
 const components = '_components/**/*.webc';