Commands/Css

[SquTM]

PR Type

Enhancement

---

Description

• Integrated Commands page into main website navigation and styling

• Refactored commands template with modern layout, header, and footer

• Added CSS version cache busting and improved responsive design

• Removed footer navigation links from multiple templates for consistency

• Enhanced command display with styled tooltips and better visual hierarchy

---

Diagram Walkthrough

flowchart LR
  A["WebsiteConstants"] -->|"Add Commands link"| B["Navigation Headers"]
  C["CommandsServlet"] -->|"Pass headers data"| D["commands.ftl"]
  E["commands.ftl"] -->|"Refactored with"| F["Modern Layout"]
  F -->|"Uses"| G["main.css styles"]
  H["main.css"] -->|"Enhanced with"| I["Commands styling"]
  J["home.ftl & guilds.ftl"] -->|"Remove footer links"| K["Simplified footer"]

Loading

File Walkthrough

Relevant files

Enhancement

WebsiteConstants.java Add Commands navigation header entry                                          src/main/java/org/mangorage/mangobotsite/website/WebsiteConstants.java Added new navigation header entry for Commands page Commands link points to /commands route with active state support +2/-1      CommandsServlet.java Pass navigation headers to Commands template                          src/main/java/org/mangorage/mangobotsite/website/servlet/CommandsServlet.java Imported WebsiteConstants for header data access Added headers data to template context for navigation rendering +2/-0      commands.ftl Refactor Commands page with modern layout                                src/main/resources/templates/commands.ftl Completely refactored from inline styles to external CSS Added proper HTML structure with meta tags, fonts, and favicon Integrated navigation bar and footer components Improved command display with better spacing and visual hierarchy Added page header section with documentation badge and subtitle +91/-109 guilds.ftl Update CSS cache busting and remove footer links                  src/main/resources/templates/guilds.ftl Added CSS version cache busting parameter ?v=${.now?long} Removed footer navigation links section for consistency +1/-6      home.ftl Update CSS cache busting and remove footer links                  src/main/resources/templates/home.ftl Added CSS version cache busting parameter ?v=${.now?long} Removed footer navigation links section for consistency +1/-5      tricks.ftl Clean up head section and remove footer links                        src/main/resources/templates/tricks.ftl Removed duplicate head section with meta tags and scripts Removed footer navigation links section for consistency +1/-21    main.css Add Commands styling and improve layout flexibility            src/main/resources/webpage-internal/css/main.css Changed body overflow-x from hidden to clip for better performance Added flexbox layout to body for sticky footer support Updated mobile navigation menu animation from transform to max-height Removed active state styling from nav-link class Added comprehensive Commands page styling with command blocks, tooltips, and responsive design Enhanced footer with margin-top auto for sticky positioning +260/-13

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
⚪	XSS via templating Description: Unescaped dynamic fields (e.g., ${cmd.getName()}, ${note}, ${p.getDescription()}, ${p.getSuggestions()}) are rendered into HTML tooltips and may enable stored/reflected XSS if any of these values can contain attacker-controlled markup and FreeMarker auto-escaping is not enforced for this template. commands.ftl [54-94] Referred Code <#list commandDataList as data> <div class="command-block"> <h2>${data.cmd()}</h2> <#list data.commandParts() as cmd> <div class="command"> <#if cmd.getCommandNotes()?has_content> <span class="cmd"> ${cmd.getName()} <span class="tooltip"> <#list cmd.getCommandNotes() as note> <div>${note}</div> </#list> </span> </span> <#else> <span class="cmd">${cmd.getName()}</span> </#if> <#list cmd.getParameters() as p> <span class="param <#if p.isRequired()>required</#if>"> ... (clipped 20 lines)
	Reverse tabnabbing Description: The external Discord link uses target="_blank" without rel="noopener noreferrer", allowing tabnabbing where the opened page can control window.opener and potentially redirect the original site. commands.ftl [28-33] Referred Code <a href="https://discord.mangorage.org/" target="_blank" class="nav-cta"> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"> <path d="M20.317 4.37a19.791 19.791 0 0 0-4.885-1.515.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 0 0-5.487 0 12.64 12.64 0 0 0-.617-1.25.077.077 0 0 0-.079-.037A19.736 19.736 0 0 0 3.677 4.37a.07.07 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 0 0 .031.057 19.9 19.9 0 0 0 5.993 3.03.078.078 0 0 0 .084-.028 14.09 14.09 0 0 0 1.226-1.994.076.076 0 0 0-.041-.106 13.107 13.107 0 0 1-1.872-.892.077.077 0 0 1-.008-.128 10.2 10.2 0 0 0 .372-.292.074.074 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 0 1 .078.01c.12.098.246.198.373.292a.077.077 0 0 1-.006.127 12.299 12.299 0 0 1-1.873.892.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 0 0 .084.028 19.839 19.839 0 0 0 6.002-3.03.077.077 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 0 0-.031-.03zM8.02 15.33c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.956-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.956 2.418-2.157 2.418zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.419 2.157-2.419 1.21 0 2.176 1.096 2.157 2.42 0 1.333-.946 2.418-2.157 2.418z"/> </svg> Join Discord </a>
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Potential XSS output: The template renders multiple dynamic fields (e.g., command notes/descriptions/suggestions) via ${...} without explicit escaping, which may be unsafe if any of those values can contain user-controlled or untrusted content depending on FreeMarker escaping configuration. Referred Code <#list commandDataList as data> <div class="command-block"> <h2>${data.cmd()}</h2> <#list data.commandParts() as cmd> <div class="command"> <#if cmd.getCommandNotes()?has_content> <span class="cmd"> ${cmd.getName()} <span class="tooltip"> <#list cmd.getCommandNotes() as note> <div>${note}</div> </#list> </span> </span> <#else> <span class="cmd">${cmd.getName()}</span> </#if> <#list cmd.getParameters() as p> <span class="param <#if p.isRequired()>required</#if>"> ... (clipped 14 lines) Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	✅ Restore the missing HTML head Suggestion Impact: The commit reintroduced a full block (meta charset/viewport, title, favicon, stylesheet, font links, main.js, and OG meta tags), replacing the invalid top-level script-only structure. code diff: @@ -1,6 +1,21 @@ <!DOCTYPE html> <html lang="en"> -<script src="js/main.js" defer></script> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>MangoBot - Discord Bot</title> + <link rel="icon" type="image/x-icon" href="images/favicon.ico"> + <link rel="stylesheet" href="css/main.css?v=${.now?long}"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> + <script src="js/main.js" defer></script> + <meta name="og:title" content="MangoBot"> + <meta name="og:description" content="The Official MangoBot Discord Bot."> + <meta name="og:image" content="https://mangobot.mangorage.org/pink-sheep.png"> + <meta name="og:url" content="https://mangobot.mangorage.org/"> + <meta name="og:type" content="website"> +</head> Restore the missing section in tricks.ftl. The removal of the head makes the HTML invalid and will cause rendering, accessibility, and SEO issues. src/main/resources/templates/tricks.ftl [1-6] <!DOCTYPE html> <html lang="en"> -<script src="js/main.js" defer></script> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>${trick.getName()!"Trick"} - MangoBot</title> + <link rel="icon" type="image/x-icon" href="images/favicon.ico"> + <link rel="stylesheet" href="css/main.css?v=${.now?long}"> + <link rel="preconnect" href="https://fonts.googleapis.com"> + <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> + <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> + <script src="js/main.js" defer></script> + <meta name="og:title" content="${trick.getName()!"Trick"} - MangoBot"> + <meta name="og:description" content="View trick details for ${trick.getName()!"this trick"} on MangoBot."> + <meta name="og:image" content="https://mangobot.mangorage.org/pink-sheep.png"> + <meta name="og:url" content="https://mangobot.mangorage.org/trick?guildId=${guildId!""}&trickId=${trick.getId()!""}"> + <meta name="og:type" content="website"> +</head> <body> <nav class="navbar"> <div class="nav-container"> [Suggestion processed] Suggestion importance[1-10]: 10 __ Why: This suggestion correctly identifies a critical issue where the <head> section was almost entirely removed, which would break page rendering, styling, and SEO. Restoring it is essential for the page to function correctly.	High
	✅ Remove duplicated CSS style block Suggestion Impact: The commit removed the duplicated CSS rules that were present outside the mobile media query, preventing mobile-only styles from applying globally. It also refactored the remaining mobile styles within the @media block. code diff: @@ -1410,84 +1408,18 @@ } @media (max-width: 768px) { - .page-header { - padding-top: 100px; - padding-bottom: 40px; - } - .header-content h1 { - font-size: 2rem; - } - .commands-content { - padding: 40px 0 60px; - } + .command { + font-size: 0.85rem; + } + + .param .tooltip, + .cmd .tooltip { + left: auto; + right: 0; + min-width: 250px; + } + .command-block { padding: 16px; - margin-bottom: 24px; - } - .command-block > h2 { - font-size: 1.25rem; - } - .command { - font-size: 0.85rem; - flex-direction: column; - align-items: flex-start; - padding: 12px; - } - .cmd, - .param { - font-size: 0.8rem; - margin-bottom: 4px; - } - .param .tooltip, - .cmd .tooltip { - position: fixed; - left: 50% !important; - right: auto !important; - transform: translateX(-50%); - max-width: calc(100vw - 32px); - min-width: auto; - width: max-content; - top: auto; - bottom: 20px; - } -} - - .commands-content { - padding: 40px 0 60px; - } - - .command-block { - padding: 16px; - margin-bottom: 24px; - } - - .command-block > h2 { - font-size: 1.25rem; - } - - .command { - font-size: 0.85rem; - flex-direction: column; - align-items: flex-start; - padding: 12px; - } - - .cmd, - .param { - font-size: 0.8rem; - margin-bottom: 4px; - } - - .param .tooltip, - .cmd .tooltip { - position: fixed; - left: 50% !important; - right: auto !important; - transform: translateX(-50%); - max-width: calc(100vw - 32px); - min-width: auto; - width: max-content; - top: auto; - bottom: 20px; - } - + } +} Remove the duplicated block of CSS rules in main.css. The duplication causes mobile-specific styles to incorrectly apply to all screen sizes, breaking the desktop layout. src/main/resources/webpage-internal/css/main.css [1412-1492] @media (max-width: 768px) { .page-header { padding-top: 100px; padding-bottom: 40px; } .header-content h1 { font-size: 2rem; } .commands-content { padding: 40px 0 60px; } .command-block { padding: 16px; margin-bottom: 24px; } .command-block > h2 { font-size: 1.25rem; } .command { font-size: 0.85rem; flex-direction: column; align-items: flex-start; padding: 12px; } .cmd, .param { font-size: 0.8rem; margin-bottom: 4px; } .param .tooltip, .cmd .tooltip { position: fixed; left: 50% !important; right: auto !important; transform: translateX(-50%); max-width: calc(100vw - 32px); min-width: auto; width: max-content; top: auto; bottom: 20px; } } - .commands-content { - padding: 40px 0 60px; - } - - .command-block { - padding: 16px; - margin-bottom: 24px; - } - - .command-block > h2 { - font-size: 1.25rem; - } - - .command { - font-size: 0.85rem; - flex-direction: column; - align-items: flex-start; - padding: 12px; - } - - .cmd, - .param { - font-size: 0.8rem; - margin-bottom: 4px; - } - - .param .tooltip, - .cmd .tooltip { - position: fixed; - left: 50% !important; - right: auto !important; - transform: translateX(-50%); - max-width: calc(100vw - 32px); - min-width: auto; - width: max-content; - top: auto; - bottom: 20px; - } - [Suggestion processed] Suggestion importance[1-10]: 9 __ Why: This suggestion correctly identifies a copy-paste error that duplicates a block of mobile-specific CSS rules outside the media query, which would break the desktop layout. This is a significant bug.	High
General	✅ Remove duplicate closing tag Suggestion Impact: The extra closing tag at the end of the template was removed. code diff: @@ -110,4 +110,4 @@ <script src="js/main.js" defer></script> </body> </html> -</html> + Remove the extra closing tag at the end of the commands.ftl template to ensure the HTML is well-formed. src/main/resources/templates/commands.ftl [112-113] -</html> </html> [Suggestion processed] Suggestion importance[1-10]: 3 __ Why: The suggestion correctly identifies and fixes invalid HTML by removing a duplicate </html> tag. While most browsers would handle this gracefully, it's a good practice to maintain well-formed markup.	Low
Update