Skip to content

Commit 3a5654a

Browse files
committed
Add id attributes to heading elements
This changes the generated HTML to include `id` attributes on any heading (e.g. `h3`) elements. Currently, `bit-docs-html-toc` will add `id` attributes when it parses the content and creates the TOC links. This means that JS has to be downloaded, parsed, and run before `bit-docs-html-toc` runs its code, and _then_ there has to be more JS to scroll down to the right fragment. This takes JS completely out of the equation by including the `id` attributes in the source HTML, so JS doesn’t need to load and `bit-docs-html-toc` isn’t required to make fragment URLs work either. Part of https://bitovi.atlassian.net/browse/LD-203
1 parent 8406745 commit 3a5654a

File tree

3 files changed

+28
-2
lines changed

3 files changed

+28
-2
lines changed

html_test.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ var readFile = Q.denodeify(fs.readFile);
1010
var bitDocsHTML = require("./bit-docs");
1111

1212
require("./build/build_test");
13+
require("./stmd_test");
1314

1415
describe("bit-docs-generate-html", function(){
1516
beforeEach(function(){

stmd.js

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1476,8 +1476,12 @@ var renderBlock = function(block, in_tight_list) {
14761476
this.innersep);
14771477
case 'ATXHeader':
14781478
case 'SetextHeader':
1479+
var rendered = this.renderInlines(block.inline_content);
14791480
tag = 'h' + block.level;
1480-
return inTags(tag, [], this.renderInlines(block.inline_content));
1481+
attr = [
1482+
['id', makeHeadingId(rendered)]
1483+
];
1484+
return inTags(tag, attr, rendered);
14811485
case 'IndentedCode':
14821486
return inTags('pre', [],
14831487
inTags('code', [], this.escape(block.string_content)));
@@ -1544,4 +1548,11 @@ function HtmlRenderer(){
15441548
exports.DocParser = DocParser;
15451549
exports.HtmlRenderer = HtmlRenderer;
15461550

1547-
})(typeof exports === 'undefined' ? this.stmd = {} : exports);
1551+
})(typeof exports === 'undefined' ? this.stmd = {} : exports);
1552+
1553+
function makeHeadingId(text) {
1554+
return (text || "")
1555+
.replace(/\s/g, "-") // replace spaces with dashes
1556+
.replace(/[^\w\-]/g, "") // remove punctuation
1557+
.toLowerCase();
1558+
}

stmd_test.js

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var assert = require('assert');
2+
3+
var stmd = require("./stmd");
4+
5+
describe("bit-docs-generate-html/stmd", function () {
6+
it("adds id attributes to heading elements", function () {
7+
var parser = new stmd.DocParser();
8+
var renderer = new stmd.HtmlRenderer();
9+
var markdown = "# Hello world"
10+
var rendered = renderer.render(parser.parse(markdown));
11+
var expected = '<h1 id="hello-world">Hello world</h1>';
12+
assert.equal(rendered.trim(), expected, "id attributes are present");
13+
});
14+
});

0 commit comments

Comments
 (0)