Skip to content

Update navbar styling #76

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Update navbar styling #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
330 changes: 209 additions & 121 deletions opsimate-docs/docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,200 @@
// // 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,
// },
// },
// };

Comment on lines +1 to +197
Copy link

@coderabbitai coderabbitai bot Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ 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.

// docusaurus.config.js
module.exports = {
title: 'OpsiMate',
Expand Down Expand Up @@ -28,10 +225,9 @@ module.exports = {
],

themeConfig: {
// Color mode configuration - THIS ENABLES THE TOGGLE
colorMode: {
defaultMode: 'light',
disableSwitch: false, // This enables the toggle!
disableSwitch: false,
respectPrefersColorScheme: true,
},

Expand All @@ -44,32 +240,14 @@ module.exports = {
{ 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'
},
{ href: 'https://www.opsimate.com/', label: 'Website', position: 'left' },

// --- Right-side icons (GitHub + Slack) ---
// 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>`,
},
Comment on lines +245 to 251
Copy link

@coderabbitai coderabbitai bot Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

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.css style .navbar-icons-container which is no longer present
  • Lines 65-77, 92-97 in custom.css style .navbar-icon-link and .navbar-icon which 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.

],
},
Expand All @@ -78,112 +256,23 @@ module.exports = {
style: 'dark',
links: [
{
title: 'Integrate with',
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>`,
},
],
Comment on lines +259 to 265
Copy link

@coderabbitai coderabbitai bot Oct 25, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

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.css style .footer-community-icons which is removed
  • Lines 238-248, 256-263 style .footer-community-icon-link which is removed
  • Lines 249-254, 261-263 style .footer-community-icon which 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.

},

{

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: '/',
},
{ 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>
`,
copyright: `Copyright © ${new Date().getFullYear()} OpsiMate. All rights reserved.`,
},

algolia: {
Expand All @@ -195,4 +284,3 @@ module.exports = {
},
};


Loading