feat: stats page

.eleventy.js

@@ -3,6 +3,7 @@ const tablerIcons = require('eleventy-plugin-tabler-icons')
 const pluginUnfurl = require('eleventy-plugin-unfurl')
 const pluginRss = require('@11ty/eleventy-plugin-rss')
 const embedYouTube = require('eleventy-plugin-youtube-embed')
+const postGraph = require('@rknightuk/eleventy-plugin-post-graph')
 
 const markdownIt = require('markdown-it')
 const markdownItAnchor = require('markdown-it-anchor')
@@ -11,7 +12,7 @@ const markdownItFootnote = require('markdown-it-footnote')
 const filters = require('./config/filters/index.js')
 const { slugifyString } = require('./config/utils')
 const { svgToJpeg } = require('./config/events/index.js')
-const { tagList, tagMap } = require('./config/collections/index.js')
+const { tagList, tagMap, postStats } = require('./config/collections/index.js')
 
 const CleanCSS = require('clean-css')
 const { execSync } = require('child_process')
@@ -39,6 +40,15 @@ module.exports = function (eleventyConfig) {
       'lite.js.path': 'src/assets/scripts/yt-lite.js',
     },
   })
+  eleventyConfig.addPlugin(postGraph, {
+    boxColorLight: '#e5e7eb',
+    highlightColorLight: '#2563eb',
+    textColorLight: '#1f2937',
+
+    boxColorDark: '#374151',
+    highlightColorDark: '#60a5fa',
+    textColorDark: '#fff',
+  })
 
   // quiet build output
   eleventyConfig.setQuietMode(true)
