kfitz/kfitz-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

rebuild

Browse Source
This commit is contained in:
Kathleen Fitzpatrick
2024-12-08 12:43:58 -06:00
commit 9e24ee085d
5315 changed files with 1371475 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

831
rebuilding/index.html Normal file
View File

@@ -0,0 +1,831 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rebuilding</title>
<meta name="description" content="The long-running and erratically updated blog of Kathleen Fitzpatrick.">
<link rel="alternate" href="feed/feed.xml" type="application/atom+xml" title="kfitz">
<script async="" src="https://talk.hyvor.com/embed/embed.js" type="module"></script>
<link rel="webmention" href="https://webmention.io/kfitz.info/webmention">
<link rel="pingback" href="https://webmention.io/kfitz.info/xmlrpc">
<style>/**
* okaidia theme for JavaScript, CSS and HTML
* Loosely based on Monokai textmate theme by http://www.monokai.nl/
* @author ocodia
*/
code[class*="language-"],
pre[class*="language-"] {
color: #f8f8f2;
background: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
font-size: 1em;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
border-radius: 0.3em;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
background: #272822;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: #8292a2;
}
.token.punctuation {
color: #f8f8f2;
}
.token.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
color: #f92672;
}
.token.boolean,
.token.number {
color: #ae81ff;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #a6e22e;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
color: #f8f8f2;
}
.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
color: #e6db74;
}
.token.keyword {
color: #66d9ef;
}
.token.regex,
.token.important {
color: #fd971f;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
/*
* New diff- syntax
*/
pre[class*="language-diff-"] {
--eleventy-code-padding: 1.25em;
padding-left: var(--eleventy-code-padding);
padding-right: var(--eleventy-code-padding);
}
.token.deleted {
background-color: hsl(0, 51%, 37%);
color: inherit;
}
.token.inserted {
background-color: hsl(126, 31%, 39%);
color: inherit;
}
/* Make the + and - characters unselectable for copy/paste */
.token.prefix.unchanged,
.token.prefix.inserted,
.token.prefix.deleted {
-webkit-user-select: none;
user-select: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding-top: 2px;
padding-bottom: 2px;
}
.token.prefix.inserted,
.token.prefix.deleted {
width: var(--eleventy-code-padding);
background-color: rgba(0,0,0,.2);
}
/* Optional: full-width background color */
.token.inserted:not(.prefix),
.token.deleted:not(.prefix) {
display: block;
margin-left: calc(-1 * var(--eleventy-code-padding));
margin-right: calc(-1 * var(--eleventy-code-padding));
text-decoration: none; /* override del, ins, mark defaults */
color: inherit; /* override del, ins, mark defaults */
}
/* This is an arbitrary CSS string added to the bundle */
/* Defaults */
@font-face {
font-family: "Atkinson Hyperlegible";
src: url('/css/files/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: "Atkinson Hyperlegible";
font-weight: bold;
src: url('/css/files/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
font-display: swap;
}
@font-face {
font-family: "Atkinson Hyperlegible";
font-style: italic
src: url('/css/files/atkinson-hyperlegible-latin-400-italic.woff2') format('woff2');
font-display: swap;
}
:root {
--font-family: "Atkinson Hyperlegible", -apple-system, system-ui, sans-serif;
--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
font-size: 18px;
}
/* Theme colors */
:root {
--color-gray-20: #e0e0e0;
--color-gray-50: #C0C0C0;
--color-gray-90: #333;
--background-color: #fff;
--text-color: var(--color-gray-90);
--text-color-link: #d61d4a;
--text-color-link-active: #853439;
--text-color-link-visited: #e8325e;
--syntax-tab-size: 2;
}
@media (prefers-color-scheme: dark) {
:root {
--color-gray-20: #e0e0e0;
--color-gray-50: #C0C0C0;
--color-gray-90: #dad8d8;
/* --text-color is assigned to --color-gray-_ above */
--text-color-link: #1493fb;
--text-color-link-active: #6969f7;
--text-color-link-visited: #a6a6f8;
--background-color: #15202b;
}
}
/* Global stylesheet */
* {
box-sizing: border-box;
}
@view-transition {
navigation: auto;
}
html,
body {
padding: 0;
margin: 0 auto;
font-family: var(--font-family);
color: var(--text-color);
background-color: var(--background-color);
}
html {
overflow-y: scroll;
}
body {
max-width: 40em;
}
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
p:last-child {
margin-bottom: 0;
}
p {
line-height: 1.5;
}
li {
line-height: 1.5;
}
a[href] {
color: var(--text-color-link);
}
a[href]:visited {
color: var(--text-color-link-visited);
}
a[href]:hover,
a[href]:active {
color: var(--text-color-link-active);
}
main,
footer {
padding: 1rem;
}
main :first-child {
margin-top: 0;
}
header {
border-bottom: 1px dashed var(--color-gray-20);
}
header:after {
content: "";
display: table;
clear: both;
}
footer {
border-top: 1px dashed var(--color-gray-50);
}
.links-nextprev {
display: flex;
justify-content: space-between;
gap: .5em 1em;
list-style: "";
border-top: 1px dashed var(--color-gray-20);
padding: 1em 0;
}
.links-nextprev > * {
flex-grow: 1;
}
.links-nextprev-next {
text-align: right;
}
table {
margin: 1em 0;
}
table td,
table th {
padding-right: 1em;
}
pre,
code {
font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
margin: .5em 0;
line-height: 1.375; /* 22px /16 */
-moz-tab-size: var(--syntax-tab-size);
-o-tab-size: var(--syntax-tab-size);
tab-size: var(--syntax-tab-size);
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
overflow-x: auto;
}
code {
word-break: break-all;
}
/* Header */
header {
display: flex;
gap: 1em .5em;
flex-wrap: wrap;
align-items: center;
padding: 1em;
}
.home-link {
font-size: 1.5em; /* 16px /16 */
font-weight: 700;
margin-right: 2em;
}
.home-link:link:not(:hover) {
text-decoration: none;
}
/* Nav */
.nav {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.nav-item {
display: inline-block;
margin-right: 1em;
}
.nav-item a[href]:not(:hover) {
text-decoration: none;
}
.nav a[href][aria-current="page"] {
text-decoration: underline;
}
/* Posts list */
.postlist {
list-style: none;
padding: 0;
padding-left: 1.5rem;
}
.postlist-item {
display: flex;
flex-wrap: wrap;
align-items: baseline;
counter-increment: start-from -1;
margin-bottom: 1em;
}
.postlist-item:before {
display: inline-block;
pointer-events: none;
content: "" counter(start-from, decimal-leading-zero) ". ";
line-height: 100%;
text-align: right;
margin-left: -1.5rem;
}
.postlist-date,
.postlist-item:before {
font-size: 0.8125em; /* 13px /16 */
color: var(--color-gray-90);
}
.postlist-date {
word-spacing: -0.5px;
}
.postlist-link {
font-size: 1.1875em; /* 19px /16 */
font-weight: 700;
flex-basis: calc(100% - 1.5rem);
padding-left: .25em;
padding-right: .5em;
text-underline-position: from-font;
text-underline-offset: 0;
text-decoration-thickness: 1px;
}
.postlist-item-active .postlist-link {
font-weight: bold;
}
/* Archive list */
.archivelist {
padding: 0;
padding-left: 2.5rem;
}
.archivelist-item {
align-items: baseline;
margin-bottom: 1em;
}
.archivelist-item::marker {
text-align: right;
margin-left: -1.5rem;
font-size: 0.8125em; /* 13px /16 */
color: var(--color-gray-90);
}
.archivelist-date {
font-size: 0.8125em; /* 13px /16 */
color: var(--color-gray-90);
word-spacing: -0.5px;
}
.archivelist-link {
font-size: 1.1875em; /* 19px /16 */
font-weight: 700;
flex-basis: calc(100% - 1.5rem);
padding-left: .25em;
padding-right: .5em;
text-underline-position: from-font;
text-underline-offset: 0;
text-decoration-thickness: 1px;
}
.archivelist-item-active .archivelist-link {
font-weight: bold;
}
/* Tags */
.post-tag {
display: inline-flex;
align-items: center;
justify-content: center;
text-transform: capitalize;
font-style: italic;
}
.postlist-item > .post-tag {
align-self: center;
}
/* Tags list */
.post-metadata {
display: inline-flex;
flex-wrap: wrap;
gap: .5em;
list-style: none;
border-top: 1px dashed var(--color-gray-20);
border-bottom: 1px dashed var(--color-gray-20);
padding: 3px 0px 3px 0px;
margin: 0;
font-size: .8em;
}
.post-metadata time {
margin-right: 1em;
}
/* Direct Links / Markdown Headers */
.header-anchor {
text-decoration: none;
font-style: normal;
font-size: 1em;
margin-left: .1em;
}
a[href].header-anchor,
a[href].header-anchor:visited {
color: transparent;
}
a[href].header-anchor:focus,
a[href].header-anchor:hover {
text-decoration: underline;
}
a[href].header-anchor:focus,
:hover > a[href].header-anchor {
color: #aaa;
}
h2 + .header-anchor {
font-size: 1.5em;
font-weight: bold;
}
h1 {
font-weight: bolder;
}
summary {
font-size: 1.5em;
font-weight: bold;
margin-bottom: .5em;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
}
blockquote {
display: block;
margin-left: 2em;
margin-right: 3em;
padding-left: 10px;
border-left: 10px solid var(--text-color-link);
}
hr.new {
border: none;
border-top: 1px dashed var(--color-gray-50);
}
/* Webmention Section */
.webmentions {
display:block;
text-align: left;
}
.webmentions__facepile {
display:flex;
align-items: center;
flex-wrap: wrap;
}
.webmentions__face {
width: 2rem;
height: 2rem;
border-radius: 50%;
object-fit: cover;
flex: none;
}
.webmentions__list {
list-style-type: none;
padding:0;
}
.webmentions__item {
margin-bottom: 2rem;
}
/* Single Webmention */
.webmention {
display:block;
}
.webmention__meta,
.webmention__author {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.webmention__meta {
margin-bottom:.5rem;
}
.webmention__author {
margin-right:.25rem;
}
.webmention__author__photo {
height: 3rem;
width: 3rem;
border-radius: 50%;
object-fit: cover;
margin-right:.5rem;
}
.webmention__pubdate {
font-style: italic;
}
/* Message Box */
.message-box {
--color-message-box: #ffc;
display: block;
background-color: var(--color-message-box);
color: var(--color-gray-90);
padding: 1em 0.625em; /* 16px 10px /16 */
}
.message-box ol {
margin-top: 0;
}
@media (prefers-color-scheme: dark) {
.message-box {
--color-message-box: #082840;
}
}</style>
</head>
<body>
<a href="#skip" class="visually-hidden">Skip to main content</a>
<header>
<a href="/" class="home-link">kfitz</a>
<nav>
<h2 class="visually-hidden" id="top-level-navigation-menu">Top level navigation menu</h2>
<ul class="nav">
<li class="nav-item"><a href="/">Home</a></li>
<li class="nav-item"><a href="/blog/">Archive</a></li>
<li class="nav-item"><a href="/about/">About</a></li>
<li class="nav-item"><a href="/projects/">Projects</a></li>
<li class="nav-item"><a href="/presentations/">Presentations</a></li>
<li class="nav-item"><a href="/teaching/">Teaching</a></li>
<li class="nav-item"><a href="/feed/feed.xml">Feed</a></li>
</ul>
</nav>
</header>
<link href="/pagefind/pagefind-ui.css" rel="stylesheet">
<script src="/pagefind/pagefind-ui.js"></script>
<div id="search"></div>
<script>
window.addEventListener('DOMContentLoaded', (event) => {
new PagefindUI({ element: "#search", showSubResults: true });
});
</script>
<main id="skip">
<heading-anchors>
<h1 id="rebuilding">Rebuilding</h1>
<ul class="post-metadata">
<li><time datetime="2024-11-29">29 November 2024</time></li>
<li><a href="/tags/tinkering/" class="post-tag">tinkering</a></li>
</ul>
<p>At some point a month or so ago (probably more &quot;or so&quot; given my recent <a href="/time-is-weird">what is time even</a> challenges), I upgraded the innards of this site from Eleventy 2.0 to Eleventy 3.0. This turned out to require a moderate amount of tinkering in order to get things shifted from <a href="https://www.11ty.dev/docs/cjs-esm/">the older version's use of CommonJS to the newer one's use of ESM</a>. I managed to get it about 95% sorted fairly quickly, however. The one real holdout was my webmentions functionality, which I was having a hard time getting to work in the new iteration.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> As my current gig does not afford me a lot of tinkering time, I had to put that aside, figuring that the site was at least doing the basics, and that would do for now.</p>
<p>I turned back to trying to fix webmentions yesterday, and finally managed to get the data retrieved and cached and munged and filtered in all the ways, such that it landed on the right pages. But it looked <em>terrible</em>. And so there were many more hours of frustration while I tried to figure out why the new <a href="https://www.11ty.dev/docs/plugins/image/">eleventy-image</a> and its fancy transform were causing such trouble in the rendering of webmention avatars.</p>
<p>Except they weren't. It turned out that it was a basic CSS problem -- as in the css file that styles webmentions was somehow not getting included in the build process. And now it is.</p>
<p>So: a post to celebrate a successful rebuild! And perhaps even to inspire a bit more writing in the weeks ahead.</p>
<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>Actually, there's one more thing: a footnote rendering issue. So that's next up for this afternoon's exploration.<sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup> <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>And I think that's now fixed as well. <a href="#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>
<ul class="links-nextprev"><li class="links-nextprev-prev">← Previous<br> <a href="/passivity/">Passivity vs. Accountability</a></li><li class="links-nextprev-next">Next →<br><a href="/posse-pipedream/">In Pursuit of the POSSE Pipedream</a></li>
</ul>
<hyvor-talk-comments website-id="9100" page-id="/rebuilding/"></hyvor-talk-comments>
<div class="webmentions" id="webmentions">
<h3 id="webmentions-2">Webmentions</h3>
<h4 id="1-reply">1 Reply</h4>
<ol class="webmentions__list">
<li class="webmentions__item">
<article class="webmention h-cite" id="webmention-1863198">
<div class="webmention__meta">
<a class="webmention__author p-author h-card u-url" href="https://bsky.app/profile/kfitz.info/post/3lc4d4xfbpk2z" target="_blank" rel="noopener noreferrer">
<img class="webmention__author__photo u-photo" src="https://webmention.io/avatar/cdn.bsky.app/e8dce3ffa1b6ca82e8ceaa0f5e9959fd9909d44468181d8515611bfcc5f4f66c.jpg" alt="Kathleen Fitzpatrick">
<strong class="p-name">Kathleen Fitzpatrick</strong>
</a>
<time class="webmention__pubdate dt-published" datetime="2024-11-29T19:33:26+00:00">29 Nov 2024 - 19:33</time>
</div>
<div class="webmention__content p-content">
And *that's* what I'm trying to say.
</div>
</article>
</li>
</ol>
<h4 id="5-likes">5 Likes</h4>
<div class="webmentions__facepile">
<a class="h-card u-url link-u-exempt" href="https://hcommons.social/@kfitz/113567543649779875#favorited-by-109469831452874040" target="_blank" rel="noopener noreferrer">
<img class="webmention__author__photo" src="https://webmention.io/avatar/spaces.hcommons.social/13c9b5e4729c6cc4bfb05078ea971a246808b722d3861836581a7c2851b1063b.jpg" alt="John Maxwell" title="John Maxwell" loading="lazy">
</a>
<a class="h-card u-url link-u-exempt" href="https://hcommons.social/@kfitz/113567705882374277#favorited-by-109841808076473949" target="_blank" rel="noopener noreferrer">
<img class="webmention__author__photo" src="https://webmention.io/avatar/spaces.hcommons.social/2f7665caba98d72f6071bc6671825a85d9baa046c223d2f288431f72d61fef7b.png" alt="Henrik Schönemann" title="Henrik Schönemann" loading="lazy">
</a>
<a class="h-card u-url link-u-exempt" href="https://bsky.app/profile/kfitz.info/post/3lc4d3xqgu42s#liked_by_did:plc:7orupv2alwsda6l7nkxhcz2x" target="_blank" rel="noopener noreferrer">
<img class="webmention__author__photo" src="https://webmention.io/avatar/cdn.bsky.app/b9020ff28b7206ffb4130d0cd11cfa795454775d80593709db43e373eaa2a05f.jpg" alt="Ryan Randall (he/him)" title="Ryan Randall (he/him)" loading="lazy">
</a>
<a class="h-card u-url link-u-exempt" href="https://hcommons.social/@kfitz/113567543649779875#favorited-by-112916329329791787" target="_blank" rel="noopener noreferrer">
<img class="webmention__author__photo" src="https://webmention.io/avatar/spaces.hcommons.social/979b589767a1b1e78a11f3b5e860c3d96868960c96657b77d61a761777dbc0ca.jpg" alt="Dr. Amanda Wyatt Visconti ????????" title="Dr. Amanda Wyatt Visconti ????????" loading="lazy">
</a>
<a class="h-card u-url link-u-exempt" href="https://bsky.app/profile/kfitz.info/post/3lc4d3xqgu42s#liked_by_did:plc:quschouau47zm4f3ntsw7j5y" target="_blank" rel="noopener noreferrer">
<img class="webmention__author__photo" src="https://webmention.io/avatar/cdn.bsky.app/1b5c2fc8ba9b994e3f83906f06e15ac3141bd0c7d9ff7f68f6e0450945dbd9e1.jpg" alt="Dr. Amanda Wyatt Visconti ????????" title="Dr. Amanda Wyatt Visconti ????????" loading="lazy">
</a>
</div>
<h4 id="1-repost">1 Repost</h4>
<div class="webmentions__facepile">
<a class="h-card u-url link-u-exempt" href="https://hcommons.social/@kfitz/113567705882374277#reblogged-by-113151324394836407" target="_blank" rel="noopener noreferrer">
<img class="webmention__author__photo" src="https://webmention.io/avatar/spaces.hcommons.social/ef9f18cf9eeaa1098d3ae6e508ef129f3b3c8779c6c304a1b60d8ef818c24181.jpg" alt="inquiline" title="inquiline" loading="lazy">
</a>
</div>
</div>
</heading-anchors>
</main>
<footer>
<p><em>Built with <a href="https://www.11ty.dev/">Eleventy v3.0.0</a>. All content <a href="https://creativecommons.org/licenses/by/4.0/deed.en">CC BY 4.0</a> if you're human.</em></p><p></p>
</footer>
<!-- This page `/rebuilding/` was built on 2024-12-08T18:38:31.983Z -->
<script type="module" src="/dist/rJ3_G-2ArF.js"></script>
</body>
</html>