cdransf/coryd.dev-eleventy
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: stats page

Browse source
This commit is contained in:
Cory Dransfeldt 2023-12-19 15:21:39 -08:00
parent 67677ff9d4
commit fa2c2ad514
No known key found for this signature in database
14 changed files with 495 additions and 155 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_data/analytics.js
View file

@ -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'))
}

2
src/_includes/partials/popular-posts.liquid
View file

@ -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
View 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>

320
src/assets/styles/tailwind.css
View file

@ -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;
}

2
src/pages/search.html
View file

@ -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
View 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 -%}

6
src/social-preview.liquid
View file

@ -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"