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

feat: simplify icons + dry feed styles

Browse source
This commit is contained in:
Cory Dransfeldt 2023-08-06 12:29:51 -07:00
parent 63d90878bb
commit 8c53392c21
No known key found for this signature in database
43 changed files with 290 additions and 539 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/404.html
View file

@ -12,7 +12,7 @@ permalink: 404.html
<div class="flex justify-center">
<a href="/" class="flex flex-row items-start md:items-center font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500">
<span class="icon--bold pt-1 md:pt-0 mr-1">
{% tablericon "receipt-2" "Receipt" "width=20 height=20" %}
{% tablericon "receipt-2" "Receipt" "{width: 20, height: 20}" %}
</span>
<span>Skip out on the room service bill</span>
</a>

84
src/_includes/feed.liquid Normal file
View file

@ -0,0 +1,84 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
version="3.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom">
<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>
{{ title }}
</title>
<link href="/assets/styles/tailwind.css" rel="stylesheet"/>
<link href="/assets/styles/index.css" rel="stylesheet"/>
<link href="/assets/img/favicon/favicon-16x16.png" rel="icon" type="image/x-icon"/>
<link href="/assets/img/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32"/>
<link href="/assets/img/favicon/apple-touch-icon.png" rel="apple-touch-icon"/>
<link rel="me" href="https://social.lol/@cory"/>
</head>
<body class="dark:text-white dark:bg-gray-900 font-sans text-gray-800">
<div class="min-h-screen flex flex-col">
<main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
<div class="flex flex-col md:flex-row md:items-center md:justify-between md:pt-10 pt-5">
<h1 class="font-black leading-tight md:pb-0 md:text-3xl pb-5 text-2xl">
{{ heading }}
</h1>
<a href="/" class="icon--h-28 icon--bold">
{% tablericon "home-move" "Home • Cory Dransfeldt" %}
</a>
</div>
<div class="pt-8 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
<div class="dark:text-white text-gray-800">
<h2
class="font-black leading-tight m-0 md:text-2xl text-xl tracking-normal mb-4 flex flex-row items-center text-gray-800 dark:text-gray-200 icon--h-28">
<div class="mr-1">
{% tablericon icon title %}
</div>
{{ title }}
</h2>
<p>{{ description }}</p>
<p>
<xsl:value-of select="atom:feed/atom:description"/>
</p>
</div>
<ul class="mb-8">
<xsl:apply-templates select="atom:feed/atom:entry"/>
</ul>
</div>
<footer class="prose pb-8 mt-4 text-gray-800 dark:text-white border-t border-gray-200 dark:border-gray-700 max-w-full">
<div>
<p class="mb-0">
<strong class="text-gray-800 dark:text-gray-200">This is a web feed,</strong>
also known as an RSS or Atom feed.
</p>
<p class="mt-0">
<strong class="text-gray-800 dark:text-gray-200">Subscribe</strong>
by copying the URL from the address bar into your newsreader.
</p>
</div>
<small>Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and
subscribing. It's free.
</small>
</footer>
</main>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="atom:feed/atom:entry">
<li>
<a
class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>
<xsl:value-of select="atom:title"/>
</a>
<span class="mx-1">•</span>
<xsl:value-of select="atom:updated"/>
</li>
</xsl:template>
</xsl:stylesheet>

4
src/_includes/icons/calendar.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://savvycal.com/coryd/quick-call"
rel="me"
title="SavvyCal">
{% tablericon "calendar-plus" "SavvyCal" "height=24" %}
{% tablericon "calendar-plus" "SavvyCal" %}
</a>

4
src/_includes/icons/coffee.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://www.buymeacoffee.com/cory"
rel="me"
title="Buy Me a Coffee">
{% tablericon "cup" "Buy Me a Coffee" "height=24" %}
{% tablericon "cup" "Buy Me a Coffee" %}
</a>

4
src/_includes/icons/email.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="mailto:coryd@hey.com"
rel="me"
title="Email">
{% tablericon "at" "Email" "height=24" %}
{% tablericon "at" "Email" %}
</a>

