IS-10950 reading listing template from env-var, previever script impr.

.npmrc

@@ -1,2 +1 @@
 engine-strict=true
-legacy-peer-deps=true

.nvmrc

@@ -1 +1 @@
-22.19.0
+22.22.0

README.md

@@ -1,12 +1,13 @@
 # Curity UI Kit
 
+[![production](https://img.shields.io/badge/quality-production-green)](https://curity.io/resources/code-examples/status/) [![source](https://img.shields.io/badge/availability-source-blue)](https://curity.io/resources/code-examples/status/)
+
 **Customize the look and feel of your applications**
 
-<img
-   src="src/common/assets/images/ui-kit-start.jpg"
-   alt="Curity UI Kit"
-   width="800"
-/>
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="src/common/assets/images/ui-kit-start-dark.svg">
+  <img alt="Curity UI Kit" src="src/common/assets/images/ui-kit-start.svg" width="800">
+</picture>
 
 
 This monorepo contains:
@@ -65,7 +66,6 @@ Then you can access the projects at:
 
 - Curity Identity Server Templates: [http://localhost:3000](http://localhost:3000)
 - Self Service Portal: [http://localhost:5173/previewer](http://localhost:5173/previewer)
-- Curity CSS Docs: [http://localhost:4321/](http://localhost:4321/)
 
 To start projects individually, run:
 

index.html

@@ -60,24 +60,15 @@
         padding-inline: 0.5rem;
         justify-content: space-between;
 
-        a {
+        > div:first-child {
           text-decoration: none;
           color: white;
           display: inline-flex;
           align-items: center;
           gap: 0.5rem;
-
-          svg {
-            width: 18px;
-            height: 18px;
-          }
-
-          &:hover {
-            text-decoration: underline;
-          }
         }
 
-        div:first-child a {
+        > div:first-child {
           color: var(--color-yellow);
           display: inline-flex;
           gap: 1rem;
@@ -87,6 +78,24 @@
         > div:last-child {
           display: flex;
           gap: 1rem;
+          align-items: center;
+        }
+
+        a {
+          display: flex;
+          gap: 0.5rem;
+          align-items: center;
+          color: white;
+          text-decoration: none;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+
+        svg {
+          width: 18px;
+          height: 18px;
         }
 
         span {
@@ -400,13 +409,11 @@
     </div>
     <header>
       <div>
-        <a role="presentation" href="/">
-          <img
-            src=" src/identity-server/images/curity-logo-white.svg"
-            alt="Curity Logo"
-          />
-          <span>Curity UI Kit</span>
-        </a>
+        <img
+          src=" src/identity-server/images/curity-logo-white.svg"
+          alt="Curity Logo"
+        />
+        <span>Curity UI Kit</span>
       </div>
       <div>
         <a href="https://github.com/curityio/ui-kit" target="_blank">
@@ -590,7 +597,6 @@ <h4>Read more</h4>
       ];
 
       const toast = document.getElementById("toast");
-      let readyCount = 0;
 
       // Show toast on page load
       setTimeout(() => {
@@ -621,30 +627,26 @@ <h4>Read more</h4>
       }
 
       // Initialize service checks
-      services.forEach(async (service) => {
-        const cards = document.querySelectorAll(".card");
-        const card = cards[service.cardIndex];
-        const status = card.querySelector(".status");
-        const statusText = status.querySelector("span:last-child");
-
-        const isReady = await waitForService(service.url);
-
-        if (isReady) {
-          status.classList.add("running");
-          statusText.textContent = "Dev server running";
-          readyCount++;
-        } else {
-          // Timeout - mark as failed
-          statusText.textContent = "Dev server not responding";
-          readyCount++;
-        }
+      Promise.all(
+        services.map(async (service) => {
+          const cards = document.querySelectorAll(".card");
+          const card = cards[service.cardIndex];
+          const status = card.querySelector(".status");
+          const statusText = status.querySelector("span:last-child");
 
-        // Hide toast when all services have been checked
-        if (readyCount === services.length) {
-          setTimeout(() => {
-            toast.classList.remove("show");
-          }, 500);
-        }
+          const isReady = await waitForService(service.url);
+
+          if (isReady) {
+            status.classList.add("running");
+            statusText.textContent = "Dev server running";
+          } else {
+            statusText.textContent = "Dev server not responding";
+          }
+        }),
+      ).then(() => {
+        setTimeout(() => {
+          toast.classList.remove("show");
+        }, 500);
       });
     </script>
   </body>