Skip to content
This repository was archived by the owner on Oct 13, 2022. It is now read-only.

Add anchor links to h2, h3 #46

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add anchor links to h2, h3 #46

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 11 additions & 12 deletions src/routes/guide/_sections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,26 +52,25 @@ export default () => fs
}
);

const html = marked(tweaked_content)
const marked_html = marked(tweaked_content)
.replace(/<p>@@(\d+)<\/p>/g, (match, id) => {
return `<pre><code>${highlighted[id]}</code></pre>`;
})
.replace(/^\t+/gm, match => match.split('\t').join(' '));


const subsections = [];
const pattern = /<h3 id="(.+?)">(.+?)<\/h3>/g;
let match;

while ((match = pattern.exec(html))) {
const slug = match[1];
// const title = unescape(
// match[2].replace(/<\/?code>/g, '').replace(/\.(\w+)\W.*/, '.$1')
// );
const title = unescape(match[2]);

subsections.push({ slug, title });
}

const html = marked_html.replace(
pattern,
(match, slug, title) => {
title = unescape(title);
subsections.push({ slug, title });
return `<h3 id="${slug}"><a class="anchor" href="guide#${slug}"><svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><use href="#anchor-icon" /></svg></a>${title}</h3>`
}
);

return {
html,
metadata,
Expand Down
30 changes: 28 additions & 2 deletions src/routes/guide/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
{#each sections as section}
<section id='{section.slug}'>
<h2>
<a class='anchor' href='guide#{section.slug}' aria-hidden='true'><svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><use href="#anchor-icon" /></svg></a>
{section.metadata.title}
<small><a href='https://github.com/sveltejs/sapper.svelte.technology/edit/master/content/guide/{section.file}'>edit this section</a></small>
</h2>
Expand All @@ -19,7 +20,15 @@ <h2>
<GuideContents ref:contents/>
</div>

<svg id="anchor-svg" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
<path id="anchor-icon" fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
</svg>

<style>
#anchor-svg {
display: none;
}

.sidebar {
position: fixed;
left: 0;
Expand All @@ -42,7 +51,10 @@ <h2>
margin: -3rem 0 1rem 0;
font-size: 2.4em;
font-weight: 400;
pointer-events: none;
}

h2:hover .anchor {
opacity: 1;
}

small {
Expand All @@ -66,7 +78,10 @@ <h2>
font-size: 1.2em;
font-weight: 800;
margin: -3em 0 0 0;
pointer-events: none;
}

section :global(h3:hover) :global(.anchor) {
opacity: 1;
}

section :global(p) {
Expand All @@ -81,6 +96,17 @@ <h2>
border-bottom: 1px solid #e3d9d9;
}

section :global(.anchor) {
opacity: 0;
transition: opacity .2s;
float: left;
padding-right: 6px;
margin-left: -20px;
line-height: 1;
text-decoration: none;
border: none;
}

section :global(strong) {
font-weight: 700;
}
Expand Down