@trishchuk/coolors-mcp 1.0.0

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

@@ -0,0 +1,251 @@
+<template>
+  <div class="funding-layout">
+    <transition name="fade">
+      <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>
+        <span>Return</span>
+      </button>
+    </transition>
+    
+    <FundingHero />
+    
+    <div 
+      class="funding-content"
+      @mouseenter="handleMouseEnter"
+      @mousemove="handleMouseMove"
+      @mouseleave="handleMouseLeave"
+      ref="contentRef"
+    >
+      <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'
+
+const contentRef = ref(null)
+const showReturnButton = ref(false)
+const router = useRouter()
+
+const goBack = () => {
+  if (window.history.length > 1) {
+    window.history.back()
+  } else {
+    router.go('/coolors-mcp/')
+  }
+}
+
+// Show return button after scroll
+onMounted(() => {
+  const handleScroll = () => {
+    showReturnButton.value = window.scrollY > 100
+  }
+  
+  window.addEventListener('scroll', handleScroll)
+  
+  // Add page transition class
+  document.body.classList.add('page-transition-active')
+  setTimeout(() => {
+    document.body.classList.remove('page-transition-active')
+  }, 600)
+  
+  onUnmounted(() => {
+    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')
+}
+
+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`)
+}
+
+const handleMouseLeave = () => {
+  if (!contentRef.value) return
+  contentRef.value.classList.remove('mouse-over')
+}
+</script>
+
+<style scoped>
+.funding-layout {
+  min-height: 100vh;
+  background: var(--vp-c-bg);
+  animation: pageEnter 0.6s ease-out;
+}
+
+@keyframes pageEnter {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.return-button {
+  position: fixed;
+  bottom: 32px;
+  right: 32px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  background: transparent;
+  color: var(--vp-c-text-1);
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 8px;
+  font-weight: 500;
+  text-decoration: none;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.9rem;
+  z-index: 100;
+}
+
+.return-button:hover {
+  background: var(--vp-c-bg-mute);
+  border-color: var(--vp-c-brand);
+  transform: translateY(-2px);
+}
+
+.return-button svg {
+  transition: transform 0.3s ease;
+}
+
+.return-button:hover svg {
+  transform: translateX(-2px);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: all 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.funding-content {
+  --content-mouse-x: 50%;
+  --content-mouse-y: 50%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 48px 24px 96px;
+  position: relative;
+}
+
+.funding-content::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100px;
+  right: -100px;
+  bottom: 0;
+  background: radial-gradient(
+    1000px circle at var(--content-mouse-x) var(--content-mouse-y),
+    rgba(255, 140, 0, 0.03),
+    transparent 65%
+  );
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.6s ease;
+}
+
+.funding-content.mouse-over::before {
+  opacity: 1;
+}
+
+/* Light mode adjustments */
+html:not(.dark) .funding-content::before {
+  background: radial-gradient(
+    1000px circle at var(--content-mouse-x) var(--content-mouse-y),
+    rgba(66, 139, 202, 0.02),
+    transparent 65%
+  );
+}
+
+@media (max-width: 768px) {
+  .funding-content {
+    padding: 32px 20px 64px;
+  }
+}
+</style>
+
+<style>
+/* Global styles for funding content */
+.funding-layout h1 {
+  display: none; /* Hide the markdown title since we have the hero */
+}
+
+.funding-layout h2 {
+  font-size: 36px;
+  font-weight: 700;
+  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%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  line-height: 1.3;
+}
+
+.funding-layout h3 {
+  font-size: 24px;
+  font-weight: 600;
+  margin: 0 0 16px;
+}
+
+.funding-layout p {
+  line-height: 1.7;
+  color: var(--vp-c-text-2);
+}
+
+.funding-layout ul {
+  margin: 16px 0;
+  padding-left: 24px;
+}
+
+.funding-layout li {
+  margin: 8px 0;
+  color: var(--vp-c-text-2);
+}
+
+.funding-layout strong {
+  color: var(--vp-c-text-1);
+}
+</style>

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

@@ -0,0 +1,134 @@
+<template>
+  <FundingLayout v-if="frontmatter.layout === 'funding'" />
+  <Layout v-else>
+    <template #nav-bar-title-after>
+      <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>
+    </template>
+    <template #sidebar-nav-after>
+      <!-- Sidebar ad placement - most non-intrusive -->
+      <AdBanner 
+        v-if="!isHomePage"
+        type="carbon" 
+        position="sidebar"
+        :dismissible="true"
+        :hide-on-paths="['/', '/getting-started']"
+      />
+    </template>
+    <template #doc-footer-before>
+      <!-- Footer support section - shown after users find value -->
+      <SupportSection v-if="!isHomePage && !isFundingPage" />
+    </template>
+  </Layout>
+</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'))
+</script>
+
+<style>
+/* Hide original title text when sidebar is present */
+.VPNavBar.has-sidebar .VPNavBarTitle .title > span:not(.replacement-title) {
+  display: none;
+}
+
+/* Style the replacement title */
+.replacement-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--vp-c-text-1);
+}
+
+/* Ensure version badge is visible in light mode */
+.nav-warning {
+  color: var(--vp-c-text-2);
+  background: var(--vp-c-bg-soft);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+  border: 1px solid var(--vp-c-border);
+}
+
+/* Ensure the nav bar title container accommodates our custom title */
+.VPNavBar.has-sidebar .VPNavBarTitle {
+  position: relative;
+}
+
+/* Restore original title on home page (no sidebar) */
+.VPNavBar:not(.has-sidebar) .VPNavBarTitle .title > span {
+  display: inline;
+}
+
+.nav-warning {
+  display: inline-flex;
+  align-items: center;
+  margin-right: auto;
+  margin-left: 28px;
+  padding: 4px 12px;
+  background-color: var(--vp-c-yellow-soft);
+  color: var(--vp-c-yellow-darker);
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  flex-shrink: 0;
+  border: 1px solid var(--vp-c-yellow);
+}
+
+/* Ensure proper contrast in both themes */
+:root {
+  --vp-c-yellow-soft: #fef3c7;
+  --vp-c-yellow: #f59e0b;
+  --vp-c-yellow-darker: #92400e;
+}
+
+html.dark {
+  --vp-c-yellow-soft: rgba(245, 158, 11, 0.15);
+  --vp-c-yellow: #fbbf24;
+  --vp-c-yellow-darker: #fde047;
+}
+
+/* Add extra spacing on home page to prevent overlap */
+.VPNavBar:not(.has-sidebar) .nav-warning {
+  margin-left: 32px;
+}
+
+/* Consistent spacing when sidebar is present */
+.VPNavBar.has-sidebar .nav-warning {
+  margin-left: 28px;
+}
+
+.nav-warning span {
+  margin-left: 6px;
+}
+
+html.dark .nav-warning {
+  background-color: rgba(251, 191, 36, 0.1);
+  color: #fbbf24;
+}
+
+/* Hide on mobile to prevent navbar overflow */
+@media (max-width: 768px) {
+  .nav-warning {
+    display: none;
+  }
+}
+</style>

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

@@ -0,0 +1,317 @@
+<template>
+  <div v-if="shouldShowAd" class="ad-banner" :class="bannerClass">
+    <!-- GitHub Sponsors -->
+    <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">
+          Sponsor
+        </a>
+      </div>
+    </div>
+
+    <!-- Carbon Ads -->
+    <div v-else-if="type === 'carbon'" class="carbon-ads">
+      <div id="carbonads">
+        <!-- Carbon will inject content here -->
+      </div>
+    </div>
+    
+
+    <!-- Dismissible close button -->
+    <button v-if="dismissible" @click="dismissAd" class="ad-close" aria-label="Close ad">
+      ×
+    </button>
+  </div>
+</template>
+
+<script setup>
+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)
+  },
+  position: {
+    type: String,
+    default: 'top', // 'top', 'bottom', 'sidebar', 'inline'
+    validator: (value) => ['top', 'bottom', 'sidebar', 'inline'].includes(value)
+  },
+  githubSponsorsUrl: {
+    type: String,
+    default: 'https://github.com/sponsors/jamubc'
+  },
+  dismissible: {
+    type: Boolean,
+    default: true
+  },
+  showOnPaths: {
+    type: Array,
+    default: () => [] // Empty array means show on all paths
+  },
+  hideOnPaths: {
+    type: Array,
+    default: () => ['/'] // Hide on home page by default
+  },
+})
+
+const isDismissed = ref(false)
+const storageKey = `ad-dismissed-${props.type}-${props.position}`
+
+const bannerClass = computed(() => `ad-banner--${props.position}`)
+
+const shouldShowAd = computed(() => {
+  if (isDismissed.value) return false
+  
+  // Check if we're in browser environment
+  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))
+  }
+  
+  // If hideOnPaths is specified, hide on those paths
+  if (props.hideOnPaths.length > 0) {
+    return !props.hideOnPaths.some(path => currentPath.includes(path))
+  }
+  
+  return true
+})
+
+const dismissAd = () => {
+  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
+    }
+  }
+  
+  // 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)
+  }
+})
+</script>
+
+<style scoped>
+.ad-banner {
+  position: relative;
+  margin: 16px 0;
+  border-radius: 8px;
+  background-color: var(--vp-c-bg-soft);
+  border: 1px solid var(--vp-c-divider);
+  overflow: hidden;
+  transition: all 0.3s ease;
+}
+
+.ad-banner:hover {
+  border-color: var(--vp-c-brand);
+}
+
+/* Position variants */
+.ad-banner--top {
+  margin: 0 0 24px 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  backdrop-filter: blur(12px);
+  background-color: rgba(20, 20, 20, 0.95);
+}
+
+.ad-banner--bottom {
+  margin: 24px 0 0 0;
+  position: fixed;
+  bottom: 24px;
+  right: 24px;
+  max-width: 400px;
+  z-index: 100;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+}
+
+.ad-banner--sidebar {
+  margin: 16px 0;
+  max-width: 250px;
+}
+
+.ad-banner--inline {
+  margin: 24px auto;
+  max-width: 600px;
+}
+
+/* Sponsor Banner */
+.sponsor-banner {
+  padding: 12px 16px;
+  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%);
+}
+
+.sponsor-content {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+
+.sponsor-icon {
+  font-size: 18px;
+}
+
+.sponsor-text {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--vp-c-text-1);
+}
+
+.sponsor-button {
+  padding: 6px 12px;
+  background-color: var(--vp-c-brand);
+  color: white;
+  text-decoration: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: nowrap;
+}
+
+.sponsor-button:hover {
+  background-color: var(--vp-c-brand-dark);
+  transform: translateY(-1px);
+}
+
+/* Carbon Ads */
+.carbon-ads {
+  padding: 16px;
+  text-align: center;
+}
+
+#carbonads {
+  font-family: var(--vp-font-family-base);
+  line-height: 1.5;
+  max-width: 330px;
+  margin: 0 auto;
+}
+
+#carbonads span {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+#carbonads .carbon-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+#carbonads .carbon-img {
+  display: block;
+  margin: 0 0 8px;
+  line-height: 1;
+}
+
+#carbonads .carbon-img img {
+  border-radius: 4px;
+  max-width: 130px;
+}
+
+#carbonads .carbon-text {
+  display: block;
+  padding: 0;
+  color: var(--vp-c-text-1);
+  text-decoration: none;
+  font-size: 13px;
+  line-height: 1.4;
+}
+
+#carbonads .carbon-text:hover {
+  color: var(--vp-c-brand);
+}
+
+#carbonads .carbon-poweredby {
+  display: block;
+  margin-top: 8px;
+  color: var(--vp-c-text-3);
+  font-size: 11px;
+  text-decoration: none;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+/* Close button */
+.ad-close {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  cursor: pointer;
+  font-size: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  transition: opacity 0.2s ease;
+}
+
+.ad-close:hover {
+  opacity: 1;
+}
+
+/* Mobile responsive */
+@media (max-width: 768px) {
+  .ad-banner--bottom {
+    position: relative;
+    bottom: auto;
+    right: auto;
+    max-width: none;
+    margin: 16px;
+  }
+  
+  .sponsor-content {
+    flex-direction: column;
+    gap: 8px;
+    text-align: center;
+  }
+  
+  .sponsor-text {
+    font-size: 13px;
+  }
+}
+
+/* Dark theme specific adjustments */
+html.dark .ad-banner--top {
+  background-color: rgba(10, 10, 10, 0.95);
+}
+
+html.dark .sponsor-banner {
+  background: linear-gradient(135deg, rgba(66, 184, 131, 0.15) 0%, rgba(53, 73, 94, 0.15) 100%);
+}
+</style>