index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>yq CLI Interactive Tutorial</title>
  <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><rect width='100' height='100' rx='20' fill='%234f46e5'/><text x='15' y='65' fill='white' font-family='sans-serif' font-size='50' font-weight='bold'>yq</text></svg>">
  
  <!-- Modern Clean Typography (Plus Jakarta Sans & JetBrains Mono) -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">

  <style>
    /* Premium Light Theme Design System */
    :root {
      --bg-body: #f8fafc;
      --bg-panel: #ffffff;
      --border-color: #e2e8f0;
      --accent-indigo: #4f46e5;
      --accent-indigo-hover: #4338ca;
      --text-primary: #0f172a;
      --text-secondary: #334155;
      --text-muted: #64748b;
      --font-mono: 'JetBrains Mono', monospace;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Plus Jakarta Sans', sans-serif;
      background-color: var(--bg-body);
      color: var(--text-primary);
      line-height: 1.6;
      min-height: 100vh;
    }

    /* Clean Header */
    header {
      background-color: var(--bg-panel);
      border-bottom: 1px solid var(--border-color);
      position: sticky;
      top: 0;
      z-index: 100;
      padding: 1.25rem 2rem;
    }

    .header-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .brand-title {
      font-size: 1.1rem;
      font-weight: 800;
      letter-spacing: -0.02em;
    }

    .brand-title span {
      color: var(--accent-indigo);
    }

    .github-link {
      color: var(--text-muted);
      text-decoration: none;
      font-size: 0.9rem;
      font-weight: 600;
      transition: color 0.2s ease;
    }

    .github-link:hover {
      color: var(--accent-indigo);
    }

    /* Hero Section */
    .hero {
      max-width: 800px;
      margin: 5rem auto;
      text-align: center;
      padding: 0 1.5rem;
    }

    .hero-label {
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      color: var(--accent-indigo);
      margin-bottom: 0.75rem;
      display: block;
    }

    .hero h1 {
      font-size: 3rem;
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1.2;
      margin-bottom: 1.25rem;
      color: var(--text-primary);
    }

    .hero p {
      font-size: 1.15rem;
      color: var(--text-secondary);
      font-weight: 400;
    }

    /* Main Content Container */
    .container {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 2rem 6rem 2rem;
    }

    /* Split Section Layout */
    .section {
      display: grid;
      grid-template-columns: 1fr 1.8fr; /* 1.8fr for wider terminal space */
      gap: 4.5rem;
      padding: 5rem 0;
      border-bottom: 1px solid var(--border-color);
      align-items: center;
    }

    .section:last-of-type {
      border-bottom: none;
    }

    /* Alternating layout styling */
    .section.reverse {
      grid-template-columns: 1.8fr 1fr;
    }

    .section.reverse .doc-content {
      order: 2;
    }

    .section.reverse iframe {
      order: 1;
    }

    @media (max-width: 1024px) {
      .section, .section.reverse {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3.5rem 0;
      }
      .section.reverse .doc-content {
        order: unset;
      }
      .section.reverse iframe {
        order: unset;
      }
    }

    /* Left/Right Column: Documentation */
    .doc-content {
      display: flex;
      flex-direction: column;
    }

    .step-number {
      font-size: 0.8rem;
      font-weight: 800;
      color: var(--accent-indigo);
      text-transform: uppercase;
      letter-spacing: 0.05em;
      margin-bottom: 0.5rem;
    }

    .section-title {
      font-size: 1.85rem;
      font-weight: 800;
      margin-bottom: 1rem;
      letter-spacing: -0.025em;
      color: var(--text-primary);
    }

    .section-desc {
      color: var(--text-secondary);
      font-size: 1rem;
      margin-bottom: 2rem;
    }

    /* Code Block Containers */
    .block-header {
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--text-muted);
      margin-bottom: 0.5rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
    }

    pre.code-preview {
      background-color: #f1f5f9;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1.25rem;
      font-family: var(--font-mono);
      font-size: 0.875rem;
      color: var(--text-primary);
      overflow-x: auto;
      margin-bottom: 1.75rem;
    }

    .command-container {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      border-radius: 8px;
      padding: 1rem 1.25rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 0.925rem;
      color: var(--text-primary);
      box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    }

    .cmd-text {
      color: var(--accent-indigo);
      font-weight: 500;
    }

    .copy-btn {
      background-color: #ffffff;
      border: 1px solid var(--border-color);
      color: var(--text-secondary);
      padding: 0.4rem 0.8rem;
      border-radius: 6px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s ease;
    }

    .copy-btn:hover {
      background-color: var(--accent-indigo);
      border-color: var(--accent-indigo);
      color: #ffffff;
    }

    /* Embed Iframe styling */
    .embed-container {
      box-shadow: 0 20px 40px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.04);
      border-radius: 8px;
      overflow: hidden;
      border: 1px solid var(--border-color);
      background-color: #0b0f17;
    }

    /* Footer Section */
    footer {
      border-top: 1px solid var(--border-color);
      padding: 3rem 0;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.9rem;
    }
  </style>
