perf(renovate): implement node 20 and theming support #22 #23

AlaskaAirlines · Jan 11, 2024 · a0d314c · a0d314c
1 parent 9fffb1b
commit a0d314c
Show file tree

Hide file tree

Showing 8 changed files with 21,825 additions and 12,215 deletions.
diff --git a/.github/workflows/testPublish.yml b/.github/workflows/testPublish.yml
@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x, 14.x]
+        node-version: [18.x, 20.x]
 
     steps:
       - uses: actions/checkout@v3
@@ -37,7 +37,7 @@ jobs:
           persist-credentials: false
       - uses: actions/setup-node@v3
         with:
-          node-version: 14
+          node-version: 20
       - run: npm ci
       - run: npm run build
       - uses: cycjimmy/semantic-release-action@v3

diff --git a/README.md b/README.md
@@ -50,8 +50,8 @@ In cases where the project is not able to process JS assets, there are pre-proce
 **NOTE:** Be sure to replace `@latest` in the URL with the version of the asset you want. `@latest` is NOT aware of any MAJOR releases, use at your own risk.
 
 ```html
-<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
-<link rel="stylesheet" href="https://unpkg.com/@alaskaairux/webcorestylesheets@latest/dist/bundled/essentials.css" />
+<link rel="stylesheet" href="https://unpkg.com/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css" />
+<link rel="stylesheet" href="https://unpkg.com/@aurodesignsystem/webcorestylesheets@latest/src/bundled/essentials.css" />
 
 <script src="https://unpkg.com/@aurodesignsystem/auro-background@latest/dist/auro-background__bundled.js" type="module"></script>
 ```

diff --git a/demo/api.html b/demo/api.html
@@ -0,0 +1,50 @@
+<!--
+  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/api.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 | auro-background 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/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/src/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/src/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/api.md')
+        .then((response) => response.text())
+        .then((text) => {
+          const rawHtml = marked.parse(text);
+          document.querySelector('main').innerHTML = rawHtml;
+          Prism.highlightAll();
+        });
+    </script>
+    <script type="module" data-demo-script="true" src="../index.js"></script>
+
+    <!-- If additional elements are needed for the demo, add them here. -->
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
+  </body>
+</html>
diff --git a/demo/index.html b/demo/index.html
@@ -2,8 +2,8 @@
   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 are NOT to be edited.
-  All demo code should be edited in ./demo/demo.md
+  HTML in this document is standardized and NOT to be edited.
+  All demo code should be added/edited in ./demo/index.md
 
   With the exception of adding custom elements if needed for the demo.
 
@@ -20,37 +20,36 @@
     <link
       rel="stylesheet"
       type="text/css"
-      href="https://unpkg.com/prismjs@latest/themes/prism.css"
+      href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
     />
-    <link rel="stylesheet" type="text/css" href="style.css" />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/tokens/CSSCustomProperties.css">
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/src/demoWrapper.css" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/src/elementDemoStyles.css" />
   </head>
-  <body>
-    <style>
-      .content {
-        display: block;
-      }
-    </style>
+  <body class="auro-markdown">
     <main></main>
 
-    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/prismjs/prism.js"></script>
-    <script>
-      // import 'https://unpkg.com/marked@latest/marked.min.js';
-      // import 'https://unpkg.com/prismjs@latest/prism.js';
-      fetch('/demo/demo.md')
+    <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/index.md')
         .then((response) => response.text())
         .then((text) => {
           const rawHtml = marked.parse(text);
           document.querySelector('main').innerHTML = rawHtml;
           Prism.highlightAll();
         });
     </script>
-    <script type="module" src="../src/auro-background.js"></script>
+    <script type="module" data-demo-script="true" src="../index.js"></script>
+
+    <script type="module">
+      import {registerComponent} from '../index.js';
+      registerComponent('custom-background');
+    </script>
 
     <!-- If additional elements are needed for the demo, add them here. -->
-    <script src="https://unpkg.com/@alaskaairux/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
-    <script src="https://unpkg.com/@alaskaairux/auro-table@latest/dist/polyfills.js"></script>
-    <script src="https://unpkg.com/@alaskaairux/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
-    <script src="https://unpkg.com/@alaskaairux/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/dist/auro-header__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/dist/auro-hyperlink__bundled.js" type="module"></script>
   </body>
 </html>