sfcc-dev-mcp 1.0.15 → 1.0.19

package/docs-site-v2/.vitepress/theme/components/ModeTabs.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="vp-tabs">
+    <div class="vp-tabs__list" role="tablist" aria-label="Mode selection">
+      <button
+        class="vp-tabs__button"
+        :class="active === 'docs' ? 'is-active' : ''"
+        role="tab"
+        :aria-selected="active === 'docs'"
+        @click="active = 'docs'"
+      >
+        Docs Mode
+      </button>
+      <button
+        class="vp-tabs__button"
+        :class="active === 'full' ? 'is-active' : ''"
+        role="tab"
+        :aria-selected="active === 'full'"
+        @click="active = 'full'"
+      >
+        Full Mode
+      </button>
+    </div>
+
+    <div v-if="active === 'docs'" class="vp-tabs__panel" role="tabpanel">
+      <h3>Configuration (Docs Mode)</h3>
+      <pre><code class="language-json">{
+  "mcpServers": {
+    "sfcc-dev": {
+      "command": "npx",
+      "args": ["sfcc-dev-mcp"]
+    }
+  }
+}</code></pre>
+      <ul>
+        <li>Immediate access to SFCC docs, SFRA, ISML, and cartridge generation</li>
+        <li>No credentials required</li>
+        <li>Great for onboarding and quick lookups</li>
+      </ul>
+    </div>
+
+    <div v-else class="vp-tabs__panel" role="tabpanel">
+      <h3>Configuration (Full Mode)</h3>
+      <pre><code class="language-json">{
+  "mcpServers": {
+    "sfcc-dev": {
+      "command": "npx",
+      "args": [
+        "sfcc-dev-mcp",
+        "--dw-json",
+        "/path/to/dw.json",
+        "--debug",
+        "false"
+      ]
+    }
+  }
+}</code></pre>
+      <ul>
+        <li>Live logs and job logs</li>
+        <li>System and custom object metadata</li>
+        <li>Site preferences and code version tools</li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const active = ref<'docs' | 'full'>('docs');
+</script>

package/docs-site-v2/.vitepress/theme/components/NewcomerCTA.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="newcomer-cta">
+    <a href="/guide/ai-interfaces" class="newcomer-cta__link">
+      <span class="newcomer-cta__badge">New here?</span>
+      <div class="newcomer-cta__text">
+        <div class="newcomer-cta__title">New to MCP servers</div>
+        <div class="newcomer-cta__subtitle">
+          Setup guide for GitHub Copilot, Claude Desktop, and Cursor
+        </div>
+      </div>
+      <span class="newcomer-cta__chevron">→</span>
+    </a>
+  </div>
+</template>

package/docs-site-v2/.vitepress/theme/components/QuickStartCards.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-grid vp-grid--2">
+    <div class="vp-card">
+      <h3>Docs mode</h3>
+      <ul>
+        <li>No credentials required</li>
+        <li>SFCC docs, SFRA, ISML, and skills</li>
+        <li>Cartridge generation included</li>
+      </ul>
+    </div>
+    <div class="vp-card">
+      <h3>Full mode</h3>
+      <ul>
+        <li>Logs and job logs</li>
+        <li>System objects and site preferences</li>
+        <li>Code versions and script debugger</li>
+      </ul>
+    </div>
+  </div>
+</template>

package/docs-site-v2/.vitepress/theme/components/QuickStartHero.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="vp-hero-card">
+    <div class="vp-hero-card__badge">Quick start</div>
+    <h3>Connect your AI client</h3>
+
+    <div class="vp-hero-card__section">
+      <strong>Docs mode</strong>
+      <pre><code class="language-json">{
+  "mcpServers": {
+    "sfcc-dev": {
+      "command": "npx",
+      "args": ["sfcc-dev-mcp"]
+    }
+  }
+}</code></pre>
+    </div>
+
+    <p class="vp-hero-card__note">Tip: add <code>dw.json</code> when you need logs and metadata (details below).</p>
+  </div>
+</template>