4
src/_includes/icons/github.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://github.com/cdransf"
rel="me"
title="GitHub">
{% tablericon "brand-github" "GitHub" "height=24" %}
{% tablericon "brand-github" "GitHub" %}
</a>

4
src/_includes/icons/goodreads.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://www.goodreads.com/cdransf"
rel="me"
title="Goodreads">
{% tablericon "books" "Goodreads" "height=24" %}
{% tablericon "books" "Goodreads" %}
</a>

4
src/_includes/icons/lastfm.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://www.last.fm/user/cdrn_"
rel="me"
title="Last.fm">
{% tablericon "brand-lastfm" "Last.fm" "height=24" %}
{% tablericon "brand-lastfm" "Last.fm" %}
</a>

4
src/_includes/icons/letterboxd.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://letterboxd.com/cdme"
rel="me"
title="Letterboxd">
{% tablericon "brand-letterboxd" "Letterboxd" "height=24" %}
{% tablericon "brand-letterboxd" "Letterboxd" %}
</a>

4
src/_includes/icons/linkedin.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://www.linkedin.com/in/cdransf/"
rel="me"
title="LinkedIn">
{% tablericon "brand-linkedin" "LinkedIn" "height=24" %}
{% tablericon "brand-linkedin" "LinkedIn" %}
</a>

4
src/_includes/icons/mastodon.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://social.lol/@cory"
rel="me"
title="Mastodon">
{% tablericon "brand-mastodon" "Mastodon" "height=24" %}
{% tablericon "brand-mastodon" "Mastodon" %}
</a>

4
src/_includes/icons/rss.liquid
View file

@ -1,3 +1,3 @@
<a href="/feeds" title="RSS" class="link--icon{% if page.url == '/feeds/' %} active{% endif %}">
{% tablericon "rss" "RSS" "height=24" %}
<a href="/feeds" title="RSS" class="link--icon icon--h-24{% if page.url == '/feeds/' %} active{% endif %}">
{% tablericon "rss" "RSS" %}
</a>

4
src/_includes/icons/search.liquid
View file

@ -1,3 +1,3 @@
<a href="/search" title="Search posts" class="link--icon{% if page.url == '/search/' %} active{% endif %}">
{% tablericon "search" "Search posts" "height=24" %}
<a href="/search" title="Search posts" class="link--icon icon--h-24{% if page.url == '/search/' %} active{% endif %}">
{% tablericon "search" "Search posts" %}
</a>

4
src/_includes/icons/spotify.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://open.spotify.com/user/mdh0acvmvfsbunzt6ywnq2tg3"
rel="me"
title="Spotify">
{% tablericon "brand-spotify" "Spotify" "height=24" %}
{% tablericon "brand-spotify" "Spotify" %}
</a>

4
src/_includes/icons/tags.liquid
View file

@ -1,3 +1,3 @@
<a href="/tags" title="Post tags" class="link--icon{% if page.url == '/tags/' %} active{% endif %}">
{% tablericon "tag" "Post tags" "height=24" %}
<a href="/tags" title="Post tags" class="link--icon icon--h-24{% if page.url == '/tags/' %} active{% endif %}">
{% tablericon "tag" "Post tags" %}
</a>

4
src/_includes/icons/trakt.liquid
View file

@ -1,7 +1,7 @@
<a
class="link--icon"
class="link--icon icon--h-24"
href="https://trakt.tv/users/cdransf"
rel="me"
title="Trakt">
{% tablericon "device-tv" "Trakt" "height=24" %}
{% tablericon "device-tv" "Trakt" %}
</a>

4
src/_includes/icons/webrings.liquid
View file

@ -1,3 +1,3 @@
<a href="/webrings" title="RSS" class="link--icon{% if page.url == '/webrings/' %} active{% endif %}">
{% tablericon "heart-handshake" "Webrings" "height=24" %}
<a href="/webrings" title="RSS" class="link--icon icon--h-24{% if page.url == '/webrings/' %} active{% endif %}">
{% tablericon "heart-handshake" "Webrings" %}
</a>

