template/demo/index.html

<!--
  Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
  See LICENSE in the project root for license information.

  HTML in this document is standardized and NOT to be edited.
  All demo code should be added/edited in ./demo/demo.md

  With the exception of adding custom elements if needed for the demo.

  ----------------------- DO NOT EDIT -----------------------------

-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Auro Web Component Generator | [namespace]-[name] custom element</title>
    <link
      rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
    />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
  </head>
  <body class="auro-markdown">
    <main></main>

    <script type="module">
      import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
      import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
      fetch('/demo/demo.md')
        .then((response) => response.text())
        .then((text) => {
          const rawHtml = marked.parse(text);
          document.querySelector('main').innerHTML = rawHtml;
          Prism.highlightAll();
        });
    </script>

    <!-- If additional elements are needed for the demo, add them here. -->
    <script src="https://cdn.jsdelivr.net/npm/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
  </body>
</html>