Compare commits

...

3 Commits

Author SHA1 Message Date
Shadowfacts 42fe1d3805
Tweak line spacing 2019-11-10 22:23:07 -05:00
Shadowfacts 2159a16b94
Adjust how link markdown decorations are shown
Use a custom data attribute that omits the scheme and is truncated at
40 chars
2019-11-10 22:19:56 -05:00
Shadowfacts 4d47e32b49
Fix incorrect link in Learning Elixir post 2019-11-10 22:13:26 -05:00
3 changed files with 29 additions and 5 deletions

View File

@ -2,6 +2,7 @@ import MarkdownIt from "markdown-it";
import MarkdownItFootnote from "markdown-it-footnote"; import MarkdownItFootnote from "markdown-it-footnote";
import slugify from "@sindresorhus/slugify"; import slugify from "@sindresorhus/slugify";
import * as util from "./util"; import * as util from "./util";
import { URL } from "url";
const md = new MarkdownIt({ const md = new MarkdownIt({
highlight: util.highlight, highlight: util.highlight,
@ -13,7 +14,7 @@ md.use(MarkdownItFootnote);
// Inserts heading anchors // Inserts heading anchors
// Based on https://github.com/valeriangalliat/markdown-it-anchor // 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; const tokens = state.tokens;
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 { export function render(text: string): string {
return md.render(text); return md.render(text);
} }

View File

@ -11,7 +11,7 @@ body {
background-color: var(--content-background-color); background-color: var(--content-background-color);
font-family: $sansSerif; font-family: $sansSerif;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.6;
color: var(--ui-text-color); color: var(--ui-text-color);
} }
@ -110,7 +110,7 @@ article {
// Markdown decorations // Markdown decorations
@media (min-width: 768px) { @media (min-width: 768px) {
a::before { content: "["; } 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 { a::before, a::after {
color: var(--secondary-ui-text-color); color: var(--secondary-ui-text-color);
font-family: $monospace; font-family: $monospace;

View File

@ -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. 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. 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.