4
src/_includes/partials/now/albumReleases.liquid
View file

@ -1,6 +1,6 @@
{% if albumReleases.size > 0 %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "calendar-time" "Anticipated albums" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "calendar-time" "Anticipated albums" %}
<div class="ml-1">Anticipated albums</div>
</h2>
<ul class="list-inside list-disc pl-5 md:pl-10">

4
src/_includes/partials/now/albums.liquid
View file

@ -1,6 +1,6 @@
{% if music.size > 0 %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "vinyl" "Albums" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "vinyl" "Albums" %}
<div class="ml-1">Albums</div>
</h2>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">

4
src/_includes/partials/now/artists.liquid
View file

@ -1,6 +1,6 @@
{% if music.size > 0 %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "microphone-2" "Artists" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "microphone-2" "Artists" %}
<div class="ml-1">Artists</div>
</h2>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">

4
src/_includes/partials/now/books.liquid
View file

@ -1,6 +1,6 @@
{% if books.size > 0 %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "books" "Books" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "books" "Books" %}
<div class="ml-1">Books</div>
</h2>
<div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">

4
src/_includes/partials/now/links.liquid
View file

@ -1,6 +1,6 @@
{% if links.size > 0 %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "link" "Links" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "link" "Links" %}
<div class="ml-1">Links</div>
</h2>
<ul class="list-inside list-disc pl-5 md:pl-10">

4
src/_includes/partials/now/movies.liquid
View file

@ -1,6 +1,6 @@
{% if movies.size > 0 %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "movie" "Movies" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "movie" "Movies" %}
<div class="ml-1">Movies</div>
</h2>
<div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">

4
src/_includes/partials/now/tv.liquid
View file

@ -1,6 +1,6 @@
{% if tv.size > 0 %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "device-tv" "TV" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "device-tv" "TV" %}
<div class="ml-1">TV</div>
</h2>
<div class="grid grid-cols-3 gap-2 md:grid-cols-6 not-prose">

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

@ -1,16 +1,16 @@
<nav class="flex justify-between mt-8 items-center">
{% if pagination.href.previous %}
<a href="{{ pagination.href.previous }}">
<button class="py-2 pr-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Previous page">
{% tablericon "arrow-left" "Previous" "width=20 height=20" %}
<button class="py-2 pr-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Previous page icon--h-20">
{% tablericon "arrow-left" "Previous" %}
</button>
</a>
{% else %}
<button
class="py-2 pr-4 cursor-not-allowed disabled:opacity-50"
class="py-2 pr-4 cursor-not-allowed disabled:opacity-50 icon--h-20"
aria-label="Previous page (disabled)"
disabled>
{% tablericon "arrow-left" "Prevous" "width=20 height=20" %}
{% tablericon "arrow-left" "Prevous" %}
</button>
{% endif %}
<div class="text-center">
@ -18,16 +18,16 @@
</div>
{% if pagination.href.next %}
<a href="{{ pagination.href.next }}">
<button class="py-2 pl-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500" aria-label="Next page">
{% tablericon "arrow-right" "Next" "width=20 height=20" %}
<button class="py-2 pl-4 dark:text-purple-400 text-purple-600 hover:text-purple-500 dark:hover:text-purple-500 icon--h-20" aria-label="Next page">
{% tablericon "arrow-right" "Next" %}
</button>
</a>
{% else %}
<button
class="py-2 pl-4 cursor-not-allowed disabled:opacity-50"
class="py-2 pl-4 cursor-not-allowed disabled:opacity-50 icon--h-20"
aria-label="Next page (disabled)"
disabled>
{% tablericon "arrow-right" "Next" "width=20 height=20" %}
{% tablericon "arrow-right" "Next" %}
</button>
{% endif %}
</nav>

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

