Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch to GFM-style heading anchors #164

Merged
merged 15 commits into from
Oct 26, 2017
Merged

Switch to GFM-style heading anchors #164

merged 15 commits into from
Oct 26, 2017

Conversation

hramos
Copy link
Contributor

@hramos hramos commented Oct 24, 2017

Switches the fade-in heading anchor from a hash to a link SVG as seen in GFM on GitHub.

Test Plan

Verified Docusaurus site.

Before:

screen shot 2017-10-24 at 10 24 56 am

After:

screen shot 2017-10-24 at 10 24 41 am

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Oct 24, 2017
Copy link
Contributor

@JoelMarcey JoelMarcey left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hramos Can you rebase this?

@hramos
Copy link
Contributor Author

hramos commented Oct 24, 2017

Done

@hramos
Copy link
Contributor Author

hramos commented Oct 26, 2017

Fixed #190 as well.

Before:

screen shot 2017-10-26 at 11 53 49 am

After:

screen shot 2017-10-26 at 11 53 28 am

md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {
return ' <a class="hash-link" href="#' + toSlug(tokens[idx-1].content) + '">#</a>' + '</h' + tokens[idx].hLevel + '>\n';
const textToken = tokens[idx+1];
return '<h' + tokens[idx].hLevel + '><a class="anchor" aria-hidden="true" id="' + toSlug(textToken.content) + '"></a><a href="#' + toSlug(textToken.content) + '" aria-hidden="true" class="hash-link" ><svg aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path 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></a>';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I used <a> so you can write <a name>, but if you're using id to get the hash, you don't need to make it a <a> anymore.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've changed it back to <a name>.

@JoelMarcey JoelMarcey merged commit 73b9a11 into master Oct 26, 2017
@JoelMarcey JoelMarcey deleted the update-anchor branch October 30, 2017 23:17
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants