forked from shadowfacts/shadowfacts.net
Use header Markdown decorations as anchor links
This commit is contained in:
parent
5830102ded
commit
0329610845
|
@ -1,4 +1,5 @@
|
|||
import MarkdownIt from "markdown-it";
|
||||
import slugify from "@sindresorhus/slugify";
|
||||
import * as util from "./util";
|
||||
|
||||
const md = new MarkdownIt({
|
||||
|
@ -7,6 +8,42 @@ const md = new MarkdownIt({
|
|||
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 {
|
||||
return md.render(text);
|
||||
}
|
|
@ -43,14 +43,6 @@ article {
|
|||
margin-bottom: 75px;
|
||||
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) {
|
||||
a::before { content: "["; }
|
||||
a::after { content: "](" attr(href) ")"; word-wrap: break-word; }
|
||||
|
@ -102,6 +94,13 @@ article {
|
|||
margin-bottom: 0;
|
||||
font-size: 1.8rem;
|
||||
|
||||
&::before {
|
||||
content: "#";
|
||||
font-family: $monospace;
|
||||
color: var(--accent-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> a {
|
||||
color: var(--content-text-color);
|
||||
text-decoration: none;
|
||||
|
@ -132,6 +131,14 @@ article {
|
|||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-family: $sansSerif;
|
||||
|
||||
.header-anchor {
|
||||
font-family: $monospace;
|
||||
color: var(--accent-color);
|
||||
user-select: none;
|
||||
|
||||
&::before, &::after { content: ""; }
|
||||
}
|
||||
}
|
||||
|
||||
h1 { font-size: 1.8rem; }
|
||||
|
|
|
@ -6,7 +6,11 @@ metadata.layout = "default.html.ejs"
|
|||
<div class="main">
|
||||
<% for (const post of posts) { %>
|
||||
<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 }) %>
|
||||
<div class="article-content" itemprop="description">
|
||||
<%- post.metadata.excerpt %>
|
||||
|
|
|
@ -4,7 +4,9 @@ metadata.layout = "default.html.ejs"
|
|||
|
||||
<article itemprop="blogPost" itemscope itemtype="https://schema.org/BlogPosting">
|
||||
<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 }) %>
|
||||
<div class="article-content" itemprop="articleBody">
|
||||
<%- content %>
|
||||
|
|
|
@ -10,7 +10,11 @@ metadata.layout = "default.html.ejs";
|
|||
|
||||
<% for (const tutorial of tutorials) { %>
|
||||
<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 }) %>
|
||||
</article>
|
||||
<% } %>
|
||||
|
|
|
@ -5,7 +5,11 @@ metadata.layout = "default.html.ejs"
|
|||
<div class="main">
|
||||
<% for (const series of allSeries) { %>
|
||||
<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">
|
||||
last updated on
|
||||
<span>
|
||||
|
|
|
@ -1,9 +1,9 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
/* 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'. */
|
||||
"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. */
|
||||
// "checkJs": true, /* Report errors in .js files. */
|
||||
// "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
|
||||
|
|
Loading…
Reference in New Issue