@ -1,7 +1,7 @@
{% assign posts = posts | getPopularPosts: analytics %}
<div class="not-prose">
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "flame" "Popular" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "flame" "Popular" %}
<div class="ml-1">Popular posts</div>
</h2>
<ul class="list-inside list-disc pl-5 md:pl-10">

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

@ -5,16 +5,16 @@
</h3>
</a>
<div class="flex flex-row justify-center items-center">
<a class="link--icon" href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
{% tablericon "arrow-left" "Previous site" "width=20 height=20" %}
<a class="link--icon icon--h-20" href="https://webri.ng/webring/cssjoy/previous?via=https://coryd.dev/webrings">
{% tablericon "arrow-left" "Previous site" %}
</a>
<div class="flex justify-center">
<a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings" class="icon--bold mx-4 flex flex-row items-center font-semibold p-2 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500">
{% tablericon "dice-3" "Random site" "height=24" %}
<a href="https://webri.ng/webring/cssjoy/random?via=https://coryd.dev/webrings" class="icon--bold mx-4 flex flex-row items-center font-semibold p-2 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500 icon--h-24">
{% tablericon "dice-3" "Random site" %}
</a>
</div>
<a class="link--icon" href="https://webri.ng/webring/cssjoy/next?via=https://coryd.dev/webrings">
{% tablericon "arrow-right" "Next site" "width=20 height=20" %}
<a class="link--icon icon--h-20" href="https://webri.ng/webring/cssjoy/next?via=https://coryd.dev/webrings">
{% tablericon "arrow-right" "Next site" %}
</a>
</div>
</div>

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

@ -7,8 +7,8 @@
</h3>
<div class="flex justify-center">
<a href="https://github.com/whitep4nth3r/the-claw-webring" class="flex flex-row items-start md:items-center font-semibold py-2 px-4 rounded-full !no-underline !text-white dark:text-gray-900 bg-purple-600 dark:bg-purple-400 hover:bg-purple-500">
<span class="icon--bold pt-1 md:pt-0 mr-1">
{% tablericon "user-plus" "Join!" "width=20 height=20" %}
<span class="icon--bold pt-1 md:pt-0 mr-1 icon--h-20">
{% tablericon "user-plus" "Join!" %}
</span>
<span>Join!</span>
</a>

8
src/assets/feeds/books.md Normal file
View file

@ -0,0 +1,8 @@
---
layout: feed
title: Books • Cory Dransfeldt
icon: books
heading: Feed preview • books
description: A feed of my recently read books.
permalink: /assets/feeds/books.xsl
---

89
src/assets/feeds/books.xsl
View file

@ -1,89 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
version="3.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom">
<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>
<xsl:value-of select="atom:feed/atom:title"/>
</title>
<link href="/assets/styles/tailwind.css" rel="stylesheet"/>
<link href="/assets/styles/index.css" rel="stylesheet"/>
<link href="/assets/img/favicon/favicon-16x16.png" rel="icon" type="image/x-icon"/>
<link href="/assets/img/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32"/>
<link href="/assets/img/favicon/apple-touch-icon.png" rel="apple-touch-icon"/>
<link rel="me" href="https://social.lol/@cory"/>
</head>
<body class="dark:text-white dark:bg-gray-900 font-sans text-gray-800">
<div class="min-h-screen flex flex-col">
<main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
<div class="flex flex-col md:flex-row md:items-center md:justify-between md:pt-10 pt-5">
<h1 class="font-black leading-tight md:pb-0 md:text-3xl pb-5 text-2xl">Books • Cory Dransfeldt</h1>
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="inline w-6 h-6 outline-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
</svg>
</a>
</div>
<div class="pt-8 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
<div class="dark:text-white text-gray-800">
<h2
class="font-black leading-tight m-0 md:text-2xl text-xl tracking-normal mb-4 flex flex-row items-center text-gray-800 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-10 h-10 mr-1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
</svg>
Feed preview • books
</h2>
<p>A feed of my recently read books.</p>
<p>
<xsl:value-of select="atom:feed/atom:description"/>
</p>
</div>
<ul class="mb-8">
<xsl:apply-templates select="atom:feed/atom:entry"/>
</ul>
</div>
<footer class="prose pb-8 mt-4 text-gray-800 dark:text-white border-t border-gray-200 dark:border-gray-700 max-w-full">
<div>
<p class="mb-0">
<strong class="text-gray-800 dark:text-gray-200">This is a web feed,</strong>
also known as an RSS or Atom feed.
</p>
<p class="mt-0">
<strong class="text-gray-800 dark:text-gray-200">Subscribe</strong>
by copying the URL from the address bar into your newsreader.
</p>
</div>
<small>Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and
subscribing. It's free.
</small>
</footer>
</main>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="atom:feed/atom:entry">
<li>
<a
class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>
<xsl:value-of select="atom:title"/>
</a>
•
<xsl:value-of select="atom:updated"/>
</li>
</xsl:template>
</xsl:stylesheet>

8
src/assets/feeds/feed.md Normal file
View file

@ -0,0 +1,8 @@
---
layout: feed
title: Feed • Cory Dransfeldt
icon: rss
heading: Feed preview • all posts
description: A feed of the posts from my site.
permalink: /assets/feeds/feed.xsl
---

109
src/assets/feeds/feed.xsl
View file

@ -1,109 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
version="3.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom">
<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>
<xsl:value-of select="atom:feed/atom:title"/>
</title>
<link href="/assets/styles/tailwind.css" rel="stylesheet"/>
<link href="/assets/styles/index.css" rel="stylesheet"/>
<link href="/assets/img/favicon/favicon-16x16.png" rel="icon" type="image/x-icon"/>
<link href="/assets/img/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32"/>
<link href="/assets/img/favicon/apple-touch-icon.png" rel="apple-touch-icon"/>
<link rel="me" href="https://social.lol/@cory"/>
</head>
<body class="dark:text-white dark:bg-gray-900 font-sans text-gray-800">
<div class="min-h-screen flex flex-col">
<main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
<div class="flex flex-col md:flex-row md:items-center md:justify-between md:pt-10 pt-5">
<h1 class="font-black leading-tight md:pb-0 md:text-3xl pb-5 text-2xl">Cory Dransfeldt</h1>
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="inline w-6 h-6 outline-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
</svg>
</a>
</div>
<div class="pt-8 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
<div class="dark:text-white text-gray-800 border-b border-gray-200 dark:border-gray-700 pb-4">
<h2
class="font-black leading-tight m-0 md:text-2xl text-xl tracking-normal mb-4 flex flex-row items-center text-gray-800 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-10 h-10 mr-1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
</svg>
Feed preview • all posts
</h2>
<p>I'm a software developer in Camarillo, California. I enjoy hanging out with my beautiful family and 4
rescue dogs, technology, automation, music, writing, reading and tv and movies.
</p>
<p>
<em>This feed preview only shows titles, but the actual feed contains the full content.</em>
</p>
<p>
<a href="/feed.json">I also have a JSON feed available.</a>
</p>
<a href="/">
Visit site &#x2192;
</a>
<p>
<xsl:value-of select="atom:feed/atom:description"/>
</p>
</div>
<xsl:apply-templates select="atom:feed/atom:entry"/>
</div>
<footer class="prose pb-8 mt-4 text-gray-800 dark:text-white max-w-full">
<div>
<p class="mb-0">
<strong class="text-gray-800 dark:text-gray-200">This is a web feed,</strong>
also known as an RSS or Atom feed.
</p>
<p class="mt-0">
<strong class="text-gray-800 dark:text-gray-200">Subscribe</strong>
by copying the URL from the address bar into your newsreader.
</p>
</div>
<small>Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and
subscribing. It's free.
</small>
</footer>
</main>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="atom:feed/atom:entry">
<div class="pb-4 border-b border-gray-200 dark:border-gray-700 mb-8">
<h3 class="mb-0">
<a
class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>
<xsl:value-of select="atom:title"/>
</a>
</h3>
<div class="h-14 flex items-center text-sm">
<span>
<xsl:value-of select="atom:updated"/> •
<a>
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>
Read &#x2192;
</a>
</span>
</div>
</div>
</xsl:template>
</xsl:stylesheet>

