@trishchuk/coolors-mcp 1.0.0

package/docs/.vitepress/components/ClientGrid.vue

@@ -0,0 +1,125 @@
+<template>
+  <div class="client-grid">
+    <slot />
+  </div>
+</template>
+
+<style scoped>
+.client-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1.5rem;
+  margin: 2rem 0;
+}
+
+@media (max-width: 768px) {
+  .client-grid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+}
+
+:deep(.client-card) {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  padding: 1.5rem;
+  border: 2px solid var(--vp-c-border);
+  border-radius: 8px;
+  background: var(--vp-c-bg-soft);
+  transition: all 0.3s ease;
+  height: 100%;
+}
+
+:deep(.client-card:hover) {
+  border-color: var(--vp-c-brand-1);
+  background: var(--vp-c-bg);
+  box-shadow: 0 4px 12px rgba(66, 184, 131, 0.15);
+}
+
+:deep(.client-card--recommended) {
+  border-color: var(--vp-c-brand-1);
+}
+
+:deep(.client-card h3) {
+  margin: 0 0 0.5rem 0;
+  color: var(--vp-c-text-1);
+}
+
+:deep(.client-badge) {
+  font-weight: 600;
+  font-size: 0.875rem;
+  margin-bottom: 1rem;
+  color: var(--vp-c-brand-1);
+}
+
+:deep(.client-card p) {
+  margin: 0 0 auto 0;
+  color: var(--vp-c-text-2);
+  flex-grow: 1;
+}
+
+:deep(.client-button) {
+  display: inline-block;
+  padding: 0.75rem 1.5rem;
+  text-decoration: none;
+  border-radius: 6px;
+  font-weight: 500;
+  margin-top: 1rem;
+  transition: all 0.3s ease;
+  opacity: 0.8;
+}
+
+:deep(.client-card:hover .client-button) {
+  opacity: 1;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+}
+
+/* Light theme */
+html:not(.dark) :deep(.client-button) {
+  background: var(--vp-c-brand-1);
+  color: white;
+}
+
+html:not(.dark) :deep(.client-button:hover) {
+  background: var(--vp-c-brand-2);
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(66, 184, 131, 0.4), 0 4px 8px rgba(0, 0, 0, 0.15);
+  filter: brightness(1.1);
+}
+
+/* Dark theme */
+.dark :deep(.client-button) {
+  background: var(--vp-c-brand-1);
+  color: white;
+}
+
+.dark :deep(.client-button:hover) {
+  background: var(--vp-c-brand-2);
+  color: white;
+  transform: translateY(-3px);
+  box-shadow: 0 8px 20px rgba(66, 184, 131, 0.6), 0 4px 8px rgba(66, 184, 131, 0.3);
+  filter: brightness(1.1);
+}
+
+/* Claude Code styling */
+:deep(.claude-code-card h3) {
+  color: #ff8c00 !important;
+}
+
+:deep(.snowflake) {
+  display: inline-block;
+  animation: spin 2s linear infinite paused;
+  transition: animation-play-state 0.3s ease;
+}
+
+:deep(.claude-code-card:hover .snowflake) {
+  animation-play-state: running;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+</style>

package/docs/.vitepress/components/CodeBlock.vue

@@ -0,0 +1,231 @@
+<template>
+  <div class="code-block-container">
+    <span class="language-indicator">{{ language }}</span>
+    <div class="code-lines">
+      <div 
+        v-for="(line, index) in lines" 
+        :key="index"
+        class="code-line"
+        @mouseenter="hoveredLine = index"
+        @mouseleave="hoveredLine = null"
+      >
+        <span class="line-number">{{ index + 1 }}</span>
+        <button 
+          v-show="hoveredLine === index"
+          @click="copyLine(line, index)"
+          class="copy-line-button"
+          :title="`Copy line ${index + 1}`"
+        >
+          {{ copiedLine === index ? '✓' : '📋' }}
+        </button>
+        <span class="line-content" v-html="line || '\u00A0'"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from 'vue'
+// Lazy-load Prism on client to avoid SSR/import issues
+let Prism = null
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: '// No code provided'
+  },
+  language: {
+    type: String,
+    default: 'javascript'
+  }
+})
+
+const hoveredLine = ref(null)
+const copiedLine = ref(null)
+
+const highlightedCode = ref('')
+
+const lines = computed(() => {
+  return highlightedCode.value.split('\n')
+})
+
+const ensurePrism = async () => {
+  if (typeof window === 'undefined') return
+  if (!Prism) {
+    const mod = await import('prismjs')
+    // Load languages and theme
+    await Promise.all([
+      import('prismjs/components/prism-bash'),
+      import('prismjs/components/prism-python'),
+      import('prismjs/components/prism-typescript'),
+      import('prismjs/components/prism-javascript'),
+      import('prismjs/components/prism-json'),
+      import('prismjs/components/prism-yaml'),
+      import('prismjs/themes/prism-tomorrow.css')
+    ])
+    Prism = (mod && 'default' in mod) ? mod.default : mod
+  }
+}
+
+const highlightCode = async () => {
+  await ensurePrism()
+  if (!Prism) {
+    highlightedCode.value = props.code
+    return
+  }
+  const grammar = Prism.languages[props.language] || Prism.languages.plaintext
+  highlightedCode.value = Prism.highlight(props.code, grammar, props.language)
+}
+
+onMounted(() => { highlightCode() })
+watch(() => [props.code, props.language], () => { highlightCode() })
+
+const copyLine = async (line, index) => {
+  try {
+    const plainLine = props.code.split('\n')[index]
+    await navigator.clipboard.writeText(plainLine)
+    copiedLine.value = index
+    setTimeout(() => {
+      copiedLine.value = null
+    }, 1500)
+  } catch (err) {
+    console.error('Failed to copy line:', err)
+  }
+}
+</script>
+
+<style scoped>
+.code-block-container {
+  background-color: #1e1e1e;
+  border-radius: 6px;
+  overflow: hidden;
+  margin: 16px 0;
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  position: relative;
+}
+
+.language-indicator {
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-size: 11px;
+  color: #858585;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  z-index: 10;
+  user-select: none;
+}
+
+.code-lines {
+  overflow-x: auto;
+  position: relative;
+}
+
+.code-line {
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-height: 24px;
+  line-height: 1.5;
+}
+
+.code-line:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}
+
+.line-number {
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  width: 40px;
+  padding: 0 8px;
+  text-align: right;
+  color: #858585;
+  font-size: 12px;
+  flex-shrink: 0;
+}
+
+.copy-line-button {
+  position: absolute;
+  left: 40px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 2px 4px;
+  font-size: 12px;
+  color: #cccccc;
+  opacity: 0.8;
+  transition: opacity 0.2s;
+  z-index: 10;
+}
+
+.copy-line-button:hover {
+  opacity: 1;
+}
+
+.line-content {
+  padding-left: 32px;
+  padding-right: 16px;
+  color: #d4d4d4;
+  font-size: 14px;
+  white-space: pre;
+  flex: 1;
+}
+
+/* Override Prism styles for our dark theme */
+.line-content :deep(.token.comment),
+.line-content :deep(.token.prolog),
+.line-content :deep(.token.doctype),
+.line-content :deep(.token.cdata) {
+  color: #6a9955;
+}
+
+.line-content :deep(.token.punctuation) {
+  color: #d4d4d4;
+}
+
+.line-content :deep(.token.property),
+.line-content :deep(.token.tag),
+.line-content :deep(.token.boolean),
+.line-content :deep(.token.number),
+.line-content :deep(.token.constant),
+.line-content :deep(.token.symbol),
+.line-content :deep(.token.deleted) {
+  color: #b5cea8;
+}
+
+.line-content :deep(.token.selector),
+.line-content :deep(.token.attr-name),
+.line-content :deep(.token.string),
+.line-content :deep(.token.char),
+.line-content :deep(.token.builtin),
+.line-content :deep(.token.inserted) {
+  color: #ce9178;
+}
+
+.line-content :deep(.token.operator),
+.line-content :deep(.token.entity),
+.line-content :deep(.token.url),
+.line-content :deep(.language-css .token.string),
+.line-content :deep(.style .token.string) {
+  color: #d4d4d4;
+}
+
+.line-content :deep(.token.atrule),
+.line-content :deep(.token.attr-value),
+.line-content :deep(.token.keyword) {
+  color: #569cd6;
+}
+
+.line-content :deep(.token.function),
+.line-content :deep(.token.class-name) {
+  color: #dcdcaa;
+}
+
+.line-content :deep(.token.regex),
+.line-content :deep(.token.important),
+.line-content :deep(.token.variable) {
+  color: #9cdcfe;
+}
+</style>