In order to implement #1123 , we first need a way to navigate to any piece of content on the site. We can accomplish this by adding id attributes to header tags, for example:
Where headers are unavailable, we can use anchors (<a name="some-section"></a>) to do the same thing.
Tasks for completing this:
[x] Create a deep link to every example on each component page (see example-viewer.component.html)
[x] Create a deep link to every tab in the example (TS, HTML, CSS, etc)
This could be a stinker
[x] Create a deep link for every header rendered from Markdown
Currently we are using markdown-it for rendering Markdown to HTML, and it does not support rendering ids or anchors in headers. Alternatively, the marked package supports GFM and rendering ids in headers, so we should explore replacing the markdown-it library with marked (https://github.com/markedjs/marked) -
[x] Create a deep link for headers within the generated API documentation - already done :)
~We use dgeni (https://github.com/angular/dgeni) for generating our API documentation from source. It may be tricky, but we need to figure out how to get the proper headings and/or anchors inserted into the generated docs. If this isn't possible, we may need to consider an alternative code documentation generator (like TypeDoc or something).~
Luckily, dgeni already does this for us!
[x] Fix the CSS for the Cashmere site to scroll under the navbar, instead of to the right of the navbar. Otherwise the header gets cut off by the navbar when you go to the hash link.
In order to implement #1123 , we first need a way to navigate to any piece of content on the site. We can accomplish this by adding
id
attributes to header tags, for example:This will allow navigating to the header using the hash
#some-header
at the end of the URL. You can play around with this idea here: https://stackblitz.com/edit/angular-heading-hash-links?file=src/app/app.component.htmlWhere headers are unavailable, we can use anchors (
<a name="some-section"></a>
) to do the same thing.Tasks for completing this:
example-viewer.component.html
)markdown-it
for rendering Markdown to HTML, and it does not support rendering ids or anchors in headers. Alternatively, themarked
package supports GFM and rendering ids in headers, so we should explore replacing themarkdown-it
library withmarked
(https://github.com/markedjs/marked) -