8
src/assets/feeds/follow.md Normal file
View file

@ -0,0 +1,8 @@
---
layout: feed
title: Follow • Cory Dransfeldt
icon: user-plus
heading: Feed preview • follow
description: My activity from around the web.
permalink: /assets/feeds/follow.xsl
---

90
src/assets/feeds/follow.xsl
View file

@ -1,90 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
version="3.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom">
<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>
<xsl:value-of select="atom:feed/atom:title"/>
</title>
<link href="/assets/styles/tailwind.css" rel="stylesheet"/>
<link href="/assets/styles/index.css" rel="stylesheet"/>
<link href="/assets/img/favicon/favicon-16x16.png" rel="icon" type="image/x-icon"/>
<link href="/assets/img/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32"/>
<link href="/assets/img/favicon/apple-touch-icon.png" rel="apple-touch-icon"/>
<script src="/_vercel/insights/script.js">''</script>
<link rel="me" href="https://social.lol/@cory"/>
</head>
<body class="dark:text-white dark:bg-gray-900 font-sans text-gray-800">
<div class="min-h-screen flex flex-col">
<main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
<div class="flex flex-col md:flex-row md:items-center md:justify-between md:pt-10 pt-5">
<h1 class="font-black leading-tight md:pb-0 md:text-3xl pb-5 text-2xl">Follow • Cory Dransfeldt</h1>
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="inline w-6 h-6 outline-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
</svg>
</a>
</div>
<div class="pt-8 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
<div class="dark:text-white text-gray-800">
<h2
class="font-black leading-tight m-0 md:text-2xl text-xl tracking-normal mb-4 flex flex-row items-center text-gray-800 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-10 h-10 mr-1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
</svg>
Feed preview • follow
</h2>
<p>My activity from around the web.</p>
<p>
<xsl:value-of select="atom:feed/atom:description"/>
</p>
</div>
<ul class="mb-8">
<xsl:apply-templates select="atom:feed/atom:entry"/>
</ul>
</div>
<footer class="prose pb-8 mt-4 text-gray-800 dark:text-white border-t border-gray-200 dark:border-gray-700 max-w-full">
<div>
<p class="mb-0">
<strong class="text-gray-800 dark:text-gray-200">This is a web feed,</strong>
also known as an RSS or Atom feed.
</p>
<p class="mt-0">
<strong class="text-gray-800 dark:text-gray-200">Subscribe</strong>
by copying the URL from the address bar into your newsreader.
</p>
</div>
<small>Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and
subscribing. It's free.
</small>
</footer>
</main>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="atom:feed/atom:entry">
<li>
<a
class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>
<xsl:value-of select="atom:title"/>
</a>
•
<xsl:value-of select="atom:updated"/>
</li>
</xsl:template>
</xsl:stylesheet>

8
src/assets/feeds/links.md Normal file
View file

@ -0,0 +1,8 @@
---
layout: feed
title: Links • Cory Dransfeldt
icon: link
heading: Feed preview • links
description: A feed of links I've liked.
permalink: /assets/feeds/links.xsl
---

89
src/assets/feeds/links.xsl
View file

