Merge branch 'blog-anchors-2609'

sveltejs · May 4, 2019 · 59bf8f8 · 59bf8f8
2 parents 5a536aa + 537e873
commit 59bf8f8
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/site/src/routes/blog/[slug].svelte b/site/src/routes/blog/[slug].svelte
@@ -133,6 +133,48 @@
 		border: 0.8rem solid var(--second);
 	}
 
+	/* headers anchors */
+
+	.post :global(.offset-anchor) {
+		position: relative;
+		display: block;
+		top: calc(-1 * (var(--nav-h) + var(--top-offset) - 1rem));
+		width: 0;
+		height: 0;
+	}
+
+	.post :global(.anchor) {
+		position: absolute;
+		display: block;
+		background: url(/icons/link.svg) 0 50% no-repeat;
+		background-size: 1em 1em;
+		width: 1.4em;
+		height: 1em;
+		top: calc((var(--h3) - 24px) / 2);
+		left: -1.4em;
+		opacity: 0;
+		transition: opacity 0.2s;
+		border: none !important; /* TODO get rid of linkify */
+	}
+
+	.post :global(h2):hover :global(.anchor),
+	.post :global(h3):hover :global(.anchor),
+	.post :global(h4):hover :global(.anchor),
+	.post :global(h5):hover :global(.anchor),
+	.post :global(h6):hover :global(.anchor) {
+		opacity: 1;
+	}
+
+
+	@media (max-width: 768px) {
+		.post :global(.anchor) {
+			transform: scale(0.6);
+			opacity: 1;
+			top: calc((1em - 0.6 * 24px) / 2);
+			left: -1.0em;
+		}
+	}
+
 	@media (min-width: 910px) {
 		.post :global(.max) {
 			width: calc(100vw - 2 * var(--side-nav));
@@ -164,4 +206,4 @@
 			height: 640px;
 		}
 	} */
-</style>
+</style>
diff --git a/site/src/routes/blog/_posts.js b/site/src/routes/blog/_posts.js
@@ -2,9 +2,13 @@ import fs from 'fs';
 import path from 'path';
 import { extract_frontmatter, langs, link_renderer } from '@sveltejs/site-kit/utils/markdown.js';
 import marked from 'marked';
+import { makeSlugProcessor } from '../../utils/slug';
+import { SLUG_PRESERVE_UNICODE } from '../../../config';
 import PrismJS from 'prismjs';
 import 'prismjs/components/prism-bash';
 
+const makeSlug = makeSlugProcessor(SLUG_PRESERVE_UNICODE);
+
 export default function get_posts() {
 	return fs
 		.readdirSync('content/blog')
@@ -39,6 +43,17 @@ export default function get_posts() {
 				return `<pre class='language-${plang}'><code>${highlighted}</code></pre>`;
 			};
 
+			renderer.heading = (text, level, rawtext) => {
+				const fragment = makeSlug(rawtext);
+
+				return `
+					<h${level}>
+						<span id="${fragment}" class="offset-anchor"></span>
+						<a href="blog/${slug}#${fragment}" class="anchor" aria-hidden="true"></a>
+						${text}
+					</h${level}>`;
+			};
+
 			const html = marked(
 				content.replace(/^\t+/gm, match => match.split('\t').join('  ')),
 				{ renderer }

diff --git a/site/src/utils/slug.js b/site/src/utils/slug.js
@@ -55,10 +55,16 @@ export const unicodeSafeProcessor = string =>
 	}, [])
 	.join(SLUG_SEPARATOR);
 
+/* processor */
+
+export const makeSlugProcessor = (preserveUnicode = false) => preserveUnicode
+	? unicodeSafeProcessor
+	: urlsafeSlugProcessor;
+
 /* session processor */
 
 export const makeSessionSlugProcessor = (preserveUnicode = false) => {
-	const processor = preserveUnicode ? unicodeSafeProcessor : urlsafeSlugProcessor;
+	const processor = makeSlugProcessor(preserveUnicode);
 	const seen = new Set();
 
 	return string => {