Improve documentation site user experience and developer workflow

## Features Added

- **Copy-to-clipboard functionality**: Added hover-to-reveal copy buttons on code blocks with visual feedback
- **Enhanced breadcrumbs navigation**: Improved styling with better visual separation and spacing
- **Image optimization**: Implemented lazy loading and responsive images using IdealImage plugin
- **Code quality tools**: Set up ESLint and Prettier with project-specific configurations

## Technical Improvements

- Added ESLint v9 configuration with Docusaurus-specific rules
- Configured Prettier with consistent formatting standards
- Swizzled CodeBlock component for enhanced functionality
- Created reusable OptimizedImage component with lazy loading
- Added MDX component overrides for automatic image optimization
- Enhanced breadcrumbs with improved UX styling

## Developer Experience

- Added npm scripts for linting and formatting
- Automatic code formatting for consistent style
- Better build performance with image optimization
- Improved accessibility with proper ARIA labels

All changes maintain backward compatibility and follow Docusaurus best practices.

Author: antonym

.eslintrc.js

@@ -0,0 +1,40 @@
+const { FlatCompat } = require('@eslint/eslintrc');
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+module.exports = [
+  ...compat.extends('@docusaurus/eslint-plugin/recommended'),
+  {
+    files: ['src/**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      sourceType: 'module',
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: {
+        window: 'readonly',
+        document: 'readonly',
+        console: 'readonly',
+        process: 'readonly',
+        require: 'readonly',
+        module: 'readonly',
+        __dirname: 'readonly',
+      },
+    },
+    rules: {
+      'react/prop-types': 'off',
+      '@docusaurus/string-literal-i18n-messages': 'off',
+    },
+  },
+  {
+    ignores: [
+      'build/**',
+      '.docusaurus/**',
+      'node_modules/**',
+    ],
+  },
+];

.prettierignore

@@ -0,0 +1,6 @@
+build
+.docusaurus
+node_modules
+*.md
+yarn.lock
+package-lock.json

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSpacing": false,
+  "arrowParens": "avoid"
+}

docs/kb/providers/equinixmetal.md

@@ -52,11 +52,11 @@ address information can be found by querying https://metadata.platformequinix.co
 from the host.
 
 More information on how Equinix Metal configures bonding can be found
-[here](https://metal.equinix.com/developers/docs/networking/layer2/).
+[here](https://deploy.equinix.com/developers/docs/metal/layer2-networking/overview/).
 
 Nameservers should be configured as:
 
 ```
 nameserver 147.75.207.207
 nameserver 147.75.207.208
-```
+```

docusaurus.config.js

@@ -14,6 +14,7 @@ module.exports = {
   markdown: {
     mermaid: true,
   },
+  staticDirectories: ['static'],
   themes: ['@docusaurus/theme-mermaid'],
   themeConfig: {
     metadata: [
@@ -161,6 +162,18 @@ module.exports = {
       copyright: `Copyright © ${new Date().getFullYear()} netboot.xyz`,
     },
   },
+  plugins: [
+    [
+      '@docusaurus/plugin-ideal-image',
+      {
+        quality: 70,
+        max: 1030,
+        min: 640,
+        steps: 2,
+        disableInDev: false,
+      },
+    ],
+  ],
   presets: [
     [
       "@docusaurus/preset-classic",

package.json

@@ -9,7 +9,11 @@
     "swizzle": "docusaurus swizzle",
     "deploy": "docusaurus deploy",
     "serve": "docusaurus serve",
-    "clear": "docusaurus clear"
+    "clear": "docusaurus clear",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
+    "lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+    "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md}",
+    "format:check": "prettier --check src/**/*.{js,jsx,ts,tsx,css,md}"
   },
   "dependencies": {
     "@docusaurus/core": "3.8.1",
@@ -38,5 +42,12 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@docusaurus/eslint-plugin": "^3.8.1",
+    "@eslint/eslintrc": "^3.3.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "prettier": "^3.6.2"
   }
 }

src/components/DownloadCard.js

@@ -9,21 +9,18 @@ const DownloadCard = ({
   url,
   type,
   isRecommended = false,
-  icon
+  icon,
 }) => {
   const handleDownload = () => {
     window.open(url, '_blank');
   };
 
   return (
-    <div className={clsx(
-      styles.downloadCard,
-      isRecommended && styles.recommended
-    )}>
+    <div
+      className={clsx(styles.downloadCard, isRecommended && styles.recommended)}
+    >
       {isRecommended && (
-        <div className={styles.recommendedBadge}>
-          Recommended
-        </div>
+        <div className={styles.recommendedBadge}>Recommended</div>
       )}
 
       <div className={styles.cardHeader}>
@@ -40,7 +37,7 @@ const DownloadCard = ({
         aria-label={`Download ${title}`}
       >
         <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
+          <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" />
         </svg>
         Download
       </button>
@@ -53,7 +50,7 @@ DownloadCard.propTypes = {
   url: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
   isRecommended: PropTypes.bool,
-  icon: PropTypes.node
+  icon: PropTypes.node,
 };
 
 export default DownloadCard;

src/components/DownloadCard.module.css

@@ -140,4 +140,4 @@
   .title {
     font-size: 1rem;
   }
-}
+}

src/components/DownloadSection.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import clsx from 'clsx';
 import DownloadCard from './DownloadCard';
 import styles from './DownloadSection.module.css';
@@ -9,7 +9,7 @@ const DownloadSection = ({
   description,
   downloads,
   isCollapsible = false,
-  defaultExpanded = true
+  defaultExpanded = true,
 }) => {
   const [isExpanded, setIsExpanded] = useState(defaultExpanded);
 
@@ -24,7 +24,7 @@ const DownloadSection = ({
       <div
         className={clsx(
           styles.sectionHeader,
-          isCollapsible && styles.collapsible
+          isCollapsible && styles.collapsible,
         )}
         onClick={toggleExpanded}
       >
@@ -41,7 +41,7 @@ const DownloadSection = ({
               fill="currentColor"
               className={clsx(styles.chevron, isExpanded && styles.expanded)}
             >
-              <path d="M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6z"/>
+              <path d="M7.41 8.84L12 13.42l4.59-4.58L18 10.25l-6 6-6-6z" />
             </svg>
           </button>
         )}
@@ -65,4 +65,4 @@ DownloadSection.propTypes = {
   defaultExpanded: PropTypes.bool,
 };
 
-export default DownloadSection;
+export default DownloadSection;

src/components/DownloadSection.module.css

@@ -87,4 +87,4 @@
   .toggleButton {
     align-self: flex-end;
   }
-}
+}