Input helpers docs for 2.18.0 has a link to a 2.16 doc page that give a "Whoops! Something went wrong" error when followed

[BillyRayPreachersSon]

On the Ember 2.18.0 docs page for Input Helpers, there's a link in the Actions section that should link to a document on event names.

It currently points to https://www.emberjs.com/api/ember/2.16/classes/Component#toc_event-names.

When visited, it resolves to https://www.emberjs.com/api/ember/2.16/classes/Component?anchor=event-names&show=inherited,protected,private,deprecated&type=toc#, shows a "Whoops! Something went wrong" error on screen, and the following error in the console:

Error while processing route: project-version.classes.class.index There is no route named project-version.classes.class.tocs.toc Error: There is no route named project-version.classes.class.tocs.toc

[locks]

cc @emberjs/learning-team-managers

[BillyRayPreachersSon]

It looks like the link has now been updated to point to https://www.emberjs.com/api/ember/release/classes/Component, which no longer gives the "whoops" error.

However, it leaves the user at the top of the page rather than jumping down to the Event Names section.

Is that something that is easy to add? If they don't know to scroll down to find the relevant content, it could be confusing.

[esbanarango]

@BillyRayPreachersSon That's right! We should add a Documentation label here.

The root of this issue is that we're missing anchor links for all the titles on the generated API docs.

[pixelhandler]

@emberjs/learning-team-managers see above comment, looks like we need an anchor

[alexeykostevich]

@locks , I'm looking for a good first issue to start with Ember, so please let me know if my contribution could be helpful here.

Please, let me share some my findings.

Incorrect Link

The original issue with an incorrect link (navigating to Whoops! Something went wrong) is not reproducible anymore. Currently, the link works well in both Ember 2.x and 3.x.

Missing Anchors in API Reference

The issue with missing anchors can be reproduced in all Ember versions.

Steps to reproduce:

1. Go to Ember.js Guides > Components > Built-in Components > Actions
2. Click on the "events types" link

Actual Result:
A user is navigated to the top of Class Component API Reference.

Expected Result:
A user is navigated to the *Handling Browser Events * section of Class Component API Reference.

It seems that this functionality has never been there (I've checked this in all 3 major releases). Moreover, I see only 2 places in Ember.js Guides that rely on anchors -- so, the impact of this issue is, likely, very low. Therefore, a good way forward could be closing this issue and creating a feature request in the ember-jsonapi-docs repository (if needed).

Diving into technical details, API Reference is generated from JSDoc in emberjs/ember.js sources. For example, here is where the Handling Browser Events section lives:

ember.js/packages/@ember/-internals/glimmer/lib/component.ts

Line 572 in d96d9aa

## Handling Browser Events

Then, ember-jsonapi-docs compiles Markdown to HTML using Marked.js, which does not generate anchors by default:
https://github.com/ember-learn/ember-jsonapi-docs/blob/4c35c37942d5bf82238962824490219558ff7727/lib/markup.js#L44

The good news is that Marked.js has extensibility points, which allow to integrate the anchor functionality.