@@ -70,6 +80,7 @@ module.exports = function (eleventyConfig) {
   // collections
   eleventyConfig.addCollection('tagList', tagList)
   eleventyConfig.addCollection('tagMap', tagMap)
+  eleventyConfig.addCollection('postStats', postStats)
 
   const md = markdownIt({ html: true, linkify: true })
   md.use(markdownItAnchor, {

config/collections/index.js

@@ -1,4 +1,6 @@
+const { DateTime } = require('luxon')
 const tagAliases = require('../data/tag-aliases.json')
+const { makeYearStats, processPostFile } = require('./utils')
 
 const tagList = (collection) => {
   const tagsSet = new Set()
@@ -36,7 +38,135 @@ const tagMap = (collection) => {
   return tags
 }
 
+const postStats = (collectionApi) => {
+  const oneDayMilliseconds = 1000 * 60 * 60 * 24
+  const statsObject = {
+    avgDays: 0,
+    avgCharacterCount: 0,
+    avgCodeBlockCount: 0,
+    avgParagraphCount: 0,
+    avgWordCount: 0,
+    totalWordCount: 0,
+    totalCodeBlockCount: 0,
+    postCount: 0,
+    firstPostDate: new Date(),
+    lastPostDate: new Date(),
+    highPostCount: 0,
+    years: [],
+    postsByDay: {},
+  }
+
+  let avgDays = 0
+  let totalDays = 0
+  let totalPostCount = 0
+  let totalCharacterCount = 0
+  let totalCodeBlockCount = 0
+  let totalParagraphCount = 0
+  let totalWordCount = 0
+  let yearCharacterCount = 0
+  let yearCodeBlockCount = 0
+  let yearParagraphCount = 0
+  let yearWordCount = 0
+  let yearPostCount = 0
+  let yearPostDays = 0
+  let highPostCount = 0
+  let yearProgress = 0
+
+  const posts = collectionApi.getFilteredByGlob('src/posts/**/*.md').sort((a, b) => {
+    return a.date - b.date
+  })
+
+  const postCount = posts.length
+  if (postCount < 1) {
+    console.log(`No articles found`)
+    return statsObject
+  }
+
+  statsObject.postCount = postCount
+  statsObject.firstPostDate = posts[0].data.page.date
+  statsObject.lastPostDate = posts[postCount - 1].data.page.date
+
+  let prevPostDate = posts[0].data.page.date
+  let currentYear = prevPostDate.getFullYear()
+
+  for (let post of posts) {
+    let postDate = post.data.page.date
+    const dateIndexKey = `${DateTime.fromISO(postDate).year}-${DateTime.fromISO(postDate).ordinal}`
+    if (!statsObject.postsByDay[dateIndexKey]) {
+      statsObject.postsByDay[dateIndexKey] = 0
+    }
+    statsObject.postsByDay[dateIndexKey]++
+    let daysBetween = (postDate - prevPostDate) / oneDayMilliseconds
+    let thisYear = postDate.getFullYear()
+    if (thisYear != currentYear) {
+      avgDays = yearPostDays / yearPostCount
+      highPostCount = Math.max(highPostCount, yearPostCount)
+      yearProgress = (yearPostCount / highPostCount) * 100
+      statsObject.years.push(
+        makeYearStats(
+          currentYear,
+          yearPostCount,
+          yearWordCount,
+          yearCodeBlockCount,
+          avgDays,
+          yearCharacterCount,
+          yearParagraphCount,
+          yearProgress
+        )
+      )
+      yearCharacterCount = 0
+      yearCodeBlockCount = 0
+      yearParagraphCount = 0
+      yearWordCount = 0
+      yearPostCount = 0
+      yearPostDays = 0
+      currentYear = thisYear
+    }
+    prevPostDate = postDate
+    totalDays += daysBetween
+    yearPostDays += daysBetween
+    totalPostCount++
+    yearPostCount++
+    const postStats = processPostFile(post.page.inputPath)
+    totalCharacterCount += postStats.characterCount
+    yearCharacterCount += postStats.characterCount
+    totalCodeBlockCount += postStats.codeBlockCount
+    yearCodeBlockCount += postStats.codeBlockCount
+    totalParagraphCount += postStats.paragraphCount
+    yearParagraphCount += postStats.paragraphCount
+    totalWordCount += postStats.wordCount
+    yearWordCount += postStats.wordCount
+  }
+  if (yearPostCount > 0) {
+    avgDays = yearPostDays / yearPostCount
+    highPostCount = Math.max(highPostCount, yearPostCount)
+    yearProgress = (yearPostCount / highPostCount) * 100
+    statsObject.years.push(
+      makeYearStats(
+        currentYear,
+        yearPostCount,
+        yearWordCount,
+        yearCodeBlockCount,
+        avgDays,
+        yearCharacterCount,
+        yearParagraphCount,
+        yearProgress
+      )
+    )
+  }
+  statsObject.avgDays = parseFloat((totalDays / totalPostCount).toFixed(2))
+  statsObject.avgCharacterCount = parseFloat((totalCharacterCount / totalPostCount).toFixed(2))
+  statsObject.avgCodeBlockCount = parseFloat((totalCodeBlockCount / totalPostCount).toFixed(2))
+  statsObject.avgParagraphCount = parseFloat((totalParagraphCount / totalPostCount).toFixed(2))
+  statsObject.avgWordCount = parseFloat((totalWordCount / totalPostCount).toFixed(2))
+  statsObject.totalWordCount = totalWordCount
+  statsObject.totalCodeBlockCount = totalCodeBlockCount
+  statsObject.highPostCount = highPostCount
+  return statsObject
+}
+
 module.exports = {
   tagList,
   tagMap,
+  postStats,
 }

config/collections/utils.js

@@ -0,0 +1,64 @@
+const fs = require('fs')
+const writingStats = require('writing-stats')
+
+const processPostFile = (filePath) => {
+  try {
+    let content = fs.readFileSync(filePath, 'utf8')
+    // remove front matter
+    content = content.replace(/---\n.*?\n---/s, '')
+    // remove empty lines
+    content = content.replace(/^\s*[\r\n]/gm, '')
+    const codeBlockMatches = content.match(/```(.*?)```/gis)
+    const codeBlocks = codeBlockMatches ? codeBlockMatches.length : 0
+    // remove code blocks
+    content = content.replace(/(```.+?```)/gms, '')
+    const stats = writingStats(content)
+    return {
+      characterCount: stats.characterCount,
+      codeBlockCount: codeBlocks,
+      paragraphCount: stats.paragraphCount,
+      wordCount: stats.wordCount,
+    }
+  } catch (err) {
+    console.error(err)
+    return {
+      characterCount: 0,
+      codeBlockCount: 0,
+      paragraphCount: 0,
+      wordCount: 0,
+    }
+  }
+}
+
+const makeYearStats = (
+  currentYear,
+  yearPostCount,
+  yearWordCount,
+  yearCodeBlockCount,
+  avgDays,
+  yearCharacterCount,
+  yearParagraphCount,
+  yearProgress
+) => {
+  const daysInYear =
+    (currentYear % 4 === 0 && currentYear % 100 > 0) || currentYear % 400 == 0 ? 366 : 365
+
+  return {
+    year: currentYear,
+    daysInYear: daysInYear,
+    postCount: yearPostCount,
+    wordCount: yearWordCount,
+    codeBlockCount: yearCodeBlockCount,
+    avgDays: parseFloat(avgDays.toFixed(2)),
+    avgCharacterCount: parseFloat((yearCharacterCount / yearPostCount).toFixed(2)),
+    avgCodeBlockCount: parseFloat((yearCodeBlockCount / yearPostCount).toFixed(2)),
+    avgParagraphCount: parseFloat((yearParagraphCount / yearPostCount).toFixed(2)),
+    avgWordCount: parseFloat((yearWordCount / yearPostCount).toFixed(2)),
+    yearProgress,
+  }
+}
+
+module.exports = {
+  processPostFile,
+  makeYearStats,
+}

package-lock.json

@@ -18,6 +18,7 @@
         "@catppuccin/tailwindcss": "^0.1.6",
         "@commitlint/cli": "^18.4.3",
         "@commitlint/config-conventional": "^18.4.3",
+        "@rknightuk/eleventy-plugin-post-graph": "^1.0.1",
         "@tailwindcss/aspect-ratio": "^0.4.2",
         "@tailwindcss/line-clamp": "^0.4.4",
         "@tailwindcss/typography": "^0.5.10",
@@ -55,7 +56,8 @@
         "slugify": "^1.6.6",
         "striptags": "^3.2.0",
         "tailwind-scrollbar": "^3.0.5",
-        "tailwindcss": "^3.4.0"
+        "tailwindcss": "^3.4.0",
+        "writing-stats": "^1.0.6"
       }
     },
     "node_modules/@11ty/dependency-tree": {
@@ -1199,6 +1201,16 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@rknightuk/eleventy-plugin-post-graph": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@rknightuk/eleventy-plugin-post-graph/-/eleventy-plugin-post-graph-1.0.1.tgz",
+      "integrity": "sha512-AhT2U1g/onZhekcGDTi7skDLK81p6UC+XaSDyY/yXV8+W+L2skkaad42tRNubaKx+58/eus69aNa4FI3fwfTFA==",
+      "dev": true,
+      "dependencies": {
+        "@11ty/eleventy": "^2.0.1",
+        "moment": "^2.29.4"
+      }
+    },
     "node_modules/@sindresorhus/slugify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@sindresorhus/slugify/-/slugify-1.1.2.tgz",
@@ -11756,6 +11768,12 @@
       "integrity": "sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==",
       "dev": true
     },
+    "node_modules/writing-stats": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/writing-stats/-/writing-stats-1.0.6.tgz",
+      "integrity": "sha512-Oq3dijwFuKo7MQbgqFaBSONjYB/uP1SfvFC1qSP8mHuHH9DHf2jap/QLxXqVi8/HUeqzNJx8RAUdMNN3RqnVFw==",
+      "dev": true
+    },
     "node_modules/ws": {
       "version": "8.14.2",
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "2.8.0",
+  "version": "2.9.0",
   "description": "The source for my personal site, blog and portfolio. Built using 11ty and hosted on Netlify.",
   "main": "index.html",
   "scripts": {
@@ -27,6 +27,7 @@
     "@catppuccin/tailwindcss": "^0.1.6",
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@rknightuk/eleventy-plugin-post-graph": "^1.0.1",
     "@tailwindcss/aspect-ratio": "^0.4.2",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tailwindcss/typography": "^0.5.10",
@@ -64,7 +65,8 @@
     "slugify": "^1.6.6",
     "striptags": "^3.2.0",
     "tailwind-scrollbar": "^3.0.5",
-    "tailwindcss": "^3.4.0"
+    "tailwindcss": "^3.4.0",
+    "writing-stats": "^1.0.6"
   },
   "lint-staged": {
     "**/*.{js,ts,json}": [

src/_data/analytics.js

@@ -14,5 +14,5 @@ module.exports = async function () {
     },
   }).catch()
   const pages = await res
-  return pages.results.filter((p) => p.page.includes('posts')).splice(0, 5)
+  return pages.results.filter((p) => p.page.includes('posts'))
 }

