doc: Add GitHub links in the localtoc

[yhwang]

Description

Add 4 GitHub links in the localtoc menu:

• view source: link to current page's source file
• edit source: edit the current page
• create doc issue: create an issue
• create project issue: create an issue

Motivation and Context

Add GitHub links for each doc page to allow users to see the source code and improve the documentation quality if they
see any typo or incorrect message.

Impact

N/A

Test Plan

N/A

Contributor checklist

• Please make sure your submission complies with our development, formatting, commit message, and attribution guidelines.
• PR description addresses the issue accurately and concisely. If the change is non-trivial, a GitHub Issue is referenced.
• Documented new properties (with its default value), SQL syntax, functions, or other functionality.
• If release notes are required, they follow the release notes guidelines.
• Adequate tests were added if applicable.
• CI passed.

Release Notes

Please follow release notes guidelines and fill in the release notes below.

== NO RELEASE NOTE ==

[yhwang]

Here is a screenshot:

Any suggestion for the UX is welcome!

[tdcmeehan]

I am wondering if these links could be more inconspicuous? Perhaps as widgets on the top right corner?

[yhwang]

@tdcmeehan Thanks for the suggestion

I used Hugo with google/docsy theme for my previous project. So I directly adopt the layout from there. This is its screenshot:

I didn't apply the icon before the menu since I can't find the way to use FontAwesome icons with Sphinx, except directly using SVG (This is another thing I want to figure out.). But I do see fontawesome somewhere in the HTML outputs.

Let me try to describe your suggestion more visually:
The widget would show up at the top right corner and might be just an icon. When the cursor moves over the icon, a menu will pop up with the 4 links, view source, edit source, doc issue, and project issue.

does this match what you imagine?

Need to get familiar with the HTML theme (sphinx_material) more to see how can I do that.

[yhwang]

one question, if I use a different CSS style for those links to differentiate those links from the TOC menu, would that work for you? Probably this one is an easier tweak.

[tdcmeehan]

This screenshot looks good. I suppose the core of my feedback was I thought there should be visual differentiation between the new items in the right hand side menu, which relate to the underlying source, and the sections in the document itself. In your screenshot above, it's sufficiently differentiated, because the source code related items have icons, and the font is slightly differentiate--perhaps we could mimic that approach.

[tdcmeehan]

one question, if I use a different CSS style for those links to differentiate those links from the TOC menu, would that work for you? Probably this one is an easier tweak.

We posted at the same time--yes, exactly. :)

[yhwang]

Sure thing. I definitely can add icons and change the CSS style. Let me figure out how to use FontAwesome icon with Sphinx. I tried to embed icons using SVG and I know it works. However, if FontAwesome is loaded already, using class id is more efficient. Working on it!

[yhwang]

@tdcmeehan
Here is the new look:

I figured out how to use Font-Awesome now :-)
Here are the changes:

• add Font-Awesome
• use icons before the GitHub links
• add the Contents title for the TOC. It was there before, but the text Contents was missing
• gray out the TOC menu

[steveburnett]

Like the font used in the template, I think this is awesome. This is a great feature to help people contribute to the documentation.

[yhwang]

Thanks for the review. I squashed commits. I am waiting for the GH workflow jobs, then I will merge the PR afterward.

Hope people will use those GitHub links to create documentation issues/PRs when they are available on the official website.