Tweak line spacing

Use a custom data attribute that omits the scheme and is truncated at
40 chars

lib/markdown.ts

@@ -2,6 +2,7 @@ import MarkdownIt from "markdown-it";
 import MarkdownItFootnote from "markdown-it-footnote";
 import slugify from "@sindresorhus/slugify";
 import * as util from "./util";
+import { URL } from "url";
 
 const md = new MarkdownIt({
 	highlight: util.highlight,
@@ -13,7 +14,7 @@ md.use(MarkdownItFootnote);
 
 // Inserts heading anchors
 // Based on https://github.com/valeriangalliat/markdown-it-anchor
-md.core.ruler.push("anchor", (state) => {
+md.core.ruler.push("header anchor", (state) => {
 	const tokens = state.tokens;
 
 	tokens
@@ -48,6 +49,29 @@ md.core.ruler.push("anchor", (state) => {
 		});
 });
 
+// Adds data-link attributes to anchor elements
+const defaultRenderer = md.renderer.rules.link_open || function(tokens, index, options, env, self) {
+	return self.renderToken(tokens, index, options);
+};
+md.renderer.rules.link_open = function(tokens, index, options, env, self) {
+	const href = tokens[index].attrGet("href");
+	if (href != null) {
+		try {
+			const parsed = new URL(href);
+			const formattedPathname = parsed.pathname === "/" ? "" : parsed.pathname;//.length > 20 ? parsed.pathname.substr(0, 20) + "..." : parsed.pathname;
+			let formatted = `${parsed.hostname}${formattedPathname}`;
+			if (formatted.length > 40) {
+				formatted = formatted.substr(0, 40) + "...";
+			}
+			tokens[index].attrPush(["data-link", formatted]);
+		} catch (e) {
+			// URL constructor throws on invalid URLs (such as ones that only contain a fragment), so swallow those exceptions
+		}
+	}
+
+	return defaultRenderer(tokens, index, options, env, self);
+};
+
 export function render(text: string): string {
 	return md.render(text);
 }

site/css/main.scss

@@ -11,7 +11,7 @@ body {
 	background-color: var(--content-background-color);
 	font-family: $sansSerif;
 	font-size: 16px;
-	line-height: 1.5;
+	line-height: 1.6;
 	color: var(--ui-text-color);
 }
 
@@ -110,7 +110,7 @@ article {
 		// Markdown decorations
 		@media (min-width: 768px) {
 			a::before { content: "["; }
-			a::after { content: "](" attr(href) ")"; word-wrap: break-word; }
+			a::after { content: "](" attr(data-link) ")"; word-wrap: break-word; }
 			a::before, a::after {
 				color: var(--secondary-ui-text-color);
 				font-family: $monospace;

site/posts/2019-10-10-learning-elixir.md

@@ -15,7 +15,7 @@ I strongly believe that the best way to learn a programming language (especially
 
 By this point, it was almost December, so I decided I was going to try to do the [Advent of Code](https://adventofcode) problems only using Elixir. These challenges were more difficult than the Exercism ones, but they provided the same benefit of letting me get experience actually writing Elixir and solving problems with it an isolated context, without a whole bunch of moving parts.
 
-I knew what I ultimately wanted to do with Elixir was build web apps, so after that I went through the official [Phoenix Guide](https://exercism.io/tracks/elixir) which explains the overall architecture of the Phoenix framework and shows you how a bunch of common patterns and techniques for building webapps with it. 
+I knew what I ultimately wanted to do with Elixir was build web apps, so after that I went through the official [Phoenix Guide](https://hexdocs.pm/phoenix/overview.html) which explains the overall architecture of the Phoenix framework and shows you how a bunch of common patterns and techniques for building webapps with it. 
 
 Lastly, and most importantly, I actually started building projects using Elixir. The first one I started was [frenzy](https://git.shadowfacts.net/shadowfacts/frenzy), an RSS aggregator I built using Phoenix and Ecto. Originally, the project was a couple hundred lines of shoddily written JS. I wrote it even before I started learning Elixir, inteding it to be a stopgap. As I was learning Elixir, I knew this project was what it was building up to, so as read things and did programming exercises, I noticed things that I thought would become useful once I got around to rewriting frenzy in Elixir. 
 
@@ -33,4 +33,4 @@ The reason I find this makes such a big difference to the way I code is that let
 
 Compared to something like iOS app development, this is a godsend. Even in small projects where incremental compiles only take a few seconds, the iteration loop is much slower. My usual development cycle goes something like this: 1) make a change, 2) hit build and run, 3) switch to my browser to glance at social media, 4) 30 seconds later switch to the Simulator and hope it's finished launching. With Elixir projects, I'm generally just switching back and forth between my editor and the terminal and/or web browser to test whatever I'm working on. There are no intermediate steps. When I make a change, there's no waiting for an app to launch, or for a database connection to be established, or for a network request to be made, or for config files to be read, or for anything else. Generally, it takes me more time to switch windows and type `recompile` than it does for the recompilation to actually take place and the change to take effect.
 
-Elixir is a language that I've come to find incredibly valuable. It's very powerful and in the areas where it excels, it's unique characteristics make it an extremely valuable tool. If you're thinking about dipping your toes into functional programming, or want to try something new, or even just spend a lot of time doing back end web development,I encourage you to try Elixir.
+Elixir is a language that I've come to find incredibly valuable. It's very powerful and in the areas where it excels, it's unique characteristics make it an extremely valuable tool. If you're thinking about dipping your toes into functional programming, or want to try something new, or even just spend a lot of time doing back end web development,I encourage you to try Elixir.