sfcc-dev-mcp 1.0.16 → 1.0.20

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

@@ -1,82 +0,0 @@
-<template>
-  <div class="vp-card">
-    <h3>dw.json builder</h3>
-    <p>Fill in the fields you need. Empty fields are omitted from the JSON output.</p>
-
-    <div class="vp-form">
-      <label>
-        Hostname
-        <input v-model="form.hostname" type="text" placeholder="your-instance.sandbox.us01.dx.commercecloud.salesforce.com" />
-      </label>
-      <label>
-        Username
-        <input v-model="form.username" type="text" placeholder="your-username" />
-      </label>
-      <label>
-        Password
-        <input v-model="form.password" type="password" placeholder="your-password" />
-      </label>
-      <label>
-        Client ID
-        <input v-model="form.clientId" type="text" placeholder="your-ocapi-client-id" />
-      </label>
-      <label>
-        Client Secret
-        <input v-model="form.clientSecret" type="password" placeholder="your-ocapi-client-secret" />
-      </label>
-      <label>
-        Site ID
-        <input v-model="form.siteId" type="text" placeholder="SiteGenesis" />
-      </label>
-      <label>
-        Code Version
-        <input v-model="form.codeVersion" type="text" placeholder="version1" />
-      </label>
-    </div>
-
-    <div class="vp-code-block">
-      <pre><code class="language-json">{{ output }}</code></pre>
-    </div>
-
-    <button class="vp-button" type="button" @click="copyJson">Copy JSON</button>
-    <span v-if="copied" class="vp-hint">Copied</span>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, reactive, ref } from 'vue';
-
-const form = reactive({
-  hostname: '',
-  username: '',
-  password: '',
-  clientId: '',
-  clientSecret: '',
-  siteId: '',
-  codeVersion: ''
-});
-
-const output = computed(() => {
-  const data: Record<string, string> = {};
-  if (form.hostname) data.hostname = form.hostname;
-  if (form.username) data.username = form.username;
-  if (form.password) data.password = form.password;
-  if (form.clientId) data['client-id'] = form.clientId;
-  if (form.clientSecret) data['client-secret'] = form.clientSecret;
-  if (form.siteId) data['site-id'] = form.siteId;
-  if (form.codeVersion) data['code-version'] = form.codeVersion;
-  return JSON.stringify(data, null, 2);
-});
-
-const copied = ref(false);
-
-const copyJson = async () => {
-  copied.value = false;
-  if (typeof navigator === 'undefined') return;
-  await navigator.clipboard.writeText(output.value);
-  copied.value = true;
-  setTimeout(() => {
-    copied.value = false;
-  }, 1500);
-};
-</script>

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

