jsdoc2md / dmd

The default output template for jsdoc2md
MIT License
38 stars 49 forks source link

Changes `anchorName` to link headings by ID #76

Closed S0AndS0 closed 4 years ago

S0AndS0 commented 4 years ago

This may address jsdoc2md/jsdoc-to-markdown#122 and jsdoc2md/jsdoc-to-markdown#125

Tests with MarkDown rendering on GitHub show that, heading text is striped of most non-letter and non-number characters (underscores and hyphens seem to remain), plus letters are lowercased, leading and trailing spaces are trimmed, duplicate spaces are treated as one and, spaces are turned into hyphens...

const test_string = '(2; muc{hTi   me  @# t[h)e k3b]Oa}rd?';

const id_string = test_string.toLowerCase()
                             .replace(/[^a-z0-9_ ]/g, '')
                             .replace(/ +/g, '-');

console.log('id_string -> ' + id_string);
//> 2-muchtime-the-k3board

... above code-block should replicate the stripping that happens automatically and allow for removal of <a name="{{{anchorName}}}"></a> from the partials/all-docs/header.hbs file.

Note while show within the changes for this commit it is not suggested to merge partials/all-docs/header.hbs file changes.

Changes made to anchorName function (within the ddata.js file), reused as much code from elsewhere within the code base. And so far seems to operate correctly regardless of backticks option.

To enable this new branch in logic set id-headings to true within configurations, eg...

package.json snippet

{
  "jsdoc2md": {
    "name-format": "backticks",
    "id-headings": true
  }
}

... because, default behavior likely should be preserved for those that are depending upon the name attributes.

S0AndS0 commented 4 years ago

Dang, the .toLowerCase() isn't sticking for main class headings, and local MarkDown rendering differs from GitHub enough that linking is not consistent with live test file

Looks like GitHub prepends user-content- to id attributes and uses double hyphens between method name and return value because their MarkDown rendering detects <code> tags... I'll be back, after a recharge.


So looking closely at the source GitHub is getting clever with the heading IDs...

MarkDown

### `browser_Storage.\_setCookieItem(key, value, [days_to_live])` ⇒ <code>boolean</code>

GitHub HTML

<h3>
  <a id="user-content-browser_storage_setcookieitemkey-value-days_to_live--boolean"
     class="anchor"
     aria-hidden="true"
     href="#browser_storage_setcookieitemkey-value-days_to_live--boolean">

  <svg class="octicon octicon-link"
       viewBox="0 0 16 16"
       version="1.1"
       width="16"
       height="16"
       aria-hidden="true">
  </a>

  <code>
   browser_Storage.\_setCookieItem(key, value, [days_to_live])
  </code> ⇒ <code>
   boolean
  </code>

</h3>

... and it looks like an element is prefixed to each heading in this case with an ID of browser_storage_setcookieitemkey-value-days_to_live--boolean that the href points to.

The simplest solution would be to use backticks throughout the heading text, because Vanilla MarkDown rendering will do the codewordcode thing, where as GitHub and perhaps others will do --word cleverness when html elements are detected within heading text. Either will just strip backticks which is at least predictable without adding another configuration switch.

Digging deeper it seems the partials/shared/signature/sig-name.hbs file or what it hooks into may need some modifications to get consistency between how MarkDown is interpreted. However I cannot seem to find where the extra code elements are being added to right side of @returnSymbol; @75lb am I on the right track or is there another place I should be looking for where html elements are being added to heading text?