Add anchor links to all headers

[diazruy]

To allow easy linking at all levels and not just from index

Summary

Updated the markdown renderer for the guides to wrap all headers (h3-h6) in an anchor tag to allow easy linking within the guide and not just from the sidebar index.

Other Information

Updated the main.css as to maintain existing look and feel, making the headings only underline when hovered on.

[rails-bot]

Thanks for the pull request, and welcome! The Rails team is excited to review your changes, and you should hear from @schneems (or someone else) soon.

If any changes to this PR are deemed necessary, please add them as extra commits. This ensures that the reviewer can see what has changed since they last reviewed the code. Due to the way GitHub handles out-of-date commits, this should also make it reasonably obvious what issues have or haven't been addressed. Large or tricky changes may require several passes of review and changes.

This repository is being automatically checked for code quality issues using Code Climate. You can see results for this analysis in the PR status below. Newly introduced issues should be fixed before a Pull Request is considered ready to review.

Please see the contribution instructions for more information.

[matthewd]

Thanks! Even the ones in the ToC can be annoying to get a link for; I think this is a great improvement.

[claudiob]

This is how the guides look after this PR:

I am a little confused by seeing all those links which simply link to themselves.

@diazruy @matthewd was that the intended outcome?

The links from the sidebar were already working since the anchor was already matched by the ID attribute of the surrounding header, as in:

<h3 id="templates-partials-and-layouts">
  <a class="anchorlink" href="#templates-partials-and-layouts">3 Templates, Partials and Layouts</a>
</h3>

[matthewd]

Yes -- for the same reason this GitHub page contains a bunch of links that link to themselves.

[diazruy]

@claudiob now you can right click on any header in the docs, copy the link and paste it for someone else to go directly to a particular section in the documentation. The sidebar links only include 2 levels, so you can't go to a more granular level. Also, if you're already reading a particular section and you want to link to it, you would have to scroll to the top, find the link in the sidebar and then copy it.

[claudiob]

How do you feel about adding color: #333 to #mainCol a.anchorlink?

Then the headers would still be links, and would still get underlined on hover, but the actual links would become more prominent:

[matthewd]

👍🏻