@trishchuk/coolors-mcp 1.0.0 → 1.1.0

package/docs/.vitepress/components/TroubleshootingModal.vue

@@ -17,9 +17,11 @@
           <span class="problem-badge">Problem</span>
           <h2>{{ title }}</h2>
         </div>
-        <button @click="closeModal" class="close-btn" title="Close">&times;</button>
+        <button @click="closeModal" class="close-btn" title="Close">
+          &times;
+        </button>
       </div>
-      
+
       <div class="modal-body">
         <div class="solution-section">
           <h3 class="solution-title">
@@ -35,121 +37,124 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, onMounted, onUnmounted, nextTick } from "vue";
 
 const props = defineProps({
   title: {
     type: String,
-    required: true
+    required: true,
   },
   preview: {
     type: String,
-    required: true
-  }
-})
+    required: true,
+  },
+});
 
-const isOpen = ref(false)
+const isOpen = ref(false);
 
 const openModal = async () => {
-  isOpen.value = true
-  document.body.style.overflow = 'hidden'
-  
+  isOpen.value = true;
+  document.body.style.overflow = "hidden";
+
   // Wait for modal to render, then add copy buttons
-  await nextTick()
-  setTimeout(addCopyButtons, 100)
-}
+  await nextTick();
+  setTimeout(addCopyButtons, 100);
+};
 
 const closeModal = () => {
-  isOpen.value = false
-  document.body.style.overflow = ''
-}
+  isOpen.value = false;
+  document.body.style.overflow = "";
+};
 
 const addCopyButtons = () => {
-  const modal = document.querySelector('.issue-modal')
-  if (!modal) return
-  
+  const modal = document.querySelector(".issue-modal");
+  if (!modal) return;
+
   // Look for all code blocks (pre elements or code elements)
-  const codeBlocks = modal.querySelectorAll('pre, code')
-  
+  const codeBlocks = modal.querySelectorAll("pre, code");
+
   codeBlocks.forEach((block) => {
     // Skip inline code elements
-    if (block.tagName === 'CODE' && block.parentElement.tagName !== 'PRE') {
-      return
+    if (block.tagName === "CODE" && block.parentElement.tagName !== "PRE") {
+      return;
     }
-    
+
     // Skip if copy button already exists
-    if (block.querySelector('.copy-btn') || block.parentElement?.querySelector('.copy-btn')) return
-    
+    if (
+      block.querySelector(".copy-btn") ||
+      block.parentElement?.querySelector(".copy-btn")
+    )
+      return;
+
     // Use pre element for block code, code element for inline
-    const targetElement = block.tagName === 'PRE' ? block : block.parentElement
-    if (!targetElement) return
-    
-    const copyButton = document.createElement('button')
-    copyButton.className = 'copy-btn'
+    const targetElement = block.tagName === "PRE" ? block : block.parentElement;
+    if (!targetElement) return;
+
+    const copyButton = document.createElement("button");
+    copyButton.className = "copy-btn";
     copyButton.innerHTML = `
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
         <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
         <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
       </svg>
-    `
-    copyButton.title = 'Copy code'
-    copyButton.type = 'button'
-    
-    copyButton.addEventListener('click', async (e) => {
-      e.preventDefault()
-      e.stopPropagation()
-      
+    `;
+    copyButton.title = "Copy code";
+    copyButton.type = "button";
+
+    copyButton.addEventListener("click", async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+
       // Get the code content
-      const codeElement = targetElement.querySelector('code') || targetElement
-      if (!codeElement) return
-      
-      let textToCopy = codeElement.textContent || codeElement.innerText || ''
-      
+      const codeElement = targetElement.querySelector("code") || targetElement;
+      if (!codeElement) return;
+
+      let textToCopy = codeElement.textContent || codeElement.innerText || "";
+
       // Clean up the text (remove extra whitespace, etc.)
-      textToCopy = textToCopy.trim()
-      
-      console.log('Attempting to copy:', textToCopy) // Debug log
-      
+      textToCopy = textToCopy.trim();
+
+      console.log("Attempting to copy:", textToCopy); // Debug log
+
       try {
         // Try modern clipboard API first
         if (navigator.clipboard && navigator.clipboard.writeText) {
-          await navigator.clipboard.writeText(textToCopy)
+          await navigator.clipboard.writeText(textToCopy);
         } else {
           // Fallback for older browsers
-          const textArea = document.createElement('textarea')
-          textArea.value = textToCopy
-          textArea.style.position = 'fixed'
-          textArea.style.left = '-9999px'
-          document.body.appendChild(textArea)
-          textArea.select()
-          document.execCommand('copy')
-          document.body.removeChild(textArea)
+          const textArea = document.createElement("textarea");
+          textArea.value = textToCopy;
+          textArea.style.position = "fixed";
+          textArea.style.left = "-9999px";
+          document.body.appendChild(textArea);
+          textArea.select();
+          document.execCommand("copy");
+          document.body.removeChild(textArea);
         }
-        
+
         // Visual feedback
-        copyButton.classList.add('copied')
+        copyButton.classList.add("copied");
         copyButton.innerHTML = `
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
             <polyline points="20,6 9,17 4,12"></polyline>
           </svg>
-        `
-        
+        `;
+
         // Reset after 2 seconds
         setTimeout(() => {
-          copyButton.classList.remove('copied')
+          copyButton.classList.remove("copied");
           copyButton.innerHTML = `
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
               <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
               <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
             </svg>
-          `
-        }, 2000)
-        
-        console.log('Copy successful!') // Debug log
-        
+          `;
+        }, 2000);
+
+        console.log("Copy successful!"); // Debug log
       } catch (err) {
-        console.error('Failed to copy code:', err)
-        
+        console.error("Failed to copy code:", err);
+
         // Show error feedback
         copyButton.innerHTML = `
           <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
@@ -157,39 +162,39 @@ const addCopyButtons = () => {
             <line x1="15" y1="9" x2="9" y2="15"></line>
             <line x1="9" y1="9" x2="15" y2="15"></line>
           </svg>
-        `
-        
+        `;
+
         setTimeout(() => {
           copyButton.innerHTML = `
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
               <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
               <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
             </svg>
-          `
-        }, 2000)
+          `;
+        }, 2000);
       }
-    })
-    
+    });
+
     // Position the target element and add the button
-    targetElement.style.position = 'relative'
-    targetElement.appendChild(copyButton)
-  })
-}
+    targetElement.style.position = "relative";
+    targetElement.appendChild(copyButton);
+  });
+};
 
 const handleKeydown = (e) => {
-  if (e.key === 'Escape' && isOpen.value) {
-    closeModal()
+  if (e.key === "Escape" && isOpen.value) {
+    closeModal();
   }
-}
+};
 
 onMounted(() => {
-  document.addEventListener('keydown', handleKeydown)
-})
+  document.addEventListener("keydown", handleKeydown);
+});
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', handleKeydown)
-  document.body.style.overflow = ''
-})
+  document.removeEventListener("keydown", handleKeydown);
+  document.body.style.overflow = "";
+});
 </script>
 
 <style scoped>
@@ -416,7 +421,7 @@ onUnmounted(() => {
   transform: scale(0.95);
 }
 
-.solution-content :deep(ul), 
+.solution-content :deep(ul),
 .solution-content :deep(ol) {
   margin: 12px 0;
   padding-left: 20px;
@@ -441,32 +446,32 @@ onUnmounted(() => {
     width: 95vw;
     max-height: 90vh;
   }
-  
+
   .modal-header {
     padding: 16px 20px;
   }
-  
+
   .modal-title h2 {
     font-size: 18px;
   }
-  
+
   .modal-body {
     padding: 20px;
   }
-  
+
   .issue-card {
     padding: 14px;
   }
-  
+
   .issue-header {
     flex-direction: column;
     align-items: flex-start;
     gap: 4px;
   }
-  
+
   .expand-hint {
     opacity: 1;
     font-size: 11px;
   }
 }
-</style>
+</style>

package/docs/.vitepress/config.js

@@ -1,162 +1,192 @@
-import { defineConfig } from 'vitepress'
-import { withMermaid } from 'vitepress-plugin-mermaid'
+import { defineConfig } from "vitepress";
+import { withMermaid } from "vitepress-plugin-mermaid";
 
 export default withMermaid(
   defineConfig({
-    title: 'Coolors MCP',
-    titleTemplate: ':title | Coolors MCP Docs',
-    description: 'Advanced color operations MCP server with Material Design 3 support, CSS theme matching, image color extraction, and accessibility compliance.',
-    base: '/coolors-mcp/',
+    title: "Coolors MCP",
+    titleTemplate: ":title | Coolors MCP Docs",
+    description:
+      "Advanced color operations MCP server with Material Design 3 support, CSS theme matching, image color extraction, and accessibility compliance.",
+    base: "/coolors-mcp/",
     lastUpdated: true,
     cleanUrls: true,
-    
+    ignoreDeadLinks: true,
+
     // Force dark mode by default
     //appearance: 'dark',
-    
+
     head: [
       // Using emoji as favicon
-      ['link', { rel: 'icon', href: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🎨</text></svg>' }],
-      ['meta', { name: 'theme-color', content: '#0ea5e9' }],
-      ['meta', { property: 'og:type', content: 'website' }],
-      ['meta', { property: 'og:locale', content: 'en' }],
-      ['meta', { property: 'og:title', content: 'Coolors MCP | Advanced Color Operations for MCP' }],
-      ['meta', { property: 'og:site_name', content: 'Coolors MCP' }],
-      ['meta', { property: 'og:description', content: 'MCP server for advanced color operations, Material Design themes, CSS refactoring, and image color extraction.' }],
-      ['meta', { property: 'og:url', content: 'https://x51xxx.github.io/coolors-mcp/' }]
+      [
+        "link",
+        {
+          rel: "icon",
+          href: 'data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><text y=".9em" font-size="90">🎨</text></svg>',
+        },
+      ],
+      ["meta", { name: "theme-color", content: "#0ea5e9" }],
+      ["meta", { property: "og:type", content: "website" }],
+      ["meta", { property: "og:locale", content: "en" }],
+      [
+        "meta",
+        {
+          property: "og:title",
+          content: "Coolors MCP | Advanced Color Operations for MCP",
+        },
+      ],
+      ["meta", { property: "og:site_name", content: "Coolors MCP" }],
+      [
+        "meta",
+        {
+          property: "og:description",
+          content:
+            "MCP server for advanced color operations, Material Design themes, CSS refactoring, and image color extraction.",
+        },
+      ],
+      [
+        "meta",
+        {
+          property: "og:url",
+          content: "https://x51xxx.github.io/coolors-mcp/",
+        },
+      ],
     ],
-    
+
     themeConfig: {
-    // No logo - using text branding instead
-    
-    nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Getting Started', link: '/getting-started' },
-      { text: 'Tools', link: '/tools/README' }
-    ],
+      // No logo - using text branding instead
 
-    sidebar: [
-      {
-        text: 'Getting Started',
-        collapsed: false,
-        items: [
-          { text: 'Overview', link: '/' },
-          { text: 'Installation', link: '/installation' },
-          { text: 'Getting Started', link: '/getting-started' }
-        ]
-      },
-      {
-        text: 'Core Concepts',
-        collapsed: false,
-        items: [
-          { text: 'Color Spaces', link: '/concepts/color-spaces' },
-          { text: 'HCT Color System', link: '/concepts/hct' },
-          { text: 'Material Design 3', link: '/concepts/material-design' },
-          { text: 'Theme Matching', link: '/concepts/theme-matching' },
-          { text: 'Image Analysis', link: '/concepts/image-analysis' },
-          { text: 'Accessibility', link: '/concepts/accessibility' }
-        ]
-      },
-      {
-        text: 'Tools Reference',
-        collapsed: false,
-        items: [
-          { text: 'Color Operations', link: '/tools/color-operations' },
-          { text: 'Material Design', link: '/tools/material-design' },
-          { text: 'Theme Matching', link: '/tools/theme-matching' },
-          { text: 'Image Extraction', link: '/tools/image-extraction' },
-          { text: 'Accessibility', link: '/tools/accessibility' }
-        ]
-      },
-      {
-        text: 'Examples',
-        collapsed: false,
-        items: [
-          { text: 'Basic Color Operations', link: '/examples/basic-colors' },
-          { text: 'Creating Themes', link: '/examples/creating-themes' },
-          { text: 'CSS Refactoring', link: '/examples/css-refactoring' },
-          { text: 'Image Color Extraction', link: '/examples/image-extraction' }
-        ]
-      },
-      {
-        text: 'Resources',
-        collapsed: false,
-        items: [
-          { text: 'Troubleshooting', link: '/resources/troubleshooting' },
-          { text: 'FAQ', link: '/resources/faq' },
-          { text: 'Contributing', link: '/contributing' }
-        ]
-      },
-      {
-        text: 'Advanced',
-        collapsed: true,
-        items: [
-          { text: 'Custom Palettes', link: '/advanced/custom-palettes' },
-          { text: 'Batch Processing', link: '/advanced/batch-processing' },
-          { text: 'Integration Patterns', link: '/advanced/integration' }
-        ]
-      }
-    ],
+      nav: [
+        { text: "Home", link: "/" },
+        { text: "Getting Started", link: "/getting-started" },
+        { text: "Tools", link: "/tools/README" },
+      ],
 
-    socialLinks: [
-      { icon: 'github', link: 'https://github.com/x51xxx/coolors-mcp' }
-    ],
+      sidebar: [
+        {
+          text: "Getting Started",
+          collapsed: false,
+          items: [
+            { text: "Overview", link: "/" },
+            { text: "Installation", link: "/installation" },
+            { text: "Getting Started", link: "/getting-started" },
+          ],
+        },
+        {
+          text: "Core Concepts",
+          collapsed: false,
+          items: [
+            { text: "Color Spaces", link: "/concepts/color-spaces" },
+            { text: "HCT Color System", link: "/concepts/hct" },
+            { text: "Material Design 3", link: "/concepts/material-design" },
+            { text: "Theme Matching", link: "/concepts/theme-matching" },
+            { text: "Image Analysis", link: "/concepts/image-analysis" },
+            { text: "Accessibility", link: "/concepts/accessibility" },
+          ],
+        },
+        {
+          text: "Tools Reference",
+          collapsed: false,
+          items: [
+            { text: "Color Operations", link: "/tools/color-operations" },
+            { text: "Material Design", link: "/tools/material-design" },
+            { text: "Theme Matching", link: "/tools/theme-matching" },
+            { text: "Image Extraction", link: "/tools/image-extraction" },
+            { text: "Accessibility", link: "/tools/accessibility" },
+          ],
+        },
+        {
+          text: "Examples",
+          collapsed: false,
+          items: [
+            { text: "Basic Color Operations", link: "/examples/basic-colors" },
+            { text: "Creating Themes", link: "/examples/creating-themes" },
+            { text: "CSS Refactoring", link: "/examples/css-refactoring" },
+            {
+              text: "Image Color Extraction",
+              link: "/examples/image-extraction",
+            },
+          ],
+        },
+        {
+          text: "Resources",
+          collapsed: false,
+          items: [
+            { text: "Troubleshooting", link: "/resources/troubleshooting" },
+            { text: "FAQ", link: "/resources/faq" },
+            { text: "Contributing", link: "/contributing" },
+          ],
+        },
+        {
+          text: "Advanced",
+          collapsed: true,
+          items: [
+            { text: "Custom Palettes", link: "/advanced/custom-palettes" },
+            { text: "Batch Processing", link: "/advanced/batch-processing" },
+            { text: "Integration Patterns", link: "/advanced/integration" },
+          ],
+        },
+      ],
 
-    footer: {
-      message: 'Released under the MIT License.',
-      copyright: `Copyright © ${new Date().getFullYear()} Coolors MCP Contributors`
-    },
+      socialLinks: [
+        { icon: "github", link: "https://github.com/x51xxx/coolors-mcp" },
+      ],
 
-    search: {
-      provider: 'local',
-      options: {
-        placeholder: 'Search docs...',
-        detailedView: true,
-        translations: {
-          button: {
-            buttonText: 'Search',
-            buttonAriaLabel: 'Search documentation'
+      footer: {
+        message: "Released under the MIT License.",
+        copyright: `Copyright © ${new Date().getFullYear()} Coolors MCP Contributors`,
+      },
+
+      search: {
+        provider: "local",
+        options: {
+          placeholder: "Search docs...",
+          detailedView: true,
+          translations: {
+            button: {
+              buttonText: "Search",
+              buttonAriaLabel: "Search documentation",
+            },
+            modal: {
+              noResultsText: "No results found",
+              resetButtonTitle: "Clear search",
+              footer: {
+                selectText: "to select",
+                navigateText: "to navigate",
+                closeText: "to close",
+              },
+            },
           },
-          modal: {
-            noResultsText: 'No results found',
-            resetButtonTitle: 'Clear search',
-            footer: {
-              selectText: 'to select',
-              navigateText: 'to navigate',
-              closeText: 'to close'
-            }
-          }
-        }
-      }
-    },
+        },
+      },
 
-    editLink: {
-      pattern: 'https://github.com/x51xxx/coolors-mcp/edit/main/docs/:path',
-      text: 'Edit this page on GitHub'
-    },
+      editLink: {
+        pattern: "https://github.com/x51xxx/coolors-mcp/edit/main/docs/:path",
+        text: "Edit this page on GitHub",
+      },
 
-    lastUpdated: {
-      text: 'Last updated',
-      formatOptions: {
-        dateStyle: 'medium',
-        timeStyle: 'short'
-      }
-    },
+      lastUpdated: {
+        text: "Last updated",
+        formatOptions: {
+          dateStyle: "medium",
+          timeStyle: "short",
+        },
+      },
 
-    docFooter: {
-      prev: 'Previous page',
-      next: 'Next page'
-    },
+      docFooter: {
+        prev: "Previous page",
+        next: "Next page",
+      },
 
-    outline: {
-      label: 'On this page',
-      level: [2, 3]
-    },
+      outline: {
+        label: "On this page",
+        level: [2, 3],
+      },
 
-    returnToTopLabel: 'Return to top',
-    sidebarMenuLabel: 'Menu',
-    darkModeSwitchLabel: 'Appearance',
-    lightModeSwitchTitle: 'Switch to light theme',
-    darkModeSwitchTitle: 'Switch to dark theme'
-  }
-})
-)
+      returnToTopLabel: "Return to top",
+      sidebarMenuLabel: "Menu",
+      darkModeSwitchLabel: "Appearance",
+      lightModeSwitchTitle: "Switch to light theme",
+      darkModeSwitchTitle: "Switch to dark theme",
+    },
+  }),
+);