Add external link indicator & related css. Add wa-2024-week-29 post.

_posts/2024-07-21-wa-2024-week-29.md

@@ -0,0 +1,68 @@
+---
+title: Weekly Assemblage for 2024 Week WW
+last_modified_at:
+categories: [weekly-assemblage]
+excerpt: 'Extraordinary Birder, Hyperlocal Psychogeography, and External Link Indicators.'
+tags:
+    - meta
+    - notetaking
+    - psychogeography
+# header:
+#  image: /assets/images/weekly-assemblage.png
+#  caption: 'Photo credit: [**Unsplash**](https://unsplash.com)'
+published: true
+toc: true
+comments:
+date: 2024-07-21T17:46:25-6:00
+---
+
+[Weekly Whaaa…?]({% post_url 2016-01-09-weekly-whaaa %})  
+{: .notice}  
+
+I use the ISO weeks from Monday to Monday, so [ISO Week 29](https://en.wikipedia.org/wiki/ISO_week_date) is the week of 2024-07-15/2024-07-21.  
+
+## Viewing and Reading
+
+### Extraordinary Birder
+
+We've been watching [Extraordinary Birder with Christian Cooper](https://www.justwatch.com/us/tv-show/extraordinary-birder-with-christian-cooper) a bit this week, and it's really enjoyable. My spouse has been watching it more attentively than I have (I've often been reading as she watches), but I watched all of the Palm Springs episode and like it enough that I'm planning to re-watch the whole series with her.  
+
+### Hyperlocal Psychogeography  
+
+Hyperlocal [psychogeography](https://en.wikipedia.org/wiki/Psychogeography) isn't a show or anything; I've just been taking walks around the neighborhood far earlier in the morning due to the current heat wave, and the shift in time has led me to pay newfound attention to the built environment while I do so.  
+
+Psychogeography has long been a fave practice of mine, ever since I first read about the Situationists. It's an always-there method for adopting beginner's mind even amid what could otherwise feel like profoundly familiar surroundings.  
+
+If I take a particularly long walk, there's a corner where you can see Bogus Basin Road winding up into the Boise Foothills on its way to [Bogus Basin](https://en.wikipedia.org/wiki/Bogus_Basin) and further beyhond. The switch from tree-lined streets nestled in the Treasure Valley and the greater Snake River Plain to seeing a gateway to the mountains north of town can be quite jarring—and often inspires a welcome and unexpected sense of possibility early in the day!  
+
+## Lightly-Annotated Linkapalooza
+
+- University of Minnesota Press has a [Forerunners: Ideas First book series](https://www.upress.umn.edu/search-grid/?series=forerunners-ideas-first), which they describe as "short books of thought-in-process scholarship, where intense analysis, questioning, and speculation take the lead." It seems like all of these are published with an open access version that can be read online, using their Manifold platform. It's up to 75 titles already! A few that might be of interest are:  
+	- [_Theory for the World to Come: Speculative Fiction and Apocalyptic Anthropology_](https://www.upress.umn.edu/9781517907808/theory-for-the-world-to-come/)  
+	- [_Shareveillance: The Dangers of Openly Sharing and Covertly Collecting Data_](https://www.upress.umn.edu/9781517904258/shareveillance/)  
+	- [_Spoiler Alert: A Critical Guide_](https://www.upress.umn.edu/9781517908034/spoiler-alert/)  
+	- [_Deep Mapping the Media City_](https://www.upress.umn.edu/9780816698516/deep-mapping-the-media-city/)  
+	- [_Learning versus the Common Core_](https://www.upress.umn.edu/9781517907792/learning-versus-the-common-core/)  
+- [How I Use Obsidian](https://jasonheppler.org/2024/07/15/how-i-use-obsidian/) by the historian [Jason A. Heppler](https://jasonheppler.org/about/) provides a great overview of why the [Obsidian notetaking app](https://obsidian.md/) can be so useful. I don't personally use the Johnny Decimal organizing scheme, but I've read a lot of people sing its praises. Heppler's use of the [Dataview plugin](https://blacksmithgu.github.io/obsidian-dataview/) sounds compelling enough that I think I'm going to start testing it out with my own research notes. Heppler also links to an extensive guide to [Doing History with Zotero and Obsidian](https://publish.obsidian.md/history-notes/01+Notetaking+for+Historians) by [Elena Razlogova](http://elenarazlogova.org/), which I'll probably read over the next week.  
+
+## Site Refinements of the Week
+
+Reading [Microfeatures I love in Blogs and Personal Websites](https://danilafe.com/blog/blog_microfeatures/) last week inspired me to search for ways to add external link indicators to my site.  
+
+There are a number of plugins that let one do this with Jekyll, but many of them require intentionally annotating either internal or external links with extra tags. I'm wary of adding features that will require me to go back and change almost a decade of posts, so instead I searched for simpler approaches. I was discouraged at first that all the plugins or approaches I found were focused on the ability to force external links to open in a new tab, a behavior which often poses [accessibility challenges](https://webaim.org/techniques/hypertext/hypertext_links#new_window), so that's not an approach I want to add.  
+
+When I found MichaelDot's [Adding Ability to Open External Links in New Tab Minimal Mistakes Jekyll](https://michaeldot.com/Adding-Ability-to-Open-External-Links-in-New-Tab-Minimal-Mistakes-Jekyll/) blog post, I realized that I could adapt his JavaScript code to annotate the links without also forcing the "new tab" behavior. Thankfully, my spouse had time to help me go through and make sure that I understood all of what this small script does, so I feel comfortable adding it to my site.  
+
+I've chosen an upward-right facing arrow that doesn't include the usual "box" element, to hopefully indicate that it's an internal link but not one that will hijack your browser and create a new tab.  
+
+I will probably go back and add an ARIA label to indicate these external links—but I'm currently hesitant because I've often heard accessibility experts say that [no ARIA is better than bad ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)… and I'll want to carefully consider whether whatever I end up adding is worth the risk of doing it poorly.  
+
+But for now, you're very welcome to adopt or adapt my site's [`external-link-indicator.js` file](https://github.com/ryan-p-randall/ryan-p-randall.github.io/tree/develop/assets/js/plugins/external-link-indicator.js) (which determines which links are external and adds an appropriate class to the html) and the following css rule (which adds the visual decoration).  
+
+```css
+.page__content a.external-link:not(nav a.external-link, div.backlink-box a.external-link)::after {
+    content: " ↗"
+}
+``` 
+
+If you do end up using this—and especially if you add your own refinements or improvements—I'd love to hear about it!  

_sass/minimal-mistakes.scss

@@ -85,4 +85,14 @@ h6 {
 
 .toc .active a {
     box-shadow: inset 0 0 0 0.15rem mix($background-color, $link-color-hover, 5%);
+}
+
+/*
+.page__content a.internal-link:not(nav a.internal-link) {
+    background-color: aqua;
+}
+*/
+
+.page__content a.external-link:not(nav a.external-link, div.backlink-box a.external-link)::after {
+    content: " ↗"
 }

assets/js/plugins/external-link-indicator.js

@@ -0,0 +1,35 @@
+class ExternalLinksHandler {
+    constructor() {
+        this.addAttributesToExternalLinks();
+    }
+
+    addAttributesToExternalLinks() {
+        // Select all anchor tags
+        const links = document.querySelectorAll('a[href]');
+
+        // Iterate over each link
+        links.forEach(link => {
+            // Check if the link is external
+            if (this.isExternalLink(link)) {
+                // Add external link class
+                link.classList.add("external-link");
+            }
+        });
+    }
+
+    isExternalLink(link) {
+        // Get the location of the current document
+        const currentLocation = window.location.hostname;
+
+        // Extract the domain from the link's href attribute
+        const linkDomain = new URL(link.href).hostname;
+
+        // Check if the link's domain is different from the current location's domain
+        return currentLocation !== linkDomain;
+    }
+}
+
+// Initialize the ExternalLinksHandler when the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", function() {
+    new ExternalLinksHandler();
+});

assets/js/plugins/internal-link-indicator.js

@@ -0,0 +1,35 @@
+class InternalLinksHandler {
+    constructor() {
+        this.addAttributesToInternalLinks();
+    }
+
+    addAttributesToInternalLinks() {
+        // Select all anchor tags
+        const links = document.querySelectorAll('a[href]');
+
+        // Iterate over each link
+        links.forEach(link => {
+            // Check if the link is internal
+            if (this.isInternalLink(link)) {
+                // Add internal link class
+                link.classList.add("internal-link");
+            }
+        });
+    }
+
+    isInternalLink(link) {
+        // Get the location of the current document
+        const currentLocation = window.location.hostname;
+
+        // Extract the domain from the link's href attribute
+        const linkDomain = new URL(link.href).hostname;
+
+        // Check if the link's domain is different from the current location's domain
+        return currentLocation === linkDomain;
+    }
+}
+
+// Initialize the InternalLinksHandler when the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", function() {
+    new InternalLinksHandler();
+});