src/_includes/partials/popular-posts.liquid

@@ -5,7 +5,7 @@
     Popular posts
   </h2>
   <ul class="list-inside list-disc pl-5 md:pl-10">
-    {% for post in posts %}
+    {% for post in posts limit: 5 %}
       <li class="mt-1.5 mb-2">
         <a href="{{post.url}}" title="{{ post.data.title | escape}}">
           {{ post.data.title }}

src/_includes/partials/post-graph.liquid

@@ -0,0 +1,13 @@
+<div class="post-graph">
+  {% assign years = postYears | reverse %}
+  {%- for year in years %}
+  <div class="post-graph__wrapper">
+    <div class="post-graph__year">{{ year.year }}</div>
+    <div class="post-graph__progress" style="width: {{ year.yearProgress }}%">
+    </div>
+    <div class="post-graph__data">
+      {{ year.postCount }}
+    </div>
+  </div>
+  {% endfor %}
+</div>

src/assets/styles/tailwind.css

@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.0 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -32,9 +32,11 @@
 4. Use the user's configured `sans` font-family by default.
 5. Use the user's configured `sans` font-feature-settings by default.
 6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
 */
 
-html {
+html,
+:host {
   line-height: 1.5;
   /* 1 */
   -webkit-text-size-adjust: 100%;
@@ -44,12 +46,14 @@ html {
   -o-tab-size: 4;
      tab-size: 4;
   /* 3 */
-  font-family: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
+  font-family: system-ui, sans-serif;
   /* 4 */
   font-feature-settings: normal;
   /* 5 */
   font-variation-settings: normal;
   /* 6 */
+  -webkit-tap-highlight-color: transparent;
+  /* 7 */
 }
 
 /*
@@ -1647,7 +1651,7 @@ video {
 }
 
 .font-sans {
-  font-family: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
+  font-family: system-ui, sans-serif;
 }
 
 .text-2xl {
@@ -1918,7 +1922,7 @@ body {
 
 body,
 html {
-  font-family: Seravek, Gill Sans Nova, Ubuntu, Calibri, DejaVu Sans, source-sans-pro, sans-serif;
+  font-family: system-ui, sans-serif;
   color: #111827;
 }
 
@@ -1982,6 +1986,13 @@ a:active,
   color: #1e40af;
 }
 
+.highlight-text {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+  padding: 0.25rem;
+  background-color: #2563eb;
+}
+
 p > a,
 span > a,
 blockquote > a,
@@ -2146,6 +2157,34 @@ pre {
   border-color: rgb(30 64 175 / var(--tw-border-opacity)) !important;
 }
 
+.post-graph {
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+}
+
+.post-graph__wrapper {
+  position: relative;
+  height: 2rem;
+  margin-bottom: 0.375rem;
+  display: flex;
+  align-items: center;
+}
+
+.post-graph__progress {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
+  height: 100%;
+}
+
+.post-graph__year {
+  font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
+}
+
+.post-graph__progress,
+.post-graph__data {
+  margin-left: 0.625rem;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     --pagefind-ui-primary: #60a5fa;
@@ -2169,6 +2208,10 @@ pre {
     color: #bfdbfe;
   }
 
+  .highlight-text {
+    background-color: #60a5fa;
+  }
+
   .link--icon svg {
     color: #e5e7eb;
   }
@@ -2231,6 +2274,11 @@ pre {
     border-color: rgb(191 219 254 / var(--tw-border-opacity)) !important;
   }
 
+  .post-graph__progress {
+    --tw-bg-opacity: 1;
+    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+  }
+
   .dark\:prose-invert {
     --tw-prose-body: var(--tw-prose-invert-body);
     --tw-prose-headings: var(--tw-prose-invert-headings);
@@ -2327,137 +2375,6 @@ pre {
   opacity: 0.5;
 }
 
-@media (prefers-color-scheme: dark) {
-  .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
-    --tw-divide-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-divide-opacity));
-  }
-
-  .dark\:border-blue-400 {
-    --tw-border-opacity: 1;
-    border-color: rgb(96 165 250 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-500 {
-    --tw-border-opacity: 1;
-    border-color: rgb(107 114 128 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity));
-  }
-
-  .dark\:border-gray-900 {
-    --tw-border-opacity: 1;
-    border-color: rgb(17 24 39 / var(--tw-border-opacity));
-  }
-
-  .dark\:bg-blue-400 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-gray-900 {
-    --tw-bg-opacity: 1;
-    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
-  }
-
-  .dark\:bg-white {
-    --tw-bg-opacity: 1;
-    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  }
-
-  .dark\:text-blue-400 {
-    --tw-text-opacity: 1;
-    color: rgb(96 165 250 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-100 {
-    --tw-text-opacity: 1;
-    color: rgb(243 244 246 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-gray-900 {
-    --tw-text-opacity: 1;
-    color: rgb(17 24 39 / var(--tw-text-opacity));
-  }
-
-  .dark\:text-white {
-    --tw-text-opacity: 1;
-    color: rgb(255 255 255 / var(--tw-text-opacity));
-  }
-
-  .dark\:scrollbar-thumb-blue-400 {
-    --scrollbar-thumb: #60a5fa !important;
-  }
-
-  .group:hover .dark\:group-hover\:border-blue-200 {
-    --tw-border-opacity: 1;
-    border-color: rgb(191 219 254 / var(--tw-border-opacity));
-  }
-
-  .group:hover .dark\:group-hover\:border-blue-300 {
-    --tw-border-opacity: 1;
-    border-color: rgb(147 197 253 / var(--tw-border-opacity));
-  }
-
-  .group:hover .dark\:group-hover\:text-blue-200 {
-    --tw-text-opacity: 1;
-    color: rgb(191 219 254 / var(--tw-text-opacity));
-  }
-
-  .group:hover .dark\:group-hover\:text-blue-300 {
-    --tw-text-opacity: 1;
-    color: rgb(147 197 253 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:border-blue-200:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(191 219 254 / var(--tw-border-opacity));
-  }
-
-  .dark\:hover\:border-blue-300:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(147 197 253 / var(--tw-border-opacity));
-  }
-
-  .dark\:hover\:border-blue-500:hover {
-    --tw-border-opacity: 1;
-    border-color: rgb(59 130 246 / var(--tw-border-opacity));
-  }
-
-  .dark\:hover\:bg-blue-200:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:bg-blue-300:hover {
-    --tw-bg-opacity: 1;
-    background-color: rgb(147 197 253 / var(--tw-bg-opacity));
-  }
-
-  .dark\:hover\:text-blue-200:hover {
-    --tw-text-opacity: 1;
-    color: rgb(191 219 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:text-blue-400:hover {
-    --tw-text-opacity: 1;
-    color: rgb(96 165 250 / var(--tw-text-opacity));
-  }
-
-  .dark\:hover\:prose-a\:text-blue-200 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
-    --tw-text-opacity: 1;
-    color: rgb(191 219 254 / var(--tw-text-opacity));
-  }
-
-  .dark\:focus\:border-blue-200:focus {
-    --tw-border-opacity: 1;
-    border-color: rgb(191 219 254 / var(--tw-border-opacity));
-  }
-}
-
 @media (min-width: 640px) {
   .sm\:text-2xl {
     font-size: 1.5rem;
@@ -2595,6 +2512,137 @@ pre {
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  .dark\:divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
+    --tw-divide-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-divide-opacity));
+  }
+
+  .dark\:border-blue-400 {
+    --tw-border-opacity: 1;
+    border-color: rgb(96 165 250 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-gray-500 {
+    --tw-border-opacity: 1;
+    border-color: rgb(107 114 128 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-gray-700 {
+    --tw-border-opacity: 1;
+    border-color: rgb(55 65 81 / var(--tw-border-opacity));
+  }
+
+  .dark\:border-gray-900 {
+    --tw-border-opacity: 1;
+    border-color: rgb(17 24 39 / var(--tw-border-opacity));
+  }
+
+  .dark\:bg-blue-400 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(96 165 250 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-gray-900 {
+    --tw-bg-opacity: 1;
+    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+  }
+
+  .dark\:bg-white {
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  }
+
+  .dark\:text-blue-400 {
+    --tw-text-opacity: 1;
+    color: rgb(96 165 250 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-gray-100 {
+    --tw-text-opacity: 1;
+    color: rgb(243 244 246 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-gray-900 {
+    --tw-text-opacity: 1;
+    color: rgb(17 24 39 / var(--tw-text-opacity));
+  }
+
+  .dark\:text-white {
+    --tw-text-opacity: 1;
+    color: rgb(255 255 255 / var(--tw-text-opacity));
+  }
+
+  .dark\:scrollbar-thumb-blue-400 {
+    --scrollbar-thumb: #60a5fa !important;
+  }
+
+  .group:hover .dark\:group-hover\:border-blue-200 {
+    --tw-border-opacity: 1;
+    border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  }
+
+  .group:hover .dark\:group-hover\:border-blue-300 {
+    --tw-border-opacity: 1;
+    border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  }
+
+  .group:hover .dark\:group-hover\:text-blue-200 {
+    --tw-text-opacity: 1;
+    color: rgb(191 219 254 / var(--tw-text-opacity));
+  }
+
+  .group:hover .dark\:group-hover\:text-blue-300 {
+    --tw-text-opacity: 1;
+    color: rgb(147 197 253 / var(--tw-text-opacity));
+  }
+
+  .dark\:hover\:border-blue-200:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  }
+
+  .dark\:hover\:border-blue-300:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(147 197 253 / var(--tw-border-opacity));
+  }
+
+  .dark\:hover\:border-blue-500:hover {
+    --tw-border-opacity: 1;
+    border-color: rgb(59 130 246 / var(--tw-border-opacity));
+  }
+
+  .dark\:hover\:bg-blue-200:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+  }
+
+  .dark\:hover\:bg-blue-300:hover {
+    --tw-bg-opacity: 1;
+    background-color: rgb(147 197 253 / var(--tw-bg-opacity));
+  }
+
+  .dark\:hover\:text-blue-200:hover {
+    --tw-text-opacity: 1;
+    color: rgb(191 219 254 / var(--tw-text-opacity));
+  }
+
+  .dark\:hover\:text-blue-400:hover {
+    --tw-text-opacity: 1;
+    color: rgb(96 165 250 / var(--tw-text-opacity));
+  }
+
+  .dark\:hover\:prose-a\:text-blue-200 :is(:where(a):not(:where([class~="not-prose"],[class~="not-prose"] *))):hover {
+    --tw-text-opacity: 1;
+    color: rgb(191 219 254 / var(--tw-text-opacity));
+  }
+
+  .dark\:focus\:border-blue-200:focus {
+    --tw-border-opacity: 1;
+    border-color: rgb(191 219 254 / var(--tw-border-opacity));
+  }
+}
+
 .\[\&\>\*\]\:h-20>* {
   height: 5rem;
 }

src/pages/search.html

@@ -8,7 +8,7 @@ permalink: /search.html
 <link href="https://coryd.dev/pagefind/pagefind-ui.css" rel="stylesheet" />
 <style>
   :root {
-    --pagefind-ui-font: 'Seravek', 'Gill Sans Nova', 'Ubuntu', 'Calibri', 'DejaVu Sans', 'source-sans-pro', 'sans-serif';
+    --pagefind-ui-font: system-ui, sans-serif;
     --pagefind-ui-primary: #374151;
     --pagefind-ui-text: #374151;
   }

src/pages/stats.html

@@ -0,0 +1,22 @@
+---
+title: Statistics
+layout: default
+permalink: /stats.html
+---
+<p>My first post was published on <strong class="highlight-text">{{ collections.postStats.firstPostDate | dateToReadableDate }}</strong> and my most recent one was published on <strong class="highlight-text">{{ collections.postStats.lastPostDate | dateToReadableDate }}</strong>. I've published <strong class="highlight-text">{{ collections.postStats.postCount }} posts</strong> containing <strong class="highlight-text">{{ collections.postStats.totalWordCount }} words</strong> and <strong class="highlight-text">{{ collections.postStats.totalCodeBlockCount }} code samples</strong>.</p>
+<p>Posts have, on average, <strong class="highlight-text">{{ collections.postStats.avgWordCount | round }} words</strong> and a gap of <strong class="highlight-text">{{ collections.postStats.avgDays | round }} days</strong> between them.</p>
+<h3>Popular posts</h3>
+<ol class="list-inside pl-5 md:pl-10">
+  {% assign posts = collections.posts | getPopularPosts: analytics %}
+  {% for post in posts limit: 10 %}
+  <li class="mt-1.5 mb-2">
+    <a href="{{post.url}}" title="{{ post.data.title | escape}}">
+      {{ post.data.title }}
+    </a>
+  </li>
+  {% endfor %}
+</ol>
+<h3>Posts by year</h3>
+{% render "partials/post-graph.liquid", postYears: collections.postStats.years %}
+<h3>Post distribution graphs</h3>
+{%- postGraph collections.posts -%}

src/social-preview.liquid

@@ -27,7 +27,7 @@ eleventyExcludeFromCollections: true
 
   <!-- date -->
   <text
-    font-family="'Seravek', 'Gill Sans Nova', 'Ubuntu', 'Calibri', 'DejaVu Sans', 'source-sans-pro', 'sans-serif'"
+    font-family="system-ui, sans-serif"
     font-size="24"
     font-weight="bold"
     fill="#fff"
@@ -40,7 +40,7 @@ eleventyExcludeFromCollections: true
   <!-- title -->
   <text
     id="text"
-    font-family="'Seravek', 'Gill Sans Nova', 'Ubuntu', 'Calibri', 'DejaVu Sans', 'source-sans-pro', 'sans-serif'"
+    font-family="system-ui, sans-serif"
     font-size="40"
     font-weight="900"
     fill="#fff"
@@ -55,7 +55,7 @@ eleventyExcludeFromCollections: true
 
   <!-- sitename -->
   <text
-  font-family="'Seravek', 'Gill Sans Nova', 'Ubuntu', 'Calibri', 'DejaVu Sans', 'source-sans-pro', 'sans-serif'"
+  font-family="system-ui, sans-serif"
     font-size="24"
     font-weight="bold"
     fill="#fff"

tailwind.config.js

@@ -11,15 +11,7 @@ module.exports = {
         14: '3.5rem',
       },
       fontFamily: {
-        sans: [
+        sans: ['system-ui', 'sans-serif'],
-          'Seravek',
-          'Gill Sans Nova',
-          'Ubuntu',
-          'Calibri',
-          'DejaVu Sans',
-          'source-sans-pro',
-          'sans-serif',
-        ],
         mono: [
           'ui-monospace',
           'Cascadia Code',

tailwind.css

@@ -81,6 +81,12 @@ a:active,
   color: theme(colors.blue.800);
 }
 
+.highlight-text {
+  @apply text-white;
+  @apply p-1;
+  background-color: theme(colors.blue.600);
+}
+
 p > a,
 span > a,
 blockquote > a,
@@ -174,6 +180,32 @@ pre {
   @apply !border-blue-800;
 }
 
+.post-graph {
+  @apply my-5;
+}
+
+.post-graph__wrapper {
+  @apply relative;
+  @apply h-8;
+  @apply mb-1.5;
+  @apply flex;
+  @apply items-center;
+}
+
+.post-graph__progress {
+  @apply bg-blue-600;
+  @apply h-full;
+}
+
+.post-graph__year {
+  @apply font-mono;
+}
+
+.post-graph__progress,
+.post-graph__data {
+  @apply ml-2.5;
+}
+
 @media (prefers-color-scheme: dark) {
   body {
     --pagefind-ui-primary: theme(colors.blue.400);
@@ -197,6 +229,10 @@ pre {
     color: theme(colors.blue.200);
   }
 
+  .highlight-text {
+    background-color: theme(colors.blue.400);
+  }
+
   .link--icon svg {
     color: theme(colors.gray.200);
   }
@@ -255,4 +291,8 @@ pre {
   .pagefind-ui__search-input:focus {
     @apply !border-blue-200
   }
+
+  .post-graph__progress {
+    @apply bg-blue-400;
+  }
 }