</head>
<body>

  <!-- Header -->
  <header>
    <div class="header-container">
      <div class="brand">
        <div class="brand-title">yq <span>Interactive Docs</span></div>
      </div>
      <a href="https://github.com/mikefarah/yq" target="_blank" class="github-link">yq on GitHub</a>
    </div>
  </header>

  <!-- Main Content Wrap -->
  <div class="container">

    <!-- Hero Section -->
    <div class="hero">
      <span class="hero-label">Interactive Tutorial</span>
      <h1>Mastering YAML Querying & Editing</h1>
      <p>A step-by-step developer guide. Each command has a live terminal workspace sandbox. Click pause on any screen to type, query, or edit the files yourself.</p>
    </div>

    <!-- Section 1: Querying Values -->
    <div class="section">
      <div class="doc-content">
        <span class="step-number">Step 01</span>
        <h2 class="section-title">Querying Nested Fields</h2>
        <p class="section-desc">
          To read values from a YAML file, specify their paths using dot notation. Nested attributes map directly to their parent key scopes.
        </p>

        <div class="block-header">config.yaml</div>
        <pre class="code-preview">app:
  name: "Deploy Service"
  version: "2.1.0"
  settings:
    port: 8080</pre>

        <div class="block-header">Command</div>
        <div class="command-container">
          <span class="cmd-text">./yq '.app.name' config.yaml</span>
          <button class="copy-btn" onclick="copyCommand('./yq \'.app.name\' config.yaml', this)">Copy</button>
        </div>
      </div>
      
      <div class="embed-container">
        <iframe src="https://swacn.com/lab/15e409ca-be3c-4801-8aca-3638bb74aa3a?embed=true&castIndex=0" width="100%" height="600" style="border: none; display: block; max-width: 100%; height: 600px; border-radius: 8px; overflow: hidden;" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>

    <!-- Section 2: Modifying Lists (LEFT-SIDE TERMINAL) -->
    <div class="section reverse">
      <div class="doc-content">
        <span class="step-number">Step 02</span>
        <h2 class="section-title">In-Place Modifications</h2>
        <p class="section-desc">
          You can append elements to arrays using the <code>+=</code> operator. Add the <code>-i</code> flag to commit these changes directly to the file itself.
        </p>

        <div class="block-header">config.yaml</div>
        <pre class="code-preview">app:
  settings:
    tags:
      - production
      - web</pre>

        <div class="block-header">Command</div>
        <div class="command-container">
          <span class="cmd-text">./yq -i '.app.settings.tags += ["api"]' config.yaml</span>
          <button class="copy-btn" onclick="copyCommand('./yq -i \'.app.settings.tags += [\&quot;api\&quot;]\' config.yaml', this)">Copy</button>
        </div>
      </div>
      
      <div class="embed-container">
        <iframe src="https://swacn.com/lab/15e409ca-be3c-4801-8aca-3638bb74aa3a?embed=true&castIndex=1" width="100%" height="600" style="border: none; display: block; max-width: 100%; height: 600px; border-radius: 8px; overflow: hidden;" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>

    <!-- Section 3: JSON Export -->
    <div class="section">
      <div class="doc-content">
        <span class="step-number">Step 03</span>
        <h2 class="section-title">Converting YAML to JSON</h2>
        <p class="section-desc">
          To integrate YAML configurations into tools that require JSON payloads, use the <code>-o=json</code> flag to format the parsed document as JSON.
        </p>

        <div class="block-header">config.yaml</div>
        <pre class="code-preview">app:
  name: "Deploy Service"
  version: "2.1.0"</pre>

        <div class="block-header">Command</div>
        <div class="command-container">
          <span class="cmd-text">./yq -o=json config.yaml</span>
          <button class="copy-btn" onclick="copyCommand('./yq -o=json config.yaml', this)">Copy</button>
        </div>
      </div>
      
      <div class="embed-container">
        <iframe src="https://swacn.com/lab/15e409ca-be3c-4801-8aca-3638bb74aa3a?embed=true&castIndex=2" width="100%" height="600" style="border: none; display: block; max-width: 100%; height: 600px; border-radius: 8px; overflow: hidden;" frameborder="0" allowfullscreen></iframe>
      </div>
    </div>

    <!-- Footer -->
    <footer>
      <p>Created for the yq Community Sandbox Tutorial series.</p>
    </footer>

  </div>

  <script>
    // Copy Command to Clipboard
    async function copyCommand(text, btn) {
      try {
        await navigator.clipboard.writeText(text);
        const oldText = btn.textContent;
        btn.textContent = 'Copied!';
        btn.style.backgroundColor = 'var(--accent-indigo)';
        btn.style.borderColor = 'var(--accent-indigo)';
        btn.style.color = '#ffffff';
        setTimeout(() => {
          btn.textContent = oldText;
          btn.style.backgroundColor = '';
          btn.style.borderColor = '';
          btn.style.color = '';
        }, 1500);
      } catch (err) {
        console.error('Failed to copy text', err);
      }
    }
  </script>
</body>
</html>