fix: resolve multiple UI and configuration issues#280
Conversation
- Fix init command templates to generate correct configuration format (#279) - Change 'name:' to 'title:' to match SiteDefinition schema - Remove non-existent 'description:' field - Replace 'sources:' with proper 'branches:' and 'tags:' structure - Add required fields: base_path, index_page, proper input_path arrays - Add missing type='button' attribute to navigation toggle (#267) - Improves accessibility and follows HTML best practices - Fixes NavigationItem.hbs template - Remove duplicated theme handling functions in article.hbs (#266) - Consolidate theme initialization into single comprehensive script - Eliminates code duplication while maintaining functionality These fixes improve new user onboarding, accessibility, and code quality. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @pekkah, I'm Gemini Code Assist1! 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 addresses several critical issues related to configuration, UI accessibility, and code quality. It refactors configuration templates for the tanka-docs init command to ensure valid output, enhances navigation accessibility by adding a missing button type attribute, and cleans up duplicated theme handling code in the UI bundle for better maintainability. These changes collectively improve the initial user experience, accessibility standards, and overall code health.
Highlights
- Configuration Template Fixes: Updated
default-tanka-docs.ymlanddefault-tanka-docs-wip.ymlto align with the correctSiteDefinitionformat, including renamingnametotitle, removingdescription, restructuringsourcesintobranchesandtags, and adding required fields likebase_path,index_page, andinput_path. - Navigation Accessibility Improvement: Added the
type="button"attribute to the collapse toggle button inui-bundle/partials/NavigationItem.hbsto improve accessibility and adhere to HTML best practices. - Theme Code Refactoring: Removed duplicated theme handling JavaScript from the
<head>section ofui-bundle/article.hbsand consolidated it into a single, comprehensive script at the bottom of the file, maintaining full functionality while eliminating code duplication.
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 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
-
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. ↩
There was a problem hiding this comment.
Code Review
This pull request addresses several UI and configuration issues. The changes to the YAML configuration files correctly update them to a new, valid format. The accessibility fix in the navigation partial is also a welcome improvement. My main feedback concerns the refactoring of the theme-handling script in article.hbs. While the goal of removing code duplication is good, the current implementation may introduce a 'flash of unstyled content' for users, which harms the user experience. I've provided a suggestion to mitigate this while still reducing the original duplication.
ui-bundle/article.hbs
Outdated
| setTheme(getPreferredTheme()) | ||
| })() | ||
| </script> | ||
| <!-- Color mode toggler - theme initialization moved to body script for better organization --> |
There was a problem hiding this comment.
While removing the duplicated theme-handling script from the <head> cleans up the code, it introduces a potential user experience issue: a "flash of unstyled content" (FOUC). The theme is now applied only after the DOM is fully loaded, which can cause a brief flash of the default theme before it switches to the user's preferred theme.
To prevent this, it's best practice to run a minimal, blocking script in the <head> to set the theme attribute on the <html> element as early as possible. Some duplication with the main script in the body is an acceptable trade-off for a better user experience.
I suggest re-introducing a small script here. This version is slightly more minimal than the original, as it omits the unused setStoredTheme function.
<!-- Color mode toggler -->
<script>
// This minimal script runs early to prevent a "flash of unstyled content" (FOUC) by setting the theme before the page renders.
(() => {
'use strict';
const getStoredTheme = () => localStorage.getItem('theme');
const getPreferredTheme = () => {
const storedTheme = getStoredTheme();
if (storedTheme) {
return storedTheme;
}
return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
};
const setTheme = theme => {
if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.documentElement.setAttribute('data-bs-theme', 'dark');
} else {
document.documentElement.setAttribute('data-bs-theme', theme);
}
};
setTheme(getPreferredTheme());
})()
</script>
Based on Gemini Code Assist review feedback, re-introduce minimal theme script in head to prevent 'flash of unstyled content' while maintaining the goal of reducing code duplication. - Add minimal blocking script in <head> for immediate theme application - Remove redundant setTheme call from DOMContentLoaded handler - Preserves user experience while keeping comprehensive theme management Addresses: #280 (comment) 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
1 participant
Summary
This PR fixes three important issues that improve user experience, accessibility, and code quality:
🔧 Fixed Issues
🛠️ Changes Made
Init Command Configuration Templates (#279)
default-tanka-docs.yml- Updated to use correct SiteDefinition formatdefault-tanka-docs-wip.yml- Updated to use correct SiteDefinition formatname:→title:to match schemadescription:fieldsources:→ properbranches:andtags:structurebase_path,index_page, properinput_patharraysNavigation Accessibility (#267)
ui-bundle/partials/NavigationItem.hbstype="button"attribute to collapse toggle buttonTheme Code Cleanup (#266)
ui-bundle/article.hbs✅ Testing
📈 Impact
tanka-docs initsuccessfully🤖 Generated with Claude Code
Co-Authored-By: Claude noreply@anthropic.com