feat: more performant popular posts

.eleventy.js

@@ -7,7 +7,7 @@ import markdownItFootnote from 'markdown-it-footnote'
 import htmlmin from 'html-minifier-terser'
 import filters from './config/filters/index.js'
 import { minifyJsComponents } from './config/events/index.js'
-import { allContent, searchIndex } from './config/collections/index.js'
+import { allContent, popularPosts, searchIndex } from './config/collections/index.js'
 import { DateTime } from 'luxon'
 
 // load .env
@@ -56,6 +56,7 @@ export default async function (eleventyConfig) {
 
   // collections
   eleventyConfig.addCollection('allContent', allContent)
+  eleventyConfig.addCollection('popularPosts', popularPosts)
   eleventyConfig.addCollection('searchIndex', searchIndex)
 
   const md = markdownIt({ html: true, linkify: true })

config/collections/index.js

@@ -1,4 +1,5 @@
 import { DateTime } from 'luxon'
+import slugify from 'slugify'
 
 const BASE_URL = 'https://coryd.dev'
 
@@ -98,3 +99,18 @@ export const allContent = (collection) => {
     return dateB - dateA
   })
 }
+
+export const popularPosts = (collection) => {
+  const collectionData = collection.getAll()[0]
+  const { data } = collectionData
+  const { posts, analytics } = data
+
+  return posts
+    .filter((post) => {
+      if (analytics.find((p) => p.url.includes(post.slug))) return true
+    })
+    .sort((a, b) => {
+      const visitors = (page) => analytics.filter((p) => p.url.includes(page.slug)).pop()?.value
+      return visitors(b) - visitors(a)
+    })
+}

config/filters/index.js

@@ -1,6 +1,5 @@
 import { DateTime } from 'luxon'
 import { URL } from 'url'
-import slugify from 'slugify'
 import markdownIt from 'markdown-it'
 import sanitizeHtml from 'sanitize-html';
 
@@ -29,28 +28,11 @@ export default {
     return !!normalizedPage && normalizedPage.includes(category) && !/\d+/.test(normalizedPage);
   },
 
-  // analytics
-  getPopularPosts: (posts, analytics) => {
-    return posts
-      .filter((post) => {
-        if (analytics.find((p) => p.url.includes(slugify(post.title).toLowerCase()))) return true
-      })
-      .sort((a, b) => {
-        const visitors = (page) => analytics.filter((p) => p.url.includes(slugify(page.title).toLowerCase())).pop().value
-        return visitors(b) - visitors(a)
-      })
-  },
-
   // posts
   filterByPostType: (posts, postType) => {
     if (postType === 'featured') return shuffleArray(posts.filter(post => post.featured === true)).slice(0, 3)
     return posts.slice(0, 5)
   },
-  slugifyPost: (title) => slugify(title, {
-    replacement: '-',
-    remove: /[#,&,+()$~%.'":*?<>{}\[\]\/\\|`!@\^\—]/g,
-    lower: true,
-  }),
 
   // watching
   featuredWatching: (watching, count) => shuffleArray(watching.filter(watch => watch.favorite === true)).slice(0, count),

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "18.9.10",
+  "version": "18.10.11",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/partials/widgets/addon-links.liquid

@@ -1,6 +1,6 @@
 <div class="addon-links">
-  {%- if analytics.size > 0 -%}
+  {%- if popularPosts.size > 0 -%}
-  <div>{% render "partials/widgets/popular-posts.liquid", posts:posts, analytics:analytics %}</div>
+  <div>{% render "partials/widgets/popular-posts.liquid", popularPosts:popularPosts %}</div>
   {%- endif -%}
   {%- if links.size > 0 -%}
   <div>{% render "partials/widgets/recent-links.liquid", links:links %}</div>

src/_includes/partials/widgets/popular-posts.liquid

@@ -1,11 +1,10 @@
-{% assign postData = posts | getPopularPosts: analytics %}
+{% if popularPosts.size > 0 %}
-{% if postData.size > 0 %}
 <h2 class="link-list-header flex-centered">
   {% tablericon "flame" "Popular" %}
   Popular posts
 </h2>
 <ul class="link-list">
-  {% for post in postData limit: 5 %}
+  {% for post in popularPosts limit: 5 %}
     <li>
       <a class="no-underline" href="{{ post.slug }}" title="{{ post.title | escape}}">
         {{ post.title }}

src/assets/styles/base/index.css

@@ -380,9 +380,6 @@ main {
 .home-status,
 article {
   margin-bottom: var(--sizing-base);
-}
-
-.home-status {
   border-bottom: 1px solid var(--gray-light);
 }
 

src/pages/errors/404.html

@@ -30,5 +30,5 @@ image: /assets/img/404.jpg
     What kind of idiots do you have working here? <a href="/">Hurry up and skip out on the room service bill!</a>
   </div>
   <hr class="large-spacing" />
-  {% render "partials/widgets/addon-links.liquid", posts:posts, analytics:analytics, links:collections.links %}
+  {% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}
 </div>

src/pages/main/posts/post.html

@@ -23,3 +23,4 @@ schema: blog
     {% render "partials/posts/blocks.liquid", blocks:post.blocks %}
   </div>
 </article>
+{% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}

src/pages/main/search.html

@@ -55,4 +55,4 @@ permalink: /search.html
   <input class="search__form--fallback" type="hidden" placeholder="Search" name="sites" value="coryd.dev">
 </form>
 <ul class="search__results hidden"></ul>
-{% render "partials/widgets/addon-links.liquid", posts:posts, analytics:analytics, links:links %}
+{% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}

src/pages/secondary/contact/success.html

@@ -9,4 +9,4 @@ description: I'll be in touch soon. Thanks for your message!
     I'll be in touch soon! <a href="/">Head home</a>
 </div>
 <hr class="large-spacing" />
-{% render "partials/widgets/addon-links.liquid", posts:posts, analytics:analytics, links:links %}
+{% render "partials/widgets/addon-links.liquid", popularPosts:collections.popularPosts, links:links %}