added styling

theme/default/js/copy.js

@@ -0,0 +1,40 @@
+/**
+ * https://github.com/uiwjs/copy-to-clipboard/blob/master/src/main.js
+ */
+function copyTextToClipboard(text, cb) {
+  const el = document.createElement('textarea');
+  el.value = text;
+  el.setAttribute('readonly', '');
+  el.style = {
+    position: 'absolute',
+    left: '-9999px',
+  };
+  document.body.appendChild(el);
+  const selected = document.getSelection().rangeCount > 0 ? document.getSelection().getRangeAt(0) : false;
+  el.select();
+  let isCopy = false;
+  try {
+    const successful = document.execCommand('copy');
+    isCopy = !!successful;
+  } catch (err) {
+    isCopy = false;
+  }
+  document.body.removeChild(el);
+  if (selected && document.getSelection) {
+    document.getSelection().removeAllRanges();
+    document.getSelection().addRange(selected);
+  }
+  cb && cb(isCopy);
+}
+
+function copied(target, str) {
+  target.classList.add('active');
+  const input = target.parentElement.querySelector('input');
+  if (input) {
+    copyTextToClipboard(input.value || '', function () {
+      setTimeout(() => {
+        target.classList.remove('active');
+      }, 2000);
+    });
+  }
+}

theme/default/js/dark-mode.js

@@ -0,0 +1,162 @@
+/**
+ * @package @wcj/dark-mode@1.0.14
+ * Web Component that toggles dark mode 🌒
+ * Github: https://github.com/jaywcjlove/dark-mode.git
+ * Website: https://jaywcjlove.github.io/dark-mode
+ *
+ * Licensed under the MIT license.
+ * @license Copyright © 2022. Licensed under the MIT License
+ * @author kenny wong <wowohoo@qq.com>
+ */
+const t = document;
+const e = '_dark_mode_theme_';
+const s = 'permanent';
+const o = 'colorschemechange';
+const i = 'permanentcolorscheme';
+const h = 'light';
+const r = 'dark';
+const n = (t, e, s = e) => {
+  Object.defineProperty(t, s, {
+    enumerable: true,
+    get() {
+      const t = this.getAttribute(e);
+      return t === null ? '' : t;
+    },
+    set(t) {
+      this.setAttribute(e, t);
+    },
+  });
+};
+const c = (t, e, s = e) => {
+  Object.defineProperty(t, s, {
+    enumerable: true,
+    get() {
+      return this.hasAttribute(e);
+    },
+    set(t) {
+      if (t) {
+        this.setAttribute(e, '');
+      } else {
+        this.removeAttribute(e);
+      }
+    },
+  });
+};
+class a extends HTMLElement {
+  static get observedAttributes() {
+    return ['mode', h, r, s];
+  }
+  LOCAL_NANE = e;
+  constructor() {
+    super();
+    this.t();
+  }
+  connectedCallback() {
+    n(this, 'mode');
+    n(this, r);
+    n(this, h);
+    c(this, s);
+    const a = localStorage.getItem(e);
+    if (a && [h, r].includes(a)) {
+      this.mode = a;
+      this.permanent = true;
+    }
+    if (this.permanent && !a) {
+      localStorage.setItem(e, this.mode);
+    }
+    const l = [h, r].includes(a);
+    if (this.permanent && a) {
+      this.o();
+    } else {
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+        this.mode = r;
+        this.o();
+      }
+      if (window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches) {
+        this.mode = h;
+        this.o();
+      }
+    }
+    if (!this.permanent && !l) {
+      window.matchMedia('(prefers-color-scheme: light)').onchange = (t) => {
+        this.mode = t.matches ? h : r;
+        this.o();
+      };
+      window.matchMedia('(prefers-color-scheme: dark)').onchange = (t) => {
+        this.mode = t.matches ? r : h;
+        this.o();
+      };
+    }
+    const d = new MutationObserver((s, h) => {
+      this.mode = t.documentElement.dataset.colorMode;
+      if (this.permanent && l) {
+        localStorage.setItem(e, this.mode);
+        this.i(i, { permanent: this.permanent });
+      }
+      this.h();
+      this.i(o, { colorScheme: this.mode });
+    });
+    d.observe(t.documentElement, { attributes: true });
+    this.i(o, { colorScheme: this.mode });
+    this.h();
+  }
+  attributeChangedCallback(t, s, o) {
+    if (t === 'mode' && s !== o && [h, r].includes(o)) {
+      const t = localStorage.getItem(e);
+      if (this.mode === t) {
+        this.mode = o;
+        this.h();
+        this.o();
+      } else if (this.mode && this.mode !== t) {
+        this.h();
+        this.o();
+      }
+    } else if ((t === h || t === r) && s !== o) {
+      this.h();
+    }
+    if (t === 'permanent' && typeof this.permanent === 'boolean') {
+      this.permanent ? localStorage.setItem(e, this.mode) : localStorage.removeItem(e);
+    }
+  }
+  o() {
+    t.documentElement.setAttribute('data-color-mode', this.mode);
+  }
+  h() {
+    this.icon.textContent = this.mode === h ? '🌒' : '🌞';
+    this.text.textContent = this.mode === h ? this.getAttribute(r) : this.getAttribute(h);
+  }
+  t() {
+    var s = this.attachShadow({ mode: 'open' });
+    this.label = t.createElement('span');
+    this.label.setAttribute('class', 'wrapper');
+    this.label.onclick = () => {
+      this.mode = this.mode === h ? r : h;
+      if (this.permanent) {
+        localStorage.setItem(e, this.mode);
+      }
+      this.o();
+      this.h();
+    };
+    s.appendChild(this.label);
+    this.icon = t.createElement('span');
+    this.label.appendChild(this.icon);
+    this.text = t.createElement('span');
+    this.label.appendChild(this.text);
+    const o = `\n[data-color-mode*='dark'], [data-color-mode*='dark'] body {\n  color-scheme: dark;\n  --color-theme-bg: #0d1117;\n  --color-theme-text: #c9d1d9;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}\n\n[data-color-mode*='light'], [data-color-mode*='light'] body {\n  color-scheme: light;\n  --color-theme-bg: #fff;\n  --color-theme-text: #24292f;\n  background-color: var(--color-theme-bg);\n  color: var(--color-theme-text);\n}`;
+    const i = '_dark_mode_style_';
+    const n = t.getElementById(i);
+    if (!n) {
+      var c = t.createElement('style');
+      c.id = i;
+      c.textContent = o;
+      t.head.appendChild(c);
+    }
+    var a = t.createElement('style');
+    a.textContent = `\n    .wrapper { cursor: pointer; user-select: none; position: relative; }\n    .wrapper > span + span { margin-left: .4rem; }\n    `;
+    s.appendChild(a);
+  }
+  i(t, e) {
+    this.dispatchEvent(new CustomEvent(t, { bubbles: true, composed: true, detail: e }));
+  }
+}
+customElements.define('dark-mode', a);