package/docs-site-v2/.vitepress/theme/components/SkillsList.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="skills-list">
+    <div class="skills-controls">
+      <input
+        v-model="search"
+        type="search"
+        placeholder="Search skills..."
+        class="skills-search"
+        aria-label="Search skills"
+      />
+      <span class="skills-count">{{ filteredSkills.length }} skills</span>
+    </div>
+    <div class="skills-grid">
+      <a
+        v-for="skill in filteredSkills"
+        :key="skill.name"
+        class="skills-card"
+        :href="skill.githubUrl"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <div class="skills-card__header">
+          <span class="skills-card__badge">{{ skill.name }}</span>
+        </div>
+        <p class="skills-card__desc">{{ skill.description || 'No description provided.' }}</p>
+        <span class="skills-card__link">View on GitHub</span>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { skills } from '../../../data/skills';
+
+const search = ref('');
+
+const filteredSkills = computed(() => {
+  const q = search.value.trim().toLowerCase();
+  if (!q) return skills;
+  return skills.filter((skill) => {
+    return (
+      skill.name.toLowerCase().includes(q) ||
+      skill.description.toLowerCase().includes(q)
+    );
+  });
+});
+</script>

package/docs-site-v2/.vitepress/theme/components/ToolExplorer.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="vp-tool-explorer">
+    <div class="vp-tool-explorer__controls">
+      <input
+        v-model="search"
+        type="search"
+        placeholder="Search tools or prompts..."
+        aria-label="Search tools or prompts"
+      />
+      <button v-if="search" class="vp-tool-explorer__clear" type="button" @click="search = ''">Clear</button>
+      <select v-model="activeCategory" aria-label="Filter tools by category">
+        <option value="All">All categories ({{ tools.length }})</option>
+        <option v-for="category in categories" :key="category" :value="category">
+          {{ category }} ({{ categoryCounts[category] }})
+        </option>
+      </select>
+    </div>
+
+    <div class="vp-tool-grid">
+      <div v-for="tool in filteredTools" :key="tool.id" class="vp-tool-card" :id="tool.id">
+        <div class="vp-tool-card__header">
+          <span class="vp-tool-card__name">{{ tool.name }}</span>
+          <span class="vp-tool-card__mode" :data-mode="tool.mode">{{ modeLabel(tool.mode) }}</span>
+        </div>
+        <p>{{ tool.description }}</p>
+        <details v-if="tool.params?.length || tool.examples?.length" class="vp-tool-card__details">
+          <summary>View parameters and examples</summary>
+          <div v-if="tool.params && tool.params.length" class="vp-tool-card__params">
+            <strong>Parameters</strong>
+            <ul>
+              <li v-for="param in tool.params" :key="param.name">
+                <span class="vp-code-inline">{{ param.name }}</span>
+                <span>{{ param.description }}</span>
+              </li>
+            </ul>
+          </div>
+          <div v-if="tool.examples && tool.examples.length" class="vp-tool-card__examples">
+            <strong>Examples</strong>
+            <ul>
+              <li v-for="example in tool.examples" :key="example">{{ example }}</li>
+            </ul>
+          </div>
+        </details>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import { tools, TOOL_CATEGORIES } from '../../../data/tools';
+
+const search = ref('');
+const activeCategory = ref('All');
+
+const categories = TOOL_CATEGORIES as unknown as string[];
+
+const categoryCounts = tools.reduce<Record<string, number>>((acc, tool) => {
+  acc[tool.category] = (acc[tool.category] || 0) + 1;
+  return acc;
+}, {});
+
+const modeLabel = (mode: string) => {
+  if (mode === 'both') return 'Docs + Full';
+  if (mode === 'docs') return 'Docs';
+  return 'Full';
+};
+
+
+const filteredTools = computed(() => {
+  const q = search.value.trim().toLowerCase();
+  return tools.filter((tool) => {
+    const matchCategory = activeCategory.value === 'All' || tool.category === activeCategory.value;
+    if (!matchCategory) return false;
+    if (!q) return true;
+    return (
+      tool.name.toLowerCase().includes(q) ||
+      tool.description.toLowerCase().includes(q) ||
+      tool.examples?.some((ex) => ex.toLowerCase().includes(q)) ||
+      tool.params?.some((param) => param.name.toLowerCase().includes(q)) ||
+      tool.tags?.some((tag) => tag.toLowerCase().includes(q))
+    );
+  });
+});
+</script>