@ -1,89 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet
version="3.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom">
<xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>
<xsl:value-of select="atom:feed/atom:title"/>
</title>
<link href="/assets/styles/tailwind.css" rel="stylesheet"/>
<link href="/assets/styles/index.css" rel="stylesheet"/>
<link href="/assets/img/favicon/favicon-16x16.png" rel="icon" type="image/x-icon"/>
<link href="/assets/img/favicon/favicon-32x32.png" rel="icon" type="image/png" sizes="32x32"/>
<link href="/assets/img/favicon/apple-touch-icon.png" rel="apple-touch-icon"/>
<link rel="me" href="https://social.lol/@cory"/>
</head>
<body class="dark:text-white dark:bg-gray-900 font-sans text-gray-800">
<div class="min-h-screen flex flex-col">
<main class="flex-1 w-10/12 max-w-screen-sm md:max-w-screen-md mx-auto">
<div class="flex flex-col md:flex-row md:items-center md:justify-between md:pt-10 pt-5">
<h1 class="font-black leading-tight md:pb-0 md:text-3xl pb-5 text-2xl">Links • Cory Dransfeldt</h1>
<a href="/">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor"
class="inline w-6 h-6 outline-current text-gray-700 hover:text-purple-500 dark:text-gray-200 dark:hover:text-purple-400">
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25"/>
</svg>
</a>
</div>
<div class="pt-8 prose dark:prose-invert hover:prose-a:text-blue-500 max-w-full">
<div class="dark:text-white text-gray-800">
<h2
class="font-black leading-tight m-0 md:text-2xl text-xl tracking-normal mb-4 flex flex-row items-center text-gray-800 dark:text-gray-200">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
stroke="currentColor" class="w-10 h-10 mr-1">
<path stroke-linecap="round" stroke-linejoin="round"
d="M12.75 19.5v-.75a7.5 7.5 0 00-7.5-7.5H4.5m0-6.75h.75c7.87 0 14.25 6.38 14.25 14.25v.75M6 18.75a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"/>
</svg>
Feed preview • links
</h2>
<p>A feed of links I've liked.</p>
<p>
<xsl:value-of select="atom:feed/atom:description"/>
</p>
</div>
<ul class="mb-8">
<xsl:apply-templates select="atom:feed/atom:entry"/>
</ul>
</div>
<footer class="prose pb-8 mt-4 text-gray-800 dark:text-white border-t border-gray-200 dark:border-gray-700 max-w-full">
<div>
<p class="mb-0">
<strong class="text-gray-800 dark:text-gray-200">This is a web feed,</strong>
also known as an RSS or Atom feed.
</p>
<p class="mt-0">
<strong class="text-gray-800 dark:text-gray-200">Subscribe</strong>
by copying the URL from the address bar into your newsreader.
</p>
</div>
<small>Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and
subscribing. It's free.
</small>
</footer>
</main>
</div>
</body>
</html>
</xsl:template>
<xsl:template match="atom:feed/atom:entry">
<li>
<a
class="no-underline text-gray-800 hover:text-purple-400 dark:text-gray-200 dark:hover:text-purple-400 leading-tight m-0 cursor-pointer">
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>
<xsl:value-of select="atom:title"/>
</a>
•
<xsl:value-of select="atom:updated"/>
</li>
</xsl:template>
</xsl:stylesheet>

20
src/now.html
View file

@ -17,33 +17,33 @@ meta:
image:
src: https://coryd.dev/assets/img/avatar.webp
---
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "clock-heart" "Currently" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "clock-heart" "Currently" %}
<div class="ml-1">Currently</div>
</h2>
<div class="pl-4 md:pl-8">
{% render "partials/now/status.liquid", status:status %}
<p class="my-2 flex flex-row items-start md:items-center">
<span class="pt-1 md:pt-0 mr-1">{% tablericon "map-2" "Map" "width=22 height=22" %}</span>
<span class="pt-1 md:pt-0 mr-1 icon--h-20">{% tablericon "map-2" "Map" %}</span>
<span>Living in Camarillo, California with my beautiful family, 4 rescue dogs and a guinea pig.</span>
</p>
<p class="my-2 flex flex-row items-start md:items-center">
<span class="pt-1 md:pt-0 mr-1">
{% tablericon "play-basketball" "Hacking" "width=20 height=20" %}
<span class="pt-1 md:pt-0 mr-1 icon--h-20">
{% tablericon "play-basketball" "Hacking" %}
</span>
<span>
Rooting for the <a href="https://lakers.com">Lakers</a> (can't wait for next season with the new roster 💜💛).
</span>
</p>
</div>
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "terminal-2" "Making" "height=28" %}
<h2 class="icon--bold m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "terminal-2" "Making" %}
<div class="ml-1">Making</div>
</h2>
<div class="pl-4 md:pl-8">
<p class="my-2 flex flex-row items-start md:items-center">
<span class="pt-1 md:pt-0 mr-1">
{% tablericon "code" "Hacking" "width=20 height=20" %}
<span class="pt-1 md:pt-0 mr-1 icon--h-20">
{% tablericon "code" "Hacking" %}
</span>
<span>
Hacking away on projects like this page, my
@ -51,7 +51,7 @@ meta:
</span>
</p>
<p class="my-2 flex flex-row items-start md:items-center">
<span class="pt-1 md:pt-0 mr-1">{% tablericon "hand-stop" "Ad and tracker-blocking" "width=20 height=20" %}</span>
<span class="pt-1 md:pt-0 mr-1 icon--h-20">{% tablericon "hand-stop" "Ad and tracker-blocking" %}</span>
<a href="https://github.com/cdransf/awesome-adblock">Assembling lists of ad and tracker-blocking tools.</a>
</p>
</div>

10
src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md
View file

@ -152,8 +152,8 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
```liquid
{% if recentTracks.size > 0 %}
<h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "microphone" "Artists" "height=28" %}
<h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "microphone" "Artists" %}
<div class="ml-1">Artists</div>
</h2>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
@ -176,8 +176,8 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
</div>
{% endif %}
{% if recentTracks.size > 0 %}
<h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "musical-note" "Albums" "height=28" %}
<h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "musical-note" "Albums" %}
<div class="ml-1">Albums</div>
</h2>
<div class="grid grid-cols-2 gap-2 md:grid-cols-4 not-prose">
@ -204,7 +204,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a
We have an object containing arrays of objects — we iterate through each object for the appropriate section (tracks aren't displayed at the moment) and build the resulting display[^3]. This isn't perfect by any means, but, it does provide a nice little visualization of what I'm listening to and `240` tracks feels adequate as a rolling window into that activity.
{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'w-full', '600px' %}
{% image '<https://cdn.coryd.dev/blog/albums-artists.jpg>', 'Albums and artists', 'w-full', '600px' %}
[^1]: There are some good options to do this, but there aren't a _ton_ and the age of some of the apps is concerning. [Marvis](https://appaddy.wixsite.com/marvis) is far and away your best choice here.
[^2]: Making sure that you update the values you obtained, including the path to your downloaded `.p8` file.

6
src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md
View file

@ -46,8 +46,8 @@ Rendering the output is as simple as:
```liquid
{% if albumReleases.size > 0 %}
<h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "calendar" "Albums I'm looking forward to" "height=28" %}
<h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "calendar" "Albums I'm looking forward to" %}
<div class="ml-1">Albums I'm looking forward to</div>
</h2>
<ul class="list-inside list-disc pl-5 md:pl-10">
@ -65,6 +65,6 @@ Rendering the output is as simple as:
{% endraw %}
Leaving us with:
{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'w-full', '600px' %}
{% image '<https://cdn.coryd.dev/blog/album-releases.jpg>', 'Albums I\'m looking forward to', 'w-full', '600px' %}
[^1]: At this point, a dev playground.

4
src/posts/2023/popular-posts-widget-using-eleventy-plausible.md
View file

@ -52,8 +52,8 @@ And rendered using a liquid template:
```liquid
{% assign posts = posts | getPopularPosts: analytics %}
<div class="not-prose">
<h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4">
{% tablericon "fire" "Popular" "height=28" %}
<h2 class="m-0 text-xl flex flex-row items-center font-black leading-tight tracking-normal dark:text-gray-200 md:text-2xl mt-8 mb-4 icon--h-28">
{% tablericon "fire" "Popular" %}
<div class="ml-1">Popular posts</div>
</h2>
<ul class="list-inside list-disc pl-5 md:pl-10">