@@ -1,552 +0,0 @@
-<template>
-  <section class="home-section home-section--quick-start">
-    <div class="home-section__header">
-      <span class="home-pill home-pill--green">No credentials required</span>
-      <h2>Zero-config quick start</h2>
-      <p>
-        Jump straight into SFCC development with AI assistance. Get access to documentation,
-        agent skills, and cartridge generation tools instantly.
-      </p>
-    </div>
-
-    <NewcomerCTA />
-
-    <div class="home-grid home-grid--2">
-      <div class="home-card">
-        <h3>Add to your AI client</h3>
-        <pre><code class="language-json">{
-  "mcpServers": {
-    "sfcc-dev": {
-      "command": "npx",
-      "args": ["sfcc-dev-mcp"]
-    }
-  }
-}</code></pre>
-      </div>
-      <div class="home-card home-card--steps">
-        <div class="home-step">
-          <span class="home-step__icon">✓</span>
-          <div>
-            <strong>Instant access</strong>
-            <p>Start using SFCC documentation and tools immediately</p>
-          </div>
-        </div>
-        <div class="home-step">
-          <span class="home-step__icon">✓</span>
-          <div>
-            <strong>No setup required</strong>
-            <p>Documentation-only mode works out of the box</p>
-          </div>
-        </div>
-        <div class="home-step">
-          <span class="home-step__icon">✓</span>
-          <div>
-            <strong>Full documentation</strong>
-            <p>SFCC API docs, SFRA docs, ISML, and skills included</p>
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div class="home-callout home-callout--info">
-      💡 <strong>Want more features?</strong> Open a workspace with <code>dw.json</code> (auto-discovered),
-      or use <code>--dw-json</code> for logs, system objects, and advanced tools.
-    </div>
-  </section>
-
-  <div class="home-cta-row">
-    <a class="home-button home-button--primary" href="/guide/ai-interfaces">Get started in 2 minutes →</a>
-    <a class="home-button" href="/examples">See examples</a>
-  </div>
-
-  <section class="home-section home-section--warning">
-    <div class="home-warning">
-      <div class="home-warning__icon">⚠️</div>
-      <div>
-        <h3>Essential: AI instructions required</h3>
-        <p>
-          Your AI needs specific instructions to use the MCP server effectively. Use the ready-to-go instruction files
-          for GitHub Copilot, Claude, and Cursor.
-        </p>
-        <div class="home-warning__actions">
-          <a class="home-button home-button--danger" href="https://github.com/taurgis/sfcc-dev-mcp/tree/main/ai-instructions" target="_blank" rel="noopener noreferrer">Download AI instructions</a>
-          <a class="home-link" href="/guide/ai-interfaces">Setup guide →</a>
-        </div>
-      </div>
-    </div>
-  </section>
-
-  <section class="home-section home-section--timeline">
-    <div class="home-section__header">
-      <h2>Stop fighting documentation</h2>
-      <p>Transform your SFCC workflow from manual hunting to AI-powered assistance.</p>
-    </div>
-
-    <div class="timeline-grid">
-      <div class="timeline-card timeline-card--before">
-        <div class="timeline-card__header">
-          <span class="timeline-badge timeline-badge--bad">Traditional</span>
-          <p>Frustrating & time-consuming</p>
-        </div>
-        <div class="timeline-steps">
-          <div class="timeline-step">
-            <span>1</span>
-            <div>
-              <strong>Documentation hunt</strong>
-              <p>Open 10+ tabs searching for method signatures</p>
-              <em>15-30 minutes</em>
-            </div>
-          </div>
-          <div class="timeline-step">
-            <span>2</span>
-            <div>
-              <strong>Copy-paste engineering</strong>
-              <p>Hunt for code examples across forums and docs</p>
-              <em>20-45 minutes</em>
-            </div>
-          </div>
-          <div class="timeline-step">
-            <span>3</span>
-            <div>
-              <strong>Debug blindly</strong>
-              <p>Manual log analysis without proper context</p>
-              <em>1-3 hours</em>
-            </div>
-          </div>
-          <div class="timeline-step">
-            <span>4</span>
-            <div>
-              <strong>Feature scaffolding</strong>
-              <p>Manually create cartridge structures and boilerplate</p>
-              <em>30-60 minutes</em>
-            </div>
-          </div>
-          <div class="timeline-step">
-            <span>5</span>
-            <div>
-              <strong>Context switching</strong>
-              <p>Jump between IDE, browser, logs, and docs</p>
-              <em>Constant overhead</em>
-            </div>
-          </div>
-        </div>
-        <div class="timeline-summary">Total time lost: 2-4 hours daily</div>
-      </div>
-
-      <div class="timeline-card timeline-card--after">
-        <div class="timeline-card__header">
-          <span class="timeline-badge timeline-badge--good">AI-enhanced</span>
-          <p>Efficient & intelligent</p>
-        </div>
-        <div class="timeline-steps">
-          <div class="timeline-step">
-            <span>1</span>
-            <div>
-              <strong>Ask AI directly</strong>
-              <p>Instant answers grounded in SFCC docs</p>
-              <em>30 seconds</em>
-            </div>
-          </div>
-          <div class="timeline-step">
-            <span>2</span>
-            <div>
-              <strong>Get complete examples</strong>
-              <p>Curated agent skills drive correct patterns</p>
-              <em>1-2 minutes</em>
-            </div>
-          </div>
-          <div class="timeline-step">
-            <span>3</span>
-            <div>
-              <strong>Smart debugging</strong>
-              <p>AI filters logs and surfaces root causes</p>
-              <em>2-5 minutes</em>
-            </div>
-          </div>
-          <div class="timeline-step">
-            <span>4</span>
-            <div>
-              <strong>Instant scaffolding</strong>
-              <p>Generate cartridges and endpoints fast</p>
-              <em>1-2 minutes</em>
-            </div>
-          </div>
-          <div class="timeline-step">
-            <span>5</span>
-            <div>
-              <strong>Stay in flow</strong>
-              <p>Everything inside your editor</p>
-              <em>No context switching</em>
-            </div>
-          </div>
-        </div>
-        <div class="timeline-summary">Total time saved: 2-3 hours daily</div>
-      </div>
-    </div>
-
-    <div class="timeline-cta">Ready to 10x your SFCC productivity? Set up in under 2 minutes.</div>
-  </section>
-
-  <section class="home-section home-section--modes">
-    <div class="home-section__header">
-      <h2>What you get</h2>
-      <p>Two modes to match your needs: start instantly, then upgrade to full mode for live data analysis.</p>
-    </div>
-
-    <div class="home-grid home-grid--2">
-      <div class="mode-card mode-card--docs">
-        <h3>Documentation mode</h3>
-        <p>Zero setup required</p>
-        <ul>
-          <li>Complete SFCC API documentation</li>
-          <li>SFRA documentation and skills</li>
-          <li>Cartridge generation tools</li>
-          <li>Security and performance guidance</li>
-        </ul>
-      </div>
-      <div class="mode-card mode-card--full">
-        <h3>Full mode</h3>
-        <p>Everything + live data</p>
-        <ul>
-          <li>All documentation features</li>
-          <li>Real-time log analysis</li>
-          <li>System and custom object exploration</li>
-          <li>Code version management</li>
-        </ul>
-        <div class="mode-card__badge">Requires SFCC credentials</div>
-      </div>
-    </div>
-  </section>
-
-  <section class="home-section home-section--features">
-    <div class="home-section__header">
-      <h2>Everything you need</h2>
-      <p>38 specialized tools for comprehensive SFCC development support.</p>
-    </div>
-
-    <div class="feature-grid">
-      <div class="feature-item">
-        <span>📚</span>
-        <h4>Documentation</h4>
-        <p>Complete API docs</p>
-      </div>
-      <div class="feature-item">
-        <span>🧰</span>
-        <h4>Log analysis</h4>
-        <p>Real-time monitoring</p>
-      </div>
-      <div class="feature-item">
-        <span>🧩</span>
-        <h4>System objects</h4>
-        <p>Live exploration</p>
-      </div>
-      <div class="feature-item">
-        <span>📦</span>
-        <h4>Cartridges</h4>
-        <p>Auto generation</p>
-      </div>
-      <div class="feature-item">
-        <span>🧵</span>
-        <h4>Job logs</h4>
-        <p>Execution insights</p>
-      </div>
-    </div>
-  </section>
-
-  <section class="home-section home-section--testdrive">
-    <div class="home-section__header">
-      <span class="home-pill home-pill--teal">Test drive</span>
-      <h2>Try it right now</h2>
-      <p>After setup, ask your AI this question to see the MCP server in action.</p>
-    </div>
-
-    <div class="testdrive-card">
-      <h3>Ask your AI this</h3>
-      <div class="testdrive-prompt">
-        "Explain how to get the sale price for a product variant in SFCC. Keep it short and a quick example"
-      </div>
-      <div class="testdrive-actions">
-        <button class="home-button home-button--primary" type="button" @click="copyPrompt">Copy prompt</button>
-        <button class="home-button home-button--danger" type="button" @click="openWithoutModal">View without MCP</button>
-        <button class="home-button home-button--success" type="button" @click="openWithModal">View with MCP</button>
-      </div>
-    </div>
-
-    <div class="testdrive-grid">
-      <div class="testdrive-chip">
-        <strong>SFCC methods</strong>
-        <p>Lists actual APIs like getPriceModel()</p>
-      </div>
-      <div class="testdrive-chip">
-        <strong>Code examples</strong>
-        <p>Real SFCC code with correct syntax</p>
-      </div>
-      <div class="testdrive-chip">
-        <strong>Documentation</strong>
-        <p>Accurate API context and references</p>
-      </div>
-    </div>
-
-    <div class="testdrive-note">
-      Without MCP, your AI gives generic responses. With MCP, it uses live SFCC docs for accurate answers.
-    </div>
-
-    <div class="home-cta-row">
-      <a class="home-button home-button--success" href="/examples">Try more examples</a>
-      <a class="home-button" href="/guide/configuration">Add full mode</a>
-    </div>
-  </section>
-
-  <section class="home-section home-section--final">
-    <div class="final-card">
-      <p>
-        "Empower your AI assistant with comprehensive SFCC knowledge for faster, more accurate development assistance."
-      </p>
-      <div class="home-cta-row">
-        <a class="home-button home-button--primary" href="/guide/ai-interfaces">Get started now</a>
-        <a class="home-button" href="/features">Explore features</a>
-      </div>
-    </div>
-  </section>
-
-  <div v-if="isWithoutModalOpen" class="image-modal" @click.self="closeWithoutModal">
-    <div
-      ref="withoutModalRef"
-      class="image-modal__content"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="without-mcp-modal-title"
-      tabindex="-1"
-    >
-      <header>
-        <h3 id="without-mcp-modal-title">AI response without MCP</h3>
-        <button ref="withoutCloseButtonRef" aria-label="Close without MCP modal" @click="closeWithoutModal">Close</button>
-      </header>
-      <div class="image-modal__image">
-        <img
-          ref="imageRef1"
-          src="/explain-product-pricing-methods-no-mcp.png"
-          alt="AI response without MCP"
-          @mousemove="onMoveImage1"
-          @mouseenter="zooming1 = true"
-          @mouseleave="zooming1 = false"
-        />
-        <div v-if="zooming1" class="image-modal__zoom" :style="zoomStyle1"></div>
-      </div>
-      <div class="image-modal__note image-modal__note--bad">
-        This response uses generic or incorrect patterns. MCP provides grounded SFCC guidance.
-      </div>
-    </div>
-  </div>
-
-  <div v-if="isWithModalOpen" class="image-modal" @click.self="closeWithModal">
-    <div
-      ref="withModalRef"
-      class="image-modal__content"
-      role="dialog"
-      aria-modal="true"
-      aria-labelledby="with-mcp-modal-title"
-      tabindex="-1"
-    >
-      <header>
-        <h3 id="with-mcp-modal-title">AI response with MCP</h3>
-        <button ref="withCloseButtonRef" aria-label="Close with MCP modal" @click="closeWithModal">Close</button>
-      </header>
-      <div class="image-modal__image">
-        <img
-          ref="imageRef2"
-          src="/explain-product-pricing-methods.png"
-          alt="AI response with MCP"
-          @mousemove="onMoveImage2"
-          @mouseenter="zooming2 = true"
-          @mouseleave="zooming2 = false"
-        />
-        <div v-if="zooming2" class="image-modal__zoom" :style="zoomStyle2"></div>
-      </div>
-      <div class="image-modal__note image-modal__note--good">
-        MCP pulls accurate SFCC methods, patterns, and examples from live docs.
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref, watch } from 'vue';
-import NewcomerCTA from './NewcomerCTA.vue';
-
-const promptText = 'Explain how to get the sale price for a product variant in SFCC. Keep it short and a quick example';
-
-const copyPrompt = async () => {
-  if (typeof navigator === 'undefined') return;
-  await navigator.clipboard.writeText(promptText);
-};
-
-const isWithoutModalOpen = ref(false);
-const isWithModalOpen = ref(false);
-const withoutModalRef = ref<HTMLElement | null>(null);
-const withModalRef = ref<HTMLElement | null>(null);
-const withoutCloseButtonRef = ref<HTMLButtonElement | null>(null);
-const withCloseButtonRef = ref<HTMLButtonElement | null>(null);
-const previouslyFocusedElement = ref<HTMLElement | null>(null);
-
-const zooming1 = ref(false);
-const zooming2 = ref(false);
-const zoomPosition1 = ref({ x: 0, y: 0 });
-const zoomPosition2 = ref({ x: 0, y: 0 });
-const imageRef1 = ref<HTMLImageElement | null>(null);
-const imageRef2 = ref<HTMLImageElement | null>(null);
-
-const getActiveModalElement = () => {
-  if (isWithoutModalOpen.value) return withoutModalRef.value;
-  if (isWithModalOpen.value) return withModalRef.value;
-  return null;
-};
-
-const openWithoutModal = () => {
-  isWithoutModalOpen.value = true;
-};
-
-const openWithModal = () => {
-  isWithModalOpen.value = true;
-};
-
-const closeWithoutModal = () => {
-  isWithoutModalOpen.value = false;
-};
-
-const closeWithModal = () => {
-  isWithModalOpen.value = false;
-};
-
-const closeAllModals = () => {
-  isWithoutModalOpen.value = false;
-  isWithModalOpen.value = false;
-};
-
-const focusModalCloseButton = async () => {
-  await nextTick();
-  if (isWithoutModalOpen.value) {
-    withoutCloseButtonRef.value?.focus();
-    return;
-  }
-  if (isWithModalOpen.value) {
-    withCloseButtonRef.value?.focus();
-  }
-};
-
-const trapFocusInModal = (event: KeyboardEvent) => {
-  if (event.key !== 'Tab') return;
-  const modalElement = getActiveModalElement();
-  if (!modalElement) return;
-
-  const focusableSelectors = [
-    'a[href]',
-    'button:not([disabled])',
-    'input:not([disabled])',
-    'select:not([disabled])',
-    'textarea:not([disabled])',
-    '[tabindex]:not([tabindex="-1"])'
-  ].join(', ');
-
-  const focusableElements = Array.from(modalElement.querySelectorAll<HTMLElement>(focusableSelectors))
-    .filter((element) => !element.hasAttribute('disabled'));
-
-  if (!focusableElements.length) {
-    event.preventDefault();
-    modalElement.focus();
-    return;
-  }
-
-  const firstElement = focusableElements[0];
-  const lastElement = focusableElements[focusableElements.length - 1];
-  const activeElement = document.activeElement;
-
-  if (event.shiftKey && activeElement === firstElement) {
-    event.preventDefault();
-    lastElement.focus();
-    return;
-  }
-
-  if (!event.shiftKey && activeElement === lastElement) {
-    event.preventDefault();
-    firstElement.focus();
-  }
-};
-
-const onWindowKeydown = (event: KeyboardEvent) => {
-  if (!isWithoutModalOpen.value && !isWithModalOpen.value) return;
-
-  if (event.key === 'Escape') {
-    event.preventDefault();
-    closeAllModals();
-    return;
-  }
-
-  trapFocusInModal(event);
-};
-
-watch([isWithoutModalOpen, isWithModalOpen], async ([withoutOpen, withOpen], [wasWithoutOpen, wasWithOpen]) => {
-  if (typeof window === 'undefined' || typeof document === 'undefined') return;
-
-  const isOpen = withoutOpen || withOpen;
-  const wasOpen = wasWithoutOpen || wasWithOpen;
-
-  if (isOpen && !wasOpen) {
-    previouslyFocusedElement.value = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    document.body.style.overflow = 'hidden';
-    window.addEventListener('keydown', onWindowKeydown);
-    await focusModalCloseButton();
-    return;
-  }
-
-  if (isOpen) {
-    await focusModalCloseButton();
-    return;
-  }
-
-  if (!isOpen && wasOpen) {
-    window.removeEventListener('keydown', onWindowKeydown);
-    document.body.style.overflow = '';
-    previouslyFocusedElement.value?.focus();
-  }
-});
-
-onUnmounted(() => {
-  if (typeof window !== 'undefined') {
-    window.removeEventListener('keydown', onWindowKeydown);
-  }
-  if (typeof document !== 'undefined') {
-    document.body.style.overflow = '';
-  }
-});
-
-const onMoveImage1 = (event: MouseEvent) => {
-  if (!imageRef1.value) return;
-  const rect = imageRef1.value.getBoundingClientRect();
-  zoomPosition1.value = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-};
-
-const onMoveImage2 = (event: MouseEvent) => {
-  if (!imageRef2.value) return;
-  const rect = imageRef2.value.getBoundingClientRect();
-  zoomPosition2.value = { x: event.clientX - rect.left, y: event.clientY - rect.top };
-};
-
-const createZoomStyle = (image: HTMLImageElement | null, position: { x: number; y: number }) => {
-  if (!image) return {};
-  const scale = 2;
-  const size = 240;
-  return {
-    width: `${size}px`,
-    height: `${size}px`,
-    left: `${position.x - size / 2}px`,
-    top: `${position.y - size / 2}px`,
-    backgroundImage: `url('${image.src}')`,
-    backgroundSize: `${image.offsetWidth * scale}px ${image.offsetHeight * scale}px`,
-    backgroundPosition: `-${position.x * scale - size / 2}px -${position.y * scale - size / 2}px`
-  };
-};
-
-const zoomStyle1 = computed(() => createZoomStyle(imageRef1.value, zoomPosition1.value));
-const zoomStyle2 = computed(() => createZoomStyle(imageRef2.value, zoomPosition2.value));
-</script>