Update docs pages

excid3 · excid3 · commit 760cd9455e23 · 2021-09-24T22:36:58.000-05:00
diff --git a/docs/alert.html b/docs/alert.html
@@ -5,11 +5,6 @@
     <title>Tailwind Stimulus Components</title>
     <link href="https://unpkg.com/tailwindcss@2.1.2/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://unpkg.com/@tailwindcss/forms@0.3.2/dist/forms.min.css" rel="stylesheet">
-    <script src="https://unpkg.com/stimulus/dist/stimulus.umd.js"></script>
-    <script src="https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.umd.js"></script>
-    <!-- To use a local copy for testing, uncomment this
-    <script src="../dist/tailwindcss-stimulus-components.umd.js"></script>
-    -->
   <body>
     <div class="container mx-auto p-8">
       <h1 class="text-3xl font-semibold mb-2">Tailwind Stimulus Components Alert Examples</h1>
@@ -61,12 +56,28 @@ <h1 class="text-3xl font-semibold mb-2">Tailwind Stimulus Components Alert Examp
       </div>
     </div>
 
-    <script>
+
+    <script type="importmap">
+      {
+        "imports": {
+          "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js",
+          "tailwindcss-stimulus-components": "https://unpkg.com/tailwindcss-stimulus-components/dist/tailwindcss-stimulus-components.modern.js"
+          // Uncomment to use local package with "npx serve"
+          //"tailwindcss-stimulus-components": "../dist/tailwindcss-stimulus-components.modern.js"
+        }
+      }
+    </script>
+
+    <script type="module">
+      import { Application } from "@hotwired/stimulus"
+      import TailwindcssStimulusComponents from "tailwindcss-stimulus-components"
+
       (() => {
-        const application = Stimulus.Application.start();
+        const application = Application.start();
         application.register('alert', TailwindcssStimulusComponents.Alert);
       })()
     </script>
+
   </body>
 </html>
 
diff --git a/docs/index.html b/docs/index.html
@@ -5,6 +5,7 @@
     <title>Tailwind Stimulus Components</title>
     <link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
     <link href="https://unpkg.com/@tailwindcss/forms/dist/forms.min.css" rel="stylesheet">
+  </head>
   <body>
     <div class="container mx-auto p-8"
          data-controller="slideover"
@@ -301,14 +302,14 @@ <h2 class="text-2xl text-gray-800 font-semibold mb-4">Color Picker and Preview</
 
       (() => {
         const application = Application.start();
+        application.register('alert', TailwindcssStimulusComponents.Alert);
+        application.register('color-preview', TailwindcssStimulusComponents.ColorPreview);
         application.register('dropdown', TailwindcssStimulusComponents.Dropdown);
         application.register('modal', TailwindcssStimulusComponents.Modal);
-        application.register('tabs', TailwindcssStimulusComponents.Tabs);
         application.register('popover', TailwindcssStimulusComponents.Popover);
-        application.register('alert', TailwindcssStimulusComponents.Alert);
         application.register('slideover', TailwindcssStimulusComponents.Slideover);
+        application.register('tabs', TailwindcssStimulusComponents.Tabs);
         application.register('toggle', TailwindcssStimulusComponents.Toggle);
-        application.register('color-preview', TailwindcssStimulusComponents.ColorPreview);
       })()
     </script>
   </body>
