Rustelo/book/theme/custom.js

// Rustelo Documentation Custom JavaScript

// Add copy buttons to code blocks
document.addEventListener("DOMContentLoaded", function () {
  // Add copy buttons to code blocks
  const codeBlocks = document.querySelectorAll("pre > code");
  codeBlocks.forEach(function (codeBlock) {
    const pre = codeBlock.parentElement;
    const button = document.createElement("button");
    button.className = "copy-button";
    button.textContent = "Copy";
    button.style.cssText = `
            position: absolute;
            top: 8px;
            right: 8px;
            background: #4a5568;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
            cursor: pointer;
            opacity: 0;
            transition: opacity 0.2s;
        `;

    pre.style.position = "relative";
    pre.appendChild(button);

    pre.addEventListener("mouseenter", function () {
      button.style.opacity = "1";
    });

    pre.addEventListener("mouseleave", function () {
      button.style.opacity = "0";
    });

    button.addEventListener("click", function () {
      const text = codeBlock.textContent;
      navigator.clipboard.writeText(text).then(function () {
        button.textContent = "Copied!";
        button.style.background = "#48bb78";
        setTimeout(function () {
          button.textContent = "Copy";
          button.style.background = "#4a5568";
        }, 2000);
      });
    });
  });

  // Add feature badges
  const content = document.querySelector(".content");
  if (content) {
    let html = content.innerHTML;

    // Replace feature indicators
    html = html.replace(
      /\[FEATURE:([^\]]+)\]/g,
      '<span class="feature-badge enabled">$1</span>',
    );
    html = html.replace(
      /\[OPTIONAL:([^\]]+)\]/g,
      '<span class="feature-badge optional">$1</span>',
    );
    html = html.replace(
      /\[DISABLED:([^\]]+)\]/g,
      '<span class="feature-badge disabled">$1</span>',
    );

    // Add callout boxes
    html = html.replace(
      /\[NOTE\]([\s\S]*?)\[\/NOTE\]/g,
      '<div class="callout note">$1</div>',
    );
    html = html.replace(
      /\[WARNING\]([\s\S]*?)\[\/WARNING\]/g,
      '<div class="callout warning">$1</div>',
    );
    html = html.replace(
      /\[TIP\]([\s\S]*?)\[\/TIP\]/g,
      '<div class="callout tip">$1</div>',
    );
    html = html.replace(
      /\[DANGER\]([\s\S]*?)\[\/DANGER\]/g,
      '<div class="callout danger">$1</div>',
    );

    content.innerHTML = html;
  }

  // Add smooth scrolling
  document.querySelectorAll('a[href^="#"]').forEach((anchor) => {
    anchor.addEventListener("click", function (e) {
      e.preventDefault();
      const target = document.querySelector(this.getAttribute("href"));
      if (target) {
        target.scrollIntoView({
          behavior: "smooth",
        });
      }
    });
  });
});

// Add keyboard shortcuts
document.addEventListener("keydown", function (e) {
  // Ctrl/Cmd + K to focus search
  if ((e.ctrlKey || e.metaKey) && e.key === "k") {
    e.preventDefault();
    const searchInput = document.querySelector("#searchbar");
    if (searchInput) {
      searchInput.focus();
    }
  }
});

// Add version info to footer
document.addEventListener("DOMContentLoaded", function () {
  const content = document.querySelector(".content");
  if (content) {
    const footer = document.createElement("div");
    footer.style.cssText = `
            margin-top: 3rem;
            padding: 2rem 0;
            border-top: 1px solid #e2e8f0;
            text-align: center;
            font-size: 0.875rem;
            color: #718096;
        `;
    footer.innerHTML = `
            <p>Built with ❤️ using <a href="https://rust-lang.github.io/mdBook/" target="_blank">mdBook</a></p>
            <p>Rustelo Documentation • Last updated: ${new Date().toLocaleDateString()}</p>
        `;
    content.appendChild(footer);
  }
});