feat: stats page
This commit is contained in:
Cory Dransfeldt
parent
67677ff9d4
commit
fa2c2ad514
14 changed files with 495 additions and 155 deletions
13
.eleventy.js
13
.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, {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
}
|
||||
|
|
|
|||
64
config/collections/utils.js
Normal file
64
config/collections/utils.js
Normal file
|
|
@ -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,
|
||||
}
|
||||
20
package-lock.json
generated
20
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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}": [
|
||||
|
|
|
|||
|
|
@ -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'))
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 }}
|
||||
|
|
|
|||
13
src/_includes/partials/post-graph.liquid
Normal file
13
src/_includes/partials/post-graph.liquid
Normal file
|
|
@ -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>
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
22
src/pages/stats.html
Normal file
22
src/pages/stats.html
Normal file
|
|
@ -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 -%}
|
||||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -11,15 +11,7 @@ module.exports = {
|
|||
14: '3.5rem',
|
||||
},
|
||||
fontFamily: {
|
||||
sans: [
|
||||
'Seravek',
|
||||
'Gill Sans Nova',
|
||||
'Ubuntu',
|
||||
'Calibri',
|
||||
'DejaVu Sans',
|
||||
'source-sans-pro',
|
||||
'sans-serif',
|
||||
],
|
||||
sans: ['system-ui', 'sans-serif'],
|
||||
mono: [
|
||||
'ui-monospace',
|
||||
'Cascadia Code',
|
||||
|
|
|
|||
40
tailwind.css
40
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue