[doc][mkdocs] Add edit button to documentation

[reidliu41]

Essential Elements of an Effective PR Description Checklist

• The purpose of the PR, such as "Fix some issue (link existing issues this PR will resolve)".
• The test plan, such as providing test command.
• The test results, such as pasting the results comparison before and after, or e2e results
• (Optional) The necessary documentation update, such as updating supported_models.md and examples for a new model.

Purpose

• add doc buttons

This adds a “Suggest edit on GitHub” and “Question? Give us feedback” button to the documentation.

These additions make it easier for users to propose improvements or report issues directly on GitHub
when they have suggestions or spot mistakes in the docs.

Test Plan

Test Result

(Optional) Documentation Update

[github-actions]

👋 Hi! Thank you for contributing to the vLLM project.

💬 Join our developer Slack at https://slack.vllm.ai to discuss your PR in #pr-reviews, coordinate on features in #feat- channels, or join special interest groups in #sig- channels.

Just a reminder: PRs would not trigger full CI run by default. Instead, it would only run fastcheck CI which starts running only a small and essential subset of CI tests to quickly catch errors. You can run other CI tests on top of those by going to your fastcheck build on Buildkite UI (linked in the PR checks section) and unblock them. If you do not have permission to unblock, ping simon-mo or khluu to add you in our Buildkite org.

Once the PR is approved and ready to go, your PR reviewer(s) can run CI to test the changes comprehensively before merging.

To run CI, PR reviewers can either: Add ready label to the PR or enable auto-merge.

🚀

[gemini-code-assist]

Summary of Changes

Hello @reidliu41, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request significantly improves the interactivity and feedback mechanisms for the documentation site. By adding a dedicated feedback link that pre-populates issue details and enhancing the existing edit button's behavior and appearance, it lowers the barrier for users to contribute improvements or report problems directly from the documentation pages.

Highlights

• Enhanced Documentation Feedback: Added a new '💡 Question? Give us feedback' link below the 'Suggest edit on GitHub' button on documentation pages. This link pre-fills a GitHub issue template with the current page URL and path, making it easier for users to report issues or ask questions about specific documentation sections.
• Improved Edit Button Behavior and Styling: Modified the existing 'Suggest edit on GitHub' button to open in a new tab (target="_blank", rel="noopener") and customized its appearance using CSS to replace the default icon with custom text and an emoji.
• MkDocs Configuration and Scripting: Updated the mkdocs.yaml configuration to enable the built-in edit feature, set the correct edit_uri, and include a new JavaScript file (feedback.js) responsible for adding the feedback link and modifying the edit button.
• Conditional Visibility: Added CSS rules to hide the 'Suggest edit on GitHub' button on generated documentation pages, specifically those under docs/examples/, where direct edits might not be appropriate.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in issue comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configureGemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request introduces edit and feedback buttons to the documentation, enhancing user interaction. The JavaScript and CSS changes implement the desired functionality. The review suggests consolidating the JavaScript event listeners and refining the CSS selectors for better code maintainability and styling robustness.

[reidliu41]

@DarkLight1337 could you please help to take a look if you have time? thanks

[DarkLight1337]

I think the links are a bit intrusive, especially for the home page. I would only include the edit icon. The "question" link is somewhat redundant with the Ask AI button

[reidliu41]

thanks for your suggestion, remove it and use simple word to make it clean

[DarkLight1337]

I think the icon/text size can be a bit larger to be more consistent with the main text

[reidliu41]

[reidliu41]

update one, feel free to take a look

[DarkLight1337]

Hmm, actually I just found https://squidfunk.github.io/mkdocs-material/setup/adding-a-git-repository/#code-actions that provides an official way to add buttons to edit the page. Could you use that instead?

[reidliu41]

this is the default icon.. I made some adjustments..

[DarkLight1337]

Personally, I prefer the original icon + tooltip. Perhaps others like @mgoin @Isotr0py could offer their opinions as well?

[reidliu41]

I am ok with it.. and the open way? new tab or original tab?

[DarkLight1337]

I am fine with either way

[reidliu41]

[Isotr0py]

I'm fine to add edit button in either way. But I think we can still add the feedback button (💡 Give us feedback) to allow user creating document issue quickly.

[mgoin]

I like having just the icon, but okay with anything. Having the edit button is very useful

[reidliu41]

hi team, I add the feedback back, and try to keep same style with the edit icon, not sure whether ok.

[DarkLight1337]

When I highlight the feedback icons both icons light up which shouldn't be happening. Also, I think the lightbulb icon doesn't really convey the meaning of "feedback" (at least to me, that's not what I would think immediately upon seeing the icon).

[Isotr0py]

Seems moving the cursor on feedback button will highlight the edit button as well, perhaps we need to increase the space a little bit between these button? Otherwise it may mislead users

[reidliu41]

[reidliu41]

So sorry about that — 😅 I'm not a frontend expert, and I've already spent quite a bit of time just picking an icon and testing things out for this PR.
As it stands, this approach should address the previous issues.

[Isotr0py]

Look better now, thanks for your patience and iterating this PR!

[DarkLight1337]

I prefer the links to be side by side instead of being arranged vertically

[reidliu41]

sorry , I already tried my best.

[DarkLight1337]

Just a minor thing left, LGTM and thanks for working hard on this!

[reidliu41]

Thank you so much for you feedback to make it better...

[gemini-code-assist]

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

[gemini-code-assist]

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!

[gemini-code-assist]

Warning

You have reached your daily quota limit. Please wait up to 24 hours and I will start processing your requests again!