theme/default/js/demo-preview.js

@@ -0,0 +1,31 @@
+const demo = document.querySelectorAll('.idoc-demo-warpper .idoc-demo-previw');
+
+function getButton(elm, type = 'BUTTON') {
+  let btn;
+  do {
+    elm = elm.nextElementSibling;
+    if (elm.tagName === type) {
+      btn = elm;
+      elm = undefined;
+      break;
+    }
+  } while (elm);
+  return btn;
+}
+if (demo && demo.length > 0) {
+  demo.forEach((item) => {
+    if (item.previousElementSibling && item.previousElementSibling.tagName === 'INPUT') {
+      const button = getButton(item);
+      if (button) {
+        button.innerHTML = item.classList.contains('ishiden') ? 'Preview' : 'Show Code';
+        if (item.tagName === 'DIV') {
+          item.innerHTML = item.previousElementSibling.defaultValue;
+        }
+        button.onclick = () => {
+          item.classList.toggle('ishiden');
+          button.innerHTML = item.classList.contains('ishiden') ? 'Preview' : 'Show Code';
+        };
+      }
+    }
+  });
+}

theme/default/js/giscus.js

@@ -0,0 +1,34 @@
+(() => {
+  const targetElement = document.documentElement;
+  const defaultTheme = targetElement.getAttribute('data-color-mode');
+  changeGiscusTheme(defaultTheme);
+  const observer = new MutationObserver((mutationsList, observer) => {
+    for (const mutation of mutationsList) {
+      if (mutation.type === 'attributes') {
+        const value = targetElement.getAttribute('data-color-mode');
+        changeGiscusTheme(value);
+      }
+    }
+  });
+
+  observer.observe(targetElement, {
+    attributes: true,
+    attributeOldValue: true,
+  });
+
+  function changeGiscusTheme(theme = 'light') {
+    const iframe = document.querySelector('.giscus-frame');
+    if (iframe) {
+      const config = {
+        giscus: {
+          setConfig: {
+            theme: theme.toLocaleLowerCase(),
+          },
+        },
+      };
+      iframe.contentWindow.postMessage(config, 'https://giscus.app');
+      const script = document.querySelector('script[data-script-id="giscus"]');
+      script.setAttribute('data-theme', theme);
+    }
+  }
+})();

theme/default/js/tocbot.js

