@trishchuk/coolors-mcp 1.0.0 → 1.0.1

package/docs/.vitepress/theme/FundingLayout.vue

@@ -1,22 +1,29 @@
 <template>
   <div class="funding-layout">
     <transition name="fade">
-      <button 
+      <button
         v-if="showReturnButton"
         @click="goBack"
         class="return-button"
         title="Return to previous page"
       >
-        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-          <path d="M19 12H5M5 12L12 19M5 12L12 5"/>
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+        >
+          <path d="M19 12H5M5 12L12 19M5 12L12 5" />
         </svg>
         <span>Return</span>
       </button>
     </transition>
-    
+
     <FundingHero />
-    
-    <div 
+
+    <div
       class="funding-content"
       @mouseenter="handleMouseEnter"
       @mousemove="handleMouseMove"
@@ -25,75 +32,75 @@
     >
       <Content />
     </div>
-    
+
     <FundingEffects />
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
-import { Content, useRouter } from 'vitepress'
-import FundingHero from './components/FundingHero.vue'
-import FundingEffects from './components/FundingEffects.vue'
+import { ref, onMounted, onUnmounted } from "vue";
+import { Content, useRouter } from "vitepress";
+import FundingHero from "./components/FundingHero.vue";
+import FundingEffects from "./components/FundingEffects.vue";
 
-const contentRef = ref(null)
-const showReturnButton = ref(false)
-const router = useRouter()
+const contentRef = ref(null);
+const showReturnButton = ref(false);
+const router = useRouter();
 
 const goBack = () => {
   if (window.history.length > 1) {
-    window.history.back()
+    window.history.back();
   } else {
-    router.go('/coolors-mcp/')
+    router.go("/coolors-mcp/");
   }
-}
+};
 
 // Show return button after scroll
 onMounted(() => {
   const handleScroll = () => {
-    showReturnButton.value = window.scrollY > 100
-  }
-  
-  window.addEventListener('scroll', handleScroll)
-  
+    showReturnButton.value = window.scrollY > 100;
+  };
+
+  window.addEventListener("scroll", handleScroll);
+
   // Add page transition class
-  document.body.classList.add('page-transition-active')
+  document.body.classList.add("page-transition-active");
   setTimeout(() => {
-    document.body.classList.remove('page-transition-active')
-  }, 600)
-  
+    document.body.classList.remove("page-transition-active");
+  }, 600);
+
   onUnmounted(() => {
-    window.removeEventListener('scroll', handleScroll)
-  })
-})
+    window.removeEventListener("scroll", handleScroll);
+  });
+});
 
 const handleMouseEnter = (e) => {
-  if (!contentRef.value) return
-  
-  const rect = contentRef.value.getBoundingClientRect()
-  const x = e.clientX - rect.left
-  const y = e.clientY - rect.top
-  
-  contentRef.value.style.setProperty('--content-mouse-x', `${x}px`)
-  contentRef.value.style.setProperty('--content-mouse-y', `${y}px`)
-  contentRef.value.classList.add('mouse-over')
-}
+  if (!contentRef.value) return;
+
+  const rect = contentRef.value.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+
+  contentRef.value.style.setProperty("--content-mouse-x", `${x}px`);
+  contentRef.value.style.setProperty("--content-mouse-y", `${y}px`);
+  contentRef.value.classList.add("mouse-over");
+};
 
 const handleMouseMove = (e) => {
-  if (!contentRef.value) return
-  
-  const rect = contentRef.value.getBoundingClientRect()
-  const x = e.clientX - rect.left
-  const y = e.clientY - rect.top
-  
-  contentRef.value.style.setProperty('--content-mouse-x', `${x}px`)
-  contentRef.value.style.setProperty('--content-mouse-y', `${y}px`)
-}
+  if (!contentRef.value) return;
+
+  const rect = contentRef.value.getBoundingClientRect();
+  const x = e.clientX - rect.left;
+  const y = e.clientY - rect.top;
+
+  contentRef.value.style.setProperty("--content-mouse-x", `${x}px`);
+  contentRef.value.style.setProperty("--content-mouse-y", `${y}px`);
+};
 
 const handleMouseLeave = () => {
-  if (!contentRef.value) return
-  contentRef.value.classList.remove('mouse-over')
-}
+  if (!contentRef.value) return;
+  contentRef.value.classList.remove("mouse-over");
+};
 </script>
 
 <style scoped>
