3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-04-29 10:17:55 +02:00
Code Issues Projects Releases Packages Wiki Activity

use id attribute instead of name for in page anchors and remove redundant anchors (#449)

Browse source
This commit is contained in:
Ronen Amiel 2018-03-08 00:25:48 +02:00 • committed by Joel Marcey
parent 8c2145585c
commit c800870fef
4 changed files with 8 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
admin/extending-remarkable.md
View file

@ -65,14 +65,14 @@ md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {
That's pretty straightforward: whenever these tokens are found, we render a `<hN>` or `</hN>` HTML tag, where N is the `hLevel` for this heading. That would result in `<h3>Hi there</h3>` being output. But what we want is something closer to this:
```
<h3><a class="anchor" name="hi-there"></a>Hi there <a class="hash-link" href="#hi-there">#</a></h3>
<h3><a class="anchor" id="hi-there"></a>Hi there <a class="hash-link" href="#hi-there">#</a></h3>
```
In that case, we need to override our heading rules like so:
```
md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) {
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" name="' + toSlug(tokens[idx+1].content) + '"></a>';
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" id="' + toSlug(tokens[idx+1].content) + '"></a>';
};
md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {
@ -89,7 +89,7 @@ We now need to tell Remarkable to use our extension. We can wrap our rules in a
```
function anchors(md) {
md.renderer.rules.heading_open = function(tokens, idx /*, options, env */) {
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" name="' + toSlug(tokens[idx+1].content) + '"></a>';
return '<h' + tokens[idx].hLevel + '>' + '<a class="anchor" id="' + toSlug(tokens[idx+1].content) + '"></a>';
};
md.renderer.rules.heading_close = function(tokens, idx /*, options, env */) {

9
examples/versions/pages/en/versions.js
View file

@ -27,8 +27,7 @@ class Versions extends React.Component {
<h2>{siteConfig.title + ' Versions'}</h2>
</header>
<p>New versions of this project are released every so often.</p>
<a name="latest" />
<h3>Current version (Stable)</h3>
<h3 id="latest">Current version (Stable)</h3>
<table className="versions">
<tbody>
<tr>
@ -46,8 +45,7 @@ class Versions extends React.Component {
This is the version that is configured automatically when you
first install this project.
</p>
<a name="rc" />
<h3>Pre-release versions</h3>
<h3 id="rc">Pre-release versions</h3>
<table className="versions">
<tbody>
<tr>
@ -62,8 +60,7 @@ class Versions extends React.Component {
</tbody>
</table>
<p>Other text describing this section.</p>
<a name="archive" />
<h3>Past Versions</h3>
<h3 id="archive">Past Versions</h3>
<table className="versions">
<tbody>
{versions.map(

2
lib/core/Header.js
View file

@ -15,7 +15,7 @@ class Header extends React.Component {
return (
<Heading {...this.props}>
<a className="anchor" name={slug} />
<a className="anchor" id={slug} />
{this.props.children}{' '}
<a className="hash-link" href={'#' + slug}>
#

2
lib/core/renderMarkdown.js
View file

@ -20,7 +20,7 @@ function anchors(md) {
return (
'<h' +
tokens[idx].hLevel +
'><a class="anchor" aria-hidden="true" name="' +
'><a class="anchor" aria-hidden="true" id="' +
toSlug(textToken.content) +
'"></a><a href="#' +
toSlug(textToken.content) +