@@ -0,0 +1,132 @@
+(() => {
+  function debounce(fn, delay = 1000) {
+    let time = null;
+    function _debounce(...args) {
+      if (time !== null) clearTimeout(time);
+      time = setTimeout(() => fn.apply(this, args), delay);
+    }
+    return _debounce;
+  }
+
+  const scrollSmoothOffset = 56;
+  function updateScroll() {
+    const heading = document.getElementById(decodeURIComponent(location.hash.replace(/^#/, '')));
+    if (heading) {
+      document.scrollingElement.scrollTop = heading.offsetTop - scrollSmoothOffset + 3;
+    }
+  }
+
+  function preventClickHandle(selector) {
+    const mdContainer = document.querySelectorAll(selector);
+    if (mdContainer && mdContainer.length > 0) {
+      mdContainer.forEach((anchor) => {
+        anchor.addEventListener('click', (e) => {
+          e.preventDefault();
+          location.hash = anchor.getAttribute('href');
+          updateScroll();
+          updateAnchor();
+          tocsCollapse();
+        });
+      });
+    }
+  }
+  function tocButton() {
+    const tocElement = document.querySelector(`a.gototop`);
+    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+      tocElement.style.opacity = 0.5;
+    } else {
+      tocElement.style.opacity = 0;
+    }
+  }
+  function scrollListener(evn) {
+    const anchors = document.querySelectorAll('markdown-style a.anchor[href*="#"][aria-hidden]');
+    const scrollTop = evn && evn.target && evn.target.scrollingElement && evn.target.scrollingElement.scrollTop;
+    let element;
+    let index = 0;
+    anchors.forEach((anchor, idx) => {
+      if (anchor.offsetTop - scrollSmoothOffset < scrollTop || (idx === 0 && anchor.offsetTop > scrollTop)) {
+        element = anchor;
+        index = idx;
+      }
+    });
+    tocButton();
+    if (element) {
+      const tocElement = document.querySelector(`a.tocs-link[href='${decodeURIComponent(element.hash)}']`);
+      if (tocElement) {
+        updateAnchor(tocElement);
+        tocsCollapse(tocElement);
+      } else {
+        const first = document.querySelector('a.tocs-link[href*="#"]');
+        if (index === 0 && first) {
+          updateAnchor(first);
+          tocsCollapse(first);
+        }
+      }
+    }
+  }
+
+  document.addEventListener('scroll', debounce(scrollListener, 30), false);
+
+  function updateAnchor(element) {
+    const anchorContainer = document.querySelectorAll('.tocs aside.inner.toc a.tocs-link');
+    anchorContainer.forEach((tocanchor) => {
+      tocanchor.classList.remove('is-active-link');
+    });
+    const anchor = element || document.querySelector(`a.tocs-link[href='${decodeURIComponent(location.hash)}']`);
+    if (anchor) {
+      anchor.classList.add('is-active-link');
+    }
+  }
+
+  function tocsCollapse(element) {
+    const tocContainer = document.querySelector('nav.tocs > aside.inner.toc');
+    if (element) {
+      tocContainer.scrollTop = element.offsetTop;
+    }
+
+    const list = document.querySelectorAll('aside.toc ol.tocs-list');
+    list.forEach((item) => {
+      item.classList.remove('is-open');
+    });
+    if (element && element.nextElementSibling) {
+      element.nextElementSibling.classList.add('is-open');
+    }
+    isOpen(element);
+  }
+
+  function isOpen(element) {
+    if (!element) {
+      element = document.querySelector(`a.tocs-link[href='${decodeURIComponent(location.hash)}']`);
+    }
+    if (
+      element &&
+      element.parentElement &&
+      element.parentElement.tagName !== 'ASIDE' &&
+      !element.parentElement.classList.contains('toc')
+    ) {
+      isOpen(element.parentElement);
+      if (element.parentElement.classList.contains('is-collapsed')) {
+        element.parentElement.classList.add('is-open');
+      }
+    }
+  }
+
+  preventClickHandle('markdown-style a.anchor[href*="#"][aria-hidden]');
+  preventClickHandle('.tocs aside.inner.toc a.tocs-link');
+
+  function updateSiderBarScroll() {
+    const siderBar = document.querySelector(".sidebar[role*='navigation']");
+    const siderAnchor = document.querySelector(".sidebar[role*='navigation'] a[class*='active']");
+    if (siderAnchor) {
+      siderBar.scrollTop = siderAnchor.offsetTop;
+    }
+  }
+
+  const timer = setTimeout(() => {
+    updateSiderBarScroll();
+    updateScroll();
+    updateAnchor();
+    tocsCollapse();
+    clearTimeout(timer);
+  }, 100);
+})();