Link refactor (#27)

* standardize footnotes footer

* update footnote format of older posts

* handle local links differently

* undo special link formatting in blogs

assets/css/main.css

@@ -117,13 +117,15 @@ img {
   align-self: center;
 }
 
-a {
+a,
+a.local {
   color: #0843c3;
   text-decoration: underline dotted;
   text-underline-offset: 3px;
 }
 
-a.impersonal {
+a.impersonal,
+md-block a {
   color:#03163f;
 }
 
@@ -138,8 +140,6 @@ a.impersonal {
   margin-bottom: 2em;
 }
 
-
-
 .badge {
   height: 20%;
   width: auto;

assets/scripts/md-block.js

@@ -1,4 +1,5 @@
-// This is md-block.js's hr/footnotes branch!!
+// This is md-block.js's hr/footnotes branch, with some additions
+
 /**
  * <md-block> custom element
  * @author Lea Verou
@@ -26,6 +27,12 @@ function deIndent(text) {
 	return text;
 }
 
+function addClassesToLinks(text) {
+	text = text.replace(' href=".', ' class="local" href=".');
+	text = text.replace(' href="https://github.com/hannahilea', ' class="local" href="https://github.com/hannahilea');
+	return text;
+}
+
 // Handle footnote support
 function handleFootnotes(text) {
 	// Find all footnotes; must have a newline before and after them
@@ -190,6 +197,7 @@ export class MarkdownElement extends HTMLElement {
 		}
 
 		html = handleFootnotes(html);
+		html = addClassesToLinks(html);
 
 		this.innerHTML = html;
 

blog/__template/src.md

@@ -2,6 +2,11 @@
 
 TODO: Contents! They will go here.
 
+---
+### Footnotes
+
+<footnotes/>
+
 --- 
 - created: {{ DATE }}
 - last updated: {{ DATE }}

blog/driven-developments/src.md

@@ -1,13 +1,13 @@
 # Dopamine-driven development (DDD), spite-driven development (SDD), and other DDs
 
-A few weeks ago, <a class="impersonal" href="https://www.recurse.com/about">Recurser</a> friend Nicole Tietz-Sokolskaya
-published <a class="impersonal" href="https://ntietz.com/blog/making-progress-with-content-driven-development">Making progress on side projects with content-driven development</a>, an excellent write-up about Doing Stuff in order to be able to Share About Having Done Stuff™. You should read it!
+A few weeks ago, [Recurser](https://www.recurse.com/about) friend Nicole Tietz-Sokolskaya
+published [Making progress on side projects with content-driven development](https://ntietz.com/blog/making-progress-with-content-driven-development), an excellent write-up about Doing Stuff in order to be able to Share About Having Done Stuff™. You should read it!
 
 Unfortunately for me, her denomination of "Content-driven development" tripped some switch in my brain, and since then a rotating slate of "X-driven development" variations have taken over. I started with obsessing over spite-driven development (SDD), am currently on a dopamine-driven development (DDD) kick, and have (today) shifted to a rapidly changing moment-by-moment characterization of my actions: feed-the-cat-driven development (FCDD)! Coffee-shop-driven development (CSDD)! Beat-the-rain-home-driven development (BRHDD)!  Perhaps writing about it will help me keep the situation in check, before it becomes my whole personality?[^personality] We can only hope. In the meantime, I am writing this post following muffin-driven development (MDD).[^MDD] 
 
 ## What is a "driven development", anyway?
 
-Many software engineers (and possibly *only* software engineers?) are familiar with a process called  <a class="impersonal" href="https://en.wikipedia.org/wiki/Test-driven_development">*test-driven development* (TDD)</a>. TDD is the OG "driven development": it defines both a specific approach to writing code (write a failing test, see that it fails, write the code to make the test pass, write the next failing test, repeat ad nauseam) and a general approach to software development that emphasizes testing *units of behavior* rather than units of code.[^TDDfeels]
+Many software engineers (and possibly *only* software engineers?) are familiar with a process called  [*test-driven development* (TDD)](https://en.wikipedia.org/wiki/Test-driven_development). TDD is the OG "driven development": it defines both a specific approach to writing code (write a failing test, see that it fails, write the code to make the test pass, write the next failing test, repeat ad nauseam) and a general approach to software development that emphasizes testing *units of behavior* rather than units of code.[^TDDfeels]
 
 TDD is part of the gestalt; there's a reason Nicole's "content-driven development" was so mentally sticky, and that when I have said "spite-driven development" to a number of software folks, I have immediately been regaled with their own relevant experiences, no additional explanation necessary.
 
@@ -98,7 +98,7 @@ I've started using DDD and SDD conversationally, and folks in my circles have ru
 
 [^personality]: Get-it-out-of-my-brain-driven development (GIOMBDD)
 
-[^MDD]: I chose a time to make <a class="impersonal" href="https://smittenkitchen.com/2020/10/morning-glory-breakfast-cake">muffins</a> that cut a liiiiiiittle too close to the Publication Accountabilibuddies session I frequent, such that I am only now coming off the adrenaline of getting them in the oven in time. The next step is to write as much as possible before the oven timer goes off. How will I know I'm done? There will be words on my page AND a muffin to consume. Muffin-driven development!
+[^MDD]: I chose a time to make [muffins](https://smittenkitchen.com/2020/10/morning-glory-breakfast-cake) that cut a liiiiiiittle too close to the Publication Accountabilibuddies session I frequent, such that I am only now coming off the adrenaline of getting them in the oven in time. The next step is to write as much as possible before the oven timer goes off. How will I know I'm done? There will be words on my page AND a muffin to consume. Muffin-driven development!
 
 [^maddie]: All of her writing is excellent, I recommend checking out other posts.
 

blog/future-blog-posts/src.md

@@ -4,45 +4,47 @@
 
 My tech writing these days follows DDD (Dopamine-Driven Development), which means that if you tell me what you want to read from me, I will be that much more likely to write it.
 
-Without further ado, some things I could write *right now*<sup><a name="footnote-1-site">[1](#footnote-1)</a></sup>:
-
-### Project write-ups<sup><a name="footnote-2-site">[2](#footnote-2)</a></sup> and tutorials
+Without further ado, some things I could write *right now[^footnote1]*:
+### Project write-ups[^footnote2] and tutorials
 - *Musidex* | What I wanted was a Craigslist jukebox; what I got was a Rolodex. (Closing line: *I still want a Craigslist jukebox.*)
-- *Obsessed with <a class="impersonal" href="https://cuttle.xyz/">Cuttle</a>: Parametric CAD for prototyping, producing, and procrastinating*
-- *Making mixtapes for your youngest pals* | Do you want to enable the song addictions of the small children in your life, to set them on a path towards music obsession, while potentially annoying the heck out of their parents? Of course you do! (This post is not sponsored by <a class="impersonal" href="https://us.yotoplay.com/collections/library">Yoto</a>, but could be, should they choose... 👀)
+- *Obsessed with [Cuttle](https://cuttle.xyz/): Parametric CAD for prototyping, producing, and procrastinating*
+- *Making mixtapes for your youngest pals* | Do you want to enable the song addictions of the small children in your life, to set them on a path towards music obsession, while potentially annoying the heck out of their parents? Of course you do! (This post is not sponsored by [Yoto](https://us.yotoplay.com/collections/library), but could be, should they choose... 👀)
 - *Small Tales* | On building a bookshelf of your favorite reads, in miniature, for when you have limited bookshelf space or a limited book budget.
 - *Mobiles! For that new tiny human in your extended universe*
 - *Easy inter-room trolling: OSX's `say`, a bluetooth speaker, and you*
-- *Quick and easy meme-making, for fun and no profit*<sup><a name="footnote-3-site">[3](#footnote-3)</a></sup>
-- *How do I do a creative coding?*<sup><a name="footnote-3-site">[3](#footnote-3)</a></sup>
+- *Quick and easy meme-making, for fun and no profit*[^footnote3]
+- *How do I do a creative coding?*[^footnote3]
 - *Mix of the Month Clubs for the 2020s* | Mixtapes are my love language, but no one has a cd player anymore (not to mention a disc drive, or a cassette player). What's a fellow to do?
 - *Message in a bottle, or, the US Postal Service is way more fun than most people know it is*
 - *Stabby McStabface: The joy of needlefelting memes*
-- *From LiveJournal to <a class="impersonal" href="https://www.tinylogger.com">tinylogger</a> and beyond: My current writing workflow*
+- *From LiveJournal to [tinylogger](https://www.tinylogger.com) and beyond: My current writing workflow*
 - *How should I know when there's a new blog to read?* | What the heck is RSS, and how do I make it work for me if I don't consider myself tech saavy?
-- *The rest of the owl: My first experience with <a class="impersonal" href="https://codecrafters.io">codecrafters</a>*
+- *The rest of the owl: My first experience with [codecrafters](https://codecrafters.io)*
 
 ### Feelings™ (tech and otherwise)
 - ~*Dopamine-Driven Development (DDD), Spite-Driven Development (SDD), and other DDs*~ [EDIT 9/23/24: [Written](../driven-developments/)!]
 - *A batch at the Recurse Center: My antidote to burnout*
 - *The Mike Ratio: A Bechdel test for the modern tech team*
-- *Towards a Bechdel test for assessing a candidate employer*<sup><a name="footnote-4-site">[4](#footnote-4)</a></sup>
+- *Towards a Bechdel test for assessing a candidate employer*[^footnote4]
 - *The Hannahspeak cheatsheet* | The what/why/wherefore/emojis of the phrases I parrot, and why you might want to use them too
 - *The "just" flag flies true*
 - *The 1-1 IC template for my future self (that I wish I'd been using all along)*
 - *Niceties™: From third grade to the Recurse Center, and beyond*
 
 Right. Now that I've gotten this current list out of my head, maybe I'll be able to pick one and just go for it....
 
------
-### Footnotes
-<a name="footnote-1">[<sup>1</sup>](#footnote-1-site)</a>Not included: any hypothetical projects I have not yet done.
+[^footnote1]: Not included: any hypothetical projects I have not yet done.
+
+[^footnote2]: Also, this list only includes a few of the as-yet-undocumented [projects](https://www.hannahilea.com/projects-site) from my backlog, but anything on that page is fair game for a DDD request.
 
-<a name="footnote-2">[<sup>2</sup>](#footnote-2-site)</a>Also, this list only includes a few of the as-yet-undocumented [projects](https://www.hannahilea.com/projects-site) from my backlog, but anything on that page is fair game for a DDD request.
+[^footnote3]: These already exist in slide form from my batch at RC, so :just: need to be edited appropriately.
 
-<a name="footnote-3">[<sup>3</sup>](#footnote-3-site)</a>These already exist in slide form from my batch at RC, so :just: need to be edited appropriately.
+[^footnote4]: Why yes, the [Bechdel test](https://en.wikipedia.org/wiki/Bechdel_test) does play an oversized role in my consciousness, why do you ask? As does [Bechdel herself](https://en.wikipedia.org/wiki/Alison_Bechdel) and [the musical incarnation of her memoir](https://www.youtube.com/watch?v=-Qlagsg5LT8).
+
+---
+### Footnotes
 
-<a name="footnote-4">[<sup>4</sup>](#footnote-4-site)</a>Why yes, the [Bechdel test](https://en.wikipedia.org/wiki/Bechdel_test) does play an oversized role in my consciousness, why do you ask? As does [Bechdel herself](https://en.wikipedia.org/wiki/Alison_Bechdel) and [the musical incarnation of her memoir](https://www.youtube.com/watch?v=-Qlagsg5LT8).
+<footnotes/>
 
 --- 
 - created: 2024-09-18

blog/make-a-list/src.md

@@ -12,17 +12,20 @@ To-do list:
 ---
 I am a big fan of Making A List, whether on paper or digitally.[^skill] 
 
-As taught to me by <a class="impersonal" href="https://futurestatesband.ca/)">Chuck</a>[^chuck], **the most important thing about a to-do list is that the first item on it is "Make a list"**. Then, when you've finished adding tasks to your list, you can check it off immediately. Bam, [dopamine](../driven-developments/). Happy day, you're already partly done with your list! Look at you, so much progress already!
+As taught to me by [Chuck](https://futurestatesband.ca/)[^chuck], **the most important thing about a to-do list is that the first item on it is "Make a list"**. Then, when you've finished adding tasks to your list, you can check it off immediately. Bam, [dopamine](../driven-developments/). Happy day, you're already partly done with your list! Look at you, so much progress already!
 My notebook is filled with (partially-completed 😅) daily to-do lists, each of which starts with "make a list".
 
-The one type of list I don't regularly start this way is the <a class="impersonal" href="https://en.wikipedia.org/wiki/Punch_list">punch lists</a> that I often add to pull requests. (Pull requests (PRs) are proposals to merge a set of changes into a set of existing documents, e.g., source code.) PR punch lists both keep me on task and let my reviewers know what subtasks I intentionally considered---and, implicitly, what I did not. (Are you requesting a non-trivial review from me? Bonus points if you include a punch list!)
+The one type of list I don't regularly start this way is the [punch lists](https://en.wikipedia.org/wiki/Punch_list) that I often add to pull requests. (Pull requests (PRs) are proposals to merge a set of changes into a set of existing documents, e.g., source code.) PR punch lists both keep me on task and let my reviewers know what subtasks I intentionally considered---and, implicitly, what I did not. (Are you requesting a non-trivial review from me? Bonus points if you include a punch list!)
 
-I've also found that adding a punch list to a <a class="impersonal" href="https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository">Github PR template</a> helps improve review turnaround time and reduces review friction, and sets newer contributors up to succeed more quickly.
+I've also found that adding a punch list to a [Github PR template](https://docs.github.com/en/communities/using-templates-to-encourage-useful-issues-and-pull-requests/creating-a-pull-request-template-for-your-repository) helps improve review turnaround time and reduces review friction, and sets newer contributors up to succeed more quickly.
 
 [^skill]: This is a different skill than the skill of completing tasks, mind...
 
 [^chuck]: One of the most valuable things I learned in grad school!
 
+---
+### Footnotes
+
 <footnotes/>
 
 --- 

blog/site-structure/src.md

@@ -1,6 +1,6 @@
 # This website's structure: A meta post
 
-While doing a batch at the <a class="impersonal" href="https://www.recurse.com">Recurse Center</a>, I revived my personal website—the very site you are almost certainly looking at Right Now!
+While doing a batch at the [Recurse Center](https://www.recurse.com), I revived my personal website—the very site you are almost certainly looking at Right Now!
 
 ![surprise-pikachu](/assets/img/emojis/surprise-pikachu.png)
 
@@ -47,7 +47,7 @@ The structure of each blog subdirectory `<blog-n>` is
 ├── index.html
 └── src.md
 ```
-`src.md` contains the full content of a blogpost, written in markdown. `index.html` is identical across blog posts and contains no specialized content; it exists simply to contain the results of converting `src.md` to html, which is performed with the <a class="impersonal" href="https://md-block.verou.me/">`md-block.js`</a> library.
+`src.md` contains the full content of a blogpost, written in markdown. `index.html` is identical across blog posts and contains no specialized content; it exists simply to contain the results of converting `src.md` to html, which is performed with the [`md-block.js`](https://md-block.verou.me/) library.
 
 Why this approach? Writing markdown feels much more natural to me than writing html, and even though I have to include the same boilerplate html file in every blog post directory, it is mentally cheaper than switching the whole site over to a templating engine that generates the whole site from a set of markdown files. (It is also cheaper than writing my own markdown-to-html converter, however tempting that was...)
 
@@ -63,11 +63,11 @@ That said, for a common type of project that I've been building lately, namely,
 ```
 where the index contains no little specialized content except a description of the project, and the content of the sketch lives in `sketch.js`.
 
-This structure has made it trivially easy to transfer javascript sketches to this site from sandbox environments like the <a class="impersonal" href="https://editor.p5js.org/">p5.js</a> editor.
+This structure has made it trivially easy to transfer javascript sketches to this site from sandbox environments like the [`p5.js`](https://editor.p5js.org/) editor.
 
 ## Site hosting and deployment
 
-I build, host, and deploy the site using <a class="impersonal" href="https://pages.github.com/">GitHub Pages</a>. Thanks, GitHub! You can look at the [GitHub Action](https://github.com/hannahilea/hannahilea.github.io/blob/main/.github/workflows/static.yml) I use to deploy, but there is nothing custom or personal about it.
+I build, host, and deploy the site using [GitHub Pages](https://pages.github.com/). Thanks, GitHub! You can look at the [GitHub Action](https://github.com/hannahilea/hannahilea.github.io/blob/main/.github/workflows/static.yml) I use to deploy, but there is nothing custom or personal about it.
 
 ## Adding new content
 
@@ -87,7 +87,7 @@ As I borrowed (with permission!) when first assembling this site, please feel fr
 
 And finally if you, erstwhile reader, are a Web Person™ who thinks I've made an egregious error in approach or wants to propose some additional tweaks/improvements, do let me know!
 
-***Thanks to <a class="impersonal" href="https://teresaibarra.com">Teresa Ibarra</a>, whose site (and assistance!) I used as an initial starting point.***
+***Thanks to [Teresa Ibarra](https://teresaibarra.com), whose site (and assistance!) I used as an initial starting point.***
 
 ---
 - created: 2024-05-17