Use header Markdown decorations as anchor links

This commit is contained in:
Shadowfacts 2019-06-29 18:39:04 -04:00
parent 5830102ded
commit 0329610845
Signed by untrusted user: shadowfacts
GPG Key ID: 94A5AB95422746E5
7 changed files with 72 additions and 14 deletions

View File

@ -1,4 +1,5 @@
import MarkdownIt from "markdown-it"; import MarkdownIt from "markdown-it";
import slugify from "@sindresorhus/slugify";
import * as util from "./util"; import * as util from "./util";
const md = new MarkdownIt({ const md = new MarkdownIt({
@ -7,6 +8,42 @@ const md = new MarkdownIt({
typographer: true typographer: true
}); });
// Inserts heading anchors
// Based on https://github.com/valeriangalliat/markdown-it-anchor
md.core.ruler.push("anchor", (state) => {
const tokens = state.tokens;
tokens
.filter((token) => token.type === "heading_open")
.forEach((token) => {
const index = tokens.indexOf(token);
const title = tokens[index + 1]
.children
.filter((token) => token.type === "text" || token.type == "code_inline")
.reduce((acc, t) => acc + t.content, "");
let slug = token.attrGet("id") || slugify(title);
if (token.attrGet("id") == null) {
token.attrPush(["id", slug]);
}
const linkTokens = [
Object.assign(new state.Token("link_open", "a", 1), {
attrs: [
["class", "header-anchor"],
["href", "#" + slug],
["aria-hidden", "true"]
]
}),
Object.assign(new state.Token("html_block", "", 0), { content: token.markup }),
new state.Token("link_close", "a", -1),
Object.assign(new state.Token("text", "", 0), { content: " " })
];
state.tokens[index + 1].children.unshift(...linkTokens);
});
});
export function render(text: string): string { export function render(text: string): string {
return md.render(text); return md.render(text);
} }

View File

@ -43,14 +43,6 @@ article {
margin-bottom: 75px; margin-bottom: 75px;
color: var(--content-text-color); color: var(--content-text-color);
h1::before { content: "#"; }
h2::before { content: "##"; }
h3::before { content: "###"; }
h1::before, h2::before, h3::before {
font-family: $monospace;
color: var(--accent-color);
margin-right: 10px;
}
@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(href) ")"; word-wrap: break-word; }
@ -102,6 +94,13 @@ article {
margin-bottom: 0; margin-bottom: 0;
font-size: 1.8rem; font-size: 1.8rem;
&::before {
content: "#";
font-family: $monospace;
color: var(--accent-color);
user-select: none;
}
> a { > a {
color: var(--content-text-color); color: var(--content-text-color);
text-decoration: none; text-decoration: none;
@ -132,6 +131,14 @@ article {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-family: $sansSerif; font-family: $sansSerif;
.header-anchor {
font-family: $monospace;
color: var(--accent-color);
user-select: none;
&::before, &::after { content: ""; }
}
} }
h1 { font-size: 1.8rem; } h1 { font-size: 1.8rem; }

View File

@ -6,7 +6,11 @@ metadata.layout = "default.html.ejs"
<div class="main"> <div class="main">
<% for (const post of posts) { %> <% for (const post of posts) { %>
<article itemscope itemtype="https://schema.org/BlogPosting"> <article itemscope itemtype="https://schema.org/BlogPosting">
<h1 class="article-title" itemprop="headline"><a href="<%= post.metadata.permalink %>" itemprop="url mainEntityOfPage"><%= post.metadata.title %></a></h1> <h1 class="article-title" itemprop="headline">
<a href="<%= post.metadata.permalink %>" itemprop="url mainEntityOfPage">
<%= post.metadata.title %>
</a>
</h1>
<%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %> <%- include("includes/article-meta.html.ejs", { metadata: post.metadata }) %>
<div class="article-content" itemprop="description"> <div class="article-content" itemprop="description">
<%- post.metadata.excerpt %> <%- post.metadata.excerpt %>

View File

@ -4,7 +4,9 @@ metadata.layout = "default.html.ejs"
<article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting"> <article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
<meta itemprop="mainEntityOfPage" content="https://shadowfacts.net<%= metadata.permalink %>"> <meta itemprop="mainEntityOfPage" content="https://shadowfacts.net<%= metadata.permalink %>">
<h1 class="article-title" itemprop="name headline"><%= metadata.title %></h1> <h1 class="article-title" itemprop="name headline">
<%= metadata.title %>
</h1>
<%- include("../includes/article-meta.html.ejs", { metadata }) %> <%- include("../includes/article-meta.html.ejs", { metadata }) %>
<div class="article-content" itemprop="articleBody"> <div class="article-content" itemprop="articleBody">
<%- content %> <%- content %>

View File

@ -10,7 +10,11 @@ metadata.layout = "default.html.ejs";
<% for (const tutorial of tutorials) { %> <% for (const tutorial of tutorials) { %>
<article> <article>
<h2 class="article-title"><a href="<%= tutorial.metadata.permalink %>"><%= tutorial.metadata.title %></a></h2> <h2 class="article-title">
<a href="<%= tutorial.metadata.permalink %>">
<%= tutorial.metadata.title %>
</a>
</h2>
<%- include("includes/article-meta.html.ejs", { metadata: tutorial.metadata }) %> <%- include("includes/article-meta.html.ejs", { metadata: tutorial.metadata }) %>
</article> </article>
<% } %> <% } %>

View File

@ -5,7 +5,11 @@ metadata.layout = "default.html.ejs"
<div class="main"> <div class="main">
<% for (const series of allSeries) { %> <% for (const series of allSeries) { %>
<article> <article>
<h2 class="article-title"><a href="<%= series.index.metadata.permalink %>"><%= series.index.metadata.title %></a></h2> <h2 class="article-title">
<a href="<%= series.index.metadata.permalink %>">
<%= series.index.metadata.title %>
</a>
</h2>
<p class="article-meta"> <p class="article-meta">
last updated on last updated on
<span> <span>

View File

@ -1,9 +1,9 @@
{ {
"compilerOptions": { "compilerOptions": {
/* Basic Options */ /* Basic Options */
"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */ "target": "ES2015", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017','ES2018' or 'ESNEXT'. */
"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */ "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'. */
"lib": ["es6"], /* Specify library files to be included in the compilation. */ "lib": ["es6", "es7"], /* Specify library files to be included in the compilation. */
// "allowJs": true, /* Allow javascript files to be compiled. */ // "allowJs": true, /* Allow javascript files to be compiled. */
// "checkJs": true, /* Report errors in .js files. */ // "checkJs": true, /* Report errors in .js files. */
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ // "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */