docs: Update Toolbox Docsite UI

[dishaprakash]

Description

This PR changes the Toolbox Docsite UI. It adds a secondary navigation tab below the main header to facilitate better seperate the top level sections. It adds some cutom UI changes including:

• Enhanced search bar
• The version dropdown is now modified to show the current open version (will not be reproducible in the preview)
• Responsiveness across different screen sizes
• Consistent Typography
• Enhanced Discord and Medium buttons

Also contains some files on having merged with main (like serverless spark get session template new tool file)

PR Checklist

Thank you for opening a Pull Request! Before submitting your PR, there are a
few things you can do to make sure it goes smoothly:

• Make sure you reviewed
  CONTRIBUTING.md
• Make sure to open an issue as a
  bug/issue
  before writing your code! That way we can discuss the change, evaluate
  designs, and agree on the general idea
• Ensure the tests and linter pass
• Code coverage does not decrease (if any source code was changed)
• Appropriate docs were updated (if necessary)
• Make sure to add ! if this involve a breaking change

🛠️ Fixes #<issue_number_goes_here>

[gemini-code-assist]

Summary of Changes

Hello, 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 overhauls the user interface and experience of the Toolbox Docsite. The changes focus on modernizing the site's appearance, improving navigation, and ensuring a consistent and responsive design across all devices. The goal is to make the documentation more intuitive and visually appealing for users.

Highlights

• Secondary Navigation: Introduced a secondary navigation tab below the main header to better separate top-level sections, improving site structure and user flow.
• Enhanced Search Bar: Implemented an enhanced search bar with improved UI, including modal behavior and responsive adjustments for various screen sizes.
• Version Dropdown Clarity: Modified the version dropdown to clearly indicate the currently active version, providing better context for users.
• Responsive Design: Improved overall responsiveness across different screen sizes, ensuring a consistent and optimal user experience on all devices.
• Consistent Typography: Standardized typography across the docsite for a more cohesive and professional visual design.
• Button Enhancements: Enhanced the visual presentation and interactivity of Discord and Medium buttons.

Changelog

• .hugo/assets/scss/_styles_project.scss
  • Refactored and expanded global styling to include new typography, header, sidebar, dropdown, and secondary navigation styles.
• .hugo/assets/scss/components/_callouts.scss
  • Added new SCSS file to centralize styling for callout blocks (alerts, notices, admonitions).
• .hugo/assets/scss/components/_header.scss
  • Added new SCSS file to manage header, primary navigation, and secondary tabbed navigation styling.
• .hugo/assets/scss/components/_layout.scss
  • Added new SCSS file to define global layout alignment, stacking contexts, and spacing.
• .hugo/assets/scss/components/_sidebar.scss
  • Added new SCSS file to control the styling and behavior of both left and right sidebars (navigation and table of contents).
• .hugo/assets/scss/components/_typography.scss
  • Added new SCSS file to establish global typography, font imports, and base element scaling.
• .hugo/layouts/partials/hooks/body-end.html
  • Updated the script to dynamically generate and inject the secondary navigation bar based on site sections and handle active version labeling for releases.
• .hugo/layouts/partials/hooks/head-end.html
  • Changed the JavaScript file included for custom layout functionality from migration-banner.js to custom-layout.js.
• .hugo/layouts/partials/search-input.html
  • Rewrote the search input implementation to integrate Pagefind UI with enhanced styling, modal behavior, and responsive adjustments for desktop and mobile.
• .hugo/static/js/custom-layout.js
  • Added a new JavaScript file to manage custom layout interactivity, including dynamic header offset calculation, migration banner injection, breadcrumbs repositioning, dynamic tab scrolling, and dropdown active version highlighting.
• docs/en/blogs/_index.md
  • Updated the icon for the "Featured Articles" section to use the Medium brand icon.
• docs/en/integrations/serverless-spark/serverless-spark-get-session-template.md
  • Added a new documentation page detailing the serverless-spark-get-session-template tool.
• docs/en/user-guide/connect-to/client-sdks/go-sdk/tbadk/_index.md
  • Corrected a relative link within a tip notice to point to the updated Quickstart Guide.
• docs/en/user-guide/introduction/_index.md
  • Removed an outdated note regarding the previous naming of the solution.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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 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. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

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 configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[github-actions]

Link Resolution Note

Local links and directory changes work differently on GitHub than on the docsite. You must ensure fixes pass the GitHub check and also work with hugo server.
See Link Checking and Fixing with Lychee for more details.

Summary

Status	Count
🔍 Total	1037
✅ Successful	770
⏳ Timeouts	0
👻 Excluded	57
❓ Unknown	0
🚫 Errors	79
⛔ Unsupported	0

Errors per input

Errors in DEVELOPER.md

• [ERROR] https://play.dgraph.io/ | Network error: Connection failed. Check network connectivity and firewall settings (error sending request for url (https://play.dgraph.io/)): Connection failed. Check network connectivity and firewall settings

Errors in docs/en/build-with-mcp-toolbox/alloydb/mcp_quickstart.md

Errors in docs/en/build-with-mcp-toolbox/bigquery/local_quickstart.md

Errors in docs/en/build-with-mcp-toolbox/looker/looker_gemini_oauth/_index.md

Errors in docs/en/build-with-mcp-toolbox/quickstart/shared/cloud_setup.md

Errors in docs/en/integrations/alloydb-admin/_index.md

Errors in docs/en/integrations/alloydb-admin/alloydb-create-cluster.md

• [ERROR] https://console.cloud.google.com/apis/library/alloydb.googleapis.com | Network error: HTTP/2 protocol error. Server may not support HTTP/2 properly (error sending request for url (https://console.cloud.google.com/apis/library/alloydb.googleapis.com)): HTTP/2 protocol error. Server may not support HTTP/2 properly

Errors in docs/en/integrations/alloydb-admin/alloydb-create-instance.md

• [ERROR] https://console.cloud.google.com/apis/library/alloydb.googleapis.com | Network error: HTTP/2 protocol error. Server may not support HTTP/2 properly (error sending request for url (https://console.cloud.google.com/apis/library/alloydb.googleapis.com)): HTTP/2 protocol error. Server may not support HTTP/2 properly

Errors in docs/en/integrations/alloydb-admin/alloydb-create-user.md

• [ERROR] https://console.cloud.google.com/apis/library/alloydb.googleapis.com | Error (cached)

Errors in docs/en/integrations/alloydb/_index.md

Errors in docs/en/integrations/alloydb/alloydb-ai-nl.md

Errors in docs/en/integrations/bigquery/bigquery-analyze-contribution.md

Errors in docs/en/integrations/bigquery/bigquery-conversational-analytics.md

Errors in docs/en/integrations/bigquery/bigquery-sql.md

Errors in docs/en/integrations/bigtable/_index.md

Errors in docs/en/integrations/cloud-sql-admin/cloudsqlcloneinstance.md

Errors in docs/en/integrations/cloud-sql-admin/cloudsqlrestorebackup.md

Errors in docs/en/integrations/cloud-sql-pg/_index.md

Errors in docs/en/integrations/cloudhealthcare/_index.md

Errors in docs/en/integrations/cloudmonitoring/_index.md

Errors in docs/en/integrations/dataplex/_index.md

Errors in docs/en/integrations/firestore/firestore-add-documents.md

Errors in docs/en/integrations/firestore/firestore-update-document.md

Errors in docs/en/integrations/serverless-spark/_index.md

Errors in docs/en/integrations/spanner/_index.md

Errors in docs/en/integrations/spanner/spanner-sql.md

Errors in docs/en/integrations/valkey/_index.md

Errors in docs/en/user-guide/configuration/prebuilt-configs/_index.md

Errors in docs/en/user-guide/connect-to/client-sdks/go-sdk/core/_index.md

Errors in docs/en/user-guide/connect-to/client-sdks/go-sdk/tbadk/_index.md

Errors in docs/en/user-guide/connect-to/client-sdks/javascript-sdk/adk/index.md

Errors in docs/en/user-guide/connect-to/client-sdks/javascript-sdk/core/index.md

• [404] https://langchain-ai.github.io/langgraphjs/reference/functions/langgraph_prebuilt.createReactAgent.html | Rejected status code: 404 Not Found (configurable with "accept" option)

Errors in docs/en/user-guide/connect-to/client-sdks/python-sdk/core/index.md

Errors in docs/en/user-guide/connect-to/client-sdks/python-sdk/langchain/index.md

Errors in docs/en/user-guide/connect-to/client-sdks/python-sdk/llamaindex/index.md

Errors in docs/en/user-guide/connect-to/ides/alloydb_pg_admin_mcp.md

Errors in docs/en/user-guide/connect-to/ides/alloydb_pg_mcp.md

Errors in docs/en/user-guide/connect-to/ides/bigquery_mcp.md

Errors in docs/en/user-guide/connect-to/ides/cloud_sql_mssql_mcp.md

Errors in docs/en/user-guide/connect-to/ides/cloud_sql_mysql_mcp.md

Errors in docs/en/user-guide/connect-to/ides/firestore_mcp.md

Errors in docs/en/user-guide/connect-to/mcp-client/_index.md

• [404] https://docs.windsurf.com/windsurf/mcp | Rejected status code: 404 Not Found (configurable with "accept" option)

Errors in docs/en/user-guide/deploy-to/cloud-run/_index.md

Full Github Actions output

[gemini-code-assist]

Code Review

This pull request introduces a significant and welcome visual overhaul to the documentation site, including a new secondary navigation bar, an enhanced search experience, and a more modern design system. The new UI is a great improvement. My review focuses on improving the long-term maintainability of the new styling and scripting. The main suggestions are to address large-scale CSS duplication by using SCSS imports, reduce the heavy reliance on !important which can make future styling difficult, and extract large inline CSS blocks from HTML partials into dedicated stylesheet files for better separation of concerns and caching.

[github-actions]

🔎 Preview at https://googleapis.github.io/genai-toolbox/previews/PR-2765/

[github-actions]

🔎 Preview at https://googleapis.github.io/genai-toolbox/previews/PR-2765/

[github-actions]

🔎 Preview at https://googleapis.github.io/genai-toolbox/previews/PR-2765/

[github-actions]

🧨 Preview deployments removed.