-
Notifications
You must be signed in to change notification settings - Fork 7.6k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1636 from smikitky/remark-autolink-custom-id
Support Custom-ID Markdown Syntax
- Loading branch information
Showing
7 changed files
with
190 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| let offsetY = 0; | ||
|
|
||
| const getTargetOffset = hash => { | ||
| const id = window.decodeURI(hash.replace(`#`, ``)); | ||
| if (id !== ``) { | ||
| const element = document.getElementById(id); | ||
| if (element) { | ||
| return element.offsetTop - offsetY; | ||
| } | ||
| } | ||
| return null; | ||
| }; | ||
|
|
||
| exports.onInitialClientRender = (_, pluginOptions) => { | ||
| if (pluginOptions.offsetY) { | ||
| offsetY = pluginOptions.offsetY; | ||
| } | ||
|
|
||
| requestAnimationFrame(() => { | ||
| const offset = getTargetOffset(window.location.hash); | ||
| if (offset !== null) { | ||
| window.scrollTo(0, offset); | ||
| } | ||
| }); | ||
| }; | ||
|
|
||
| exports.shouldUpdateScroll = ({routerProps: {location}}) => { | ||
| const offset = getTargetOffset(location.hash); | ||
| return offset !== null ? [0, offset] : true; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| const React = require(`react`); | ||
|
|
||
| const pluginDefaults = { | ||
| className: `anchor`, | ||
| icon: true, | ||
| offsetY: 0, | ||
| }; | ||
|
|
||
| exports.onRenderBody = ({setHeadComponents}, pluginOptions) => { | ||
| const {className, icon, offsetY} = Object.assign( | ||
| pluginDefaults, | ||
| pluginOptions, | ||
| ); | ||
|
|
||
| const styles = ` | ||
| .${className} { | ||
| float: left; | ||
| padding-right: 4px; | ||
| margin-left: -20px; | ||
| } | ||
| h1 .${className} svg, | ||
| h2 .${className} svg, | ||
| h3 .${className} svg, | ||
| h4 .${className} svg, | ||
| h5 .${className} svg, | ||
| h6 .${className} svg { | ||
| visibility: hidden; | ||
| } | ||
| h1:hover .${className} svg, | ||
| h2:hover .${className} svg, | ||
| h3:hover .${className} svg, | ||
| h4:hover .${className} svg, | ||
| h5:hover .${className} svg, | ||
| h6:hover .${className} svg, | ||
| h1 .${className}:focus svg, | ||
| h2 .${className}:focus svg, | ||
| h3 .${className}:focus svg, | ||
| h4 .${className}:focus svg, | ||
| h5 .${className}:focus svg, | ||
| h6 .${className}:focus svg { | ||
| visibility: visible; | ||
| } | ||
| `; | ||
|
|
||
| const script = ` | ||
| document.addEventListener("DOMContentLoaded", function(event) { | ||
| var hash = window.decodeURI(location.hash.replace('#', '')) | ||
| if (hash !== '') { | ||
| var element = document.getElementById(hash) | ||
| if (element) { | ||
| var offset = element.offsetTop | ||
| // Wait for the browser to finish rendering before scrolling. | ||
| setTimeout((function() { | ||
| window.scrollTo(0, offset - ${offsetY}) | ||
| }), 0) | ||
| } | ||
| } | ||
| }) | ||
| `; | ||
|
|
||
| const style = icon ? ( | ||
| <style key="gatsby-remark-header-custom-ids-style" type="text/css"> | ||
| {styles} | ||
| </style> | ||
| ) : ( | ||
| undefined | ||
| ); | ||
|
|
||
| return setHeadComponents([ | ||
| style, | ||
| <script | ||
| key="gatsby-remark-header-custom-ids-script" | ||
| dangerouslySetInnerHTML={{__html: script}} | ||
| />, | ||
| ]); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| /*! | ||
| * Based on 'gatsby-remark-autolink-headers' | ||
| * Original Author: Kyle Mathews <[email protected]> | ||
| * Copyright (c) 2015 Gatsbyjs | ||
| */ | ||
|
|
||
| const toString = require('mdast-util-to-string'); | ||
| const visit = require('unist-util-visit'); | ||
| const slugs = require('github-slugger')(); | ||
|
|
||
| function patch(context, key, value) { | ||
| if (!context[key]) { | ||
| context[key] = value; | ||
| } | ||
|
|
||
| return context[key]; | ||
| } | ||
|
|
||
| const svgIcon = `<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>`; | ||
|
|
||
| module.exports = ( | ||
| {markdownAST}, | ||
| {icon = svgIcon, className = `anchor`, maintainCase = false}, | ||
| ) => { | ||
| slugs.reset(); | ||
|
|
||
| visit(markdownAST, 'heading', node => { | ||
| // Support custom-id syntax. | ||
| const rawHeader = toString(node); | ||
| const match = /^.+(\s*\{#([a-z0-9\-_]+?)\}\s*)$/.exec(rawHeader); | ||
| const id = match ? match[2] : slugs.slug(rawHeader, maintainCase); | ||
| if (match) { | ||
| // Remove the custom ID part from the text node. | ||
| const lastNode = node.children[node.children.length - 1]; | ||
| lastNode.value = lastNode.value.replace(match[1], ''); | ||
| } | ||
|
|
||
| const data = patch(node, 'data', {}); | ||
|
|
||
| patch(data, 'id', id); | ||
| patch(data, 'htmlAttributes', {}); | ||
| patch(data, 'hProperties', {}); | ||
| patch(data.htmlAttributes, 'id', id); | ||
| patch(data.hProperties, 'id', id); | ||
|
|
||
| if (icon !== false) { | ||
| node.children.unshift({ | ||
| type: 'link', | ||
| url: `#${id}`, | ||
| title: null, | ||
| data: { | ||
| hProperties: { | ||
| 'aria-hidden': true, | ||
| class: className, | ||
| }, | ||
| hChildren: [ | ||
| { | ||
| type: 'raw', | ||
| // The Octicon link icon is the default. But users can set their own icon via the "icon" option. | ||
| value: icon, | ||
| }, | ||
| ], | ||
| }, | ||
| }); | ||
| } | ||
| }); | ||
|
|
||
| return markdownAST; | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| { | ||
| "name": "gatsby-remark-header-custom-ids", | ||
| "version": "0.0.1" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters