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

feat: design + perf + tags etc.

Browse source
This commit is contained in:
Cory Dransfeldt 2024-03-01 14:00:31 -08:00
parent 93f3506f83
commit 6c63611198
No known key found for this signature in database
44 changed files with 279 additions and 299 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
.eleventy.js
View file

@ -1,6 +1,5 @@
import syntaxHighlight from '@11ty/eleventy-plugin-syntaxhighlight'
import tablerIcons from 'eleventy-plugin-tabler-icons'
import pluginRss from '@11ty/eleventy-plugin-rss'
import postGraph from '@rknightuk/eleventy-plugin-post-graph'
import embedEverything from 'eleventy-plugin-embed-everything'
@ -12,7 +11,7 @@ import htmlmin from 'html-minifier-terser'
import filters from './config/filters/index.js'
import { slugifyString } from './config/utils/index.js'
import { svgToJpeg } from './config/events/index.js'
import { tagList, tagMap, postStats } from './config/collections/index.js'
import { tagList, tagMap, postStats, tagsSortedByCount } from './config/collections/index.js'
import { img } from './config/shortcodes/index.js'
import { execSync } from 'child_process'
@ -84,6 +83,7 @@ export default async function (eleventyConfig) {
eleventyConfig.addCollection('tagList', tagList)
eleventyConfig.addCollection('tagMap', tagMap)
eleventyConfig.addCollection('postStats', postStats)
eleventyConfig.addCollection('tagsSortedByCount', tagsSortedByCount)
const md = markdownIt({ html: true, linkify: true })
md.use(markdownItAnchor, {

3
_redirects
View file

@ -30,6 +30,7 @@
/tags/.env /tags/env 301!
# 404s
/sitemap.txt /sitemap.xml 301!
/assets/img/social-preview/adding-a-light/dark-theme-toggle-preview.jpeg /assets/img/social-preview/adding-a-light-dark-theme-toggle-preview.jpeg 301!
/assets/img/social-card.jpg /assets/img/ogi/default.jpg 301!
/posts / 301!
@ -48,7 +49,7 @@
# general
/articles/ / 301!
/sitemap.txt /sitemap.xml 301!
/tags /search 301!
/mastodon https://social.lol/@cory 301!
/coffee https://www.buymeacoffee.com/cory 301!
/speedlify https://speedlify.coryd.dev 301!

17
config/collections/index.js
View file

@ -38,6 +38,23 @@ export const tagMap = (collection) => {
return tags
}
export const tagsSortedByCount = (collectionApi) => {
const tagStats = {};
const posts = collectionApi.getFilteredByGlob('src/posts/**/*.md').sort((a, b) => {
return a.date - b.date;
});
posts.forEach((post) => {
post.data.tags.forEach((tag) => {
if (!tagStats[tag]) tagStats[tag] = 1;
if (tagStats[tag]) tagStats[tag] = tagStats[tag] + 1;
});
});
const deletedTags = ['posts', 'politics', 'net neutrality'];
deletedTags.forEach(tag => delete tagStats[tag]);
const tagStatsArr = Object.entries(tagStats);
return tagStatsArr.sort((a, b) => b[1] - a[1]).map(([key, value]) => `${key}`);
}
export const postStats = (collectionApi) => {
const oneDayMilliseconds = 1000 * 60 * 60 * 24
const statsObject = {

12
config/filters/index.js
View file

@ -184,4 +184,14 @@ export default {
}
return normalized
}),
}
// posts
formatTag: (string) => {
const capitalizeFirstLetter = (string) => {
return string.charAt(0).toUpperCase() + string.slice(1);
}
if (string === 'iOS' || string === 'macOS') return `#${string}`
if (!string.includes(' ')) return `#${capitalizeFirstLetter(string)}`
return `#${string.split(' ').map(s => capitalizeFirstLetter(s)).join('')}`
}
}

2
package.json
View file

@ -1,6 +1,6 @@
{
"name": "coryd.dev",
"version": "6.9.7",
"version": "7.0.0",
"description": "The source for my personal site. Built using 11ty and hosted on Netlify.",
"type": "module",
"scripts": {

3
src/_data/nav.js
View file

@ -11,8 +11,7 @@ export default async function () {
{ name: 'Now' },
{ name: 'About' },
{ name: 'Links', icon: 'link' },
{ name: 'Tags', icon: 'tags' },
{ name: 'Search', icon: 'search', class: 'client-side' },
{ name: 'Search', icon: 'search' },
{ name: 'Feeds', icon: 'rss' },
{ name: 'Mastodon', icon: 'brand-mastodon' },
],

2
src/_includes/main.liquid
View file

@ -5,5 +5,5 @@ layout: base
<main>
{{ content }}
</main>
{% render "partials/footer.liquid", page: page, nav: nav %}
{% render "partials/footer.liquid", page:page, nav:nav %}
</div>

2
src/_includes/now.liquid
View file

@ -8,7 +8,7 @@ layout: default
{% endcapture %}
<style>{{ css }}</style>
{{ content }}
{% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %}
{% render "partials/now/media-grid.liquid", data:artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: "eager" %}
{% render "partials/now/media-grid.liquid", data:albums, icon: "vinyl", title: "Albums", shape: "square", count: 8 %}
{% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %}
{% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6 %}

7
src/_includes/partials/banners/npm.liquid Normal file
View file

@ -0,0 +1,7 @@
{% capture css %}
{% render "../../../assets/styles/components/banners.css" %}
{% endcapture %}
<style>{{ css }}</style>
<div class="banner npm">
<p>{% tablericon "brand-npm" "NPM package" %} <a class="no-underline" href="{{ url }}">You can take a look at this package on NPM</a> or install it by running <code>{{ command }}</code>.</p>
</div>

4
src/_includes/partials/banner-old-post.liquid → src/_includes/partials/banners/old-post.liquid
View file

@ -1,10 +1,10 @@
{% assign isOldPost = date | oldPost %}
{% if isOldPost %}
{% capture css %}
{% render "../../assets/styles/components/banner-old-post.css" %}
{% render "../../../assets/styles/components/banners.css" %}
{% endcapture %}
<style>{{ css }}</style>
<div class="banner__old-post">
<div class="banner old-post">
<p>{% tablericon "clock-x" "Old post" %} This post is over 3 years old. I've probably changed my mind since it was written and it <em>could</em> be out of date.</p>
</div>
{% endif %}

8
src/_includes/partials/footer.liquid
View file

@ -1,12 +1,12 @@
<footer>
<nav aria-label="Social icons" class="flex--centered text--centered">
<nav aria-label="Social icons" class="flex--centered justify--centered text--centered">
{% for link in nav.social %}
{% render "partials/nav/linked-icon.liquid", name: link.name, link: link.url, icon: link.icon %}
{% render "partials/nav/linked-icon.liquid", name:link.name, link:link.url, icon:link.icon %}
{% endfor %}
</nav>
<nav aria-label="Secondary site navigation" class="flex--centered text--centered">
<nav aria-label="Secondary site navigation" class="flex--centered justify--centered text--centered">
{% for link in nav.footer %}
{% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon %}
{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
{% if not forloop.last %}<span>•</span>{% endif %}
{% endfor %}
</nav>

2
src/_includes/partials/header.liquid
View file

@ -6,5 +6,5 @@
{{ meta.siteName }}
{% endif %}
</h1>
{% render "partials/nav/menu.liquid", page: page, nav: nav %}
{% render "partials/nav/menu.liquid", page:page, nav:nav %}
</div>

2
src/_includes/partials/nav/menu.liquid
View file

@ -2,7 +2,7 @@
<ul class="flex--centered flex--wrap">
{% for link in nav.menu %}
<li>
{% render "partials/nav/link.liquid", page: page, link: link.name, icon: link.icon, class: link.class %}
{% render "partials/nav/link.liquid", page:page, link:link.name, icon:link.icon %}
</li>
{% endfor %}
{% render "partials/nav/theme-toggle.liquid" %}

2
src/_includes/partials/now/media-grid.liquid
View file

@ -7,7 +7,7 @@
<style>{{ css }}</style>
{% endif %}
{% assign media = data | normalizeMedia %}
<h2 class="now__section--header flex--centered">
<h2 id="{{ title | downcase }}" class="now__section--header flex--centered">
{% tablericon icon title %}
{{ title }}
</h2>

14
src/_includes/partials/now/topper.liquid
View file

@ -1,10 +1,8 @@
{%- assign artist = artists | first -%}
{%- assign book = books | first -%}
{%- assign show = tv | first -%}
<div class="now__topper">
<h2>
<a class="no-underline" href="/now">Now</a>
</h2>
<div class="dark:text-white text-gray-800">
<p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, <a href="https://last.fm/user/coryd_" rel="noopener noreferrer">music</a>, writing, <a href="https://app.thestorygraph.com/profile/coryd" rel="noopener noreferrer">reading</a>, <a href="https://trakt.tv/users/cdransf" rel="noopener noreferrer">tv</a> and <a href="https://trakt.tv/users/cdransf" rel="noopener noreferrer">movies</a>.</p>
{% render "partials/now/status.liquid", status:status %}
{% render "partials/now-playing.liquid" %}
</div>
<p><strong class="highlight-text">I'm a software developer in Camarillo, California.</strong> I enjoy hanging out with my beautiful family and 4 rescue dogs, technology, automation, <a href="https://coryd.dev/now#artists">music</a>, writing, <a href="https://coryd.dev/now#books">reading</a>, <a href="https://coryd.dev/now#tv">tv</a> and <a href="https://coryd.dev/now#movies">movies</a>. Lately I've been{% if artist %} listening to a lot of <strong class="highlight-text">{{ artist.title }}</strong>,{% endif %} reading <strong class="highlight-text">{{ book.title }}</strong> and watching <strong class="highlight-text">{{ show.name }}</strong>.</p>
{% render "partials/now/status.liquid", status:status %}
{% render "partials/now-playing.liquid" %}
</div>

20
src/_includes/partials/paginator.liquid
View file

@ -4,34 +4,30 @@
<style>{{ css }}</style>
<nav aria-label="Blog pagination" class="pagination flex--centered">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">
<button aria-label="Previous page [&>svg]:h-5 [&>svg]:w-5">
{% tablericon "arrow-left" "Previous" %}
</button>
<a href="{{ pagination.href.previous }}" aria-label="Previous page">
{% tablericon "arrow-left" "Previous" %}
</a>
{% else %}
<button
<span
class="disabled"
aria-label="Previous page (disabled)"
disabled>
{% tablericon "arrow-left" "Prevous" %}
</button>
</span>
{% endif %}
<div class="text--centered">
<span aria-current="page">{{ pagination.pageNumber | plus: 1 }}</span> of {{ pagination.links.size }}
</div>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">
<button aria-label="Next page">
{% tablericon "arrow-right" "Next" %}
</button>
<a href="{{ pagination.href.next }}" aria-label="Next page">
{% tablericon "arrow-right" "Next" %}
</a>
{% else %}
<button
<span
class="disabled"
aria-label="Next page (disabled)"
disabled>
{% tablericon "arrow-right" "Next" %}
</button>
</span>
{% endif %}
</nav>

9
src/_includes/partials/post-tags.liquid
View file

@ -1,9 +0,0 @@
{% for tag in tags %}
{% if tag != "posts" %}
<a href="/tags/{{ tag }}">
<div
class="pill--button pill--button__small"
data-pagefind-filter="tags">{{ tag }}</div>
</a>
{% endif %}
{% endfor %}

2
src/_includes/partials/share-button.liquid
View file

@ -4,5 +4,5 @@
<style>{{ css }}</style>
<script type="module" src="/assets/scripts/components/webcare-webshare.js"></script>
<webcare-webshare share-text="{{ title }} {{ url | tagLookup: tagMap }}" share-url="{{ url }}" copy-text="{{ title }} {{ url | tagLookup: tagMap }} {{ url }}">
<button class="icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
<button class="share icon--small icon--center__vertical" disabled>{% tablericon "share" "Share" %}</button>
</webcare-webshare>

3
src/_includes/partials/tags.liquid Normal file
View file

@ -0,0 +1,3 @@
{% for tag in tags limit: 10 %}
<a class="tag no-underline" href="/tags/{{ tag | downcase }}" data-pagefind-filter="tags">{{ tag | formatTag }}</a>
{% endfor %}

16
src/_includes/post.liquid
View file

@ -11,22 +11,22 @@ schema: blog
<style>{{ css }}</style>
<div class="default__wrapper">
<article class="h-entry" data-pagefind-body>
<h2 class="p-name" data-pagefind-meta="title">{{ title }}</h2>
<span class="p-author h-card hidden">{{ meta.author }}</span>
<div class="flex--centered">
<time class="dt-published" datetime="{{ date }}">
{{ date | readableDate }}
{{ date | date: "%B %d, %Y" }}
<span class="client-side"> • </span>
</time>
{% render "partials/share-button.liquid", url: postUrl, title: title, tagMap: collections.tagMap %}
{% render "partials/share-button.liquid", url:postUrl, title:title, tagMap:collections.tagMap %}
</div>
<h2 class="p-name" data-pagefind-meta="title">{{ title }}</h2>
<span class="p-author h-card hidden">{{ meta.author }}</span>
<div class="p-summary hidden">{{ post_excerpt }}</div>
<div class="e-content">
{% render "partials/banner-old-post.liquid", date: date %}
{% render "partials/banners/old-post.liquid", date:date %}
{{ content }}
</div>
</article>
</div>
{% render "partials/mastodon-post.liquid", postUrl: postUrl, linkPosts: linkPosts %}
{% render "partials/post-tags.liquid", tags: tags %}
{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
{% render "partials/mastodon-post.liquid", postUrl:postUrl, linkPosts:linkPosts %}
{% render "partials/tags.liquid", tags:tags %}
{% render "partials/popular-posts.liquid", posts:collections.posts, analytics:analytics %}

3
src/_includes/webrings/css-joy.liquid
View file

@ -6,9 +6,8 @@
<a href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
{% tablericon "arrow-left" "Previous site" %}
</a>
<a class="pill--button" href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings">
<a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings">
{% tablericon "dice-3" "Random site" %}
Random
</a>
<a href="https://webri.ng/webring/cssjoy/next?via=https://coryd.dev/webrings">
{% tablericon "arrow-right" "Next site" %}

6
src/_includes/webrings/the-claw.liquid
View file

@ -4,8 +4,8 @@
</div>
<h3 class="text--centered">The Claw Webring</h3>
<div class="webring__centered flex--centered">
<a href="https://github.com/whitep4nth3r/the-claw-webring" class="pill--button">
{% tablericon "user-plus" "Join!" %} Join!
</a>
<strong>
<a class="no-underline" href="https://github.com/whitep4nth3r/the-claw-webring">Join!</a>
</strong>
</div>
</div>

21
src/assets/styles/components/banner-old-post.css → src/assets/styles/components/banners.css
View file

@ -1,19 +1,32 @@
.banner__old-post {
.banner {
margin: 1rem 0;
padding: .75rem;
border: 1px solid var(--gray-light);
border: 1px solid;
border-radius: var(--rounded-lg);
}
.banner__old-post p {
.banner.old-post {
border-color: var(--gray-light);
}
.banner.npm {
border-color: var(--brand-npm);
}
.banner.npm svg {
stroke: var(--brand-npm);
}
.banner p {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
margin: 0;
}
.banner__old-post p > svg {
.banner p > svg {
display: inline;
vertical-align: middle;
height: .875rem;
width: .875rem;
margin-right: .125rem;
}

30
src/assets/styles/components/forms.css
View file

@ -19,7 +19,7 @@ textarea {
/* necessary for pagefind overrides */
outline: none;
margin-bottom: 1.5rem;
margin-bottom: 1.25rem;
font-weight: 400 !important;
line-height: var(--line-height-base);
transition-property: border-color;
@ -32,4 +32,32 @@ input[type="email"]:focus,
input[type="search"]:focus,
textarea:focus {
border: 1px solid var(--accent-color-hover) !important;
}
button:not(.theme__toggle, .share, .pagefind-ui__search-clear) {
border-radius: var(--rounded-full);
padding: .5rem 1rem;
margin: 0 .25rem .75rem 0;
cursor: pointer;
display: inline-flex;
flex-direction: row;
justify-content: center;
font-size: var(--font-size-base);
font-weight: 700;
line-height: var(--line-height-base);
color: var(--color-lightest);
background-color: var(--accent-color);
appearance: none;
border: none;
text-decoration: none;
transition-property: background-color;
}
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):hover,
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):active,
button:not(.theme__toggle, .share, .pagefind-ui__search-clear):focus {
color: var(--color-lightest);
background-color: var(--accent-color-hover) !important;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}

4
src/assets/styles/components/mastodon-post.css
View file

@ -1,7 +1,7 @@
.mastodon-post-wrapper {
border-bottom: 1px solid var(--gray-light);
margin-bottom: 2rem;
padding-bottom: 1rem;
margin-bottom: 1.25rem;
padding-bottom: .25rem;
}
dl {

3
src/assets/styles/components/media-grid.css
View file

@ -5,8 +5,7 @@
}
.now__section--header {
margin-top: 2rem;
margin-bottom: 1rem;
margin: 2rem 0 1rem;
}
.media__grid {

8
src/assets/styles/components/pagefind.css
View file

@ -1,5 +1,5 @@
.pagefind-ui {
margin-bottom: 2rem;
margin-bottom: 1.25rem;
--pagefind-ui-primary: var(--accent-color);
--pagefind-ui-text: var(--text-color);
--pagefind-ui-background: var(--color-lightest);
@ -60,6 +60,12 @@
background-color: transparent !important;
}
.pagefind-ui__search-clear:hover,
.pagefind-ui__search-clear:focus,
.pagefind-ui__search-clear:active {
color: var(--accent-color-hover) !important;
}
.pagefind-ui__result-title {
margin-bottom: .25rem !important;
}

4
src/assets/styles/components/paginator.css
View file

@ -8,12 +8,12 @@
padding-right: 0;
}
.pagination button > svg {
.pagination a > svg {
stroke: var(--accent-color);
cursor: pointer;
}
.pagination button.disabled > svg {
.pagination span.disabled svg {
cursor: not-allowed;
stroke: color-mix(in srgb, var(--text-color), transparent 50%);
stroke-width: var(--stroke-width-default);

3
src/assets/styles/components/popular-posts.css
View file

@ -1,4 +1,3 @@
.popular-posts h2 {
margin-top: 2rem;
margin-bottom: 1rem;
margin: 2rem 0 1rem;
}

209
src/assets/styles/index.css
View file

@ -1,6 +1,9 @@
body,
html {
color: var(--text-color);
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
background: var(--background-color);
margin: 0;
}
@ -33,7 +36,7 @@ blockquote {
stroke: var(--text-color);
}
:is(h1, h2, h3, h4, h5, h6, .pill--button) > svg {
:is(h1, h2, h3, h4, h5, h6) > svg {
margin-right: .25rem;
stroke-width: var(--stroke-width-bold) !important;
}
@ -42,11 +45,26 @@ sup.footnote-ref {
line-height: var(--line-height-xs);
}
strong,
blockquote {
font-weight: 700;
}
em,
blockquote {
font-style: italic;
}
/* links */
a {
transition-property: color;
}
a,
.active {
color: var(--accent-color);
}
a:hover,
a:focus,
a:active,
@ -56,6 +74,13 @@ a:active,
color: var(--accent-color-hover);
}
a:hover,
a:focus,
a:active {
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
:is(
a:has(svg):hover,
a:has(svg):active,
@ -101,6 +126,10 @@ table {
border: 1px solid var(--gray-light);
}
table a {
text-decoration: none;
}
table,
th,
td {
@ -124,6 +153,7 @@ td {
}
th {
font-weight: 700;
background-color: var(--gray-lighter);
text-align: center;
}
@ -132,6 +162,8 @@ th {
.main__title {
width: 100%;
padding-top: 2rem;
display: flex;
flex-direction: column;
}
.main__title h1 {
@ -209,6 +241,8 @@ nav ul li .active svg:hover {
.main__wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
main {
@ -222,14 +256,11 @@ main {
.now__topper,
article {
border-bottom: 1px solid var(--gray-light);
margin-bottom: 2rem;
padding-bottom: 1rem;
margin-bottom: 1.25rem;
}
.now__topper h2 {
font-size: var(--font-size-xl);
.now__topper p:first-child {
margin-top: 0;
margin-bottom: 1rem;
}
footer nav:first-child {
@ -259,60 +290,42 @@ footer nav:last-child span:not(.active) {
margin-right: .25rem;
}
:is(.main__title, footer nav:last-child) a {
color: var(--text-color);
text-decoration: none;
}
.highlight-text {
padding: .125rem;
color: var(--color-lightest);
background-color: var(--accent-color);
padding: .25rem;
}
code {
padding: .125rem;
padding: .25rem;
color: var(--text-color-inverted);
background-color: var(--background-color-inverted);
}
/* buttons */
.pill--button {
border-radius: var(--rounded-full);
padding: .5rem 1rem;
margin: 0 .25rem .75rem 0;
cursor: pointer;
transition-property: background-color;
display: inline-flex;
flex-direction: row;
}
.pill--button.pill--button__small {
padding: .25rem .5rem;
margin-right: .5rem;
margin-bottom: .5rem;
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
display: inline-block;
}
.pill--button:hover,
.pill--button:active,
.pill--button:focus {
background-color: var(--accent-color-hover) !important;
}
.pill--button > svg,
.pill--button svg:hover,
.pill--button svg:active,
.pill--button svg:focus,
.pill--button:hover svg,
.pill--button:active svg,
.pill--button:focus svg {
stroke: var(--color-lightest) !important;
}
/* articles */
article h2 {
color: var(--text-color);
line-height: var(--line-height-2xl);
margin: 0 0 .375rem;
transition-property: color;
}
article h2:hover,
article h2:focus,
article h2:active {
color: var(--accent-color-hover);
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
article [rel="author"],
article time {
color: var(--gray-dark);
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
margin-right: .25rem;
@ -322,6 +335,16 @@ article [rel="author"] {
margin-bottom: .25rem;
}
.tag:not(:last-child) {
margin-right: .125rem;
}
/* buttons */
button {
appearance: none;
border: none;
}
/* icons */
svg {
stroke-width: var(--stroke-width-default);
@ -395,10 +418,9 @@ li {
text-align: center !important;
}
.fade {
transition-property: opacity;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
.text--small {
font-size: var(--font-size-sm);
line-height: var(--line-height-sm);
}
.flex--centered {
@ -407,88 +429,14 @@ li {
align-items: center;
}
.justify--centered {
justify-content: center;
}
.flex--wrap {
flex-wrap: wrap
}
/* shared styles */
body,
html,
:is(.main__title, footer nav:last-child) a {
color: var(--text-color);
}
body,
html,
.pill--button {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
}
.main__title,
.main__wrapper,
.contact__wrapper {
display: flex;
flex-direction: column;
}
.highlight-text,
.pill--button,
.pill--button:hover,
.pill--button:active,
.pill--button:focus {
color: var(--color-lightest);
}
.highlight-text,
.pill--button {
background-color: var(--accent-color);
}
blockquote,
strong,
.pill--button,
th {
font-weight: 700;
}
blockquote,
em {
font-style: italic;
}
button,
.pill--button {
appearance: none;
border: none;
}
a,
.active {
color: var(--accent-color);
}
a:hover,
a:focus,
a:active,
.pill--button:hover,
.pill--button:focus,
.pill--button:active {
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
.pill--button,
:is(.main__title, footer nav:last-child) a,
table a {
text-decoration: none;
}
.pill--button,
footer nav {
justify-content: center;
}
/* screens: md */
@media screen and (min-width: 768px) {
.main__title {
@ -505,10 +453,6 @@ footer nav {
margin-right: .75rem;
}
.now__topper h2 {
font-size: var(--font-size-2xl);
}
main {
max-width: 768px;
}
@ -519,11 +463,6 @@ footer nav {
line-height: var(--line-height-3xl);
}
/* lists */
ul, ol {
padding-left: 2.5rem;
}
footer nav:first-child {
gap: .75rem;
}

6
src/assets/styles/pages/about.css
View file

@ -4,6 +4,7 @@
.avatar__wrapper {
margin-bottom: 1.5rem;
width: 100%;
}
.avatar__wrapper .avatar__wrapper--interior {
@ -22,14 +23,9 @@
overflow: hidden;
}
.avatar__wrapper,
.avatar__wrapper .avatar__wrapper--interior picture > *,
.avatar__wrapper .avatar__wrapper--interior img {
width: 100%;
}
.avatar__wrapper .avatar__wrapper--interior picture > *,
.avatar__wrapper .avatar__wrapper--interior img {
height: 100%;
}

5
src/assets/styles/pages/contact.css
View file

@ -1,3 +1,8 @@
.contact__wrapper {
display: flex;
flex-direction: column;
}
.contact__wrapper textarea {
height: 10rem;
resize: none;

3
src/assets/styles/pages/now.css
View file

@ -16,8 +16,7 @@
}
.now__section--header {
margin-top: 2rem;
margin-bottom: 1rem;
margin: 2rem 0 1rem;
}
.now__section--header:first-of-type {

4
src/assets/styles/pages/post.css
View file

@ -5,7 +5,7 @@
/* footnotes */
hr.footnotes-sep {
margin: 2.5rem 0;
margin: 1.25rem 0;
}
.footnotes-list {
@ -18,7 +18,7 @@ hr.footnotes-sep {
}
.footnotes {
padding-bottom: 1.5rem;
padding-bottom: 1.25rem;
}
.footnote-item > p {

28
src/index.html
View file

@ -7,21 +7,21 @@ pagination:
alias: posts
---
{% if pagination.pageNumber == 0 %}
{% render "partials/now/topper.liquid" status:status %}
{% render "partials/now/topper.liquid" status:status, artists:artists, books:books, tv:tv %}
{% endif %}
{% for post in pagination.items %}
{% if post.data.published %}
<article class="h-entry">
<a class="no-underline" href="{{ post.url }}">
<h2 class="flex--centered">{{ post.data.title }}</h2>
</a>
<span class="p-author h-card hidden">{{ meta.siteName }}</span>
<time class="dt-published" datetime="{{ post.date }}">
{{ post.date | date: "%m.%Y" }}
</time>
<div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
{{ post.data.post_excerpt | markdown }}
</article>
{% endif %}
<article class="h-entry">
<time class="dt-published" datetime="{{ post.date }}">
{{ post.date | date: "%B %d, %Y" }}
</time>
<a class="no-underline" href="{{ post.url }}">
<h2 class="flex--centered">{{ post.data.title }}</h2>
</a>
<div class="text--small">{% render "partials/tags.liquid", tags:post.data.tags %}</div>
<span class="p-author h-card hidden">{{ meta.siteName }}</span>
<div class="p-summary hidden">{{ post.data.post_excerpt }}</div>
{{ post.data.post_excerpt | markdown }}
<p><a class="no-underline" href="{{ post.url }}">Read more →</a></p>
</article>
{% endfor %}
{% render "partials/paginator.liquid", pagination:pagination %}

9
src/pages/404.html
View file

@ -12,15 +12,8 @@ image: /assets/img/404.jpg
{% image './src/assets/img/404.jpg', title, 'image__banner', 'eager' %}
<div class="text--centered">
<h2 class="page__header">{{ title }}</h2>
<h3>What kind of idiots do you have working here?</h3>
<div class="flex justify-center">
<a href="/" class="pill--button">
{% tablericon "receipt-2" "Receipt" %} Skip out on the room service bill
</a>
</div>
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/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {

9
src/pages/contact-success.html
View file

@ -7,10 +7,5 @@ image: /assets/img/ogi/contact.jpg
<div class="text--centered">
<h2>{{ title }}</h2>
<h3>I'll be in touch soon!</h3>
<a href="/" class="pill--button">
{% tablericon "home-2" "Home" %} Head home
</a>
</div>
<hr class="large__spacing" />
{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
I'll be in touch soon! <a href="/">Head home</a>
</div>

4
src/pages/contact.md
View file

@ -34,6 +34,8 @@ description: 'How to contact me.'
<input type="email" name="email" placeholder="Email" required />
</label>
<textarea name="message" placeholder="Message" required></textarea>
<button class="pill--button" type="submit">Send message</button>
<div class="flex--centered justify--centered">
<button type="submit">Send message</button>
</div>
</form>
</div>

3
src/pages/search.html
View file

@ -19,4 +19,5 @@ image: /assets/img/ogi/search.jpg
<input type="hidden" placeholder="Search" name="sites" value="coryd.dev">
</form>
</pagefind-search>
{% render "partials/popular-posts.liquid", posts: collections.posts, analytics: analytics %}
{% render "partials/tags.liquid", tags:collections.tagsSortedByCount %}
{% render "partials/popular-posts.liquid", posts:collections.posts, analytics:analytics %}

2
src/pages/stats.html
View file

@ -6,6 +6,8 @@ image: /assets/img/ogi/stats.jpg
---
<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>
<p><strong>Top tags</strong></p>
{% render "partials/tags.liquid", tags:collections.tagsSortedByCount %}
<p><strong>Popular posts</strong></p>
<ol class="link__list">
{% assign posts = collections.posts | getPopularPosts: analytics %}

14
src/pages/tagList.md → src/pages/tag-list.html
View file

@ -8,19 +8,17 @@ permalink: /tags/{{ tag }}/
image: /assets/img/ogi/tags.jpg
eleventyComputed:
title: '{{ tag }}'
templateEngineOverride: liquid,md
---
{% assign posts = collections[tag] | reverse %}
{% for post in posts %}
<article class="h-entry">
<a class="no-underline" href="{{ post.url }}">
<h2 class="flex--centered">{{ post.data.title }}</h2>
</a>
<time class="dt-published" datetime="{{ post.date }}">
{{ post.date | date: "%m.%Y" }}
</time>
{%- if post.data.post_excerpt %}
<p class="p-summary">{{ post.data.post_excerpt | markdown }}</p>
{% endif -%}
<a class="no-underline" href="{{ post.url }}">
<h2 class="flex--centered">{{ post.data.title }}</h2>
</a>
<p class="p-summary">{{ post.data.post_excerpt | markdown }}</p>
<p><a class="no-underline" href="{{ post.url }}">Read more →</a></p>
</article>
{% endfor %}
{% endfor %}

16
src/pages/tags.md
View file

@ -1,16 +0,0 @@
---
title: Tags
description: "Filter and find posts on my site by tag."
layout: default
permalink: /tags.html
image: /assets/img/ogi/tags.jpg
---
{% for tag in collections.tagList %}
<span>
<a href="/tags/{{ tag }}" class="no-underline">
<button class="pill--button">
{{ tag }}
</button>
</a>
</span>
{% endfor %}

2
src/posts/2024/building-a-theme-toggle-web-component.md
View file

@ -142,4 +142,4 @@ I load the web component script, embed my styles, define the template such that
[The complete JavaScript can be viewed in the source for my site.](https://github.com/cdransf/coryd.dev/blob/main/src/assets/scripts/components/theme-toggle.js)
You can also install the component via npm using `npm i @cdransf/theme-toggle`.
{% render "partials/banners/npm.liquid", url: 'https://www.npmjs.com/package/@cdransf/theme-toggle', command: 'npm i @cdransf/theme-toggle' %}

48
src/posts/2024/everything-is-a-checklist.md
View file

@ -4,31 +4,31 @@ title: 'Everything is a checklist'
description: 'The author ruminates on routine, mental health and productibity.'
tags: ['health', 'productivity']
---
- [x] Wake up at 4:15am
- [x] Start exercising by 4:30am
- [x] Throw TV or movie on in the background
- [x] Aim for 1600+ calories, be satisfied with anything over 800
- [x] Finish exercising by 6:35am
- &check; Wake up at 4:15am
- &check; Start exercising by 4:30am
- &check; Throw TV or movie on in the background
- &check; Aim for 1600+ calories, be satisfied with anything over 800
- &check; Finish exercising by 6:35am
<!-- excerpt -->
- [x] Check off what was watched on [Trackt](https://trakt.tv)
- [x] AirPods in, start an audiobook or text to speech in [Readwise Reader](https://readwise.io/read)[^1]
- [x] Check [Todoist](https://todoist.com)
- [x] Make coffee
- [x] Feed all 4 dogs
- [x] Feed the guinea pig
- [x] Do dishes
- [x] Start laundry
- [x] Take medication
- [x] Drop the kiddo off at school
- [x] Check my calendar
- [x] Start music
- [x] Start work
- [x] Meetings
- [x] Code reviews
- [x] Tickets in, tickets out
- [x] Pick the kiddo up from school
- [x] Finish work
- [x] Hang out with the family[^2]
- &check; Check off what was watched on [Trackt](https://trakt.tv)
- &check; AirPods in, start an audiobook or text to speech in [Readwise Reader](https://readwise.io/read)[^1]
- &check; Check [Todoist](https://todoist.com)
- &check; Make coffee
- &check; Feed all 4 dogs
- &check; Feed the guinea pig
- &check; Do dishes
- &check; Start laundry
- &check; Take medication
- &check; Drop the kiddo off at school
- &check; Check my calendar
- &check; Start music
- &check; Start work
- &check; Meetings
- &check; Code reviews
- &check; Tickets in, tickets out
- &check; Pick the kiddo up from school
- &check; Finish work
- &check; Hang out with the family[^2]
*Check, check, check, clear the queue, close the rings, get to zero.*