@@ -169,7 +176,7 @@ const handleMouseLeave = () => {
 }
 
 .funding-content::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: -100px;
@@ -217,7 +224,11 @@ html:not(.dark) .funding-content::before {
   margin: 64px 0 32px;
   padding: 0 24px;
   text-align: center;
-  background: linear-gradient(135deg, var(--vp-c-text-1) 0%, var(--vp-c-brand) 100%);
+  background: linear-gradient(
+    135deg,
+    var(--vp-c-text-1) 0%,
+    var(--vp-c-brand) 100%
+  );
   -webkit-background-clip: text;
   background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -248,4 +259,4 @@ html:not(.dark) .funding-content::before {
 .funding-layout strong {
   color: var(--vp-c-text-1);
 }
-</style>
+</style>

package/docs/.vitepress/theme/Layout.vue

@@ -5,15 +5,13 @@
       <span v-if="!isHomePage" class="replacement-title">Documentation</span>
     </template>
     <template #nav-bar-content-before>
-      <div class="nav-warning">
-        🏷️ <span>1.0.0</span>
-      </div>
+      <div class="nav-warning">🏷️ <span>1.0.0</span></div>
     </template>
     <template #sidebar-nav-after>
       <!-- Sidebar ad placement - most non-intrusive -->
-      <AdBanner 
+      <AdBanner
         v-if="!isHomePage"
-        type="carbon" 
+        type="carbon"
         position="sidebar"
         :dismissible="true"
         :hide-on-paths="['/', '/getting-started']"
@@ -27,21 +25,23 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
-import { useRoute, useData } from 'vitepress'
-import DefaultTheme from 'vitepress/theme'
-import AdBanner from './components/AdBanner.vue'
-import SupportSection from './components/SupportSection.vue'
-import FundingHero from './components/FundingHero.vue'
-import FundingEffects from './components/FundingEffects.vue'
-import FundingLayout from './FundingLayout.vue'
-
-const { Layout } = DefaultTheme
-const route = useRoute()
-const { frontmatter } = useData()
-
-const isHomePage = computed(() => route.path === '/' || route.path === '/coolors-mcp/')
-const isFundingPage = computed(() => route.path.includes('/funding'))
+import { computed } from "vue";
+import { useRoute, useData } from "vitepress";
+import DefaultTheme from "vitepress/theme";
+import AdBanner from "./components/AdBanner.vue";
+import SupportSection from "./components/SupportSection.vue";
+import FundingHero from "./components/FundingHero.vue";
+import FundingEffects from "./components/FundingEffects.vue";
+import FundingLayout from "./FundingLayout.vue";
+
+const { Layout } = DefaultTheme;
+const route = useRoute();
+const { frontmatter } = useData();
+
+const isHomePage = computed(
+  () => route.path === "/" || route.path === "/coolors-mcp/",
+);
+const isFundingPage = computed(() => route.path.includes("/funding"));
 </script>
 
 <style>
@@ -131,4 +131,4 @@ html.dark .nav-warning {
     display: none;
   }
 }
-</style>
+</style>

package/docs/.vitepress/theme/components/AdBanner.vue

@@ -4,8 +4,15 @@
     <div v-if="type === 'github-sponsors'" class="sponsor-banner">
       <div class="sponsor-content">
         <span class="sponsor-icon">💖</span>
-        <span class="sponsor-text">Support this project on GitHub Sponsors</span>
-        <a :href="githubSponsorsUrl" target="_blank" rel="noopener" class="sponsor-button">
+        <span class="sponsor-text"
+          >Support this project on GitHub Sponsors</span
+        >
+        <a
+          :href="githubSponsorsUrl"
+          target="_blank"
+          rel="noopener"
+          class="sponsor-button"
+        >
           Sponsor
         </a>
       </div>
@@ -17,100 +24,106 @@
         <!-- Carbon will inject content here -->
       </div>
     </div>
-    
 
     <!-- Dismissible close button -->
-    <button v-if="dismissible" @click="dismissAd" class="ad-close" aria-label="Close ad">
+    <button
+      v-if="dismissible"
+      @click="dismissAd"
+      class="ad-close"
+      aria-label="Close ad"
+    >
       ×
     </button>
   </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted } from "vue";
 
 const props = defineProps({
   type: {
     type: String,
-    default: 'github-sponsors', // 'github-sponsors', 'carbon'
-    validator: (value) => ['github-sponsors', 'carbon'].includes(value)
+    default: "github-sponsors", // 'github-sponsors', 'carbon'
+    validator: (value) => ["github-sponsors", "carbon"].includes(value),
   },
   position: {
     type: String,
-    default: 'top', // 'top', 'bottom', 'sidebar', 'inline'
-    validator: (value) => ['top', 'bottom', 'sidebar', 'inline'].includes(value)
+    default: "top", // 'top', 'bottom', 'sidebar', 'inline'
+    validator: (value) =>
+      ["top", "bottom", "sidebar", "inline"].includes(value),
   },
   githubSponsorsUrl: {
     type: String,
-    default: 'https://github.com/sponsors/jamubc'
+    default: "https://github.com/sponsors/jamubc",
   },
   dismissible: {
     type: Boolean,
-    default: true
+    default: true,
   },
   showOnPaths: {
     type: Array,
-    default: () => [] // Empty array means show on all paths
+    default: () => [], // Empty array means show on all paths
   },
   hideOnPaths: {
     type: Array,
-    default: () => ['/'] // Hide on home page by default
+    default: () => ["/"], // Hide on home page by default
   },
-})
+});
 
