vanilla-framework 4.34.0 → 4.34.2

package/templates/static/js/example.js

@@ -0,0 +1,554 @@
+(function () {
+  if (!window.VANILLA_VERSION) {
+    throw Error('VANILLA_VERSION not specified.');
+  }
+
+  // throttling function calls, by Remy Sharp
+  // http://remysharp.com/2010/07/21/throttling-function-calls/
+  const throttle = function (fn, delay) {
+    let timer = null;
+    return function () {
+      const context = this,
+        args = arguments;
+      clearTimeout(timer);
+      timer = setTimeout(function () {
+        fn.apply(context, args);
+      }, delay);
+    };
+  };
+
+  /**
+   * Mapping of example keys to the regex patterns used to strip them out of an example
+   * @type {{body: RegExp, jinja: RegExp, title: RegExp, head: RegExp}}
+   */
+  const EXAMPLE_CONTENT_PATTERNS = {
+    body: /<body[^>]*>((.|[\n\r])*)<\/body>/im,
+    jinja: /{% block content %}([\s\S]*?){% endblock( content)? %}/,
+    title: /<title[^>]*>((.|[\n\r])*)<\/title>/im,
+    head: /<head[^>]*>((.|[\n\r])*)<\/head>/im,
+  };
+
+  /**
+   * Object representing the structure for language option mappings.
+   * @typedef {Object} ExampleLanguageConfig
+   * @property {string} label - Human-readable label.
+   * @property {string} langIdentifier - Prism language identifier.
+   */
+
+  /**
+   * Mapping of example keys to their configurations.
+   * @type {{jinja: ExampleLanguageConfig, css: ExampleLanguageConfig, js: ExampleLanguageConfig, html: ExampleLanguageConfig}}
+   */
+  const EXAMPLE_LANGUAGE_OPTION_CONFIG = {
+    html: {
+      label: 'HTML',
+      langIdentifier: 'html',
+    },
+    css: {
+      label: 'CSS',
+      langIdentifier: 'css',
+    },
+    js: {
+      label: 'JS',
+      langIdentifier: 'js',
+    },
+    jinja: {
+      label: 'Jinja',
+      // While `jinja2` is an option on Prism, it does not seem to highlight syntax properly. So use HTML instead.
+      langIdentifier: 'html',
+    },
+  };
+
+  const CODEPEN_CONFIG = {
+    title: 'Vanilla framework example',
+    head: "<meta name='viewport' content='width=device-width, initial-scale=1'>",
+    stylesheets: [
+      // link to latest Vanilla CSS
+      // if it's a demo, use local build.css for better QA, otherwise use latest published Vanilla
+      /demos\.haus$/.test(window.location.host)
+        ? `${window.location.origin}/static/build/css/build.css`
+        : 'https://assets.ubuntu.com/v1/vanilla_framework_version_' + VANILLA_VERSION.replaceAll('.', '_') + '_min.css',
+      // link to example stylesheet (to set margin on body)
+      'https://assets.ubuntu.com/v1/4653d9ba-example.css',
+    ],
+    tags: ['Vanilla framework'],
+  };
+
+  document.addEventListener('DOMContentLoaded', function () {
+    const examples = document.querySelectorAll('.js-example');
+
+    [].slice.call(examples).forEach((placementElement) => {
+      renderExample(placementElement).catch((error) => {
+        console.error('Failed to render example', {placementElement, error});
+      });
+    });
+  });
+
+  /**
+   * `fetch()` wrapper that throws an error if the response is not OK.
+   * @param {String} url Address to fetch
+   * @param {RequestInit} opts Options for the fetch request
+   * @returns {Promise<Response>} Response object
+   * @throws {Error} If the response is not in the 200 (OK) range
+   */
+  const fetchResponse = async function (url, opts = {}) {
+    try {
+      const response = await fetch(url, opts);
+      if (!response.ok) {
+        throw new Error(`Failed to fetch example ${url} with status ${response.status}`);
+      }
+      return response;
+    } catch (err) {
+      console.error('An error occurred while performing a fetch request', err);
+      throw err;
+    }
+  };
+
+  /**
+   * Fetch the response text of a URL.
+   * @param {String} url Address to fetch
+   * @returns {Promise<String>} Response text
+   * @throws {Error} If the response is not in the 200 (OK) range
+   */
+  const fetchResponseText = async function (url) {
+    return fetchResponse(url).then((response) => response.text());
+  };
+
+  /**
+   * Format source code based on language
+   * @param {String} source - source code to format
+   * @param {'html'|'jinja'|'js'|'css'} lang - language of the source code
+   * @returns {String} formatted source code
+   */
+  function formatSource(source, lang) {
+    try {
+      switch (lang) {
+        case 'html':
+        case 'jinja':
+          return window.html_beautify(source, {indent_size: 2});
+        case 'js':
+          return window.js_beautify(source, {indent_size: 2});
+        case 'css':
+          return window.css_beautify(source, {indent_size: 2});
+        default:
+          return source;
+      }
+    } catch (error) {
+      // If beautify fails (e.g. invalid source, CDN outage, error upstream), return original source
+      console.error(`Failed to format ${lang} source code: ${error}`, `This could be due to invalid ${lang} source code, an issue with the formatter, or a CDN outage.`, {source});
+      return source;
+    }
+  }
+
+  /**
+   * Create `pre`-formatted code for a block of source
+   * @param {String} source Formatted source code
+   * @param {'html'|'jinja'|'js'|'css'} lang Language of the source code
+   * @param {Boolean} isHidden Whether the pre-code should be hidden initially
+   * @returns {HTMLPreElement} Code snippet containing the source code
+   */
+  function createPreCode(source, lang, isHidden = true) {
+    const code = document.createElement('code');
+    code.appendChild(document.createTextNode(source));
+
+    const pre = document.createElement('pre');
+    pre.classList.add('p-code-snippet__block');
+
+    // TODO: move max-height elsewhere to CSS?
+    pre.style.maxHeight = '300px';
+
+    if (isHidden) {
+      pre.classList.add('u-hide');
+    }
+
+    if (lang) {
+      pre.setAttribute('data-lang', lang);
+      pre.classList.add('language-' + (EXAMPLE_LANGUAGE_OPTION_CONFIG[lang]?.langIdentifier || lang));
+    }
+
+    pre.appendChild(code);
+    return pre;
+  }
+
+  /**
+   * Extract a section of HTML from the document
+   * @param {'body'|'jinja'|'title'|'head'} sectionKey The key/type of content to be extracted
+   * @param {String} documentHTML The example's full HTML content. This may be rendered or raw Jinja template.
+   * @returns {String} The requested section of the document, or an empty string if it was not found.
+   */
+  function getExampleSection(sectionKey, documentHTML) {
+    const pattern = EXAMPLE_CONTENT_PATTERNS[sectionKey];
+    return pattern?.exec(documentHTML)?.[1]?.trim() || '';
+  }
+
+  /**
+   * Fetches the rendered HTML of an example and extracts the relevant sections for rendering and code snippets.
+   * @param {HTMLAnchorElement} placementElement The placeholder element for the example
+   * @returns {Promise<{renderedHtml: String, bodyHtml: String, title: String, jsSource: String, externalScripts: NodeListOf<Element>, cssSource: String}>} The extracted sections of the example
+   */
+  async function fetchRenderedHtml(placementElement) {
+    const renderedHtml = await fetchResponseText(placementElement.href);
+    let bodyHtml = getExampleSection('body', renderedHtml);
+
+    // Extract JS from the body before we strip it out
+    let jsSource = getScriptFromSource(bodyHtml);
+    const externalScripts = getExternalScriptsFromSource(renderedHtml);
+
+    // Filter external scripts to only include project-local scripts (not CDN/third-party)
+    // and exclude utility/tool files that aren't part of the actual example
+    const baseUrl = new URL(placementElement.href);
+    const projectScripts = externalScripts.filter((scriptSrc) => {
+      try {
+        const scriptUrl = new URL(scriptSrc, baseUrl);
+        // Only include scripts from the same origin (project scripts)
+        if (scriptUrl.origin !== baseUrl.origin) {
+          return false;
+        }
+
+        // Exclude common utility files that aren't part of the actual example code
+        const excludedFiles = ['example-tools.js', 'example.js', 'build.js'];
+
+        const scriptPath = scriptUrl.pathname;
+        return !excludedFiles.some((excludedFile) => scriptPath.includes(excludedFile));
+      } catch (error) {
+        return false;
+      }
+    });
+
+    // Render external scripts, if no inline-script was found
+    if (!jsSource && projectScripts.length > 0) {
+      const projectScriptContents = await Promise.all(
+        projectScripts.map(async (scriptSrc) => {
+          try {
+            const absoluteUrl = new URL(scriptSrc, baseUrl).href;
+            const scriptContent = await fetchResponseText(absoluteUrl);
+            return scriptContent;
+          } catch (error) {
+            console.warn(`Failed to fetch project script: ${scriptSrc}`, error);
+            return `// Failed to load: ${scriptSrc}`;
+          }
+        }),
+      );
+
+      const allJsContent = projectScriptContents.filter(Boolean);
+      jsSource = allJsContent.length > 0 ? allJsContent.join('\n\n') : null;
+    }
+
+    jsSource = jsSource ? formatSource(jsSource, 'js') : null;
+    bodyHtml = formatSource(stripScriptsFromSource(bodyHtml), 'html');
+
+    const title = getExampleSection('title', renderedHtml).split('|')[0];
+    const headHtml = getExampleSection('head', renderedHtml);
+    const cssSource = formatSource(getStyleFromSource(headHtml), 'css');
+
+    return {renderedHtml, bodyHtml, title, jsSource, externalScripts, cssSource};
+  }
+
+  /**
+   * Fetches the raw Jinja template of an example and returns the Jinja content block
+   * @param {HTMLElement} placementElement The placeholder element for the example
+   * @returns {Promise<String>} The Jinja content block of the example
+   */
+  async function fetchJinjaContentBlock(placementElement) {
+    // Raw templates are not served at standalone paths, so strip it from the URL if it was found.
+    const exampleUrl = new URL(`${placementElement.href.replace(/standalone/, '/')}`);
+
+    // Add `?raw=true` query parameter to the URL to request the raw Jinja template
+    const queryParams = new URLSearchParams(exampleUrl.search);
+    queryParams.set('raw', true);
+    exampleUrl.search = queryParams.toString();
+
+    const rawJinjaTemplate = await fetchResponseText(exampleUrl.toString());
+    return formatSource(getExampleSection('jinja', rawJinjaTemplate), 'jinja');
+  }
+
+  /**
+   * Replaces an example placeholder element with its rendered result and code snippet.
+   * @param {HTMLAnchorElement} placementElement `a.js-example` element used as a placeholder for the example to render
+   */
+  async function renderExample(placementElement) {
+    const codeSnippet = document.createElement('div');
+    codeSnippet.classList.add('p-code-snippet', 'is-bordered');
+
+    const header = document.createElement('div');
+    header.classList.add('p-code-snippet__header');
+
+    const titleEl = document.createElement('h5');
+    titleEl.classList.add('p-code-snippet__title');
+
+    // Example data will be asynchronously fetched and placed here on promise resolution.
+    const srcData = {
+      html: undefined,
+      renderedHtml: undefined,
+      jinja: undefined,
+      css: undefined,
+      js: undefined,
+      codePen: undefined,
+      title: undefined,
+    };
+
+    const exampleRequests = [];
+
+    const fetchHtml = fetchRenderedHtml(placementElement).then(({renderedHtml, bodyHtml, title, jsSource, externalScripts, cssSource}) => {
+      // There are required, so throw if they failed
+      if (renderedHtml && bodyHtml && title) {
+        srcData.renderedHtml = renderedHtml;
+        srcData.html = bodyHtml;
+        srcData.title = title;
+      } else {
+        throw new Error('Failed to fetch HTML for example iframe and HTML source.');
+      }
+
+      // The rest of the views are optional
+      srcData.js = jsSource;
+      srcData.css = cssSource;
+      srcData.codePen = {
+        html: bodyHtml,
+        css: cssSource,
+        js: jsSource,
+        externalJS: externalScripts,
+      };
+    });
+    exampleRequests.push(fetchHtml);
+
+    if (placementElement.getAttribute('data-lang') === 'jinja') {
+      // Perform jinja template fetching if the example was marked as a Jinja template
+      const fetchJinja = fetchJinjaContentBlock(placementElement).then((contentBlock) => {
+        const hasJinjaTemplate = contentBlock?.length > 0;
+        if (hasJinjaTemplate) {
+          srcData.jinja = contentBlock;
+        }
+      });
+      exampleRequests.push(fetchJinja);
+    }
+
+    // Perform as much of the data fetching and processing as possible in parallel
+    await Promise.all(exampleRequests);
+    // Code after this point depends on the data above being fully fetched, so must come after an `await`
+
+    titleEl.innerText = srcData.title;
+    header.appendChild(titleEl);
+    codeSnippet.appendChild(header);
+    placementElement.parentNode.insertBefore(codeSnippet, placementElement);
+    renderIframe(codeSnippet, srcData.renderedHtml, placementElement.getAttribute('data-height'));
+
+    // Gather the languages that have source code available, in the order they should be displayed
+    // We can't rely on order of these languages being made available in the promise blocks above due to async nature
+    const languageOptions = ['jinja', 'html', 'js', 'css'].filter((lang) => srcData[lang]);
+    const sourceBlocks = languageOptions
+      // THe first language option that was found is displayed by default. The rest are viewable using dropdown.
+      .map((lang, idx) => createPreCode(srcData[lang], lang, idx > 0));
+
+    // Code snippet must be populated with code before Prism can highlight it
+    sourceBlocks.forEach((block) => codeSnippet.appendChild(block));
+    if (Prism) {
+      Prism.highlightAllUnder(codeSnippet);
+    }
+
+    if (srcData.codePen) {
+      renderCodePenEditLink(codeSnippet, srcData.codePen);
+    }
+
+    renderDropdown(header, languageOptions);
+
+    // The example has been rendered successfully, hide the placeholder element.
+    placementElement.style.display = 'none';
+  }
+
+  /**
+   * Renders a dropdown containing the code snippet options, allowing user to switch between multiple views.
+   * @param {HTMLDivElement} codeSnippetHeader The header element of the code snippet
+   * @param {('html'|'jinja'|'js'|'css')[]} codeSnippetModes List of code snippet mode options
+   */
+  function renderDropdown(codeSnippetHeader, codeSnippetModes) {
+    // only add dropdown if there is more than one code block
+    if (codeSnippetModes.length <= 1) return;
+
+    const dropdownsEl = document.createElement('div');
+    dropdownsEl.classList.add('p-code-snippet__dropdowns');
+
+    const selectEl = document.createElement('select');
+    selectEl.classList.add('p-code-snippet__dropdown');
+
+    codeSnippetModes.forEach(function (option) {
+      const optionHTML = document.createElement('option');
+      optionHTML.value = option.toLowerCase();
+      optionHTML.innerText = EXAMPLE_LANGUAGE_OPTION_CONFIG[option]?.label || option.toLowerCase();
+      selectEl.appendChild(optionHTML);
+    });
+
+    dropdownsEl.appendChild(selectEl);
+    codeSnippetHeader.appendChild(dropdownsEl);
+    attachDropdownEvents(selectEl);
+  }
+
+  function resizeIframe(iframe) {
+    if (iframe.contentDocument.readyState == 'complete') {
+      const frameHeight = iframe.contentDocument.body.scrollHeight;
+      iframe.height = frameHeight + 32 + 'px'; // accommodate for body margin
+    }
+  }
+
+  function renderIframe(container, html, height) {
+    const iframe = document.createElement('iframe');
+
+    if (height) {
+      iframe.height = height + 'px';
+    }
+    container.appendChild(iframe);
+    const doc = iframe.contentWindow.document;
+    doc.open();
+    doc.write(html);
+    doc.close();
+
+    // if height wasn't specified, try to determine it from example content
+    if (!height) {
+      // Wait for content to load before determining height
+      const resizeInterval = setInterval(function () {
+        if (iframe.contentDocument.readyState == 'complete') {
+          resizeIframe(iframe);
+          clearInterval(resizeInterval);
+          fixScroll();
+        }
+      }, 100);
+
+      // cancel resizing if frame didn't load in 5s
+      setTimeout(function () {
+        clearInterval(resizeInterval);
+      }, 5000);
+
+      window.addEventListener(
+        'resize',
+        throttle(function () {
+          resizeIframe(iframe);
+        }, 10),
+      );
+    }
+
+    return iframe;
+  }
+
+  function renderCodePenEditLink(snippet, sourceData) {
+    const html = sourceData.html === null ? '' : sourceData.html;
+    const css = sourceData.css === null ? '' : sourceData.css;
+    const js = sourceData.js === null ? '' : sourceData.js;
+
+    if (html || css || js) {
+      const container = document.createElement('div');
+      const form = document.createElement('form');
+      const input = document.createElement('input');
+      const link = document.createElement('a');
+      const data = {
+        title: CODEPEN_CONFIG.title,
+        head: CODEPEN_CONFIG.head,
+        html: html,
+        css: css,
+        js: js,
+        css_external: CODEPEN_CONFIG.stylesheets.join(';'),
+        js_external: sourceData.externalJS.join(';'),
+      };
+      // Replace double quotes to avoid errors on CodePen
+      const JSONstring = JSON.stringify(data).replace(/"/g, '&quot;').replace(/'/g, '&apos;');
+
+      container.classList.add('p-code-snippet__header');
+
+      form.setAttribute('action', 'https://codepen.io/pen/define');
+      form.setAttribute('method', 'POST');
+      form.setAttribute('target', '_blank');
+
+      input.setAttribute('type', 'hidden');
+      input.setAttribute('name', 'data');
+      input.setAttribute('value', JSONstring);
+
+      link.innerHTML = 'Edit on CodePen';
+      link.style.cssText = 'display: block; padding: 0.5rem 0;';
+
+      form.appendChild(input);
+      form.appendChild(link);
+      container.appendChild(form);
+      handleCodePenClick(link, form);
+      snippet.appendChild(container);
+    }
+  }
+
+  function handleCodePenClick(link, form) {
+    link.addEventListener('click', function (e) {
+      e.preventDefault();
+      form.submit();
+    });
+
+    // handle middle mouse button click
+    link.addEventListener('mouseup', function (e) {
+      if (e.which === 2) {
+        link.click();
+      }
+    });
+  }
+
+  function getStyleFromSource(source) {
+    const div = document.createElement('div');
+    div.innerHTML = source;
+    const style = div.querySelector('style');
+    return style ? style.innerHTML.trim() : null;
+  }
+
+  function stripScriptsFromSource(source) {
+    const div = document.createElement('div');
+    div.innerHTML = source;
+    const scripts = div.getElementsByTagName('script');
+    let i = scripts.length;
+    while (i--) {
+      scripts[i].parentNode.removeChild(scripts[i]);
+    }
+    return div.innerHTML.trim();
+  }
+
+  function getScriptFromSource(source) {
+    const div = document.createElement('div');
+    div.innerHTML = source;
+    const script = div.querySelector('script');
+    return script ? script.innerHTML.trim() : null;
+  }
+
+  function getExternalScriptsFromSource(source) {
+    const div = document.createElement('div');
+    div.innerHTML = source;
+    let scripts = div.querySelectorAll('script[src]');
+    scripts = [].slice.apply(scripts).map(function (s) {
+      return s.src;
+    });
+    return scripts;
+  }
+
+  function fixScroll() {
+    const titleId = window.location.hash;
+    if (titleId) {
+      const title = document.querySelector(titleId);
+      title.scrollIntoView();
+    }
+  }
+
+  /**
+    Attaches change event listener to a given select.
+    @param {HTMLElement} dropdown Select element belonging to a code snippet.
+  */
+  function attachDropdownEvents(dropdown) {
+    dropdown.addEventListener('change', function (e) {
+      const snippet = e.target.closest('.p-code-snippet');
+
+      // toggle code blocks visibility based on selected language
+      for (let i = 0; i < dropdown.options.length; i++) {
+        const lang = dropdown.options[i].value;
+        const block = snippet && snippet.querySelector("[data-lang='" + lang + "']");
+
+        if (lang === e.target.value) {
+          block.classList.remove('u-hide');
+          block.setAttribute('aria-hidden', false);
+        } else {
+          block.classList.add('u-hide');
+          block.setAttribute('aria-hidden', true);
+        }
+      }
+    });
+  }
+})();

package/templates/static/js/index.js

@@ -0,0 +1,16 @@
+/**
+ * Vanilla Framework JavaScript modules
+ *
+ * This is the main entry point for importing Vanilla Framework JavaScript modules.
+ * You can import individual modules or all modules from this module.
+ */
+
+// Re-export tabs as a namespace for organized imports
+import * as tabs from './tabs.js';
+export {tabs};
+
+// Default export for convenience
+export default {
+  tabs,
+  // Add future modules here as they are created
+};

package/templates/static/js/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

package/templates/static/js/prism.min.js

@@ -0,0 +1,8 @@
+/* PrismJS 1.23.0
+https://prismjs.com/download#themes=prism&languages=markup+css+clike+javascript&plugins=keep-markup */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(u){var c=/\blang(?:uage)?-([\w-]+)\b/i,n=0,M={manual:u.Prism&&u.Prism.manual,disableWorkerMessageHandler:u.Prism&&u.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof W?new W(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/\u00a0/g," ")},type:function(e){return Object.prototype.toString.call(e).slice(8,-1)},objId:function(e){return e.__id||Object.defineProperty(e,"__id",{value:++n}),e.__id},clone:function r(e,t){var a,n;switch(t=t||{},M.util.type(e)){case"Object":if(n=M.util.objId(e),t[n])return t[n];for(var i in a={},t[n]=a,e)e.hasOwnProperty(i)&&(a[i]=r(e[i],t));return a;case"Array":return n=M.util.objId(e),t[n]?t[n]:(a=[],t[n]=a,e.forEach(function(e,n){a[n]=r(e,t)}),a);default:return e}},getLanguage:function(e){for(;e&&!c.test(e.className);)e=e.parentElement;return e?(e.className.match(c)||[,"none"])[1].toLowerCase():"none"},currentScript:function(){if("undefined"==typeof document)return null;if("currentScript"in document)return document.currentScript;try{throw new Error}catch(e){var n=(/at [^(\r\n]*\((.*):.+:.+\)$/i.exec(e.stack)||[])[1];if(n){var r=document.getElementsByTagName("script");for(var t in r)if(r[t].src==n)return r[t]}return null}},isActive:function(e,n,r){for(var t="no-"+n;e;){var a=e.classList;if(a.contains(n))return!0;if(a.contains(t))return!1;e=e.parentElement}return!!r}},languages:{extend:function(e,n){var r=M.util.clone(M.languages[e]);for(var t in n)r[t]=n[t];return r},insertBefore:function(r,e,n,t){var a=(t=t||M.languages)[r],i={};for(var l in a)if(a.hasOwnProperty(l)){if(l==e)for(var o in n)n.hasOwnProperty(o)&&(i[o]=n[o]);n.hasOwnProperty(l)||(i[l]=a[l])}var s=t[r];return t[r]=i,M.languages.DFS(M.languages,function(e,n){n===s&&e!=r&&(this[e]=i)}),i},DFS:function e(n,r,t,a){a=a||{};var i=M.util.objId;for(var l in n)if(n.hasOwnProperty(l)){r.call(n,l,n[l],t||l);var o=n[l],s=M.util.type(o);"Object"!==s||a[i(o)]?"Array"!==s||a[i(o)]||(a[i(o)]=!0,e(o,r,l,a)):(a[i(o)]=!0,e(o,r,null,a))}}},plugins:{},highlightAll:function(e,n){M.highlightAllUnder(document,e,n)},highlightAllUnder:function(e,n,r){var t={callback:r,container:e,selector:'code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'};M.hooks.run("before-highlightall",t),t.elements=Array.prototype.slice.apply(t.container.querySelectorAll(t.selector)),M.hooks.run("before-all-elements-highlight",t);for(var a,i=0;a=t.elements[i++];)M.highlightElement(a,!0===n,t.callback)},highlightElement:function(e,n,r){var t=M.util.getLanguage(e),a=M.languages[t];e.className=e.className.replace(c,"").replace(/\s+/g," ")+" language-"+t;var i=e.parentElement;i&&"pre"===i.nodeName.toLowerCase()&&(i.className=i.className.replace(c,"").replace(/\s+/g," ")+" language-"+t);var l={element:e,language:t,grammar:a,code:e.textContent};function o(e){l.highlightedCode=e,M.hooks.run("before-insert",l),l.element.innerHTML=l.highlightedCode,M.hooks.run("after-highlight",l),M.hooks.run("complete",l),r&&r.call(l.element)}if(M.hooks.run("before-sanity-check",l),!l.code)return M.hooks.run("complete",l),void(r&&r.call(l.element));if(M.hooks.run("before-highlight",l),l.grammar)if(n&&u.Worker){var s=new Worker(M.filename);s.onmessage=function(e){o(e.data)},s.postMessage(JSON.stringify({language:l.language,code:l.code,immediateClose:!0}))}else o(M.highlight(l.code,l.grammar,l.language));else o(M.util.encode(l.code))},highlight:function(e,n,r){var t={code:e,grammar:n,language:r};return M.hooks.run("before-tokenize",t),t.tokens=M.tokenize(t.code,t.grammar),M.hooks.run("after-tokenize",t),W.stringify(M.util.encode(t.tokens),t.language)},tokenize:function(e,n){var r=n.rest;if(r){for(var t in r)n[t]=r[t];delete n.rest}var a=new i;return I(a,a.head,e),function e(n,r,t,a,i,l){for(var o in t)if(t.hasOwnProperty(o)&&t[o]){var s=t[o];s=Array.isArray(s)?s:[s];for(var u=0;u<s.length;++u){if(l&&l.cause==o+","+u)return;var c=s[u],g=c.inside,f=!!c.lookbehind,h=!!c.greedy,d=c.alias;if(h&&!c.pattern.global){var v=c.pattern.toString().match(/[imsuy]*$/)[0];c.pattern=RegExp(c.pattern.source,v+"g")}for(var p=c.pattern||c,m=a.next,y=i;m!==r.tail&&!(l&&y>=l.reach);y+=m.value.length,m=m.next){var k=m.value;if(r.length>n.length)return;if(!(k instanceof W)){var b,x=1;if(h){if(!(b=z(p,y,n,f)))break;var w=b.index,A=b.index+b[0].length,P=y;for(P+=m.value.length;P<=w;)m=m.next,P+=m.value.length;if(P-=m.value.length,y=P,m.value instanceof W)continue;for(var S=m;S!==r.tail&&(P<A||"string"==typeof S.value);S=S.next)x++,P+=S.value.length;x--,k=n.slice(y,P),b.index-=y}else if(!(b=z(p,0,k,f)))continue;var w=b.index,E=b[0],O=k.slice(0,w),L=k.slice(w+E.length),N=y+k.length;l&&N>l.reach&&(l.reach=N);var j=m.prev;O&&(j=I(r,j,O),y+=O.length),q(r,j,x);var C=new W(o,g?M.tokenize(E,g):E,d,E);if(m=I(r,j,C),L&&I(r,m,L),1<x){var _={cause:o+","+u,reach:N};e(n,r,t,m.prev,y,_),l&&_.reach>l.reach&&(l.reach=_.reach)}}}}}}(e,a,n,a.head,0),function(e){var n=[],r=e.head.next;for(;r!==e.tail;)n.push(r.value),r=r.next;return n}(a)},hooks:{all:{},add:function(e,n){var r=M.hooks.all;r[e]=r[e]||[],r[e].push(n)},run:function(e,n){var r=M.hooks.all[e];if(r&&r.length)for(var t,a=0;t=r[a++];)t(n)}},Token:W};function W(e,n,r,t){this.type=e,this.content=n,this.alias=r,this.length=0|(t||"").length}function z(e,n,r,t){e.lastIndex=n;var a=e.exec(r);if(a&&t&&a[1]){var i=a[1].length;a.index+=i,a[0]=a[0].slice(i)}return a}function i(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function I(e,n,r){var t=n.next,a={value:r,prev:n,next:t};return n.next=a,t.prev=a,e.length++,a}function q(e,n,r){for(var t=n.next,a=0;a<r&&t!==e.tail;a++)t=t.next;(n.next=t).prev=n,e.length-=a}if(u.Prism=M,W.stringify=function n(e,r){if("string"==typeof e)return e;if(Array.isArray(e)){var t="";return e.forEach(function(e){t+=n(e,r)}),t}var a={type:e.type,content:n(e.content,r),tag:"span",classes:["token",e.type],attributes:{},language:r},i=e.alias;i&&(Array.isArray(i)?Array.prototype.push.apply(a.classes,i):a.classes.push(i)),M.hooks.run("wrap",a);var l="";for(var o in a.attributes)l+=" "+o+'="'+(a.attributes[o]||"").replace(/"/g,"&quot;")+'"';return"<"+a.tag+' class="'+a.classes.join(" ")+'"'+l+">"+a.content+"</"+a.tag+">"},!u.document)return u.addEventListener&&(M.disableWorkerMessageHandler||u.addEventListener("message",function(e){var n=JSON.parse(e.data),r=n.language,t=n.code,a=n.immediateClose;u.postMessage(M.highlight(t,M.languages[r],r)),a&&u.close()},!1)),M;var e=M.util.currentScript();function r(){M.manual||M.highlightAll()}if(e&&(M.filename=e.src,e.hasAttribute("data-manual")&&(M.manual=!0)),!M.manual){var t=document.readyState;"loading"===t||"interactive"===t&&e&&e.defer?document.addEventListener("DOMContentLoaded",r):window.requestAnimationFrame?window.requestAnimationFrame(r):window.setTimeout(r,16)}return M}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:/<!--[\s\S]*?-->/,prolog:/<\?[\s\S]+?\?>/,doctype:{pattern:/<!DOCTYPE(?:[^>"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|<!--(?:[^-]|-(?!->))*-->)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^<!|>$|[[\]]/,"doctype-tag":/^DOCTYPE/,name:/[^\s<>'"]+/}},cdata:/<!\[CDATA\[[\s\S]*?]]>/i,tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&amp;/,"&"))}),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^<!\[CDATA\[)[\s\S]+?(?=\]\]>$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^<!\[CDATA\[|\]\]>$/i;var n={"included-cdata":{pattern:/<!\[CDATA\[[\s\S]*?\]\]>/i,inside:s}};n["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var t={};t[a]={pattern:RegExp("(<__[^>]*>)(?:<!\\[CDATA\\[(?:[^\\]]|\\](?!\\]>))*\\]\\]>|(?!<!\\[CDATA\\[)[^])*?(?=</__>)".replace(/__/g,function(){return a}),"i"),lookbehind:!0,greedy:!0,inside:n},Prism.languages.insertBefore("markup","cdata",t)}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
+!function(s){var e=/("|')(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:/@[\w-](?:[^;{\s]|\s+(?![\s{]))*(?:;|(?=\s*\{))/,inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:RegExp("[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),string:{pattern:e,greedy:!0},property:/(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,important:/!important\b/i,function:/[-a-z0-9]+(?=\()/i,punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),s.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/(^|["'\s])style\s*=\s*(?:"[^"]*"|'[^']*')/i,lookbehind:!0,inside:{"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{style:{pattern:/(["'])[\s\S]+(?=["']$)/,lookbehind:!0,alias:"language-css",inside:s.languages.css},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}},"attr-name":/^style/i}}},t.tag))}(Prism);
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|interface|extends|implements|trait|instanceof|new)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,boolean:/\b(?:true|false)\b/,function:/\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:prototype|constructor))/,lookbehind:!0}],keyword:[{pattern:/((?:^|})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:/\b(?:(?:0[xX](?:[\dA-Fa-f](?:_[\dA-Fa-f])?)+|0[bB](?:[01](?:_[01])?)+|0[oO](?:[0-7](?:_[0-7])?)+)n?|(?:\d(?:_\d)?)+n|NaN|Infinity)\b|(?:\b(?:\d(?:_\d)?)+\.?(?:\d(?:_\d)?)*|\B\.(?:\d(?:_\d)?)+)(?:[Ee][+-]?(?:\d(?:_\d)?)+)?/,operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|interface|extends|implements|instanceof|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:/((?:^|[^$\w\xA0-\uFFFF."'\])\s]|\b(?:return|yield))\s*)\/(?:\[(?:[^\]\\\r\n]|\\.)*]|\\.|[^/\\\[\r\n])+\/[gimyus]{0,6}(?=(?:\s|\/\*(?:[^*]|\*(?!\/))*\*\/)*(?:$|[\r\n,.;:})\]]|\/\/))/,lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-flags":/[a-z]+$/,"regex-delimiter":/^\/|\/$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{"template-string":{pattern:/`(?:\\[\s\S]|\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}|(?!\${)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\${(?:[^{}]|{(?:[^{}]|{[^}]*})*})+}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\${|}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}}}),Prism.languages.markup&&Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.js=Prism.languages.javascript;
+"undefined"!=typeof self&&self.Prism&&self.document&&document.createRange&&(Prism.plugins.KeepMarkup=!0,Prism.hooks.add("before-highlight",function(e){if(e.element.children.length&&Prism.util.isActive(e.element,"keep-markup",!0)){var a=0,s=[],l=function(e,n){var o={};n||(o.clone=e.cloneNode(!1),o.posOpen=a,s.push(o));for(var t=0,d=e.childNodes.length;t<d;t++){var r=e.childNodes[t];1===r.nodeType?l(r):3===r.nodeType&&(a+=r.data.length)}n||(o.posClose=a)};l(e.element,!0),s&&s.length&&(e.keepMarkup=s)}}),Prism.hooks.add("after-highlight",function(n){if(n.keepMarkup&&n.keepMarkup.length){var a=function(e,n){for(var o=0,t=e.childNodes.length;o<t;o++){var d=e.childNodes[o];if(1===d.nodeType){if(!a(d,n))return!1}else 3===d.nodeType&&(!n.nodeStart&&n.pos+d.data.length>n.node.posOpen&&(n.nodeStart=d,n.nodeStartPos=n.node.posOpen-n.pos),n.nodeStart&&n.pos+d.data.length>=n.node.posClose&&(n.nodeEnd=d,n.nodeEndPos=n.node.posClose-n.pos),n.pos+=d.data.length);if(n.nodeStart&&n.nodeEnd){var r=document.createRange();return r.setStart(n.nodeStart,n.nodeStartPos),r.setEnd(n.nodeEnd,n.nodeEndPos),n.node.clone.appendChild(r.extractContents()),r.insertNode(n.node.clone),r.detach(),!1}}return!0};n.keepMarkup.forEach(function(e){a(n.element,{node:e,pos:0})}),n.highlightedCode=n.element.innerHTML}}));