Update navbar styling #76
Closed
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
@Sneha-chourey is attempting to deploy a commit to the idan lodzki's projects Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughSimplifies the Docusaurus configuration by replacing extensive HTML blocks for navbar icons and footer sections with streamlined inline HTML and plain data items. Adds complementary CSS styles to increase navbar sizing, spacing, logo height, and adjust link/icon padding. Changes
Possibly related PRs
Comment |
|
Thanks for your contribution! Join our Slack: https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA Please make sure to include an image with your PR — it really helps us review and understand the changes better. Only in rare cases will we accept a PR without one. Also, take a moment to review your code to ensure it’s clear, readable, and easy to follow. PRs from contributors who haven’t joined our Slack community or starred the repository won’t be reviewed — we’d love to see you join and be part of the project! |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (2)
opsimate-docs/src/css/custom.css (2)
867-893: Add responsive styles for smaller screens.The new navbar sizing significantly increases dimensions (80px height, 50px logo, 1rem 2rem padding), which may cause usability issues on mobile and tablet devices. Consider adding media queries to scale down these values appropriately.
Apply this diff to add responsive adjustments:
/* ===== NAVBAR SIZE & SPACING ===== */ .navbar { min-height: 80px !important; /* taller navbar */ padding: 1rem 2rem !important; /* increase spacing */ } .navbar__logo img { height: 50px !important; /* bigger logo */ width: auto; } .navbar__title, .navbar__brand { font-size: 1.2rem !important; /* slightly bigger text */ font-weight: 700 !important; } .navbar__link { font-size: 1rem !important; /* larger menu items */ padding: 0.8rem 1rem !important; /* more spacing around links */ } /* Adjust icons spacing for bigger navbar */ .navbar-icons-container { gap: 12px !important; align-items: center; } + +/* Responsive adjustments for tablets and mobile */ +@media (max-width: 996px) { + .navbar { + min-height: 60px !important; + padding: 0.75rem 1rem !important; + } + + .navbar__logo img { + height: 40px !important; + } + + .navbar__title, + .navbar__brand { + font-size: 1rem !important; + } + + .navbar__link { + font-size: 0.9rem !important; + padding: 0.6rem 0.8rem !important; + } +} + +@media (max-width: 480px) { + .navbar { + min-height: 56px !important; + padding: 0.5rem 0.75rem !important; + } + + .navbar__logo img { + height: 32px !important; + } + + .navbar-icons-container { + gap: 8px !important; + } +}
890-893: Resolve gap conflict with existing style.Line 635 already defines
.navbar-icons-containerwithgap: 8px, which is now overridden here withgap: 12px !important. This creates inconsistency and suggests specificity issues.Consider consolidating these styles or removing the earlier definition at line 635 if this new value is intended to be the standard.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
opsimate-docs/docusaurus.config.js(4 hunks)opsimate-docs/src/css/custom.css(1 hunks)
🧰 Additional context used
🪛 Gitleaks (8.28.0)
opsimate-docs/docusaurus.config.js
[high] 191-191: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🔇 Additional comments (1)
opsimate-docs/docusaurus.config.js (1)
278-283: No action required—Algolia search-only key usage is correct.The Algolia
apiKeyshown is a search-only key, which is limited to search-related operations and safe to expose in client-side code, unlike admin keys which have full control and must be kept secret. This is the intended and correct configuration for Algolia DocSearch in public documentation sites. The static analysis flag is a false positive; this key exposure poses no security risk.
Comment on lines
+1
to
+197
| // // docusaurus.config.js | ||
| // module.exports = { | ||
| // title: 'OpsiMate', | ||
| // tagline: 'One console for servers, Docker, and Kubernetes', | ||
| // url: 'https://your-site.com', | ||
| // baseUrl: '/', | ||
| // favicon: 'img/favicon.ico', | ||
| // organizationName: 'OpsiMate', | ||
| // projectName: 'documentation', | ||
|
|
||
| // onBrokenLinks: 'warn', | ||
| // onBrokenMarkdownLinks: 'warn', | ||
|
|
||
| // presets: [ | ||
| // [ | ||
| // 'classic', | ||
| // { | ||
| // docs: { | ||
| // routeBasePath: '/docs', | ||
| // sidebarPath: require.resolve('./sidebars.js'), | ||
| // showLastUpdateTime: true, | ||
| // editUrl: 'https://github.com/OpsiMate/documentation/edit/main/', | ||
| // }, | ||
| // blog: false, | ||
| // theme: { customCss: require.resolve('./src/css/custom.css') }, | ||
| // }, | ||
| // ], | ||
| // ], | ||
|
|
||
| // themeConfig: { | ||
| // // Color mode configuration - THIS ENABLES THE TOGGLE | ||
| // colorMode: { | ||
| // defaultMode: 'light', | ||
| // disableSwitch: false, // This enables the toggle! | ||
| // respectPrefersColorScheme: true, | ||
| // }, | ||
|
|
||
| // navbar: { | ||
| // title: 'OpsiMate', | ||
| // logo: { alt: 'OpsiMate Logo', src: 'img/logo.png' }, | ||
| // items: [ | ||
| // { type: 'docSidebar', sidebarId: 'tutorialSidebar', position: 'left', label: 'Docs' }, | ||
| // { type: 'doc', docId: 'dashboards/overview', position: 'left', label: 'Dashboard' }, | ||
| // { type: 'doc', docId: 'alerts/adding-alerts', position: 'left', label: 'Alerts' }, | ||
| // { type: 'doc', docId: 'integrations/overview', position: 'left', label: 'Integrations' }, | ||
| // { type: 'doc', docId: 'user-management/register-login', position: 'left', label: 'User Management' }, | ||
| // { | ||
| // href: 'https://www.opsimate.com/', | ||
| // label: 'Website', | ||
| // position: 'left' | ||
| // }, | ||
|
|
||
| // // --- Right-side icons (GitHub + Slack) --- | ||
| // { | ||
| // type: 'html', | ||
| // position: 'right', | ||
| // value: ` | ||
| // <div class="navbar-icons-container"> | ||
| // <a href="https://github.com/OpsiMate/documentation" | ||
| // target="_blank" rel="noopener noreferrer" | ||
| // aria-label="GitHub repository" | ||
| // class="navbar-icon-link"> | ||
| // <img src="/img/github.svg" alt="GitHub" class="navbar-icon" /> | ||
| // </a> | ||
| // <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" | ||
| // target="_blank" rel="noopener noreferrer" | ||
| // aria-label="Slack community" | ||
| // class="navbar-icon-link"> | ||
| // <img src="/img/slack.svg" alt="Slack" class="navbar-icon" /> | ||
| // </a> | ||
| // </div> | ||
| // `, | ||
| // }, | ||
| // ], | ||
| // }, | ||
|
|
||
| // footer: { | ||
| // style: 'dark', | ||
| // links: [ | ||
| // { | ||
| // title: 'Integrate with', | ||
| // items: [ | ||
| // { | ||
| // html: ` | ||
| // <div class="footer-integrations"> | ||
| // <a href="/docs/integrations/grafana" class="integration-item" aria-label="Grafana Integration"> | ||
| // <div class="integration-icon-container"> | ||
| // <img src="/img/grafana.svg" alt="Grafana" class="integration-icon" /> | ||
| // </div> | ||
| // <span class="integration-name">Grafana</span> | ||
| // </a> | ||
| // <a href="/docs/integrations/kibana" class="integration-item" aria-label="Kibana Integration"> | ||
| // <div class="integration-icon-container"> | ||
| // <img src="/img/kibana.svg" alt="Kibana" class="integration-icon" /> | ||
| // </div> | ||
| // <span class="integration-name">Kibana</span> | ||
| // </a> | ||
| // <a href="/docs/providers-services/services/container-services" class="integration-item" aria-label="Docker Integration"> | ||
| // <div class="integration-icon-container"> | ||
| // <img src="/img/docker.svg" alt="Docker" class="integration-icon" /> | ||
| // </div> | ||
| // <span class="integration-name">Docker</span> | ||
| // </a> | ||
| // <a href="/docs/providers-services/services/kubernetes-pods" class="integration-item" aria-label="Kubernetes Integration"> | ||
| // <div class="integration-icon-container"> | ||
| // <img src="/img/kubernetes.svg" alt="Kubernetes" class="integration-icon" /> | ||
| // </div> | ||
| // <span class="integration-name">Kubernetes</span> | ||
| // </a> | ||
| // <a href="/docs/providers-services/services/systemd-services" class="integration-item" aria-label="Systemd Integration"> | ||
| // <div class="integration-icon-container"> | ||
| // <img src="/img/systemd.svg" alt="Systemd" class="integration-icon" /> | ||
| // </div> | ||
| // <span class="integration-name">Systemd</span> | ||
| // </a> | ||
| // <a href="/docs/integrations/datadog" class="integration-item" aria-label="Datadog Integration"> | ||
| // <div class="integration-icon-container"> | ||
| // <img src="/img/datadog.svg" alt="Datadog" class="integration-icon" /> | ||
| // </div> | ||
| // <span class="integration-name">Datadog</span> | ||
| // </a> | ||
| // </div> | ||
| // `, | ||
| // }, | ||
| // ], | ||
| // }, | ||
|
|
||
| // { | ||
|
|
||
| // title: 'Community', | ||
| // items: [ | ||
| // { | ||
| // html: ` | ||
| // <div class="footer-community-icons"> | ||
| // <a href="https://github.com/OpsiMate/documentation" | ||
| // target="_blank" rel="noopener noreferrer" | ||
| // aria-label="GitHub repository" | ||
| // class="footer-community-icon-link"> | ||
| // <img src="/img/github.svg" alt="GitHub" class="footer-community-icon" /> | ||
| // </a> | ||
| // <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" | ||
| // target="_blank" rel="noopener noreferrer" | ||
| // aria-label="Slack community" | ||
| // class="footer-community-icon-link"> | ||
| // <img src="/img/slack.svg" alt="Slack" class="footer-community-icon" /> | ||
| // </a> | ||
| // </div> | ||
| // `, | ||
| // }, | ||
| // ], | ||
| // }, | ||
| // ], | ||
| // { | ||
| // title: 'Resources', | ||
| // items: [ | ||
| // { | ||
| // label: 'Main Website', | ||
| // href: 'https://www.opsimate.com/', | ||
| // }, | ||
| // { | ||
| // label: 'Documentation', | ||
| // href: '/', | ||
| // }, | ||
| // ], | ||
| // }, | ||
| // ], | ||
| // // --- VERCEL CARD FOOTER BOTTOM --- | ||
| // copyright: ` | ||
| // <div class="footer-bottom"> | ||
| // <div class="footer-bottom-content"> | ||
| // <div class="footer-copyright"> | ||
| // Copyright © ${new Date().getFullYear()} OpsiMate. All rights reserved. | ||
| // </div> | ||
|
|
||
| // <a href="https://vercel.com" | ||
| // target="_blank" | ||
| // rel="noopener noreferrer" | ||
| // class="vercel-card-container"> | ||
| // <div class="vercel-card"> | ||
| // <span class="vercel-card-text">Deployed on</span> | ||
| // <img src="/img/vercel.svg" alt="Vercel" class="vercel-card-logo" /> | ||
| // </div> | ||
| // </a> | ||
| // </div> | ||
| // </div> | ||
| // `, | ||
| // }, | ||
|
|
||
| // algolia: { | ||
| // appId: 'GADD2TVEH5', | ||
| // apiKey: 'cc7b48e597d80aa85aad4c50df82812f', | ||
| // indexName: 'OpsiMate Docs', | ||
| // contextualSearch: true, | ||
| // }, | ||
| // }, | ||
| // }; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Remove commented code.
The entire old configuration (197 lines) is commented out. Version control already maintains this history, so there's no need to keep commented code in the file. This reduces clutter and improves maintainability.
Apply this diff to remove the commented configuration:
-// // docusaurus.config.js
-// module.exports = {
-// title: 'OpsiMate',
-// tagline: 'One console for servers, Docker, and Kubernetes',
-// url: 'https://your-site.com',
-// baseUrl: '/',
-// favicon: 'img/favicon.ico',
-// organizationName: 'OpsiMate',
-// projectName: 'documentation',
-
-// onBrokenLinks: 'warn',
-// onBrokenMarkdownLinks: 'warn',
-
-// presets: [
-// [
-// 'classic',
-// {
-// docs: {
-// routeBasePath: '/docs',
-// sidebarPath: require.resolve('./sidebars.js'),
-// showLastUpdateTime: true,
-// editUrl: 'https://github.com/OpsiMate/documentation/edit/main/',
-// },
-// blog: false,
-// theme: { customCss: require.resolve('./src/css/custom.css') },
-// },
-// ],
-// ],
-
-// themeConfig: {
-// // Color mode configuration - THIS ENABLES THE TOGGLE
-// colorMode: {
-// defaultMode: 'light',
-// disableSwitch: false, // This enables the toggle!
-// respectPrefersColorScheme: true,
-// },
-
-// navbar: {
-// title: 'OpsiMate',
-// logo: { alt: 'OpsiMate Logo', src: 'img/logo.png' },
-// items: [
-// { type: 'docSidebar', sidebarId: 'tutorialSidebar', position: 'left', label: 'Docs' },
-// { type: 'doc', docId: 'dashboards/overview', position: 'left', label: 'Dashboard' },
-// { type: 'doc', docId: 'alerts/adding-alerts', position: 'left', label: 'Alerts' },
-// { type: 'doc', docId: 'integrations/overview', position: 'left', label: 'Integrations' },
-// { type: 'doc', docId: 'user-management/register-login', position: 'left', label: 'User Management' },
-// {
-// href: 'https://www.opsimate.com/',
-// label: 'Website',
-// position: 'left'
-// },
-
-// // --- Right-side icons (GitHub + Slack) ---
-// {
-// type: 'html',
-// position: 'right',
-// value: `
-// <div class="navbar-icons-container">
-// <a href="https://github.com/OpsiMate/documentation"
-// target="_blank" rel="noopener noreferrer"
-// aria-label="GitHub repository"
-// class="navbar-icon-link">
-// <img src="/img/github.svg" alt="GitHub" class="navbar-icon" />
-// </a>
-// <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG"
-// target="_blank" rel="noopener noreferrer"
-// aria-label="Slack community"
-// class="navbar-icon-link">
-// <img src="/img/slack.svg" alt="Slack" class="navbar-icon" />
-// </a>
-// </div>
-// `,
-// },
-// ],
-// },
-
-// footer: {
-// style: 'dark',
-// links: [
-// {
-// title: 'Integrate with',
-// items: [
-// {
-// html: `
-// <div class="footer-integrations">
-// <a href="/docs/integrations/grafana" class="integration-item" aria-label="Grafana Integration">
-// <div class="integration-icon-container">
-// <img src="/img/grafana.svg" alt="Grafana" class="integration-icon" />
-// </div>
-// <span class="integration-name">Grafana</span>
-// </a>
-// <a href="/docs/integrations/kibana" class="integration-item" aria-label="Kibana Integration">
-// <div class="integration-icon-container">
-// <img src="/img/kibana.svg" alt="Kibana" class="integration-icon" />
-// </div>
-// <span class="integration-name">Kibana</span>
-// </a>
-// <a href="/docs/providers-services/services/container-services" class="integration-item" aria-label="Docker Integration">
-// <div class="integration-icon-container">
-// <img src="/img/docker.svg" alt="Docker" class="integration-icon" />
-// </div>
-// <span class="integration-name">Docker</span>
-// </a>
-// <a href="/docs/providers-services/services/kubernetes-pods" class="integration-item" aria-label="Kubernetes Integration">
-// <div class="integration-icon-container">
-// <img src="/img/kubernetes.svg" alt="Kubernetes" class="integration-icon" />
-// </div>
-// <span class="integration-name">Kubernetes</span>
-// </a>
-// <a href="/docs/providers-services/services/systemd-services" class="integration-item" aria-label="Systemd Integration">
-// <div class="integration-icon-container">
-// <img src="/img/systemd.svg" alt="Systemd" class="integration-icon" />
-// </div>
-// <span class="integration-name">Systemd</span>
-// </a>
-// <a href="/docs/integrations/datadog" class="integration-item" aria-label="Datadog Integration">
-// <div class="integration-icon-container">
-// <img src="/img/datadog.svg" alt="Datadog" class="integration-icon" />
-// </div>
-// <span class="integration-name">Datadog</span>
-// </a>
-// </div>
-// `,
-// },
-// ],
-// },
-
-// {
-
-// title: 'Community',
-// items: [
-// {
-// html: `
-// <div class="footer-community-icons">
-// <a href="https://github.com/OpsiMate/documentation"
-// target="_blank" rel="noopener noreferrer"
-// aria-label="GitHub repository"
-// class="footer-community-icon-link">
-// <img src="/img/github.svg" alt="GitHub" class="footer-community-icon" />
-// </a>
-// <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG"
-// target="_blank" rel="noopener noreferrer"
-// aria-label="Slack community"
-// class="footer-community-icon-link">
-// <img src="/img/slack.svg" alt="Slack" class="footer-community-icon" />
-// </a>
-// </div>
-// `,
-// },
-// ],
-// },
-// ],
-// {
-// title: 'Resources',
-// items: [
-// {
-// label: 'Main Website',
-// href: 'https://www.opsimate.com/',
-// },
-// {
-// label: 'Documentation',
-// href: '/',
-// },
-// ],
-// },
-// ],
-// // --- VERCEL CARD FOOTER BOTTOM ---
-// copyright: `
-// <div class="footer-bottom">
-// <div class="footer-bottom-content">
-// <div class="footer-copyright">
-// Copyright © ${new Date().getFullYear()} OpsiMate. All rights reserved.
-// </div>
-
-// <a href="https://vercel.com"
-// target="_blank"
-// rel="noopener noreferrer"
-// class="vercel-card-container">
-// <div class="vercel-card">
-// <span class="vercel-card-text">Deployed on</span>
-// <img src="/img/vercel.svg" alt="Vercel" class="vercel-card-logo" />
-// </div>
-// </a>
-// </div>
-// </div>
-// `,
-// },
-
-// algolia: {
-// appId: 'GADD2TVEH5',
-// apiKey: 'cc7b48e597d80aa85aad4c50df82812f',
-// indexName: 'OpsiMate Docs',
-// contextualSearch: true,
-// },
-// },
-// };
-
// docusaurus.config.js
module.exports = {Committable suggestion skipped: line range outside the PR's diff.
🧰 Tools
🪛 Gitleaks (8.28.0)
[high] 191-191: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
🤖 Prompt for AI Agents
In opsimate-docs/docusaurus.config.js around lines 1 to 197, remove the entire
commented-out Docusaurus configuration block (all lines that are commented) to
eliminate dead/commented code; leave the file with just the active/needed
configuration (or an empty file if configuration will be added later) so version
control history retains the old config.
Comment on lines
+245
to
251
| // Simple HTML for right icons | ||
| { | ||
| type: 'html', | ||
| position: 'right', | ||
| value: ` | ||
| <div class="navbar-icons-container"> | ||
| <a href="https://github.com/OpsiMate/documentation" | ||
| target="_blank" rel="noopener noreferrer" | ||
| aria-label="GitHub repository" | ||
| class="navbar-icon-link"> | ||
| <img src="/img/github.svg" alt="GitHub" class="navbar-icon" /> | ||
| </a> | ||
| <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" | ||
| target="_blank" rel="noopener noreferrer" | ||
| aria-label="Slack community" | ||
| class="navbar-icon-link"> | ||
| <img src="/img/slack.svg" alt="Slack" class="navbar-icon" /> | ||
| </a> | ||
| </div> | ||
| `, | ||
| value: `<a href="https://github.com/OpsiMate/documentation" target="_blank"><img src="/img/github.svg" alt="GitHub" style="height:24px;margin-left:8px;"/></a> | ||
| <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" target="_blank"><img src="/img/slack.svg" alt="Slack" style="height:24px;margin-left:8px;"/></a>`, | ||
| }, |
There was a problem hiding this comment.
Critical: Inline styles conflict with custom CSS architecture.
The simplified HTML uses inline styles and removes the CSS classes that the extensive styling in custom.css depends on. Specifically:
- Lines 58-63, 632-636, 890-893 in
custom.cssstyle.navbar-icons-containerwhich is no longer present - Lines 65-77, 92-97 in
custom.cssstyle.navbar-icon-linkand.navbar-iconwhich are removed - Accessibility attributes (
aria-label,rel="noopener noreferrer") are missing - Inline styles (
style="height:24px;margin-left:8px;") bypass the theming and responsive design defined in CSS
Revert to the structured HTML that uses CSS classes:
- // Simple HTML for right icons
{
type: 'html',
position: 'right',
- value: `<a href="https://github.com/OpsiMate/documentation" target="_blank"><img src="/img/github.svg" alt="GitHub" style="height:24px;margin-left:8px;"/></a>
- <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" target="_blank"><img src="/img/slack.svg" alt="Slack" style="height:24px;margin-left:8px;"/></a>`,
+ value: `
+ <div class="navbar-icons-container">
+ <a href="https://github.com/OpsiMate/documentation"
+ target="_blank" rel="noopener noreferrer"
+ aria-label="GitHub repository"
+ class="navbar-icon-link">
+ <img src="/img/github.svg" alt="GitHub" class="navbar-icon" />
+ </a>
+ <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG"
+ target="_blank" rel="noopener noreferrer"
+ aria-label="Slack community"
+ class="navbar-icon-link">
+ <img src="/img/slack.svg" alt="Slack" class="navbar-icon" />
+ </a>
+ </div>
+ `,
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| // Simple HTML for right icons | |
| { | |
| type: 'html', | |
| position: 'right', | |
| value: ` | |
| <div class="navbar-icons-container"> | |
| <a href="https://github.com/OpsiMate/documentation" | |
| target="_blank" rel="noopener noreferrer" | |
| aria-label="GitHub repository" | |
| class="navbar-icon-link"> | |
| <img src="/img/github.svg" alt="GitHub" class="navbar-icon" /> | |
| </a> | |
| <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" | |
| target="_blank" rel="noopener noreferrer" | |
| aria-label="Slack community" | |
| class="navbar-icon-link"> | |
| <img src="/img/slack.svg" alt="Slack" class="navbar-icon" /> | |
| </a> | |
| </div> | |
| `, | |
| value: `<a href="https://github.com/OpsiMate/documentation" target="_blank"><img src="/img/github.svg" alt="GitHub" style="height:24px;margin-left:8px;"/></a> | |
| <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" target="_blank"><img src="/img/slack.svg" alt="Slack" style="height:24px;margin-left:8px;"/></a>`, | |
| }, | |
| { | |
| type: 'html', | |
| position: 'right', | |
| value: ` | |
| <div class="navbar-icons-container"> | |
| <a href="https://github.com/OpsiMate/documentation" | |
| target="_blank" rel="noopener noreferrer" | |
| aria-label="GitHub repository" | |
| class="navbar-icon-link"> | |
| <img src="/img/github.svg" alt="GitHub" class="navbar-icon" /> | |
| </a> | |
| <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" | |
| target="_blank" rel="noopener noreferrer" | |
| aria-label="Slack community" | |
| class="navbar-icon-link"> | |
| <img src="/img/slack.svg" alt="Slack" class="navbar-icon" /> | |
| </a> | |
| </div> | |
| `, | |
| }, |
🤖 Prompt for AI Agents
In opsimate-docs/docusaurus.config.js around lines 245 to 251, the nav HTML was
changed to use inline styles and removed the .navbar-icons-container,
.navbar-icon-link and .navbar-icon classes required by custom.css; restore the
structured HTML that uses those CSS classes (wrap icons in an element with class
"navbar-icons-container", use anchor elements with class "navbar-icon-link" and
images with class "navbar-icon" instead of inline style), remove all inline
style attributes so theming and responsive rules apply, and add
accessibility/safety attributes to anchors (aria-label and rel="noopener
noreferrer" target="_blank") for each link.
Comment on lines
+259
to
265
| title: 'Community', | ||
| items: [ | ||
| { | ||
| html: ` | ||
| <div class="footer-integrations"> | ||
| <a href="/docs/integrations/grafana" class="integration-item" aria-label="Grafana Integration"> | ||
| <div class="integration-icon-container"> | ||
| <img src="/img/grafana.svg" alt="Grafana" class="integration-icon" /> | ||
| </div> | ||
| <span class="integration-name">Grafana</span> | ||
| </a> | ||
| <a href="/docs/integrations/kibana" class="integration-item" aria-label="Kibana Integration"> | ||
| <div class="integration-icon-container"> | ||
| <img src="/img/kibana.svg" alt="Kibana" class="integration-icon" /> | ||
| </div> | ||
| <span class="integration-name">Kibana</span> | ||
| </a> | ||
| <a href="/docs/providers-services/services/container-services" class="integration-item" aria-label="Docker Integration"> | ||
| <div class="integration-icon-container"> | ||
| <img src="/img/docker.svg" alt="Docker" class="integration-icon" /> | ||
| </div> | ||
| <span class="integration-name">Docker</span> | ||
| </a> | ||
| <a href="/docs/providers-services/services/kubernetes-pods" class="integration-item" aria-label="Kubernetes Integration"> | ||
| <div class="integration-icon-container"> | ||
| <img src="/img/kubernetes.svg" alt="Kubernetes" class="integration-icon" /> | ||
| </div> | ||
| <span class="integration-name">Kubernetes</span> | ||
| </a> | ||
| <a href="/docs/providers-services/services/systemd-services" class="integration-item" aria-label="Systemd Integration"> | ||
| <div class="integration-icon-container"> | ||
| <img src="/img/systemd.svg" alt="Systemd" class="integration-icon" /> | ||
| </div> | ||
| <span class="integration-name">Systemd</span> | ||
| </a> | ||
| <a href="/docs/integrations/datadog" class="integration-item" aria-label="Datadog Integration"> | ||
| <div class="integration-icon-container"> | ||
| <img src="/img/datadog.svg" alt="Datadog" class="integration-icon" /> | ||
| </div> | ||
| <span class="integration-name">Datadog</span> | ||
| </a> | ||
| </div> | ||
| `, | ||
| }, | ||
| html: `<a href="https://github.com/OpsiMate/documentation" target="_blank"><img src="/img/github.svg" alt="GitHub" style="height:24px;margin-right:8px;"/></a> | ||
| <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" target="_blank"><img src="/img/slack.svg" alt="Slack" style="height:24px;"/></a>`, | ||
| }, | ||
| ], |
There was a problem hiding this comment.
Critical: Footer inline styles conflict with custom CSS.
Similar to the navbar issue, the simplified footer HTML removes CSS classes that custom.css depends on:
- Lines 231-236 in
custom.cssstyle.footer-community-iconswhich is removed - Lines 238-248, 256-263 style
.footer-community-icon-linkwhich is removed - Lines 249-254, 261-263 style
.footer-community-iconwhich is removed - Tooltip functionality (lines 522-547) depends on these classes
- Missing accessibility attributes
Restore the structured HTML:
{
title: 'Community',
items: [
{
- html: `<a href="https://github.com/OpsiMate/documentation" target="_blank"><img src="/img/github.svg" alt="GitHub" style="height:24px;margin-right:8px;"/></a>
- <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" target="_blank"><img src="/img/slack.svg" alt="Slack" style="height:24px;"/></a>`,
+ html: `
+ <div class="footer-community-icons">
+ <a href="https://github.com/OpsiMate/documentation"
+ target="_blank" rel="noopener noreferrer"
+ aria-label="GitHub repository"
+ class="footer-community-icon-link">
+ <img src="/img/github.svg" alt="GitHub" class="footer-community-icon" />
+ </a>
+ <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG"
+ target="_blank" rel="noopener noreferrer"
+ aria-label="Slack community"
+ class="footer-community-icon-link">
+ <img src="/img/slack.svg" alt="Slack" class="footer-community-icon" />
+ </a>
+ </div>
+ `,
},
],
},📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| title: 'Community', | |
| items: [ | |
| { | |
| html: ` | |
| <div class="footer-integrations"> | |
| <a href="/docs/integrations/grafana" class="integration-item" aria-label="Grafana Integration"> | |
| <div class="integration-icon-container"> | |
| <img src="/img/grafana.svg" alt="Grafana" class="integration-icon" /> | |
| </div> | |
| <span class="integration-name">Grafana</span> | |
| </a> | |
| <a href="/docs/integrations/kibana" class="integration-item" aria-label="Kibana Integration"> | |
| <div class="integration-icon-container"> | |
| <img src="/img/kibana.svg" alt="Kibana" class="integration-icon" /> | |
| </div> | |
| <span class="integration-name">Kibana</span> | |
| </a> | |
| <a href="/docs/providers-services/services/container-services" class="integration-item" aria-label="Docker Integration"> | |
| <div class="integration-icon-container"> | |
| <img src="/img/docker.svg" alt="Docker" class="integration-icon" /> | |
| </div> | |
| <span class="integration-name">Docker</span> | |
| </a> | |
| <a href="/docs/providers-services/services/kubernetes-pods" class="integration-item" aria-label="Kubernetes Integration"> | |
| <div class="integration-icon-container"> | |
| <img src="/img/kubernetes.svg" alt="Kubernetes" class="integration-icon" /> | |
| </div> | |
| <span class="integration-name">Kubernetes</span> | |
| </a> | |
| <a href="/docs/providers-services/services/systemd-services" class="integration-item" aria-label="Systemd Integration"> | |
| <div class="integration-icon-container"> | |
| <img src="/img/systemd.svg" alt="Systemd" class="integration-icon" /> | |
| </div> | |
| <span class="integration-name">Systemd</span> | |
| </a> | |
| <a href="/docs/integrations/datadog" class="integration-item" aria-label="Datadog Integration"> | |
| <div class="integration-icon-container"> | |
| <img src="/img/datadog.svg" alt="Datadog" class="integration-icon" /> | |
| </div> | |
| <span class="integration-name">Datadog</span> | |
| </a> | |
| </div> | |
| `, | |
| }, | |
| html: `<a href="https://github.com/OpsiMate/documentation" target="_blank"><img src="/img/github.svg" alt="GitHub" style="height:24px;margin-right:8px;"/></a> | |
| <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" target="_blank"><img src="/img/slack.svg" alt="Slack" style="height:24px;"/></a>`, | |
| }, | |
| ], | |
| title: 'Community', | |
| items: [ | |
| { | |
| html: ` | |
| <div class="footer-community-icons"> | |
| <a href="https://github.com/OpsiMate/documentation" | |
| target="_blank" rel="noopener noreferrer" | |
| aria-label="GitHub repository" | |
| class="footer-community-icon-link"> | |
| <img src="/img/github.svg" alt="GitHub" class="footer-community-icon" /> | |
| </a> | |
| <a href="https://app.slack.com/client/T096DF2LNBS/C096DF2UDLG" | |
| target="_blank" rel="noopener noreferrer" | |
| aria-label="Slack community" | |
| class="footer-community-icon-link"> | |
| <img src="/img/slack.svg" alt="Slack" class="footer-community-icon" /> | |
| </a> | |
| </div> | |
| `, | |
| }, | |
| ], |
🤖 Prompt for AI Agents
In opsimate-docs/docusaurus.config.js around lines 259 to 265, the footer
currently uses inline HTML with styles and has removed the CSS classes expected
by custom.css (.footer-community-icons, .footer-community-icon-link,
.footer-community-icon and tooltip-related classes), breaking styling and
tooltip/accessibility behavior; revert to structured HTML that uses those class
names instead of inline styles, include the tooltip data attributes/classes
required by the tooltip CSS/JS, add appropriate accessibility attributes
(aria-labels, role where needed), and ensure external links include
target="_blank" and rel="noopener noreferrer" rather than relying on inline
style attributes.
Author
|
I have updated the navbar styling to improve size, spacing, and layout for better appearance. |
Contributor
|
@Sneha-chourey check the comments |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue Reference
What Was Changed
Updated the navbar styling to adjust size and layout for better appearance.
Why Was It Changed
The previous navbar was too small/compact.
To improve readability and UI consistency across pages.
Screenshots
Additional Context (Optional)
Tested on local server at http://localhost:3000/
Works on different screen sizes
Summary by CodeRabbit
Release Notes