-const isDismissed = ref(false)
-const storageKey = `ad-dismissed-${props.type}-${props.position}`
+const isDismissed = ref(false);
+const storageKey = `ad-dismissed-${props.type}-${props.position}`;
 
-const bannerClass = computed(() => `ad-banner--${props.position}`)
+const bannerClass = computed(() => `ad-banner--${props.position}`);
 
 const shouldShowAd = computed(() => {
-  if (isDismissed.value) return false
-  
+  if (isDismissed.value) return false;
+
   // Check if we're in browser environment
-  if (typeof window === 'undefined') return false
-  
-  const currentPath = window.location.pathname
-  
+  if (typeof window === "undefined") return false;
+
+  const currentPath = window.location.pathname;
+
   // If showOnPaths is specified, only show on those paths
   if (props.showOnPaths.length > 0) {
-    return props.showOnPaths.some(path => currentPath.includes(path))
+    return props.showOnPaths.some((path) => currentPath.includes(path));
   }
-  
+
   // If hideOnPaths is specified, hide on those paths
   if (props.hideOnPaths.length > 0) {
-    return !props.hideOnPaths.some(path => currentPath.includes(path))
+    return !props.hideOnPaths.some((path) => currentPath.includes(path));
   }
-  
-  return true
-})
+
+  return true;
+});
 
 const dismissAd = () => {
-  isDismissed.value = true
-  if (typeof localStorage !== 'undefined') {
-    localStorage.setItem(storageKey, 'true')
+  isDismissed.value = true;
+  if (typeof localStorage !== "undefined") {
+    localStorage.setItem(storageKey, "true");
   }
-}
+};
 
 onMounted(() => {
   // Check if ad was previously dismissed
-  if (typeof localStorage !== 'undefined') {
-    const dismissed = localStorage.getItem(storageKey)
-    if (dismissed === 'true') {
-      isDismissed.value = true
+  if (typeof localStorage !== "undefined") {
+    const dismissed = localStorage.getItem(storageKey);
+    if (dismissed === "true") {
+      isDismissed.value = true;
     }
   }
-  
+
   // Load Carbon Ads script if needed
-  if (props.type === 'carbon' && !document.getElementById('carbon-script')) {
-    const script = document.createElement('script')
-    script.id = 'carbon-script'
-    script.async = true
-    script.type = 'text/javascript'
-    script.src = '//cdn.carbonads.com/carbon.js?serve=YOUR_CARBON_ID&placement=YOUR_PLACEMENT'
-    script.setAttribute('id', '_carbonads_js')
-    document.head.appendChild(script)
+  if (props.type === "carbon" && !document.getElementById("carbon-script")) {
+    const script = document.createElement("script");
+    script.id = "carbon-script";
+    script.async = true;
+    script.type = "text/javascript";
+    script.src =
+      "//cdn.carbonads.com/carbon.js?serve=YOUR_CARBON_ID&placement=YOUR_PLACEMENT";
+    script.setAttribute("id", "_carbonads_js");
+    document.head.appendChild(script);
   }
-})
+});
 </script>
 
 <style scoped>
@@ -164,7 +177,11 @@ onMounted(() => {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  background: linear-gradient(135deg, rgba(66, 184, 131, 0.1) 0%, rgba(53, 73, 94, 0.1) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(66, 184, 131, 0.1) 0%,
+    rgba(53, 73, 94, 0.1) 100%
+  );
 }
 
 .sponsor-content {
@@ -294,13 +311,13 @@ onMounted(() => {
     max-width: none;
     margin: 16px;
   }
-  
+
   .sponsor-content {
     flex-direction: column;
     gap: 8px;
     text-align: center;
   }
-  
+
   .sponsor-text {
     font-size: 13px;
   }
@@ -312,6 +329,10 @@ html.dark .ad-banner--top {
 }
 
 html.dark .sponsor-banner {
-  background: linear-gradient(135deg, rgba(66, 184, 131, 0.15) 0%, rgba(53, 73, 94, 0.15) 100%);
+  background: linear-gradient(
+    135deg,
+    rgba(66, 184, 131, 0.15) 0%,
+    rgba(53, 73, 94, 0.15) 100%
+  );
 }
-</style>
+</style>

package/docs/.vitepress/theme/components/AdPlaceholder.vue

@@ -9,8 +9,8 @@
         </p>
       </div>
     </div>
-    <a 
-      href="https://github.com/sponsors/jamubc" 
+    <a
+      href="https://github.com/sponsors/jamubc"
       class="placeholder-cta"
       target="_blank"
       rel="noopener"
@@ -75,4 +75,4 @@
 .VPSidebar .ad-placeholder {
   max-width: 250px;
 }
-</style>
+</style>

package/docs/.vitepress/theme/components/FundingEffects.vue

@@ -5,43 +5,46 @@
 </template>
 
 <script setup>
-import { onMounted } from 'vue'
+import { onMounted } from "vue";
 
 onMounted(() => {
   // Add intersection observer for scroll animations
-  const observer = new IntersectionObserver((entries) => {
-    entries.forEach(entry => {
-      if (entry.isIntersecting) {
-        entry.target.classList.add('visible')
-      }
-    })
-  }, { threshold: 0.1 })
-  
+  const observer = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          entry.target.classList.add("visible");
+        }
+      });
+    },
+    { threshold: 0.1 },
+  );
+
   // Observe all cards
-  const cards = document.querySelectorAll('.funding-card, .contribute-card')
-  cards.forEach(card => observer.observe(card))
-  
+  const cards = document.querySelectorAll(".funding-card, .contribute-card");
+  cards.forEach((card) => observer.observe(card));
+
   // Add hover effects to cards
-  cards.forEach(card => {
-    card.addEventListener('mouseenter', (e) => {
-      const rect = card.getBoundingClientRect()
-      const x = e.clientX - rect.left
-      const y = e.clientY - rect.top
-      
-      card.style.setProperty('--card-mouse-x', `${x}px`)
-      card.style.setProperty('--card-mouse-y', `${y}px`)
-    })
-    
-    card.addEventListener('mousemove', (e) => {
-      const rect = card.getBoundingClientRect()
-      const x = e.clientX - rect.left
-      const y = e.clientY - rect.top
-      
-      card.style.setProperty('--card-mouse-x', `${x}px`)
-      card.style.setProperty('--card-mouse-y', `${y}px`)
-    })
-  })
-})
+  cards.forEach((card) => {
+    card.addEventListener("mouseenter", (e) => {
+      const rect = card.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      card.style.setProperty("--card-mouse-x", `${x}px`);
+      card.style.setProperty("--card-mouse-y", `${y}px`);
+    });
+
+    card.addEventListener("mousemove", (e) => {
+      const rect = card.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
+
+      card.style.setProperty("--card-mouse-x", `${x}px`);
+      card.style.setProperty("--card-mouse-y", `${y}px`);
+    });
+  });
+});
 </script>
 
 <style>
