@huydao/karrot 0.1.6 → 0.1.8

package/site/assets/app.js

@@ -0,0 +1,201 @@
+(function () {
+  const doc = document;
+  const body = doc.body;
+
+  function copyCode(button) {
+    const block = button.closest('.code-block');
+    const code = block ? block.querySelector('code') : null;
+
+    if (!code) {
+      return;
+    }
+
+    navigator.clipboard.writeText(code.innerText).then(() => {
+      const original = button.textContent;
+      button.textContent = 'Copied';
+      button.setAttribute('aria-live', 'polite');
+      window.setTimeout(() => {
+        button.textContent = original || 'Copy';
+      }, 1400);
+    }).catch(() => {
+      button.textContent = 'Select';
+    });
+  }
+
+  function enhanceCodeBlocks() {
+    doc.querySelectorAll('pre').forEach((pre) => {
+      if (pre.parentElement && pre.parentElement.classList.contains('code-block')) {
+        return;
+      }
+
+      const wrapper = doc.createElement('div');
+      wrapper.className = 'code-block';
+      const button = doc.createElement('button');
+      button.type = 'button';
+      button.className = 'copy-button';
+      button.textContent = 'Copy';
+      button.addEventListener('click', () => copyCode(button));
+
+      pre.parentNode.insertBefore(wrapper, pre);
+      wrapper.appendChild(button);
+      wrapper.appendChild(pre);
+    });
+  }
+
+  function setupMobileNav() {
+    const toggle = doc.querySelector('[data-nav-toggle]');
+    const sidebar = doc.querySelector('[data-sidebar]');
+    const backdrop = doc.querySelector('[data-sidebar-backdrop]');
+
+    if (!toggle || !sidebar) {
+      return;
+    }
+
+    function close() {
+      body.classList.remove('nav-open');
+      toggle.setAttribute('aria-expanded', 'false');
+    }
+
+    toggle.addEventListener('click', () => {
+      const open = body.classList.toggle('nav-open');
+      toggle.setAttribute('aria-expanded', String(open));
+    });
+
+    sidebar.querySelectorAll('a').forEach((link) => {
+      link.addEventListener('click', close);
+    });
+
+    if (backdrop) {
+      backdrop.addEventListener('click', close);
+    }
+
+    doc.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape') {
+        close();
+      }
+    });
+  }
+
+  function setupHeadingLinks() {
+    doc.querySelectorAll('main section[id] > h2, main h3[id]').forEach((heading) => {
+      if (heading.querySelector('.heading-anchor')) {
+        return;
+      }
+
+      const targetId = heading.id || heading.closest('section[id]')?.id;
+
+      if (!targetId) {
+        return;
+      }
+
+      const anchor = doc.createElement('a');
+      anchor.className = 'heading-anchor';
+      anchor.href = `#${targetId}`;
+      anchor.setAttribute('aria-label', `Link to ${heading.textContent}`);
+      anchor.textContent = '#';
+      heading.appendChild(anchor);
+    });
+  }
+
+  function buildToc() {
+    const toc = doc.querySelector('[data-toc]');
+
+    if (!toc) {
+      return [];
+    }
+
+    const sections = Array.from(doc.querySelectorAll('main section[id]'));
+
+    if (!sections.length) {
+      toc.remove();
+      return [];
+    }
+
+    const list = doc.createElement('ul');
+    list.className = 'toc-list';
+
+    sections.forEach((section) => {
+      const heading = section.querySelector('h2');
+
+      if (!heading) {
+        return;
+      }
+
+      const item = doc.createElement('li');
+      const link = doc.createElement('a');
+      link.href = `#${section.id}`;
+      link.textContent = heading.textContent.replace('#', '').trim();
+      link.dataset.tocLink = section.id;
+      item.appendChild(link);
+      list.appendChild(item);
+    });
+
+    toc.appendChild(list);
+    return sections;
+  }
+
+  function setupActiveLinks(sections) {
+    const sectionLinks = Array.from(doc.querySelectorAll('[data-section-link]'));
+    const tocLinks = Array.from(doc.querySelectorAll('[data-toc-link]'));
+
+    if (!sections.length || (!sectionLinks.length && !tocLinks.length)) {
+      return;
+    }
+
+    const setActive = (id) => {
+      sectionLinks.forEach((link) => {
+        link.classList.toggle('is-active', link.getAttribute('href') === `#${id}`);
+      });
+      tocLinks.forEach((link) => {
+        link.classList.toggle('is-active', link.dataset.tocLink === id);
+      });
+    };
+
+    const updateFromScroll = () => {
+      const offset = 120;
+      let current = sections[0];
+
+      sections.forEach((section) => {
+        if (section.getBoundingClientRect().top <= offset) {
+          current = section;
+        }
+      });
+
+      if (current?.id) {
+        setActive(current.id);
+      }
+    };
+
+    [...sectionLinks, ...tocLinks].forEach((link) => {
+      link.addEventListener('click', () => {
+        const targetId = link.getAttribute('href')?.slice(1);
+
+        if (targetId) {
+          setActive(targetId);
+        }
+      });
+    });
+
+    window.addEventListener('scroll', updateFromScroll, { passive: true });
+    window.addEventListener('hashchange', () => {
+      if (window.location.hash) {
+        setActive(window.location.hash.slice(1));
+      }
+    });
+
+    if (window.location.hash) {
+      setActive(window.location.hash.slice(1));
+    } else if (sections[0]) {
+      setActive(sections[0].id);
+    }
+
+    window.setTimeout(updateFromScroll, 150);
+  }
+
+  doc.addEventListener('DOMContentLoaded', () => {
+    enhanceCodeBlocks();
+    setupMobileNav();
+    setupHeadingLinks();
+    setupActiveLinks(buildToc());
+  });
+})();

package/site/assets/karrot-mark.svg

@@ -0,0 +1,10 @@
+<svg width="64" height="64" viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-labelledby="title desc">
+  <title id="title">Karrot mark</title>
+  <desc id="desc">A simple carrot-shaped mark for Karrot documentation.</desc>
+  <rect width="64" height="64" rx="16" fill="#12352B"/>
+  <path d="M33.7 16.2c2.8-5.5 8.2-6.9 13.4-5.9-1.1 5.4-4.2 9.8-10.3 10.5 3.7-2.6 5.6-5.8 6.4-8.2-3.2.4-6.3 1.9-8.2 5.8l-1.3-2.2Z" fill="#62C370"/>
+  <path d="M28.9 18.2c-1.5-4.5-5.7-7-10.7-7.5.4 5.1 3.5 9.4 8.5 11l2.2-3.5Z" fill="#8ED97E"/>
+  <path d="M20.2 23.5c-2.1 3-2 7.1.1 10.1l13 18.9c1.6 2.3 5 2.2 6.5-.2l11.7-19.7c1.9-3.2 1.4-7.3-1.2-10-7.7-7.9-23.3-8.1-30.1.9Z" fill="#F28C38"/>
+  <path d="M24.7 27.5c4.7-3.9 14.3-3.8 20.2.2" stroke="#FFE2C0" stroke-width="3" stroke-linecap="round"/>
+  <path d="M30.3 39.2c2.8 1.8 6.9 1.8 9.5-.1" stroke="#9D471C" stroke-width="3" stroke-linecap="round"/>
+</svg>