Compare commits
13 Commits
b4c2a76949
...
7095d8850b
| Author | SHA1 | Date | |
|---|---|---|---|
| 7095d8850b | |||
| 0284950ba5 | |||
| 7754b310c3 | |||
| 4add841e55 | |||
| 3ff627cdc8 | |||
| b7e997515e | |||
| 75aa8e4a33 | |||
| fb06d54ea5 | |||
| cb33208e54 | |||
| 6328a531a7 | |||
| 1ba8841d32 | |||
| bc18e89d8d | |||
| f8610fe915 |
2
LICENSE
2
LICENSE
@ -1,6 +1,6 @@
|
||||
GPL3 License
|
||||
|
||||
Copyright (c) 2023 Nathan Upchurch
|
||||
Copyright (c) 2023-2024 Nathan Upchurch
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@ -20,6 +20,7 @@ My blog, originally based on the very helpful eleventy-base-blog v8, although it
|
||||
* All blog posts
|
||||
* Each individual tag
|
||||
* /now page that nicely handles posts tagged with "now"
|
||||
* Blogroll generated from _data/blogroll.js, with an automatically updated .opml so that visitors can import every blog in the list
|
||||
|
||||
### Technical
|
||||
* Reusable web components:
|
||||
@ -34,4 +35,4 @@ My blog, originally based on the very helpful eleventy-base-blog v8, although it
|
||||
* robots.txt tells AI scrapers to GTFO
|
||||
|
||||
### Weird and Wonderful
|
||||
* [Accessible cowsay output embedding](https://upchur.ch/gitea/n_u/nathanupchurch.com/wiki#add-a-cowsay-to-a-post)
|
||||
* [Accessible ~~cowsay~~ cowthink output embedding](https://upchur.ch/gitea/n_u/nathanupchurch.com/wiki#add-a-cowsay-to-a-post)
|
||||
|
||||
450
_data/blogroll.js
Normal file
450
_data/blogroll.js
Normal file
@ -0,0 +1,450 @@
|
||||
export default {
|
||||
categories: [
|
||||
{
|
||||
name: "Comics",
|
||||
blogs: [
|
||||
{
|
||||
title: "Incidental Comics",
|
||||
feedUrl:
|
||||
"http://www.incidentalcomics.com/feeds/posts/default?alt=rss",
|
||||
url: "http://www.incidentalcomics.com",
|
||||
description: "Nice comics about words, et cetera.",
|
||||
},
|
||||
{
|
||||
title: "XKCD",
|
||||
feedUrl: "https://xkcd.com/rss.xml",
|
||||
url: "https://xkcd.com",
|
||||
description: "Does XKCD needs an introduction?",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Design",
|
||||
blogs: [
|
||||
{
|
||||
title: "Libre Arts",
|
||||
feedUrl: "https://librearts.org/index.xml",
|
||||
url: "https://librearts.org",
|
||||
description: "News on FLOSS creative software.",
|
||||
},
|
||||
{
|
||||
title: "Autumn Kotsiuba",
|
||||
feedUrl: "https://autumnkotsiuba.wixsite.com/portfolio/blog-feed.xml",
|
||||
url: "https://autumnkotsiuba.wixsite.com",
|
||||
description: "Autumn blogs about UX content design.",
|
||||
},
|
||||
{
|
||||
title: "Dave Smyth",
|
||||
feedUrl: "https://davesmyth.com/commonplace-feed",
|
||||
url: "https://davesmyth.com",
|
||||
description:
|
||||
"Dave Smyth is a designer and developer interested in privacy, type and ethics.",
|
||||
},
|
||||
{
|
||||
title: "Grumpy Website",
|
||||
feedUrl: "https://grumpy.website/feed.xml",
|
||||
url: "https://grumpy.website",
|
||||
description: "Grumpy takes on UI mistakes.",
|
||||
},
|
||||
{
|
||||
title: "TypeOff.",
|
||||
feedUrl: "https://www.typeoff.de/rss",
|
||||
url: "https://www.typeoff.de",
|
||||
description:
|
||||
"A blog from Dan Reynolds, a design researcher based in Wuppertal, Germany.",
|
||||
},
|
||||
{
|
||||
title: "UX Daily",
|
||||
feedUrl: "https://www.interaction-design.org/rss/site_news.xml",
|
||||
url: "https://www.interaction-design.org",
|
||||
description: "The World’s Largest Free Online Resource on UX Design ",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Food & Beverage",
|
||||
blogs: [
|
||||
{
|
||||
title: "Cocktail Doodle",
|
||||
feedUrl: "https://cocktaildoodle.substack.com/feed",
|
||||
url: "https://cocktaildoodle.substack.com",
|
||||
description:
|
||||
"A charming (but perhaps abandoned) blog from cocktail expert Luke Andrews.",
|
||||
},
|
||||
{
|
||||
title: "Sarah's Vegan Kitchen",
|
||||
feedUrl: "https://sarahsvegankitchen.com/feed/",
|
||||
url: "https://sarahsvegankitchen.com",
|
||||
description:
|
||||
"Sarah has years of recipes including complex staples like vegan cultured butter.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "General Interest",
|
||||
blogs: [
|
||||
{
|
||||
title: "Big Think",
|
||||
feedUrl: "https://bigthink.com/feed",
|
||||
url: "https://bigthink.com",
|
||||
description: "Big thoughts on big issues.",
|
||||
},
|
||||
{
|
||||
title: "Clients from Hell",
|
||||
feedUrl: "https://notalwaysright.com/tag/clients-from-hell/feed",
|
||||
url: "https://notalwaysright.com/tag/clients-from-hell",
|
||||
description:
|
||||
"Cathartic stories about clients behaving badly from notalwaysright.com.",
|
||||
},
|
||||
{
|
||||
title: "kottke.org",
|
||||
feedUrl: "https://feeds.kottke.org/main",
|
||||
url: "https://kottke.org",
|
||||
description: "Home of fine hypertext products since 1998.",
|
||||
},
|
||||
{
|
||||
title: "Neatorama",
|
||||
feedUrl: "https://www.neatorama.com/feed",
|
||||
url: "https://www.neatorama.com/",
|
||||
description: "Yep, Neatorama's still around!",
|
||||
},
|
||||
{
|
||||
title: "The Reframe",
|
||||
feedUrl: "https://www.the-reframe.com/rss/",
|
||||
url: "https://www.the-reframe.com/",
|
||||
description:
|
||||
"Essays on politics and narrative fiction from A.R. Moxon.",
|
||||
},
|
||||
{
|
||||
title: "Webcurios",
|
||||
feedUrl: "https://webcurios.co.uk/feed",
|
||||
url: "https://webcurios.co.uk",
|
||||
description:
|
||||
"A regular(-ish) newsletterblogtypething all about stuff on the internet that its author finds interesting and thinks you might too.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Health",
|
||||
blogs: [
|
||||
{
|
||||
title: "ADDitude",
|
||||
feedUrl: "https://www.additudemag.com/feed/",
|
||||
url: "https://www.additudemag.com/",
|
||||
description:
|
||||
"The world’s most trusted resource for families and adults living with ADHD and related conditions, and for the professionals who work with them.",
|
||||
},
|
||||
{
|
||||
title: "The Gauntlet",
|
||||
feedUrl: "https://www.thegauntlet.news/feed",
|
||||
url: "https://www.thegauntlet.news",
|
||||
description:
|
||||
"A newsletter covering the current science on, and commentary related to, the unmitigated spread of COVID.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Incense, Fragrance, and Perfumery",
|
||||
blogs: [
|
||||
{
|
||||
title: "Apothecary's Garden Blog",
|
||||
feedUrl: "https://apothecarysgarden.com/blogs/blog.atom",
|
||||
url: "https://apothecarysgarden.com/blogs/blog",
|
||||
description:
|
||||
"Explore the world of natural aromatics, and the communities that bring them to us",
|
||||
},
|
||||
{
|
||||
title: "Ayala Moriel Parfums - SmellyBlog",
|
||||
feedUrl: "https://ayalamoriel.com/blogs/smellyblog.atom",
|
||||
url: "https://ayalamoriel.com/blogs/smellyblog",
|
||||
description:
|
||||
"Ayala Moriel Parfums is an independent artisan perfume house dedicated to the art of natural perfumery.",
|
||||
},
|
||||
{
|
||||
title: "A whiff of Ambrosia",
|
||||
feedUrl: "https://whiffofambrosia.wordpress.com/feed/",
|
||||
url: "https://whiffofambrosia.wordpress.com/",
|
||||
description: "Incense reviews and more. (Abandoned?)",
|
||||
},
|
||||
{
|
||||
title: "Dr. Incense",
|
||||
feedUrl: "https://dr-incense.com/blogs/dr-incense-blog.atom",
|
||||
url: "https://dr-incense.com/blogs/dr-incense-blog",
|
||||
description:
|
||||
"Traditional incense maker and founder of the Incense Culture Association of Singapore, and Nanyang Culture Academy.",
|
||||
},
|
||||
{
|
||||
title: "Glass Petal Smoke",
|
||||
feedUrl: "https://glasspetalsmoke.blogspot.com/feeds/posts/default",
|
||||
url: "https://glasspetalsmoke.blogspot.com/",
|
||||
description:
|
||||
"Decoder of flavors and fragrances. Creator of Smell & Tell programming.",
|
||||
},
|
||||
{
|
||||
title: "Incense In The Dark",
|
||||
feedUrl: "https://incenseinthewind.blogspot.com/feeds/posts/default",
|
||||
url: "https://incenseinthewind.blogspot.com/",
|
||||
description: "Incense reviews, rankings, and information.",
|
||||
},
|
||||
{
|
||||
title: "Kikoh Incense",
|
||||
feedUrl: "https://kikohincense.com/blogs/news.atom",
|
||||
url: "https://kikohincense.com/blogs/news",
|
||||
description:
|
||||
"Detailed descriptions of incense listening sessions from the Kikoh Incense web store.",
|
||||
},
|
||||
{
|
||||
title: "KyaraZen",
|
||||
feedUrl: "https://www.kyarazen.com/feed/",
|
||||
url: "https://www.kyarazen.com/",
|
||||
description:
|
||||
"Very informative (but perhaps abandoned) blog from world-renowned incense maker KyaraZen.",
|
||||
},
|
||||
{
|
||||
title: "Olfactory Rescue Service",
|
||||
feedUrl: "https://olfactoryrescueservice.wordpress.com/feed",
|
||||
url: "https://olfactoryrescueservice.wordpress.com",
|
||||
description:
|
||||
"The ultimate retail incense resource providing incense writing and reviews.",
|
||||
},
|
||||
{
|
||||
title: "Ratnagandh",
|
||||
feedUrl: "https://ratnagandh.wordpress.com/feed/",
|
||||
url: "https://ratnagandh.wordpress.com/",
|
||||
description: "Short incense reviews.",
|
||||
},
|
||||
{
|
||||
title: "Rauchfahne",
|
||||
feedUrl: "https://blog.rauchfahne.de/en/feed/",
|
||||
url: "https://blog.rauchfahne.de/en/",
|
||||
description:
|
||||
"Incense reviews and writing in German and English from incense maker, enthusiast, and industry insider Irene.",
|
||||
},
|
||||
{
|
||||
title: "Reed's Handmade Incense Blog",
|
||||
feedUrl: "https://reedshandmadeincense.com/blog/feed/",
|
||||
url: "https://reedshandmadeincense.com/blog/",
|
||||
description:
|
||||
"Writing on incense, tea, and other topics from the Reed's Handmade Incense web store.",
|
||||
},
|
||||
{
|
||||
title: "The Parfum Apothecary - Learning & Culture",
|
||||
feedUrl:
|
||||
"https://www.theparfumapothecary.com/blogs/learning-culture.atom",
|
||||
url: "https://www.theparfumapothecary.com/blogs/learning-culture",
|
||||
description: "Writing on perfume and its history. (Abandoned?)",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "News",
|
||||
blogs: [
|
||||
{
|
||||
title: "openDemocracy",
|
||||
feedUrl: "https://www.opendemocracy.net/en/feed",
|
||||
url: "https://www.opendemocracy.net/",
|
||||
description:
|
||||
"High-quality journalism which challenges power, inspires change and builds leadership among groups underrepresented in the media.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Personal Blogs",
|
||||
blogs: [
|
||||
{
|
||||
title: "Andy Bell",
|
||||
feedUrl: "https://andy-bell.co.uk/feed.xml",
|
||||
url: "https://andy-bell.co.uk",
|
||||
description:
|
||||
"Designer, front-end developer and the founder of Set Studio and Piccalilli.",
|
||||
},
|
||||
{
|
||||
title: "Darek Kay",
|
||||
feedUrl: "https://darekkay.com/atom.xml",
|
||||
url: "https://darekkay.com",
|
||||
description:
|
||||
"Front-end developer and an accessibility advocate, currently working at IBM.",
|
||||
},
|
||||
{
|
||||
title: "Ellie Kennard",
|
||||
feedUrl: "https://www.elliekennard.ca/feed",
|
||||
url: "https://www.elliekennard.ca",
|
||||
description: "Photography and thoughts in story form.",
|
||||
},
|
||||
{
|
||||
title: "Garbage Collector",
|
||||
feedUrl: "https://blog.zedas.fr/index.xml",
|
||||
url: "https://zedas.fr/",
|
||||
description:
|
||||
"The little space of a writer, tinkerer, and a coffee addict.",
|
||||
},
|
||||
{
|
||||
title: "Later On",
|
||||
feedUrl: "https://leisureguy.ca/rss",
|
||||
url: "https://leisureguy.ca",
|
||||
description:
|
||||
"Writing on wet shaving, politics, whole food plant based diets, and more.",
|
||||
},
|
||||
{
|
||||
title: "Luke Andrews",
|
||||
feedUrl: "https://world.hey.com/lukeandrews/feed.atom",
|
||||
url: "https://world.hey.com/lukeandrews",
|
||||
description: "A sparse (abandoned?) blog from Luke Andrews.",
|
||||
},
|
||||
{
|
||||
title: "MediaActivist",
|
||||
feedUrl: "https://www.mediaactivist.com/rss/",
|
||||
url: "https://www.mediaactivist.com/",
|
||||
description:
|
||||
"The website of Jay Baker (they/he), a long-time guerrilla journalist and documentarian.",
|
||||
},
|
||||
{
|
||||
title: "Ploum.net",
|
||||
feedUrl: "https://ploum.net/atom_en.xml",
|
||||
url: "https://ploum.net/index_en.html",
|
||||
description:
|
||||
"Writing on tech and free / libre and open source philosophy.",
|
||||
},
|
||||
{
|
||||
title: "Rosnovsky Park",
|
||||
feedUrl: "https://rosnovsky.us/feed/feed.xml",
|
||||
url: "https://rosnovsky.us/",
|
||||
description:
|
||||
"Writing on web development, hiking, and random hobbies from the venerable benefactor, founder, and admin of the lounge.town Mastodon instance.",
|
||||
},
|
||||
{
|
||||
title: "Simone",
|
||||
feedUrl: "https://simone.org/rss",
|
||||
url: "https://simone.org/",
|
||||
description:
|
||||
"Explore modern life via thought-provoking essays, pictures, and conversations.",
|
||||
},
|
||||
{
|
||||
title: "Steven Kennard : Turned Art, Sculpture and Photography",
|
||||
feedUrl: "https://stevenkennard.com/blog/rss",
|
||||
url: "https://stevenkennard.com/blog",
|
||||
description:
|
||||
"Steven Kennard is a woodturner, sculptor and photographer living and working in Nova Scotia, Canada.",
|
||||
},
|
||||
{
|
||||
title: "Stories by Ellen Feinberg",
|
||||
feedUrl: "https://ellensusie59.medium.com/feed",
|
||||
url: "https://ellensusie59.medium.com",
|
||||
description: "Uptown Chicago gal. Irreverent/Irrelevant/Sarcastic.",
|
||||
},
|
||||
{
|
||||
title: "Thefoggiest.dev",
|
||||
feedUrl: "https://thefoggiest.dev/feed",
|
||||
url: "https://thefoggiest.dev",
|
||||
description: "The personal blog of Diederick de Vries of Amsterdam.",
|
||||
},
|
||||
{
|
||||
title: "TorrentFreak",
|
||||
feedUrl: "http://torrentfreak.com/feed",
|
||||
url: "http://torrentfreak.com/",
|
||||
description: "Breaking File-sharing, Copyright and Privacy News.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Tech",
|
||||
blogs: [
|
||||
{
|
||||
title: "9to5Linux",
|
||||
feedUrl: "https://9to5linux.com/rss",
|
||||
url: "https://9to5linux.com/",
|
||||
description: "Linux news, reviews, tutorials, and more",
|
||||
},
|
||||
{
|
||||
title: "It's FOSS",
|
||||
feedUrl: "https://itsfoss.com/feed/",
|
||||
url: "https://itsfoss.com/",
|
||||
description: "Making You a Better Linux User.",
|
||||
},
|
||||
{
|
||||
title: "LinuxInsider",
|
||||
feedUrl: "https://www.linuxinsider.com?rss=1",
|
||||
url: "https://www.linuxinsider.com",
|
||||
description: "Linux News & Information From Around the World.",
|
||||
},
|
||||
{
|
||||
title: "LOW←TECH MAGAZINE",
|
||||
feedUrl: "https://solar.lowtechmagazine.com/posts/index.xml",
|
||||
url: "https://solar.lowtechmagazine.com/posts/",
|
||||
description:
|
||||
"This is a solar-powered website, which means it sometimes goes offline.",
|
||||
},
|
||||
{
|
||||
title: "Planet KDE",
|
||||
feedUrl: "https://planet.kde.org/global/atom.xml",
|
||||
url: "https://planet.kde.org/",
|
||||
description:
|
||||
"A feed aggregator that collects what the contributors to the KDE community are writing on their respective blogs.",
|
||||
},
|
||||
{
|
||||
title: "Pluralistic",
|
||||
feedUrl: "https://pluralistic.net/feed/",
|
||||
url: "https://pluralistic.net/",
|
||||
description: "Daily links from Cory Doctorow",
|
||||
},
|
||||
{
|
||||
title: "Werd I/O",
|
||||
feedUrl: "https://werd.io/feed",
|
||||
url: "https://werd.io",
|
||||
description:
|
||||
"Writing at the intersection of technology, democracy, and society by Ben Werdmuller.",
|
||||
},
|
||||
{
|
||||
title: "We Distribute",
|
||||
feedUrl: "https://wedistribute.org/rss",
|
||||
url: "https://wedistribute.org",
|
||||
description: "Connecting threads across the Web.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Veganism",
|
||||
blogs: [
|
||||
{
|
||||
title: "Vegan Horizon",
|
||||
feedUrl: "https://veganhorizon.substack.com/feed",
|
||||
url: "https://veganhorizon.substack.com",
|
||||
description:
|
||||
"The vegan newsletter you've been waiting for! Brave, disruptive, to the point.",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
name: "Web Development",
|
||||
blogs: [
|
||||
{
|
||||
title: "CSS Tricks",
|
||||
feedUrl: "https://css-tricks.com/feed",
|
||||
url: "https://css-tricks.com",
|
||||
description:
|
||||
"Tips, Tricks, and Techniques on using Cascading Style Sheets.",
|
||||
},
|
||||
{
|
||||
title: "Chris Coyier",
|
||||
feedUrl: "https://chriscoyier.net/feed/",
|
||||
url: "https://chriscoyier.net",
|
||||
description: "Web craftsman, blogger, author, speaker.",
|
||||
},
|
||||
{
|
||||
title: "Jim Nielsen’s Blog",
|
||||
feedUrl: "https://blog.jim-nielsen.com/feed.xml",
|
||||
url: "https://blog.jim-nielsen.com",
|
||||
description:
|
||||
"20+ years at the intersection of design & code on the web.",
|
||||
},
|
||||
{
|
||||
title: "Own Your Web",
|
||||
feedUrl: "https://buttondown.email/ownyourweb/rss",
|
||||
url: "https://buttondown.com/ownyourweb",
|
||||
description:
|
||||
"A newsletter by Matthias Ott about designing, building, creating, and publishing for and on the Web.",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
@ -9,5 +9,7 @@
|
||||
{% if webring.nextURL %}<a href="{{ webring.nextURL }}">→</a>{% endif %}
|
||||
</span>
|
||||
{% endfor %}
|
||||
{% endif %}</p>
|
||||
{% endif %}
|
||||
<a href="/sitemap/">Sitemap</a>
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
21
_includes/layouts/base_full_width_text.njk
Normal file
21
_includes/layouts/base_full_width_text.njk
Normal file
@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="{{ metadata.language }}">
|
||||
<head>
|
||||
{% include "metadata.njk" %}
|
||||
{#- Bundle CSS #}
|
||||
{%- css %}{% include "public/css/index.css" %}{% endcss %}
|
||||
{%- css %}{% include "public/css/webfonts/webfonts.css" %}{% endcss %}
|
||||
<style>{% getBundle "css" %}</style>
|
||||
{% include "structuredData.njk" %}
|
||||
{% include "umami.html" %}
|
||||
</head>
|
||||
<body>
|
||||
{% include "header.njk" %}
|
||||
<main id="skip">
|
||||
<section class="full-width-text">
|
||||
{{ content | safe }}
|
||||
</section>
|
||||
</main>
|
||||
{% include "footer.njk" %}
|
||||
</body>
|
||||
</html>
|
||||
11
content/about/colophon/index.md
Normal file
11
content/about/colophon/index.md
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
layout: layouts/base_full_width_text.njk
|
||||
---
|
||||
|
||||
# Colophon
|
||||
|
||||
I built this website using [the 11ty static site generator](https://www.11ty.dev/), free and open source variable typefaces [Fraunces](https://fraunces.undercase.xyz/)[^1] and [Manrope](https://www.gent.media/manrope)[^2], and plain-old HTML, CSS, with some vanilla JavaScript for the web components that I built to handle comments. I used the handy calculators on [utopia.fyi](https://utopia.fyi)[^3] to help me implement fluid typography and spacing. [Here's the repo](https://upchur.ch/gitea/n_u/nathanupchurch.com) in case you'd like to have a look at the source.
|
||||
|
||||
[^1]: Designed by Phaedra Charles and Flavia Zimbardi, with contributions by Ethan Cohen, and Andy Clymer.
|
||||
[^2]: Designed by Mikhail Sharanda with thanks to Mirko Velimirovic for contribution.
|
||||
[^3]: Created by James Gilyead & Trys Mudford.
|
||||
@ -5,18 +5,19 @@ eleventyNavigation:
|
||||
order: 3
|
||||
---
|
||||
<article>
|
||||
<h1>About me and this website I’ve built.</h1>
|
||||
<p>I’m a prolific vegan home cook, classical trombonist, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, speaker of subpar elementary Spanish, incense maker and appreciator, writer, electronics hobbyist, designer, programmer, music producer, print lover, and human with too many interests and too little time.</p>
|
||||
<h1>About me and my website.</h1>
|
||||
<p class="page-block nodropcap">I’m a prolific vegan home cook, classical trombonist, incense maker, a <abbr title="Free/Libre Open Source Software">FLOSS</abbr> enthusiast, daily GNU/Linux user and unabashed <a href="https://kde.org/">KDE</a> stan, designer, programmer, music producer, print lover, and human with too many interests and too little time. This is my little corner of the internet where I talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself and have fun writing about topics I enjoy. If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here when I get around to it.</p>
|
||||
|
||||
<p>This is my personal website and blog, a little corner of the internet where I can talk about whatever I like without worrying about maintaining a ‘personal brand’, or constraining subject matter to those topics which might help advance my career or establish me as a ‘thought leader’. I’m here to express myself as a human and have fun writing about topics I enjoy. If you’d like to learn more about my professional accomplishments and work, I’ll link my professional website here soon.</p>
|
||||
<a href="./colophon/">
|
||||
<button type="button">Colophon »</button>
|
||||
</a>
|
||||
|
||||
<h2>About this website</h2>
|
||||
<p>This website is made with <a href="https://www.11ty.dev/">the 11ty static site generator</a>, free and open source variable typefaces <a href="https://fraunces.undercase.xyz/">Fraunces</a> and <a href="https://www.gent.media/manrope">Manrope</a>, along with plain-old HTML, CSS, and some vanilla JavaScript for the web components that I built to handle comments. I used the handy calculators on <a href="https://utopia.fyi">utopia.fyi</a> to help me implement fluid typography and spacing.</p>
|
||||
<a href="../me/">
|
||||
<button type="button">Contact »</button>
|
||||
</a>
|
||||
|
||||
<p>I don’t collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to <a href="https://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html">track people across the internet</a> otherwise). I use <a href="https://umami.is/">umami</a>, an open source, privacy-respecting analytics tool, to see how many people visit this website.</p>
|
||||
<a href="./privacy/">
|
||||
<button type="button">Privacy »</button>
|
||||
</a>
|
||||
|
||||
<p>Miss when the internet was fun? Find more interesting personal blogs at <a href="https://blogroll.org">blogroll.org</a>, <a href="https://ooh.directory/">ooh.directory</a>, or surf through the webrings at the bottom of the page.</p>
|
||||
|
||||
<h2>Contact Me</h2>
|
||||
<p>If you would like to say something nice, ask a question, or simply follow me on the fediverse, <a href="../me">here’s where you can find me</a>.</p>
|
||||
</article>
|
||||
|
||||
7
content/about/privacy/index.md
Normal file
7
content/about/privacy/index.md
Normal file
@ -0,0 +1,7 @@
|
||||
---
|
||||
layout: layouts/base_full_width_text.njk
|
||||
---
|
||||
|
||||
# Privacy
|
||||
|
||||
I don’t collect any of your personal information, full-stop. All webfonts, icons, and images are hosted locally (these things can sometimes be used to [track people across the internet](ttps://www.firstpost.com/world/how-google-uses-fonts-to-track-what-users-do-online-and-sell-data-to-advertisers-12496552.html) otherwise). I use [umami](https://umami.is), an open source, privacy-respecting analytics tool, to see how many people visit this website.
|
||||
@ -7,7 +7,14 @@ eleventyNavigation:
|
||||
<h1>Nathan’s Blog.</h1>
|
||||
|
||||
<p class="page-block nodropcap">
|
||||
Thank you for visiting my blog; I write about lots of things here, from <a href="/tags/storytime">personal stories</a>, to <a href="/tags/gnu-linux">tech</a>, <a href="/tags/vegan-cooking">food</a>, and <a href="/tags/incense">incense</a>. Explore all posts below or <a href="/tags/">choose a topic</a>.
|
||||
Thank you for visiting my blog; I write about lots of things here, from <a href="/tags/storytime">personal stories</a>, to <a href="/tags/gnu-linux">tech</a>, <a href="/tags/vegan-cooking">food</a>, and <a href="/tags/incense">incense</a>. Explore all posts below or <a href="/tags/">choose a topic</a>. Want to know what I've been reading? <a href="../blogroll/">Exlore the blogroll</a>.<br />
|
||||
|
||||
<a href="/tags/">
|
||||
<button type="button">Topics »</button>
|
||||
</a>
|
||||
<a href="../blogroll/">
|
||||
<button type="button">Blogroll »</button>
|
||||
</a>
|
||||
</p>
|
||||
<h2>What’s New:</h2>
|
||||
{% set postslist = collections.posts %}
|
||||
|
||||
@ -4,6 +4,7 @@ description: "Knowing how to operate a PDF viewer does not a tech wizard make; w
|
||||
date: 2024-09-21
|
||||
tags:
|
||||
- Quick Thoughts
|
||||
- Rants
|
||||
synopsis: "Knowing how to operate a PDF viewer does not a tech wizard make; what it means to be good at your job."
|
||||
mastodon_id: "113178005978869507"
|
||||
---
|
||||
|
||||
22
content/blogroll/blogroll.njk
Normal file
22
content/blogroll/blogroll.njk
Normal file
@ -0,0 +1,22 @@
|
||||
---
|
||||
permalink: /blogroll/nathanUpchurchBlogroll.opml
|
||||
---
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<opml version="2.0">
|
||||
<head>
|
||||
<title>nathanUpchurchBlogroll.opml</title>
|
||||
<ownerName>Nathan Upchurch</ownerName>
|
||||
</head>
|
||||
<body>{% for category in blogroll.categories %}
|
||||
<outline id="{{ category.name }}" text="{{ category.name }}">{% for blog in category.blogs %}
|
||||
<outline
|
||||
text="{{ blog.title }}"
|
||||
description="{{ blog.description }}"
|
||||
htmlUrl="{{ blog.url }}"
|
||||
title="{{ blog.title }}"
|
||||
type="rss"
|
||||
version="RSS2"
|
||||
xmlUrl="{{ blog.feedUrl }}"/>{% endfor %}
|
||||
</outline>{% endfor %}
|
||||
</body>
|
||||
</opml>
|
||||
27
content/blogroll/index.njk
Normal file
27
content/blogroll/index.njk
Normal file
@ -0,0 +1,27 @@
|
||||
---
|
||||
layout: layouts/base.njk
|
||||
---
|
||||
<h1>Blogroll</h1>
|
||||
<p class="nodropcap page-block">Here are some of the blogs I subscribe to. You can click the RSS icon next to each to subscribe using <a href="../about-feeds/">your newsreader</a>, or import all of them at once by downloading and importing this convenient <a href="./nathanUpchurchBlogroll.opml" download>.opml file</a>.</p>
|
||||
{% for category in blogroll.categories %}
|
||||
<section class="blogroll">
|
||||
<h2>{{ category.name }}:</h2>
|
||||
{% for blog in category.blogs %}
|
||||
<div class="blogroll-category-group">
|
||||
<a href="{{ blog.url }}"><h3>{{ blog.title }}</h3></a>
|
||||
|
||||
<a href="{{ blog.feedUrl }}">
|
||||
<svg class="tag-feed-icon small" viewBox="0 0 155 155" width="153.349" height="152.909" version="1.0" xmlns="http://www.w3.org/2000/svg">
|
||||
<title>RSS feed for {{ blog.url }}</title>
|
||||
<g transform="translate(-427.323 -373.814)">
|
||||
<ellipse style="opacity: 1; fill-opacity: 1; fill-rule: nonzero" transform="matrix(.86996 0 0 .86996 135.156 330.529)" cx="360.357" cy="200.643" rx="24.643" ry="23.929"></ellipse>
|
||||
<path style="fill-opacity: 1; fill-rule: evenodd" d="m427.835 455.057-.073-30.273c64.706 3.375 100.619 49.673 101.5 101.94h-30.318c-.503-45.942-31.74-69.996-71.11-71.667z"></path>
|
||||
<path style="fill-opacity: 1; fill-rule: evenodd" d="m428.201 404.571-.878-30.757C526.75 378.43 580 450.582 580.67 526.724l-31.197-.44c1.365-48.704-34.665-120.267-121.273-121.713Z"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
<p>{{ blog.description }}</p>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</section>
|
||||
{% endfor %}
|
||||
@ -14,9 +14,9 @@ numberOfNowPostsToShow: 1
|
||||
{% set postslistCounter = postsCount %}
|
||||
{% set showPostListHeader = false %}
|
||||
{% include "postslist.njk" %}
|
||||
<a class="link-button" href="/now/">
|
||||
<a href="/now/">
|
||||
<button type="button">
|
||||
See more on the “now” page
|
||||
See more on the “now” page »
|
||||
</button>
|
||||
</a>
|
||||
</div>
|
||||
@ -30,9 +30,9 @@ numberOfNowPostsToShow: 1
|
||||
|
||||
{% set morePosts = postsCount - numberOfLatestPostsToShow %}
|
||||
{% if morePosts > 0 %}
|
||||
<a class="link-button" href="/blog/">
|
||||
<a href="/blog/">
|
||||
<button type="button">
|
||||
See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} in the blog
|
||||
See {{ morePosts }} more post{% if morePosts != 1 %}s{% endif %} in the blog »
|
||||
</button>
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
23
content/sitemap/index.njk
Normal file
23
content/sitemap/index.njk
Normal file
@ -0,0 +1,23 @@
|
||||
---
|
||||
layout: layouts/base_full_width_text.njk
|
||||
---
|
||||
|
||||
<section class="sitemap">
|
||||
<h1>Sitemap</h1>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li>
|
||||
<a href="/about">About</a>
|
||||
<ul>
|
||||
<li><a href="/about/colophon">Colophon</a></li>
|
||||
<li><a href="/me">Contact</a></li>
|
||||
<li><a href="/feed/feed.xml">Feed</a></li>
|
||||
<li><a href="/about/privacy">Privacy</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/blog">Blog</a></li>
|
||||
<li><a href="/blogroll">Blogroll</a></li>
|
||||
<li><a href="/now">Now</a></li>
|
||||
<li><a href="/tags">Tags</a></li>
|
||||
</ul>
|
||||
</section>
|
||||
24
netlify.toml
24
netlify.toml
@ -1,24 +0,0 @@
|
||||
[build]
|
||||
publish = "_site"
|
||||
command = "npm run build"
|
||||
|
||||
[[plugins]]
|
||||
|
||||
# Opt-in to the Netlify Lighthouse plugin (choose one):
|
||||
|
||||
# 1. Go to your site on https://app.netlify.com and navigate to the Integrations tab, search for the `Lighthouse` plugin
|
||||
# 2. Or via `npm install -D @netlify/plugin-lighthouse`
|
||||
|
||||
# Read more: https://github.com/netlify/netlify-plugin-lighthouse
|
||||
|
||||
package = "@netlify/plugin-lighthouse"
|
||||
|
||||
# optional, fails build when a category is below a threshold
|
||||
[plugins.inputs.thresholds]
|
||||
performance = 1.0
|
||||
accessibility = 1.0
|
||||
best-practices = 1.0
|
||||
seo = 1.0
|
||||
|
||||
[plugins.inputs]
|
||||
output_path = "reports/lighthouse/index.html"
|
||||
@ -101,6 +101,9 @@
|
||||
--grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
|
||||
--grid-columns: 12;
|
||||
|
||||
/* Span grid utility */
|
||||
--span-grid: 1 / span 12;
|
||||
|
||||
/* Change <img> SVG color with filter */
|
||||
--logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
|
||||
saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
|
||||
@ -187,6 +190,11 @@ blockquote:before {
|
||||
position: fixed;
|
||||
filter: opacity(0.15);
|
||||
}
|
||||
.blogroll {
|
||||
h2:first-of-type {
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
body {
|
||||
animation: var(--slide-in-blurred-bottom);
|
||||
font-size: var(--step-0);
|
||||
@ -223,24 +231,38 @@ nav {
|
||||
}
|
||||
.now {
|
||||
display: grid;
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
padding-bottom: var(--space-xl);
|
||||
}
|
||||
section {
|
||||
display: grid;
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
&.full-width-text {
|
||||
p {
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
/* Add fleuron to last <p> in section */
|
||||
> p:not(blockquote > p):last-child:after {
|
||||
content: "\2766";
|
||||
display: inline;
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
}
|
||||
}
|
||||
::selection {
|
||||
background: var(--contrast-color);
|
||||
color: var(--background-color);
|
||||
}
|
||||
.page-block {
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
font-size: var(--step-1);
|
||||
margin: 0;
|
||||
padding-bottom: var(--space-xl);
|
||||
padding-top: var(--space-l);
|
||||
line-height: calc(var(--step-1) * 0.5 + var(--step-1));
|
||||
&:has(+ a > button) {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
@ -267,13 +289,13 @@ footer .webring {
|
||||
}
|
||||
footer p {
|
||||
font-size: var(--step-0);
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
color: var(--text-color);
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
@ -321,7 +343,7 @@ main > p > a > img {
|
||||
padding-bottom: var(--space-s);
|
||||
}
|
||||
pre {
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
@ -377,18 +399,24 @@ button {
|
||||
padding: var(--space-2xs) var(--space-xs);
|
||||
text-transform: uppercase;
|
||||
transition: var(--transition-normal);
|
||||
white-space: nowrap;
|
||||
}
|
||||
button > img {
|
||||
max-width: 1em;
|
||||
margin-right: 0.5em;
|
||||
filter: var(--icon-filter);
|
||||
}
|
||||
a.link-button {
|
||||
align-items: start;
|
||||
display: flex;
|
||||
grid-column: 1 / span 12;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
a {
|
||||
button {
|
||||
margin-top: var(--space-m);
|
||||
}
|
||||
&:has(button) {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:has(button.full-width) {
|
||||
display: inline-grid;
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
}
|
||||
button:hover {
|
||||
background-color: var(--color-gray-90);
|
||||
@ -419,10 +447,10 @@ table th {
|
||||
|
||||
/* Comments */
|
||||
#comments {
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
.continue-discussion {
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
}
|
||||
.continue-discussion button {
|
||||
margin-top: var(--space-xs);
|
||||
@ -710,9 +738,13 @@ a.post-tag:hover {
|
||||
}
|
||||
.tag-feed-icon {
|
||||
fill: var(--rss-orange);
|
||||
height: 3.5rem;
|
||||
height: var(--space-m);
|
||||
transition: var(--transition-normal);
|
||||
width: var(--space-l);
|
||||
width: var(--space-m);
|
||||
&.small {
|
||||
height: var(--space-s);
|
||||
width: var(--space-s);
|
||||
}
|
||||
}
|
||||
.taglist {
|
||||
display: flex;
|
||||
@ -794,7 +826,7 @@ h2 + .header-anchor {
|
||||
|
||||
/* Components */
|
||||
article.post {
|
||||
grid-column: 1 / span 12;
|
||||
grid-column: var(--span-grid);
|
||||
container: article / inline-size;
|
||||
/* Add fleuron after last <p> in article */
|
||||
> p:not(blockquote > p):last-child:after {
|
||||
@ -803,7 +835,19 @@ article.post {
|
||||
font-size: var(--step-1);
|
||||
}
|
||||
}
|
||||
|
||||
.blogroll {
|
||||
display: inline;
|
||||
}
|
||||
.blogroll-category-group {
|
||||
margin-bottom: var(--space-l);
|
||||
margin-left: var(--space-m);
|
||||
h3 {
|
||||
display: inline;
|
||||
}
|
||||
p {
|
||||
margin: var(--space-2xs) auto;
|
||||
}
|
||||
}
|
||||
/* Add fleuron after <p> in article when footnotes are present */
|
||||
p:has(+ hr.footnotes-sep):after {
|
||||
content: "\2766";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user