@@ -67,7 +70,7 @@ onMounted(() => {
 }
 
 .funding-card::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -123,7 +126,7 @@ onMounted(() => {
 .support-button--primary:hover {
   background: var(--vp-c-brand-dark);
   transform: translateY(-2px);
-  box-shadow: 
+  box-shadow:
     0 4px 12px rgba(66, 184, 131, 0.3),
     0 0 20px rgba(218, 119, 86, 0.4),
     0 0 30px rgba(71, 150, 227, 0.3),
@@ -132,15 +135,16 @@ onMounted(() => {
 }
 
 @keyframes glow {
-  0%, 100% { 
-    box-shadow: 
+  0%,
+  100% {
+    box-shadow:
       0 4px 12px rgba(66, 184, 131, 0.3),
       0 0 20px rgba(218, 119, 86, 0.4),
       0 0 30px rgba(71, 150, 227, 0.3),
       0 0 40px rgba(255, 140, 0, 0.2);
   }
-  50% { 
-    box-shadow: 
+  50% {
+    box-shadow:
       0 4px 16px rgba(66, 184, 131, 0.4),
       0 0 25px rgba(218, 119, 86, 0.5),
       0 0 35px rgba(71, 150, 227, 0.4),
@@ -188,7 +192,7 @@ onMounted(() => {
 }
 
 .contribute-card::before {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -248,7 +252,7 @@ onMounted(() => {
 }
 
 .progress-fill::after {
-  content: '';
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -264,12 +268,18 @@ onMounted(() => {
 }
 
 @keyframes progress {
-  from { width: 0; }
+  from {
+    width: 0;
+  }
 }
 
 @keyframes shimmer-progress {
-  0% { transform: translateX(-100%); }
-  100% { transform: translateX(100%); }
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
 }
 
 /* Light mode adjustments */
@@ -301,7 +311,7 @@ html:not(.dark) .contribute-card:hover {
 
 html:not(.dark) .support-button-secondary:hover {
   border-color: rgba(66, 139, 202, 0.6);
-  box-shadow: 
+  box-shadow:
     0 0 30px rgba(66, 139, 202, 0.1),
     inset 0 0 20px rgba(66, 139, 202, 0.03);
 }
@@ -311,12 +321,26 @@ html:not(.dark) .progress-fill {
 }
 
 /* Stagger animations */
-.funding-card:nth-child(1) { transition-delay: 0.1s; }
-.funding-card:nth-child(2) { transition-delay: 0.2s; }
-.funding-card:nth-child(3) { transition-delay: 0.3s; }
-
-.contribute-card:nth-child(1) { transition-delay: 0.1s; }
-.contribute-card:nth-child(2) { transition-delay: 0.2s; }
-.contribute-card:nth-child(3) { transition-delay: 0.3s; }
-.contribute-card:nth-child(4) { transition-delay: 0.4s; }
-</style>
+.funding-card:nth-child(1) {
+  transition-delay: 0.1s;
+}
+.funding-card:nth-child(2) {
+  transition-delay: 0.2s;
+}
+.funding-card:nth-child(3) {
+  transition-delay: 0.3s;
+}
+
+.contribute-card:nth-child(1) {
+  transition-delay: 0.1s;
+}
+.contribute-card:nth-child(2) {
+  transition-delay: 0.2s;
+}
+.contribute-card:nth-child(3) {
+  transition-delay: 0.3s;
+}
+.contribute-card:nth-child(4) {
+  transition-delay: 0.4s;
+}
+</style>