agahi/dist/plugin/back_to_top.js

Client-side engine that renders Markdown files as a docs site in the browser—no build step.

(function () {
  'use strict';

  // App configuration for Agahi

  /**
   * @typedef {Object} AgahiConfig
   * @property {string} name - The name of the documentation site.
   * @property {string} repo - GitHub repository in the format "owner/repo".
   * @property {string} el - The ID of the HTML element where content will be rendered.
   * @property {boolean} edit - Whether to show the "Edit on GitHub" link.
   * @property {string} editPath - The full URL path to edit the markdown files on GitHub.
   * @property {string} editLabel - Text label for edit
   * @property {boolean} showFooter - Whether to display the footer section.
   * @property {boolean} showSearch - Whether to enable the search functionality.
   * @property {string} defaultRoute - The default route to load when no hash is provided.
   * @property {string[]} tocHeadings - An array of heading tags to include in the Table of Contents (TOC).
   * @property {string} searchPlaceholder - Search Placeholder
   * @property {string} tocLabel - Text label for TOC heading
   * @property {number} scrollThreshold - The scroll threshold in pixels to show the "Back to Top" button.
   */

  /**
   * Default configuration for Agahi Docs.
   * @type {AgahiConfig}
   */

  const defaultConfig = {
    name: 'Agahi.js',
    repo: 'teneplaysofficial/agahi',
    el: 'app',
    edit: true,
    editPath: 'https://github.com/teneplaysofficial/agahi/edit/main/docs',
    editLabel: 'Edit this page',
    showFooter: true,
    showSearch: true,
    searchPlaceholder: 'Search...',
    defaultRoute: '',
    tocHeadings: ['h2', 'h3'],
    tocLabel: 'Table of Contents',
    scrollThreshold: 300,
  };

  /**
   * User provided configuration via global `window.$agahi`, or falls back to `defaultConfig`.
   * @type {AgahiConfig}
   */

  const userConfig = typeof window !== 'undefined' ? window.$agahi || {} : {};

  const config = {
    ...defaultConfig,
    ...userConfig,
  };

  var backToTopHTML = "<button id=\"back-to-top\" title=\"Back to top\" aria-label=\"Back to top\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"24\"\n    height=\"24\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    class=\"lucide lucide-arrow-up-icon lucide-arrow-up\"\n  >\n    <path d=\"m5 12 7-7 7 7\" />\n    <path d=\"M12 19V5\" />\n  </svg>\n</button>\n";

  function styleInject(css, ref) {
    if ( ref === void 0 ) ref = {};
    var insertAt = ref.insertAt;

    if (typeof document === 'undefined') { return; }

    var head = document.head || document.getElementsByTagName('head')[0];
    var style = document.createElement('style');
    style.type = 'text/css';

    if (insertAt === 'top') {
      if (head.firstChild) {
        head.insertBefore(style, head.firstChild);
      } else {
        head.appendChild(style);
      }
    } else {
      head.appendChild(style);
    }

    if (style.styleSheet) {
      style.styleSheet.cssText = css;
    } else {
      style.appendChild(document.createTextNode(css));
    }
  }

  var css_248z = "#back-to-top {\n  position: fixed;\n  bottom: 2%;\n  right: 1%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0.6rem 1rem;\n  background-color: var(--background);\n  color: var(--text-color);\n  border: 2px solid var(--border-color);\n  border-radius: 15px;\n  cursor: pointer;\n  z-index: 1000;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(100px);\n  transition: all 0.2s ease;\n}\n\n#back-to-top:hover {\n  background-color: var(--background-hover);\n  color: var(--text-strong);\n  border-color: var(--border-color-strong);\n}\n\n#back-to-top.show {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n@media (max-width: 740px) {\n  #back-to-top {\n    bottom: 4%;\n    right: 4%;\n    padding: 0.75rem 0.9rem;\n    font-size: 1rem;\n    border-radius: 12px;\n  }\n}\n";
  styleInject(css_248z);

  const temp = document.createElement('div');
  temp.innerHTML = backToTopHTML;

  document.body.appendChild(temp.firstElementChild);

  const backToTopButton = document.getElementById('back-to-top');
  const scrollThreshold = config.scrollThreshold;

  window.addEventListener('scroll', () => {
    if (window.scrollY > scrollThreshold) {
      backToTopButton.classList.add('show');
    } else {
      backToTopButton.classList.remove('show');
    }
  });

  backToTopButton.onclick = () => {
    window.scrollTo({
      top: 0,
      behavior: 'smooth',
    });
  };

})();