format with prettier-plugin-astro

src/html/components/_head.astro

@@ -1,28 +1,47 @@
 ---
 const { title, path, isRtl } = Astro.props;
-const cssPath = isRtl ? '.rtl' : '';
+const cssPath = isRtl ? ".rtl" : "";
 ---
 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>{title}</title>
 <!--begin::Primary Meta Tags-->
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-<meta name="title" content={title}>
+<meta name="title" content={title} />
-<meta name="author" content="ColorlibHQ">
+<meta name="author" content="ColorlibHQ" />
-<meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS.">
+<meta
-<meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard" />
+  name="description"
+  content="AdminLTE is a Free Bootstrap 5 Admin Dashboard, 30 example pages using Vanilla JS."
+/>
+<meta
+  name="keywords"
+  content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard"
+/>
 <!--end::Primary Meta Tags-->
 <!--begin::Fonts-->
-<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap" rel="stylesheet">
+<link
+  href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,300;0,400;0,700;1,400&display=swap"
+  rel="stylesheet"
+/>
 <!--end::Fonts-->
 <!--begin::Third Party Plugin(OverlayScrollbars)-->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css" integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY=" crossorigin="anonymous">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/styles/overlayscrollbars.min.css"
+  integrity="sha256-LWLZPJ7X1jJLI5OG5695qDemW1qQ7lNdbTfQ64ylbUY="
+  crossorigin="anonymous"
+/>
 <!--end::Third Party Plugin(OverlayScrollbars)-->
 <!--begin::Third Party Plugin(Font Awesome)-->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css" integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc=" crossorigin="anonymous">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.3.0/css/all.min.css"
+  integrity="sha256-/4UQcSmErDzPCMAiuOiWPVVsNN2s3ZY/NsmXNcj0IFc="
+  crossorigin="anonymous"
+/>
 <!--end::Third Party Plugin(Font Awesome)-->
 <!--begin::Required Plugin(AdminLTE)-->
-<link rel="stylesheet" href={path + '/css/adminlte' + cssPath + '.css'} >
+<link rel="stylesheet" href={path + "/css/adminlte" + cssPath + ".css"} />
 <!--end::Required Plugin(AdminLTE)-->

src/html/components/_scripts.astro

@@ -1,41 +1,51 @@
 ---
 const { path } = Astro.props;
-const adminlteJsUrl = path + '/js/adminlte.js';
+const adminlteJsUrl = path + "/js/adminlte.js";
 ---
 
 <!--begin::Third Party Plugin(OverlayScrollbars)-->
-<script src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js" integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU=" crossorigin="anonymous"></script>
+<script
-<!--end::Third Party Plugin(OverlayScrollbars)-->
+  src="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.1.0/browser/overlayscrollbars.browser.es6.min.js"
-<!--begin::Required Plugin(popperjs for Bootstrap 5)-->
+  integrity="sha256-NRZchBuHZWSXldqrtAOeCZpucH/1n1ToJ3C8mSK95NU="
-<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js" integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE" crossorigin="anonymous"></script>
+  crossorigin="anonymous"
-<!--end::Required Plugin(popperjs for Bootstrap 5)-->
+></script>
-<!--begin::Required Plugin(Bootstrap 5)-->
+<!--end::Third Party Plugin(OverlayScrollbars)--><!--begin::Required Plugin(popperjs for Bootstrap 5)-->
-<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js" integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ" crossorigin="anonymous"></script>
+<script
-<!--end::Required Plugin(Bootstrap 5)-->
+  src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"
-<!--begin::Required Plugin(AdminLTE)-->
+  integrity="sha384-zYPOMqeu1DAVkHiLqWBUTcbYfZ8osu1Nd6Z89ify25QV9guujx43ITvfi12/QExE"
+  crossorigin="anonymous"
+></script>
+<!--end::Required Plugin(popperjs for Bootstrap 5)--><!--begin::Required Plugin(Bootstrap 5)-->
+<script
+  src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.min.js"
+  integrity="sha384-Y4oOpwW3duJdCWv5ly8SCFYWqFDsfob/3GkgExXKV4idmbt98QcxXYs9UoXAB7BZ"
+  crossorigin="anonymous"
+></script>
+<!--end::Required Plugin(Bootstrap 5)--><!--begin::Required Plugin(AdminLTE)-->
 <script src={adminlteJsUrl} is:inline></script>
-<!--end::Required Plugin(AdminLTE)-->
+<!--end::Required Plugin(AdminLTE)--><!--begin::OverlayScrollbars Configure-->
-
-<!--begin::OverlayScrollbars Configure-->
 <script is:inline>
-  const SELECTOR_SIDEBAR_WRAPPER = '.sidebar-wrapper'
+  const SELECTOR_SIDEBAR_WRAPPER = ".sidebar-wrapper";
   const Default = {
-    scrollbarTheme: 'os-theme-light',
+    scrollbarTheme: "os-theme-light",
-    scrollbarAutoHide: 'leave',
+    scrollbarAutoHide: "leave",
-    scrollbarClickScroll: true
+    scrollbarClickScroll: true,
-  }
+  };
 
-  document.addEventListener("DOMContentLoaded", function() {
+  document.addEventListener("DOMContentLoaded", function () {
-    const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER)
+    const sidebarWrapper = document.querySelector(SELECTOR_SIDEBAR_WRAPPER);
-    if (sidebarWrapper && typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== 'undefined') {
+    if (
+      sidebarWrapper &&
+      typeof OverlayScrollbarsGlobal?.OverlayScrollbars !== "undefined"
+    ) {
       OverlayScrollbarsGlobal.OverlayScrollbars(sidebarWrapper, {
         scrollbars: {
           theme: Default.scrollbarTheme,
           autoHide: Default.scrollbarAutoHide,
-          clickScroll: Default.scrollbarClickScroll
+          clickScroll: Default.scrollbarClickScroll,
+        },
+      });
     }
-      })
+  });
-    }
-  })
 </script>
 <!--end::OverlayScrollbars Configure-->

src/html/components/dashboard/_footer.astro

@@ -5,12 +5,14 @@ const year = new Date().getFullYear();
 <!--begin::Footer-->
 <footer class="app-footer">
   <!--begin::To the end-->
-  <div class="float-end d-none d-sm-inline">
+  <div class="float-end d-none d-sm-inline">Anything you want</div>
-    Anything you want
-  </div>
   <!--end::To the end-->
   <!--begin::Copyright-->
-  <strong>Copyright &copy; 2014-{year} <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
+  <strong>
+    Copyright &copy; 2014-{year}
+    <a href="https://adminlte.io">AdminLTE.io</a>.
+  </strong>
+  All rights reserved.
   <!--end::Copyright-->
 </footer>
 <!--end::Footer-->

src/html/components/dashboard/_sidenav.astro

@@ -1,5 +1,5 @@
 ---
-import { convertPathToHtml } from '../../../utils/index.js';
+import { convertPathToHtml } from "../../../utils/index.js";
 const { path, mainPage, page } = Astro.props;
 const htmlPath = convertPathToHtml(path);
 ---
@@ -9,9 +9,13 @@ const htmlPath = convertPathToHtml(path);
   <!--begin::Sidebar Brand-->
   <div class="sidebar-brand">
     <!--begin::Brand Link-->
-    <a href={htmlPath + '/index.html'} class="brand-link">
+    <a href={htmlPath + "/index.html"} class="brand-link">
       <!--begin::Brand Image-->
-      <img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
+      <img
+        src={path + "/assets/img/AdminLTELogo.png"}
+        alt="AdminLTE Logo"
+        class="brand-image opacity-75 shadow"
+      />
       <!--end::Brand Image-->
       <!--begin::Brand Text-->
       <span class="brand-text fw-light">AdminLTE 4</span>
@@ -24,9 +28,17 @@ const htmlPath = convertPathToHtml(path);
   <div class="sidebar-wrapper">
     <nav class="mt-2">
       <!--begin::Sidebar Menu-->
-      <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
+      <ul
-        <li class:list={['nav-item', mainPage === 'dashboard' && 'menu-open']}>
+        class="nav sidebar-menu flex-column"
-          <a href="javascript:;" class:list={['nav-link', mainPage === 'dashboard' && 'active']}>
+        data-lte-toggle="treeview"
+        role="menu"
+        data-accordion="false"
+      >
+        <li class:list={["nav-item", mainPage === "dashboard" && "menu-open"]}>
+          <a
+            href="javascript:;"
+            class:list={["nav-link", mainPage === "dashboard" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-gauge-high"></i>
             <p>
               Dashboard
@@ -35,27 +47,39 @@ const htmlPath = convertPathToHtml(path);
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + '/index.html'} class:list={['nav-link', page === 'index' && 'active']}>
+              <a
+                href={htmlPath + "/index.html"}
+                class:list={["nav-link", page === "index" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Dashboard v1</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/index2.html'} class:list={['nav-link', page === 'index2' && 'active']}>
+              <a
+                href={htmlPath + "/index2.html"}
+                class:list={["nav-link", page === "index2" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Dashboard v2</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/index3.html'} class:list={['nav-link', page === 'index3' && 'active']}>
+              <a
+                href={htmlPath + "/index3.html"}
+                class:list={["nav-link", page === "index3" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Dashboard v3</p>
               </a>
             </li>
           </ul>
         </li>
-        <li class:list={['nav-item', mainPage === 'widgets' && 'menu-open']}>
+        <li class:list={["nav-item", mainPage === "widgets" && "menu-open"]}>
-          <a href="javascript:;" class:list={['nav-link', mainPage === 'widgets' && 'active']}>
+          <a
+            href="javascript:;"
+            class:list={["nav-link", mainPage === "widgets" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-box-open"></i>
             <p>
               Widgets
@@ -64,75 +88,118 @@ const htmlPath = convertPathToHtml(path);
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + '/widgets/small-box.html'} class:list={['nav-link', page === 'small-box' && 'active']}>
+              <a
+                href={htmlPath + "/widgets/small-box.html"}
+                class:list={["nav-link", page === "small-box" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Small Box</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/widgets/info-box.html'} class:list={['nav-link', page === 'info-box' && 'active']}>
+              <a
+                href={htmlPath + "/widgets/info-box.html"}
+                class:list={["nav-link", page === "info-box" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>info Box</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/widgets/cards.html'} class:list={['nav-link', page === 'cards' && 'active']}>
+              <a
+                href={htmlPath + "/widgets/cards.html"}
+                class:list={["nav-link", page === "cards" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Cards</p>
               </a>
             </li>
           </ul>
         </li>
-        <li class:list={['nav-item', mainPage === 'layout' && 'menu-open']}>
+        <li class:list={["nav-item", mainPage === "layout" && "menu-open"]}>
-          <a href="javascript:;" class:list={['nav-link', mainPage === 'layout' && 'active']}>
+          <a
+            href="javascript:;"
+            class:list={["nav-link", mainPage === "layout" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-copy"></i>
             <p>
               Layout Options
-              <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span>
+              <span class="nav-badge badge text-bg-secondary opacity-75 me-3"
+                >6</span
+              >
               <i class="nav-arrow fa-solid fa-angle-right"></i>
             </p>
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + '/layout/unfixed-sidebar.html'} class:list={['nav-link', page === 'unfixed-sidebar' && 'active']}>
+              <a
+                href={htmlPath + "/layout/unfixed-sidebar.html"}
+                class:list={[
+                  "nav-link",
+                  page === "unfixed-sidebar" && "active",
+                ]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Unfixed Sidebar</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/layout/fixed-sidebar.html'} class:list={['nav-link', page === 'fixed-sidebar' && 'active']}>
+              <a
+                href={htmlPath + "/layout/fixed-sidebar.html"}
+                class:list={["nav-link", page === "fixed-sidebar" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Fixed Sidebar</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/layout/sidebar-mini.html'} class:list={['nav-link', page === 'sidebar-mini' && 'active']}>
+              <a
+                href={htmlPath + "/layout/sidebar-mini.html"}
+                class:list={["nav-link", page === "sidebar-mini" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Sidebar Mini</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/layout/collapsed-sidebar.html'} class:list={['nav-link', page === 'collapsed-sidebar' && 'active']}>
+              <a
+                href={htmlPath + "/layout/collapsed-sidebar.html"}
+                class:list={[
+                  "nav-link",
+                  page === "collapsed-sidebar" && "active",
+                ]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Sidebar Mini <small>+ Collapsed</small></p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/layout/logo-switch.html'} class:list={['nav-link', page === 'logo-switch' && 'active']}>
+              <a
+                href={htmlPath + "/layout/logo-switch.html"}
+                class:list={["nav-link", page === "logo-switch" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Sidebar Mini <small>+ Logo Switch</small></p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/layout/layout-rtl.html'} class:list={['nav-link', page === 'layout-rtl' && 'active']}>
+              <a
+                href={htmlPath + "/layout/layout-rtl.html"}
+                class:list={["nav-link", page === "layout-rtl" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Layout RTL</p>
               </a>
             </li>
           </ul>
         </li>
-        <li class:list={['nav-item', mainPage === 'ui-elements' && 'menu-open']}>
+        <li
-          <a href="javascript:;" class:list={['nav-link', mainPage === 'ui-elements' && 'active']}>
+          class:list={["nav-item", mainPage === "ui-elements" && "menu-open"]}
+        >
+          <a
+            href="javascript:;"
+            class:list={["nav-link", mainPage === "ui-elements" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-tree"></i>
             <p>
               UI Elements
@@ -141,15 +208,21 @@ const htmlPath = convertPathToHtml(path);
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + '/UI/timeline.html'} class:list={['nav-link', page === 'timeline' && 'active']}>
+              <a
+                href={htmlPath + "/UI/timeline.html"}
+                class:list={["nav-link", page === "timeline" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Timeline</p>
               </a>
             </li>
           </ul>
         </li>
-        <li class:list={['nav-item', mainPage === 'forms' && 'menu-open']}>
+        <li class:list={["nav-item", mainPage === "forms" && "menu-open"]}>
-          <a href="javascript:;" class:list={['nav-link', mainPage === 'forms' && 'active']}>
+          <a
+            href="javascript:;"
+            class:list={["nav-link", mainPage === "forms" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-pen-to-square"></i>
             <p>
               Forms
@@ -158,15 +231,21 @@ const htmlPath = convertPathToHtml(path);
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + '/forms/general.html'} class:list={['nav-link', page === 'general' && 'active']}>
+              <a
+                href={htmlPath + "/forms/general.html"}
+                class:list={["nav-link", page === "general" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>General Elements</p>
               </a>
             </li>
           </ul>
         </li>
-        <li class:list={['nav-item', mainPage === 'tables' && 'menu-open']}>
+        <li class:list={["nav-item", mainPage === "tables" && "menu-open"]}>
-          <a href="javascript:;" class:list={['nav-link', mainPage === 'tables' && 'active']}>
+          <a
+            href="javascript:;"
+            class:list={["nav-link", mainPage === "tables" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-table"></i>
             <p>
               Tables
@@ -175,7 +254,10 @@ const htmlPath = convertPathToHtml(path);
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + '/tables/simple.html'} class:list={['nav-link', page === 'simple' && 'active']}>
+              <a
+                href={htmlPath + "/tables/simple.html"}
+                class:list={["nav-link", page === "simple" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Simple Tables</p>
               </a>
@@ -194,13 +276,13 @@ const htmlPath = convertPathToHtml(path);
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + '/examples/login.html'} class="nav-link ">
+              <a href={htmlPath + "/examples/login.html"} class="nav-link">
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Login v1</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/examples/register.html'} class="nav-link ">
+              <a href={htmlPath + "/examples/register.html"} class="nav-link">
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Register v1</p>
               </a>
@@ -210,25 +292,37 @@ const htmlPath = convertPathToHtml(path);
 
         <li class="nav-header">DOCUMENTATIONS</li>
         <li class="nav-item">
-          <a href={htmlPath + '/docs/introduction.html'} class:list={['nav-link', page === 'introduction' && 'active']}>
+          <a
+            href={htmlPath + "/docs/introduction.html"}
+            class:list={["nav-link", page === "introduction" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-download"></i>
             <p>Installation</p>
           </a>
         </li>
         <li class="nav-item">
-          <a href={htmlPath + '/docs/layout.html'} class:list={['nav-link', page === 'layout' && 'active']}>
+          <a
+            href={htmlPath + "/docs/layout.html"}
+            class:list={["nav-link", page === "layout" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-grip"></i>
             <p>Layout</p>
           </a>
         </li>
         <li class="nav-item">
-          <a href={htmlPath + '/docs/color-mode.html'} class:list={['nav-link', page === 'color-mode' && 'active']}>
+          <a
+            href={htmlPath + "/docs/color-mode.html"}
+            class:list={["nav-link", page === "color-mode" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-star-half-stroke"></i>
             <p>Color Mode</p>
           </a>
         </li>
-        <li class:list={['nav-item', mainPage === 'components' && 'menu-open']}>
+        <li class:list={["nav-item", mainPage === "components" && "menu-open"]}>
-          <a href="javascript:;" class:list={['nav-link', mainPage === 'components' && 'active']}>
+          <a
+            href="javascript:;"
+            class:list={["nav-link", mainPage === "components" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-swatchbook"></i>
             <p>
               Components
@@ -237,13 +331,19 @@ const htmlPath = convertPathToHtml(path);
           </a>
           <ul class="nav nav-treeview">
             <li class="nav-item">
-              <a href={htmlPath + '/docs/components/main-header.html'} class:list={['nav-link', page === 'main-header' && 'active']}>
+              <a
+                href={htmlPath + "/docs/components/main-header.html"}
+                class:list={["nav-link", page === "main-header" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Main Header</p>
               </a>
             </li>
             <li class="nav-item">
-              <a href={htmlPath + '/docs/components/main-sidebar.html'} class:list={['nav-link', page === 'main-sidebar' && 'active']}>
+              <a
+                href={htmlPath + "/docs/components/main-sidebar.html"}
+                class:list={["nav-link", page === "main-sidebar" && "active"]}
+              >
                 <i class="nav-icon fa-regular fa-circle"></i>
                 <p>Main Sidebar</p>
               </a>
@@ -251,7 +351,10 @@ const htmlPath = convertPathToHtml(path);
           </ul>
         </li>
         <li class="nav-item">
-          <a href={htmlPath + '/docs/browser-support.html'} class:list={['nav-link', page === 'browser-support' && 'active']}>
+          <a
+            href={htmlPath + "/docs/browser-support.html"}
+            class:list={["nav-link", page === "browser-support" && "active"]}
+          >
             <i class="nav-icon fa-solid fa-edge"></i>
             <p>Browser Support</p>
           </a>

src/html/components/dashboard/_topbar.astro

@@ -2,6 +2,7 @@
 const { path } = Astro.props;
 const distPath = path;
 ---
+
 <!--begin::Header-->
 <nav class="app-header navbar navbar-expand bg-body">
   <!--begin::Container-->
@@ -9,7 +10,9 @@ const distPath = path;
     <!--begin::Start Navbar Links-->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
+          <i class="fa-solid fa-bars"></i>
+        </a>
       </li>
       <li class="nav-item d-none d-md-block">
         <a href="#" class="nav-link">Home</a>
@@ -41,15 +44,23 @@ const distPath = path;
             <!--begin::Message-->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src={distPath + '/assets/img/user1-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                <img
+                  src={distPath + "/assets/img/user1-128x128.jpg"}
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Brad Diesel
-                  <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-danger"
+                    ><i class="fa-solid fa-star"></i></span
+                  >
                 </h3>
                 <p class="fs-7">Call me whenever you can...</p>
-                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!--end::Message-->
@@ -59,15 +70,23 @@ const distPath = path;
             <!--begin::Message-->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src={distPath + '/assets/img/user8-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                <img
+                  src={distPath + "/assets/img/user8-128x128.jpg"}
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   John Pierce
-                  <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-secondary">
+                    <i class="fa-solid fa-star"></i>
+                  </span>
                 </h3>
                 <p class="fs-7">I got your message bro</p>
-                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!--end::Message-->
@@ -77,15 +96,23 @@ const distPath = path;
             <!--begin::Message-->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src={distPath + '/assets/img/user3-128x128.jpg'}alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                <img
+                  src={distPath + "/assets/img/user3-128x128.jpg"}
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Nora Silvester
-                  <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-warning">
+                    <i class="fa-solid fa-star"></i>
+                  </span>
                 </h3>
                 <p class="fs-7">The subject goes here</p>
-                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!--end::Message-->
@@ -120,7 +147,9 @@ const distPath = path;
             <span class="float-end text-secondary fs-7">2 days</span>
           </a>
           <div class="dropdown-divider"></div>
-          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+          <a href="#" class="dropdown-item dropdown-footer">
+            See All Notifications
+          </a>
         </div>
       </li>
       <!--end::Notifications Dropdown Menu-->
@@ -128,13 +157,21 @@ const distPath = path;
       <!--begin::User Menu Dropdown-->
       <li class="nav-item dropdown user-menu">
         <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
-          <img src={distPath + '/assets/img/user2-160x160.jpg'} class="user-image rounded-circle shadow" alt="User Image">
+          <img
+            src={distPath + "/assets/img/user2-160x160.jpg"}
+            class="user-image rounded-circle shadow"
+            alt="User Image"
+          />
           <span class="d-none d-md-inline">Alexander Pierce</span>
         </a>
         <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <!--begin::User Image-->
           <li class="user-header text-bg-primary">
-            <img src={distPath + '/assets/img/user2-160x160.jpg'} class="rounded-circle shadow" alt="User Image">
+            <img
+              src={distPath + "/assets/img/user2-160x160.jpg"}
+              class="rounded-circle shadow"
+              alt="User Image"
+            />
 
             <p>
               Alexander Pierce - Web Developer

src/html/components/docs/browser-support.mdx

@@ -1,7 +1,8 @@
 AdminLTE comes with the same browser support as Bootstrap 5.
 
 > ##### Excerpt from Bootstrap's official Documentation!
-> Bootstrap supports the __latest, stable releases__ of all major browsers and platforms.
+>
+> Bootstrap supports the **latest, stable releases** of all major browsers and platforms.
 >
 > For more details [look here](https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers).
 

src/html/components/docs/color-mode.mdx

@@ -6,12 +6,9 @@
     <!-- Start navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a
+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
-          class="nav-link"
+          <i class="fa-solid fa-bars"></i>
-          data-lte-toggle="sidebar"
+        </a>
-          href="#"
-          role="button"><i class="fa-solid fa-bars"></i></a
-        >
       </li>
       <li class="nav-item d-none d-md-block">
         <a href="#" class="nav-link">Home</a>
@@ -67,8 +64,7 @@
               class="dropdown-item d-flex align-items-center"
               data-bs-theme-value="auto"
             >
-              <i class="fa-solid fa-circle-half-stroke me-2"
+              <i class="fa-solid fa-circle-half-stroke me-2"></i>
-              ></i>
               Auto
               <i class="fa-solid fa-check ms-auto d-none"></i>
             </button>
@@ -84,48 +80,56 @@
 ```js
 // Color Mode Toggler
 (() => {
-  'use strict'
+  "use strict";
-  const storedTheme = localStorage.getItem('theme')
+  const storedTheme = localStorage.getItem("theme");
   const getPreferredTheme = () => {
     if (storedTheme) {
-      return storedTheme
+      return storedTheme;
-    }
-    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
     }
+    return window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  };
   const setTheme = function (theme) {
-    if (theme === 'auto' && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+    if (
-      document.documentElement.setAttribute('data-bs-theme', 'dark')
+      theme === "auto" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+    ) {
+      document.documentElement.setAttribute("data-bs-theme", "dark");
     } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      document.documentElement.setAttribute("data-bs-theme", theme);
     }
+  };
+  setTheme(getPreferredTheme());
+  const showActiveTheme = (theme) => {
+    const activeThemeIcon = document.querySelector(".theme-icon-active i");
+    const btnToActive = document.querySelector(
+      '[data-bs-theme-value="' + theme + '"]'
+    );
+    const svgOfActiveBtn = btnToActive.querySelector("i").getAttribute("class");
+    document.querySelectorAll("[data-bs-theme-value]").forEach((element) => {
+      element.classList.remove("active");
+    });
+    btnToActive.classList.add("active");
+    activeThemeIcon.setAttribute("class", svgOfActiveBtn);
+  };
+  window
+    .matchMedia("(prefers-color-scheme: dark)")
+    .addEventListener("change", () => {
+      if (storedTheme !== "light" || storedTheme !== "dark") {
+        setTheme(getPreferredTheme());
       }
-  setTheme(getPreferredTheme())
+    });
-  const showActiveTheme = theme => {
+  window.addEventListener("DOMContentLoaded", () => {
-    const activeThemeIcon = document.querySelector('.theme-icon-active i')
+    showActiveTheme(getPreferredTheme());
-    const btnToActive = document.querySelector('[data-bs-theme-value="' + theme + '"]')
+    document.querySelectorAll("[data-bs-theme-value]").forEach((toggle) => {
-    const svgOfActiveBtn = btnToActive.querySelector('i').getAttribute('class')
+      toggle.addEventListener("click", () => {
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        const theme = toggle.getAttribute("data-bs-theme-value");
-      element.classList.remove('active')
+        localStorage.setItem("theme", theme);
-    })
+        setTheme(theme);
-    btnToActive.classList.add('active')
+        showActiveTheme(theme);
-    activeThemeIcon.setAttribute('class', svgOfActiveBtn)
+      });
-  }
+    });
-  window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
+  });
-    if (storedTheme !== 'light' || storedTheme !== 'dark') {
+})();
-      setTheme(getPreferredTheme())
-    }
-  })
-  window.addEventListener('DOMContentLoaded', () => {
-    showActiveTheme(getPreferredTheme())
-    document.querySelectorAll('[data-bs-theme-value]')
-      .forEach(toggle => {
-        toggle.addEventListener('click', () => {
-          const theme = toggle.getAttribute('data-bs-theme-value')
-          localStorage.setItem('theme', theme)
-          setTheme(theme)
-          showActiveTheme(theme)
-        })
-      })
-  })
-})()
 ```

src/html/components/docs/components/main-header.mdx

@@ -6,7 +6,9 @@
     <!-- Start navbar links -->
     <ul class="navbar-nav">
       <li class="nav-item">
-        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
+        <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button">
+          <i class="fa-solid fa-bars"></i>
+        </a>
       </li>
       <li class="nav-item d-none d-md-block">
         <a href="#" class="nav-link">Home</a>
@@ -36,15 +38,23 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="../../../dist/assets/img/user1-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                <img
+                  src="../../../dist/assets/img/user1-128x128.jpg"
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Brad Diesel
-                  <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-danger">
+                    <i class="fa-solid fa-star"></i>
+                  </span>
                 </h3>
                 <p class="fs-7">Call me whenever you can...</p>
-                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!-- Message End -->
@@ -54,15 +64,23 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="../../../dist/assets/img/user8-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                <img
+                  src="../../../dist/assets/img/user8-128x128.jpg"
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   John Pierce
-                  <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-secondary">
+                    <i class="fa-solid fa-star"></i>
+                  </span>
                 </h3>
                 <p class="fs-7">I got your message bro</p>
-                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!-- Message End -->
@@ -72,15 +90,23 @@
             <!-- Message Start -->
             <div class="d-flex">
               <div class="flex-shrink-0">
-                <img src="../../../dist/assets/img/user3-128x128.jpg" alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                <img
+                  src="../../../dist/assets/img/user3-128x128.jpg"
+                  alt="User Avatar"
+                  class="img-size-50 rounded-circle me-3"
+                />
               </div>
               <div class="flex-grow-1">
                 <h3 class="dropdown-item-title">
                   Nora Silvester
-                  <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
+                  <span class="float-end fs-7 text-warning">
+                    <i class="fa-solid fa-star"></i>
+                  </span>
                 </h3>
                 <p class="fs-7">The subject goes here</p>
-                <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                <p class="fs-7 text-secondary">
+                  <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                </p>
               </div>
             </div>
             <!-- Message End -->
@@ -113,18 +139,28 @@
             <span class="float-end text-secondary fs-7">2 days</span>
           </a>
           <div class="dropdown-divider"></div>
-          <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+          <a href="#" class="dropdown-item dropdown-footer">
+            See All Notifications
+          </a>
         </div>
       </li>
       <li class="nav-item dropdown user-menu">
         <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
-          <img src="../../../dist/assets/img/user2-160x160.jpg" class="user-image rounded-circle shadow" alt="User Image">
+          <img
+            src="../../../dist/assets/img/user2-160x160.jpg"
+            class="user-image rounded-circle shadow"
+            alt="User Image"
+          />
           <span class="d-none d-md-inline">Alexander Pierce</span>
         </a>
         <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
           <!-- User image -->
           <li class="user-header text-bg-primary">
-            <img src="../../../dist/assets/img/user2-160x160.jpg" class="rounded-circle shadow" alt="User Image">
+            <img
+              src="../../../dist/assets/img/user2-160x160.jpg"
+              class="rounded-circle shadow"
+              alt="User Image"
+            />
 
             <p>
               Alexander Pierce - Web Developer

src/html/components/docs/components/main-sidebar.mdx

@@ -8,7 +8,11 @@ The sidebar used in this page to the left provides an example of what your sideb
     <!--begin::Brand Link-->
     <a href="./index.html" class="brand-link">
       <!--begin::Brand Image-->
-      <img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-75 shadow">
+      <img
+        src="./assets/img/AdminLTELogo.png"
+        alt="AdminLTE Logo"
+        class="brand-image opacity-75 shadow"
+      />
       <!--end::Brand Image-->
       <!--begin::Brand Text-->
       <span class="brand-text fw-light">AdminLTE 4</span>
@@ -21,7 +25,12 @@ The sidebar used in this page to the left provides an example of what your sideb
   <div class="sidebar-wrapper">
     <nav class="mt-2">
       <!--begin::Sidebar Menu-->
-      <ul class="nav sidebar-menu flex-column" data-lte-toggle="treeview" role="menu" data-accordion="false">
+      <ul
+        class="nav sidebar-menu flex-column"
+        data-lte-toggle="treeview"
+        role="menu"
+        data-accordion="false"
+      >
         <li class="nav-header">Nav Header</li>
         <li class="nav-item">
           <a href="./index.html" class="nav-link">
@@ -41,7 +50,14 @@ The sidebar used in this page to the left provides an example of what your sideb
             <li class="nav-item">
               <a href="./index.html" class="nav-link">
                 <i class="nav-icon fa-regular fa-circle"></i>
-                <p>Level 2 (Badge) <span class="nav-badge badge text-bg-secondary opacity-75 me-3">6</span></p>
+                <p>
+                  Level 2 (Badge)
+                  <span
+                    class="nav-badge badge text-bg-secondary opacity-75 me-3"
+                  >
+                    6
+                  </span>
+                </p>
               </a>
             </li>
             <li class="nav-item">
@@ -98,8 +114,16 @@ You can use two logo images instead of logo with text, you only need to change t
 ```html
 <div class="sidebar-brand">
   <a href="./index.html" class="brand-link logo-switch">
-    <img src="./assets/img/AdminLTELogo.png" alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
+    <img
-    <img src="./assets/img/AdminLTEFullLogo.png" alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
+      src="./assets/img/AdminLTELogo.png"
+      alt="AdminLTE Logo Small"
+      class="brand-image-xl logo-xs opacity-75 shadow"
+    />
+    <img
+      src="./assets/img/AdminLTEFullLogo.png"
+      alt="AdminLTE Logo Large"
+      class="brand-image-xs logo-xl opacity-75"
+    />
   </a>
 </div>
 ```

src/html/components/docs/introduction.mdx

@@ -1,35 +1,60 @@
 ## Quick start
+
 There are multiple ways to install AdminLTE.
 
 ### Download & Changelog:
+
 Always Recommended to download from GitHub latest release [AdminLTE 4](https://github.com/ColorlibHQ/AdminLTE/releases/latest) for bug free and latest features.\
 Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.\
 Legacy Releases are [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v3.2.0) / [AdminLTE 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1).
 
 ## Stable release
+
 ### Grab from [jsdelivr](https://www.jsdelivr.com/package/npm/admin-lte) CDN:
+
 _**Important Note**: You needed to add separately cdn links for plugins in your project._
+
 ```html
-<script src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/js/adminlte.min.js" integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw=" crossorigin="anonymous"></script>
+<script
+  src="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/js/adminlte.min.js"
+  integrity="sha256-5SPy1/00NR75iVOk7p0Ci0nwAAM8Ab7j31wyie+DKYw="
+  crossorigin="anonymous"
+></script>
 ```
+
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/css/adminlte.min.css" integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg=" crossorigin="anonymous">
+<link
+  rel="stylesheet"
+  href="https://cdn.jsdelivr.net/npm/admin-lte@4.0.0-alpha2/dist/css/adminlte.min.css"
+  integrity="sha256-c66Dhf3TzKZoXxk8aNaf2lu580xGnKke4mjUtbpMqYg="
+  crossorigin="anonymous"
+/>
 ```
+
 ### Using The Command Line:
+
 _**Important Note**: To install it via npm/Yarn, you need at least Node.js 14 or higher._
+
 #### Via npm
+
 ```bash
 npm install admin-lte@4.0.0-alpha2 --save
 ```
+
 #### Via Yarn
+
 ```bash
 yarn add admin-lte@4.0.0-alpha2
 ```
+
 #### Via Composer
+
 ```bash
 composer require "almasaeed2010/adminlte=4.0.0-alpha2"
 ```
+
 #### Via Git
+
 ```bash
 git clone https://github.com/ColorlibHQ/AdminLTE.git
 ```

src/html/pages/UI/timeline.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Timeline Elements';
+const title = "AdminLTE 4 | Timeline Elements";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'ui-elements';
+const mainPage = "ui-elements";
-const page = 'timeline';
+const page = "timeline";
 ---
 
 <!DOCTYPE html>
@@ -38,7 +38,9 @@ const page = 'timeline';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Timeline</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Timeline
+                  </li>
                 </ol>
               </div>
             </div>
@@ -63,16 +65,24 @@ const page = 'timeline';
                   <!-- /.timeline-label -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-envelope text-bg-primary"></i>
+                    <i
+                      class="timeline-icon fa-solid fa-envelope text-bg-primary"
+                    >
+                    </i>
                     <div class="timeline-item">
-                      <span class="time"><i class="fa-solid fa-clock"></i> 12:05</span>
+                      <span class="time">
-                      <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
+                        <i class="fa-solid fa-clock"></i> 12:05
+                      </span>
+                      <h3 class="timeline-header">
+                        <a href="#">Support Team</a> sent you an email
+                      </h3>
 
                       <div class="timeline-body">
-                        Etsy doostang zoodles disqus groupon greplin oooj voxy zoodles,
+                        Etsy doostang zoodles disqus groupon greplin oooj voxy
-                        weebly ning heekya handango imeem plugg dopplr jibjab, movity
+                        zoodles, weebly ning heekya handango imeem plugg dopplr
-                        jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
+                        jibjab, movity jajah plickers sifteo edmodo ifttt
-                        quora plaxo ideeli hulu weebly balihoo...
+                        zimbra. Babblely odeo kaboodle quora plaxo ideeli hulu
+                        weebly balihoo...
                       </div>
                       <div class="timeline-footer">
                         <a class="btn btn-primary btn-sm">Read more</a>
@@ -83,23 +93,35 @@ const page = 'timeline';
                   <!-- END timeline item -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-user text-bg-success"></i>
+                    <i class="timeline-icon fa-solid fa-user text-bg-success">
+                    </i>
                     <div class="timeline-item">
-                      <span class="time"><i class="fa-solid fa-clock"></i> 5 mins ago</span>
+                      <span class="time">
-                      <h3 class="timeline-header no-border"><a href="#">Sarah Young</a> accepted your friend request</h3>
+                        <i class="fa-solid fa-clock"></i> 5 mins ago
+                      </span>
+                      <h3 class="timeline-header no-border">
+                        <a href="#">Sarah Young</a> accepted your friend request
+                      </h3>
                     </div>
                   </div>
                   <!-- END timeline item -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-comments text-bg-warning"></i>
+                    <i
+                      class="timeline-icon fa-solid fa-comments text-bg-warning"
+                    >
+                    </i>
                     <div class="timeline-item">
-                      <span class="time"><i class="fa-solid fa-clock"></i> 27 mins ago</span>
+                      <span class="time">
-                      <h3 class="timeline-header"><a href="#">Jay White</a> commented on your post</h3>
+                        <i class="fa-solid fa-clock"></i> 27 mins ago
+                      </span>
+                      <h3 class="timeline-header">
+                        <a href="#">Jay White</a> commented on your post
+                      </h3>
                       <div class="timeline-body">
-                        Take me to your leader!
+                        Take me to your leader! Switzerland is small and
-                        Switzerland is small and neutral!
+                        neutral! We are more like Germany, ambitious and
-                        We are more like Germany, ambitious and misunderstood!
+                        misunderstood!
                       </div>
                       <div class="timeline-footer">
                         <a class="btn btn-warning btn-sm">View comment</a>
@@ -114,15 +136,32 @@ const page = 'timeline';
                   <!-- /.timeline-label -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-camera text-bg-primary"></i>
+                    <i class="timeline-icon fa-solid fa-camera text-bg-primary">
+                    </i>
                     <div class="timeline-item">
-                      <span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span>
+                      <span class="time">
-                      <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
+                        <i class="fa-solid fa-clock"></i> 2 days ago
+                      </span>
+                      <h3 class="timeline-header">
+                        <a href="#">Mina Lee</a> uploaded new photos
+                      </h3>
                       <div class="timeline-body">
-                        <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
+                        <img
-                        <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
+                          src={path + "/assets/img/user1-128x128.jpg"}
-                        <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
+                          alt="..."
-                        <img src={path + '/assets/img/user1-128x128.jpg'} alt="...">
+                        />
+                        <img
+                          src={path + "/assets/img/user1-128x128.jpg"}
+                          alt="..."
+                        />
+                        <img
+                          src={path + "/assets/img/user1-128x128.jpg"}
+                          alt="..."
+                        />
+                        <img
+                          src={path + "/assets/img/user1-128x128.jpg"}
+                          alt="..."
+                        />
                       </div>
                     </div>
                   </div>
@@ -132,23 +171,34 @@ const page = 'timeline';
                     <i class="timeline-icon fa-solid fa-video text-bg-info"></i>
 
                     <div class="timeline-item">
-                      <span class="time"><i class="fa-solid fa-clock"></i> 5 days ago</span>
+                      <span class="time">
+                        <i class="fa-solid fa-clock"></i> 5 days ago
+                      </span>
 
-                      <h3 class="timeline-header"><a href="#">Mr. Doe</a> shared a video</h3>
+                      <h3 class="timeline-header">
+                        <a href="#">Mr. Doe</a> shared a video
+                      </h3>
 
                       <div class="timeline-body">
                         <div class="ratio ratio-16x9">
-                          <iframe src="https://www.youtube.com/embed/tMWkeBIohBs" allowfullscreen></iframe>
+                          <iframe
+                            src="https://www.youtube.com/embed/tMWkeBIohBs"
+                            allowfullscreen></iframe>
                         </div>
                       </div>
                       <div class="timeline-footer">
-                        <a href="#" class="btn btn-sm text-bg-warning">See comments</a>
+                        <a href="#" class="btn btn-sm text-bg-warning">
+                          See comments
+                        </a>
                       </div>
                     </div>
                   </div>
                   <!-- END timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-clock text-bg-secondary"></i>
+                    <i
+                      class="timeline-icon fa-solid fa-clock text-bg-secondary"
+                    >
+                    </i>
                   </div>
                 </div>
               </div>
@@ -167,6 +217,5 @@ const page = 'timeline';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/docs/browser-support.astro

@@ -7,7 +7,7 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
 import Scripts from "@components/_scripts.astro";
 
 const title = "Browser Support | AdminLTE 4";
-const path = '../../../dist';
+const path = "../../../dist";
 const mainPage = "docs";
 const page = "browser-support";
 ---
@@ -67,6 +67,5 @@ const page = "browser-support";
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/docs/color-mode.astro

@@ -7,7 +7,7 @@ import Scripts from "@components/_scripts.astro";
 import ColorMode from "@components/docs/color-mode.mdx";
 
 const title = "Color Mode | AdminLTE 4";
-const path = '../../../dist';
+const path = "../../../dist";
 const mainPage = "docs";
 const page = "color-mode";
 ---
@@ -142,7 +142,6 @@ const page = "color-mode";
               <!-- Start column -->
               <div class="col-12">
                 <ColorMode />
-
               </div>
             </div>
             <!--end::Row-->
@@ -234,6 +233,5 @@ const page = "color-mode";
       })();
     </script>
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/docs/components/main-header.astro

@@ -7,7 +7,7 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
 import Scripts from "@components/_scripts.astro";
 
 const title = "Main Header Component | AdminLTE 4";
-const path = '../../../../dist';
+const path = "../../../../dist";
 const mainPage = "components";
 const page = "main-header";
 const distPath = path;
@@ -58,14 +58,19 @@ const distPath = path;
             <div class="callout callout-warning mb-4">
               <h5 class="fw-bold">Reminder!</h5>
               <p>
-                AdminLTE uses all of Bootstrap 5 components. It's a good start to review the [Bootstrap documentation](https://getbootstrap.com/) to get an idea of the various components that this documentation <b>does not</b> cover.
+                AdminLTE uses all of Bootstrap 5 components. It's a good start
+                to review the [Bootstrap
+                documentation](https://getbootstrap.com/) to get an idea of the
+                various components that this documentation <b>does not</b> cover.
               </p>
             </div>
 
             <div class="callout callout-info mb-4">
               <h5 class="fw-bold">Tips!</h5>
               <p>
-                If you go through the example pages and would like to copy a component, right-click on the component and choose “inspect element” to get to the HTML quicker than scanning the HTML page.
+                If you go through the example pages and would like to copy a
+                component, right-click on the component and choose “inspect
+                element” to get to the HTML quicker than scanning the HTML page.
               </p>
             </div>
 
@@ -76,7 +81,14 @@ const distPath = path;
                 <!-- Start navbar links -->
                 <ul class="navbar-nav">
                   <li class="nav-item">
-                    <a class="nav-link" data-lte-toggle="sidebar" href="#" role="button"><i class="fa-solid fa-bars"></i></a>
+                    <a
+                      class="nav-link"
+                      data-lte-toggle="sidebar"
+                      href="#"
+                      role="button"
+                    >
+                      <i class="fa-solid fa-bars"></i>
+                    </a>
                   </li>
                   <li class="nav-item d-none d-md-block">
                     <a href="#" class="nav-link">Home</a>
@@ -90,7 +102,12 @@ const distPath = path;
                 <ul class="navbar-nav ms-auto">
                   <!-- Navbar Search -->
                   <li class="nav-item">
-                    <a class="nav-link" data-widget="navbar-search" href="#" role="button">
+                    <a
+                      class="nav-link"
+                      data-widget="navbar-search"
+                      href="#"
+                      role="button"
+                    >
                       <i class="fa-solid fa-search"></i>
                     </a>
                   </li>
@@ -101,20 +118,30 @@ const distPath = path;
                       <i class="fa-regular fa-comments"></i>
                       <span class="navbar-badge badge text-bg-danger">3</span>
                     </a>
-                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+                    <div
+                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
+                    >
                       <a href="#" class="dropdown-item">
                         <!-- Message Start -->
                         <div class="d-flex">
                           <div class="flex-shrink-0">
-                            <img src={distPath + '/assets/img/user1-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                            <img
+                              src={distPath + "/assets/img/user1-128x128.jpg"}
+                              alt="User Avatar"
+                              class="img-size-50 rounded-circle me-3"
+                            />
                           </div>
                           <div class="flex-grow-1">
                             <h3 class="dropdown-item-title">
                               Brad Diesel
-                              <span class="float-end fs-7 text-danger"><i class="fa-solid fa-star"></i></span>
+                              <span class="float-end fs-7 text-danger">
+                                <i class="fa-solid fa-star"></i>
+                              </span>
                             </h3>
                             <p class="fs-7">Call me whenever you can...</p>
-                            <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                            <p class="fs-7 text-secondary">
+                              <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                            </p>
                           </div>
                         </div>
                         <!-- Message End -->
@@ -124,15 +151,23 @@ const distPath = path;
                         <!-- Message Start -->
                         <div class="d-flex">
                           <div class="flex-shrink-0">
-                            <img src={distPath + '/assets/img/user8-128x128.jpg'} alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                            <img
+                              src={distPath + "/assets/img/user8-128x128.jpg"}
+                              alt="User Avatar"
+                              class="img-size-50 rounded-circle me-3"
+                            />
                           </div>
                           <div class="flex-grow-1">
                             <h3 class="dropdown-item-title">
                               John Pierce
-                              <span class="float-end fs-7 text-secondary"><i class="fa-solid fa-star"></i></span>
+                              <span class="float-end fs-7 text-secondary">
+                                <i class="fa-solid fa-star"></i>
+                              </span>
                             </h3>
                             <p class="fs-7">I got your message bro</p>
-                            <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                            <p class="fs-7 text-secondary">
+                              <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                            </p>
                           </div>
                         </div>
                         <!-- Message End -->
@@ -142,21 +177,31 @@ const distPath = path;
                         <!-- Message Start -->
                         <div class="d-flex">
                           <div class="flex-shrink-0">
-                            <img src={distPath + '/assets/img/user3-128x128.jpg'}alt="User Avatar" class="img-size-50 rounded-circle me-3">
+                            <img
+                              src={distPath + "/assets/img/user3-128x128.jpg"}
+                              alt="User Avatar"
+                              class="img-size-50 rounded-circle me-3"
+                            />
                           </div>
                           <div class="flex-grow-1">
                             <h3 class="dropdown-item-title">
                               Nora Silvester
-                              <span class="float-end fs-7 text-warning"><i class="fa-solid fa-star"></i></span>
+                              <span class="float-end fs-7 text-warning">
+                                <i class="fa-solid fa-star"></i>
+                              </span>
                             </h3>
                             <p class="fs-7">The subject goes here</p>
-                            <p class="fs-7 text-secondary"><i class="fa-regular fa-clock me-1"></i> 4 Hours Ago</p>
+                            <p class="fs-7 text-secondary">
+                              <i class="fa-regular fa-clock me-1"></i> 4 Hours Ago
+                            </p>
                           </div>
                         </div>
                         <!-- Message End -->
                       </a>
                       <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item dropdown-footer">See All Messages</a>
+                      <a href="#" class="dropdown-item dropdown-footer">
+                        See All Messages
+                      </a>
                     </div>
                   </li>
                   <!-- Notifications Dropdown Menu -->
@@ -165,36 +210,61 @@ const distPath = path;
                       <i class="fa-regular fa-bell"></i>
                       <span class="navbar-badge badge text-bg-warning">15</span>
                     </a>
-                    <div class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+                    <div
-                      <span class="dropdown-item dropdown-header">15 Notifications</span>
+                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
+                    >
+                      <span class="dropdown-item dropdown-header"
+                        >15 Notifications</span
+                      >
                       <div class="dropdown-divider"></div>
                       <a href="#" class="dropdown-item">
                         <i class="fa-solid fa-envelope me-2"></i> 4 new messages
-                        <span class="float-end text-secondary fs-7">3 mins</span>
+                        <span class="float-end text-secondary fs-7">3 mins</span
+                        >
                       </a>
                       <div class="dropdown-divider"></div>
                       <a href="#" class="dropdown-item">
                         <i class="fa-solid fa-users me-2"></i> 8 friend requests
-                        <span class="float-end text-secondary fs-7">12 hours</span>
+                        <span class="float-end text-secondary fs-7">
+                          12 hours
+                        </span>
                       </a>
                       <div class="dropdown-divider"></div>
                       <a href="#" class="dropdown-item">
                         <i class="fa-solid fa-file me-2"></i> 3 new reports
-                        <span class="float-end text-secondary fs-7">2 days</span>
+                        <span class="float-end text-secondary fs-7">
+                          2 days
+                        </span>
                       </a>
                       <div class="dropdown-divider"></div>
-                      <a href="#" class="dropdown-item dropdown-footer">See All Notifications</a>
+                      <a href="#" class="dropdown-item dropdown-footer">
+                        See All Notifications
+                      </a>
                     </div>
                   </li>
                   <li class="nav-item dropdown user-menu">
-                    <a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown">
+                    <a
-                      <img src={distPath + '/assets/img/user2-160x160.jpg'} class="user-image rounded-circle shadow" alt="User Image">
+                      href="#"
+                      class="nav-link dropdown-toggle"
+                      data-bs-toggle="dropdown"
+                    >
+                      <img
+                        src={distPath + "/assets/img/user2-160x160.jpg"}
+                        class="user-image rounded-circle shadow"
+                        alt="User Image"
+                      />
                       <span class="d-none d-md-inline">Alexander Pierce</span>
                     </a>
-                    <ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
+                    <ul
+                      class="dropdown-menu dropdown-menu-lg dropdown-menu-end"
+                    >
                       <!-- User image -->
                       <li class="user-header text-bg-primary">
-                        <img src={distPath + '/assets/img/user2-160x160.jpg'} class="rounded-circle shadow" alt="User Image">
+                        <img
+                          src={distPath + "/assets/img/user2-160x160.jpg"}
+                          class="rounded-circle shadow"
+                          alt="User Image"
+                        />
 
                         <p>
                           Alexander Pierce - Web Developer
@@ -220,7 +290,9 @@ const distPath = path;
                       <!-- Menu Footer-->
                       <li class="user-footer">
                         <a href="#" class="btn btn-default btn-flat">Profile</a>
-                        <a href="#" class="btn btn-default btn-flat float-end">Sign out</a>
+                        <a href="#" class="btn btn-default btn-flat float-end">
+                          Sign out
+                        </a>
                       </li>
                     </ul>
                   </li>
@@ -243,6 +315,5 @@ const distPath = path;
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/docs/components/main-sidebar.astro

@@ -7,7 +7,7 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
 import Scripts from "@components/_scripts.astro";
 
 const title = "Main Sidebar Component | AdminLTE 4";
-const path = '../../../../dist';
+const path = "../../../../dist";
 const mainPage = "components";
 const page = "main-sidebar";
 ---
@@ -67,6 +67,5 @@ const page = "main-sidebar";
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/docs/introduction.astro

@@ -7,7 +7,7 @@ import Scripts from "@components/_scripts.astro";
 import Introduction from "@components/docs/introduction.mdx";
 
 const title = "Introduction | AdminLTE 4";
-const path = '../../../dist';
+const path = "../../../dist";
 const mainPage = "docs";
 const page = "introduction";
 ---
@@ -67,6 +67,5 @@ const page = "introduction";
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/docs/layout.astro

@@ -6,7 +6,7 @@ import Sidenav from "@components/dashboard/_sidenav.astro";
 import Scripts from "@components/_scripts.astro";
 
 const title = "Layout | AdminLTE 4";
-const path = '../../../dist';
+const path = "../../../dist";
 const mainPage = "docs";
 const page = "layout";
 ---
@@ -54,24 +54,55 @@ const page = "layout";
           <div class="container-fluid">
             <div class="callout callout-info mb-4">
               <h5 class="fw-bold">Tips</h5>
-              <p>The <a href="/starter.html" class="link-primary">starter page</a> is a good place to start building your app if you’d like to start from scratch.</p>
+              <p>
+                The <a href="/starter.html" class="link-primary">
+                  starter page
+                </a> is a good place to start building your app if you’d like to
+                start from scratch.
+              </p>
             </div>
 
             <p>The layout consists of five major parts:</p>
             <ul>
-              <li>Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.</li>
+              <li>
-              <li>Main Header <code>.app-header</code> . Contains the logo and navbar.</li>
+                Wrapper <code>.app-wrapper</code> . A div that wraps the whole site.
-              <li>Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user panel and menu.</li>
+              </li>
-              <li>Content <code>.app-main</code> . Contains the page header and content.</li>
+              <li>
-              <li>Main Footer <code>.app-footer</code> . Contains the footer.</li>
+                Main Header <code>.app-header</code> . Contains the logo and navbar.
+              </li>
+              <li>
+                Main Sidebar <code>.app-sidebar</code> . Contains the sidebar user
+                panel and menu.
+              </li>
+              <li>
+                Content <code>.app-main</code> . Contains the page header and content.
+              </li>
+              <li>
+                Main Footer <code>.app-footer</code> . Contains the footer.
+              </li>
             </ul>
 
             <h4>Layout Options</h4>
-            <p>AdminLTE v4 provides a set of options to apply to your main layout. Each one of these classes can be added to the <code>body</code> tag to get the desired goal.</p>
+            <p>
+              AdminLTE v4 provides a set of options to apply to your main
+              layout. Each one of these classes can be added to the
+              <code>body</code> tag to get the desired goal.
+            </p>
             <ul>
-              <li>Fixed Sidebar: use the class <code>.layout-fixed</code> to get a fixed sidebar.</li>
+              <li>
-              <li>Mini Sidebar on Toggle: use the class <code>.sidebar-expand-* .sidebar-mini</code> to have a collapsed sidebar upon loading.</li>
+                Fixed Sidebar: use the class <code>.layout-fixed</code> to get a
-              <li>Collapsed Sidebar: use the class <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to have a collapsed sidebar upon loading.</li>
+                fixed sidebar.
+              </li>
+              <li>
+                Mini Sidebar on Toggle: use the class
+                <code>.sidebar-expand-* .sidebar-mini</code>
+                to have a collapsed sidebar upon loading.
+              </li>
+              <li>
+                Collapsed Sidebar: use the class
+                <code>.sidebar-expand-* .sidebar-mini .sidebar-collapse</code> to
+                have a collapsed sidebar upon loading.
+              </li>
             </ul>
           </div>
           <!-- /.container-fluid -->
@@ -85,6 +116,5 @@ const page = "layout";
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/examples/login.astro

@@ -1,10 +1,10 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Login Page';
+const title = "AdminLTE 4 | Login Page";
-const path = '../../../dist';
+const path = "../../../dist";
-const htmlPath = '..';
+const htmlPath = "..";
 ---
 
 <!DOCTYPE html>
@@ -18,22 +18,26 @@ const htmlPath = '..';
   <body class="login-page bg-body-secondary">
     <div class="login-box">
       <div class="login-logo">
-        <a href={htmlPath + '/index2.html'}><b>Admin</b>LTE</a>
+        <a href={htmlPath + "/index2.html"}><b>Admin</b>LTE</a>
       </div>
       <!-- /.login-logo -->
       <div class="card">
         <div class="card-body login-card-body">
           <p class="login-box-msg">Sign in to start your session</p>
 
-          <form action={htmlPath + '/index3.html'} method="post">
+          <form action={htmlPath + "/index3.html"} method="post">
             <div class="input-group mb-3">
-              <input type="email" class="form-control" placeholder="Email">
+              <input type="email" class="form-control" placeholder="Email" />
               <div class="input-group-text">
                 <span class="fa-solid fa-envelope"></span>
               </div>
             </div>
             <div class="input-group mb-3">
-              <input type="password" class="form-control" placeholder="Password">
+              <input
+                type="password"
+                class="form-control"
+                placeholder="Password"
+              />
               <div class="input-group-text">
                 <span class="fa-solid fa-lock"></span>
               </div>
@@ -42,7 +46,12 @@ const htmlPath = '..';
             <div class="row">
               <div class="col-8">
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    value=""
+                    id="flexCheckDefault"
+                  />
                   <label class="form-check-label" for="flexCheckDefault">
                     Remember Me
                   </label>
@@ -74,7 +83,9 @@ const htmlPath = '..';
             <a href="forgot-password.html">I forgot my password</a>
           </p>
           <p class="mb-0">
-            <a href="register.html" class="text-center">Register a new membership</a>
+            <a href="register.html" class="text-center">
+              Register a new membership
+            </a>
           </p>
         </div>
         <!-- /.login-card-body -->
@@ -84,6 +95,5 @@ const htmlPath = '..';
 
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/examples/register.astro

@@ -1,10 +1,10 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Register Page';
+const title = "AdminLTE 4 | Register Page";
-const path = '../../../dist';
+const path = "../../../dist";
-const htmlPath = '..';
+const htmlPath = "..";
 ---
 
 <!DOCTYPE html>
@@ -18,28 +18,32 @@ const htmlPath = '..';
   <body class="register-page bg-body-secondary">
     <div class="register-box">
       <div class="register-logo">
-        <a href={htmlPath + '/index2.html'}><b>Admin</b>LTE</a>
+        <a href={htmlPath + "/index2.html"}><b>Admin</b>LTE</a>
       </div>
       <!-- /.register-logo -->
       <div class="card">
         <div class="card-body register-card-body">
           <p class="register-box-msg">Register a new membership</p>
 
-          <form action={htmlPath + '/index3.html'} method="post">
+          <form action={htmlPath + "/index3.html"} method="post">
             <div class="input-group mb-3">
-              <input type="text" class="form-control" placeholder="Full Name">
+              <input type="text" class="form-control" placeholder="Full Name" />
               <div class="input-group-text">
                 <span class="fa-solid fa-user"></span>
               </div>
             </div>
             <div class="input-group mb-3">
-              <input type="email" class="form-control" placeholder="Email">
+              <input type="email" class="form-control" placeholder="Email" />
               <div class="input-group-text">
                 <span class="fa-solid fa-envelope"></span>
               </div>
             </div>
             <div class="input-group mb-3">
-              <input type="password" class="form-control" placeholder="Password">
+              <input
+                type="password"
+                class="form-control"
+                placeholder="Password"
+              />
               <div class="input-group-text">
                 <span class="fa-solid fa-lock"></span>
               </div>
@@ -48,7 +52,12 @@ const htmlPath = '..';
             <div class="row">
               <div class="col-8">
                 <div class="form-check">
-                  <input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
+                  <input
+                    class="form-check-input"
+                    type="checkbox"
+                    value=""
+                    id="flexCheckDefault"
+                  />
                   <label class="form-check-label" for="flexCheckDefault">
                     I agree to the <a href="#">terms</a>
                   </label>
@@ -77,7 +86,9 @@ const htmlPath = '..';
           <!-- /.social-auth-links -->
 
           <p class="mb-0">
-            <a href="login.html" class="text-center">I already have a membership</a>
+            <a href="login.html" class="text-center">
+              I already have a membership
+            </a>
           </p>
         </div>
         <!-- /.register-card-body -->
@@ -87,6 +98,5 @@ const htmlPath = '..';
 
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/index.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE v4 | Dashboard';
+const title = "AdminLTE v4 | Dashboard";
-const path = '../../dist';
+const path = "../../dist";
-const mainPage = 'dashboard';
+const mainPage = "dashboard";
-const page = 'index';
+const page = "index";
 ---
 
 <!DOCTYPE html>
@@ -18,10 +18,20 @@ const page = 'index';
     <Head title={title} path={path} />
 
     <!-- apexcharts -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
+      integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
+      crossorigin="anonymous"
+    />
 
     <!-- jsvectormap -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css" integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4=" crossorigin="anonymous">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/css/jsvectormap.min.css"
+      integrity="sha256-+uGLJmmTKOqBr+2E6KDYs/NRsHxSkONXFHUL0fy2O/4="
+      crossorigin="anonymous"
+    />
   </head>
   <!--end::Head-->
   <!--begin::Body-->
@@ -44,7 +54,9 @@ const page = 'index';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Dashboard</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Dashboard
+                  </li>
                 </ol>
               </div>
             </div>
@@ -60,7 +72,7 @@ const page = 'index';
             <!--begin::Row-->
             <div class="row">
               <!--begin::Col-->
-              <div class="col-lg-3 col-6" >
+              <div class="col-lg-3 col-6">
                 <!--begin::Small Box Widget 1-->
                 <div class="small-box text-bg-primary">
                   <div class="inner">
@@ -68,10 +80,20 @@ const page = 'index';
 
                     <p>New Orders</p>
                   </div>
-                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <svg
-                    <path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"></path>
+                    class="small-box-icon"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+                    ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                  <a href="#" class="small-box-footer">
+                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                  </a>
                 </div>
                 <!--end::Small Box Widget 1-->
               </div>
@@ -84,10 +106,20 @@ const page = 'index';
 
                     <p>Bounce Rate</p>
                   </div>
-                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <svg
-                    <path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"></path>
+                    class="small-box-icon"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
+                    ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                  <a href="#" class="small-box-footer">
+                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                  </a>
                 </div>
                 <!--end::Small Box Widget 2-->
               </div>
@@ -100,10 +132,20 @@ const page = 'index';
 
                     <p>User Registrations</p>
                   </div>
-                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <svg
-                    <path d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"></path>
+                    class="small-box-icon"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
+                    ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                  <a href="#" class="small-box-footer">
+                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                  </a>
                 </div>
                 <!--end::Small Box Widget 3-->
               </div>
@@ -116,11 +158,27 @@ const page = 'index';
 
                     <p>Unique Visitors</p>
                   </div>
-                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <svg
-                    <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"></path>
+                    class="small-box-icon"
-                    <path clip-rule="evenodd" fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"></path>
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      fill-rule="evenodd"
+                      d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
+                    ></path>
+                    <path
+                      clip-rule="evenodd"
+                      fill-rule="evenodd"
+                      d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
+                    ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                  <a href="#" class="small-box-footer">
+                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                  </a>
                 </div>
                 <!--end::Small Box Widget 4-->
               </div>
@@ -148,14 +206,32 @@ const page = 'index';
                     <h3 class="card-title">Direct Chat</h3>
 
                     <div class="card-tools">
-                      <span title="3 New Messages" class="badge text-bg-primary">3</span>
+                      <span
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse">
+                        title="3 New Messages"
+                        class="badge text-bg-primary"
+                      >
+                        3
+                      </span>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
                         <i class="fa-solid fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" title="Contacts" data-lte-toggle="chat-pane">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        title="Contacts"
+                        data-lte-toggle="chat-pane"
+                      >
                         <i class="fa-solid fa-comments"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                      >
                         <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
@@ -167,11 +243,19 @@ const page = 'index';
                       <!-- Message. Default to the start -->
                       <div class="direct-chat-msg">
                         <div class="direct-chat-infos clearfix">
-                          <span class="direct-chat-name float-start">Alexander Pierce</span>
+                          <span class="direct-chat-name float-start">
-                          <span class="direct-chat-timestamp float-end">23 Jan 2:00 pm</span>
+                            Alexander Pierce
+                          </span>
+                          <span class="direct-chat-timestamp float-end">
+                            23 Jan 2:00 pm
+                          </span>
                         </div>
                         <!-- /.direct-chat-infos -->
-                        <img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
+                        <img
+                          class="direct-chat-img"
+                          src={path + "/assets/img/user1-128x128.jpg"}
+                          alt="message user image"
+                        />
                         <!-- /.direct-chat-img -->
                         <div class="direct-chat-text">
                           Is this template really for free? That's unbelievable!
@@ -183,11 +267,19 @@ const page = 'index';
                       <!-- Message to the end -->
                       <div class="direct-chat-msg end">
                         <div class="direct-chat-infos clearfix">
-                          <span class="direct-chat-name float-end">Sarah Bullock</span>
+                          <span class="direct-chat-name float-end">
-                          <span class="direct-chat-timestamp float-start">23 Jan 2:05 pm</span>
+                            Sarah Bullock
+                          </span>
+                          <span class="direct-chat-timestamp float-start">
+                            23 Jan 2:05 pm
+                          </span>
                         </div>
                         <!-- /.direct-chat-infos -->
-                        <img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
+                        <img
+                          class="direct-chat-img"
+                          src={path + "/assets/img/user3-128x128.jpg"}
+                          alt="message user image"
+                        />
                         <!-- /.direct-chat-img -->
                         <div class="direct-chat-text">
                           You better believe it!
@@ -199,11 +291,19 @@ const page = 'index';
                       <!-- Message. Default to the start -->
                       <div class="direct-chat-msg">
                         <div class="direct-chat-infos clearfix">
-                          <span class="direct-chat-name float-start">Alexander Pierce</span>
+                          <span class="direct-chat-name float-start">
-                          <span class="direct-chat-timestamp float-end">23 Jan 5:37 pm</span>
+                            Alexander Pierce
+                          </span>
+                          <span class="direct-chat-timestamp float-end">
+                            23 Jan 5:37 pm
+                          </span>
                         </div>
                         <!-- /.direct-chat-infos -->
-                        <img class="direct-chat-img" src={path + '/assets/img/user1-128x128.jpg'} alt="message user image">
+                        <img
+                          class="direct-chat-img"
+                          src={path + "/assets/img/user1-128x128.jpg"}
+                          alt="message user image"
+                        />
                         <!-- /.direct-chat-img -->
                         <div class="direct-chat-text">
                           Working with AdminLTE on a great new app! Wanna join?
@@ -215,19 +315,24 @@ const page = 'index';
                       <!-- Message to the end -->
                       <div class="direct-chat-msg end">
                         <div class="direct-chat-infos clearfix">
-                          <span class="direct-chat-name float-end">Sarah Bullock</span>
+                          <span class="direct-chat-name float-end">
-                          <span class="direct-chat-timestamp float-start">23 Jan 6:10 pm</span>
+                            Sarah Bullock
+                          </span>
+                          <span class="direct-chat-timestamp float-start">
+                            23 Jan 6:10 pm
+                          </span>
                         </div>
                         <!-- /.direct-chat-infos -->
-                        <img class="direct-chat-img" src={path + '/assets/img/user3-128x128.jpg'} alt="message user image">
+                        <img
+                          class="direct-chat-img"
+                          src={path + "/assets/img/user3-128x128.jpg"}
+                          alt="message user image"
+                        />
                         <!-- /.direct-chat-img -->
-                        <div class="direct-chat-text">
+                        <div class="direct-chat-text">I would love to.</div>
-                          I would love to.
-                        </div>
                         <!-- /.direct-chat-text -->
                       </div>
                       <!-- /.direct-chat-msg -->
-
                     </div>
                     <!-- /.direct-chat-messages-->
 
@@ -236,14 +341,22 @@ const page = 'index';
                       <ul class="contacts-list">
                         <li>
                           <a href="#">
-                            <img class="contacts-list-img" src={path + '/assets/img/user1-128x128.jpg'} alt="User Avatar">
+                            <img
+                              class="contacts-list-img"
+                              src={path + "/assets/img/user1-128x128.jpg"}
+                              alt="User Avatar"
+                            />
 
                             <div class="contacts-list-info">
                               <span class="contacts-list-name">
                                 Count Dracula
-                                <small class="contacts-list-date float-end">2/28/2023</small>
+                                <small class="contacts-list-date float-end">
+                                  2/28/2023
+                                </small>
+                              </span>
+                              <span class="contacts-list-msg">
+                                How have you been? I was...
                               </span>
-                              <span class="contacts-list-msg">How have you been? I was...</span>
                             </div>
                             <!-- /.contacts-list-info -->
                           </a>
@@ -251,14 +364,22 @@ const page = 'index';
                         <!-- End Contact Item -->
                         <li>
                           <a href="#">
-                            <img class="contacts-list-img" src={path + '/assets/img/user7-128x128.jpg'} alt="User Avatar">
+                            <img
+                              class="contacts-list-img"
+                              src={path + "/assets/img/user7-128x128.jpg"}
+                              alt="User Avatar"
+                            />
 
                             <div class="contacts-list-info">
                               <span class="contacts-list-name">
                                 Sarah Doe
-                                <small class="contacts-list-date float-end">2/23/2023</small>
+                                <small class="contacts-list-date float-end">
+                                  2/23/2023
+                                </small>
+                              </span>
+                              <span class="contacts-list-msg">
+                                I will be waiting for...
                               </span>
-                              <span class="contacts-list-msg">I will be waiting for...</span>
                             </div>
                             <!-- /.contacts-list-info -->
                           </a>
@@ -266,14 +387,22 @@ const page = 'index';
                         <!-- End Contact Item -->
                         <li>
                           <a href="#">
-                            <img class="contacts-list-img" src={path + '/assets/img/user3-128x128.jpg'} alt="User Avatar">
+                            <img
+                              class="contacts-list-img"
+                              src={path + "/assets/img/user3-128x128.jpg"}
+                              alt="User Avatar"
+                            />
 
                             <div class="contacts-list-info">
                               <span class="contacts-list-name">
                                 Nadia Jolie
-                                <small class="contacts-list-date float-end">2/20/2023</small>
+                                <small class="contacts-list-date float-end">
+                                  2/20/2023
+                                </small>
+                              </span>
+                              <span class="contacts-list-msg">
+                                I'll call you back at...
                               </span>
-                              <span class="contacts-list-msg">I'll call you back at...</span>
                             </div>
                             <!-- /.contacts-list-info -->
                           </a>
@@ -281,14 +410,22 @@ const page = 'index';
                         <!-- End Contact Item -->
                         <li>
                           <a href="#">
-                            <img class="contacts-list-img" src={path + '/assets/img/user5-128x128.jpg'} alt="User Avatar">
+                            <img
+                              class="contacts-list-img"
+                              src={path + "/assets/img/user5-128x128.jpg"}
+                              alt="User Avatar"
+                            />
 
                             <div class="contacts-list-info">
                               <span class="contacts-list-name">
                                 Nora S. Vans
-                                <small class="contacts-list-date float-end">2/10/2023</small>
+                                <small class="contacts-list-date float-end">
+                                  2/10/2023
+                                </small>
+                              </span>
+                              <span class="contacts-list-msg">
+                                Where is your new...
                               </span>
-                              <span class="contacts-list-msg">Where is your new...</span>
                             </div>
                             <!-- /.contacts-list-info -->
                           </a>
@@ -296,14 +433,22 @@ const page = 'index';
                         <!-- End Contact Item -->
                         <li>
                           <a href="#">
-                            <img class="contacts-list-img" src={path + '/assets/img/user6-128x128.jpg'} alt="User Avatar">
+                            <img
+                              class="contacts-list-img"
+                              src={path + "/assets/img/user6-128x128.jpg"}
+                              alt="User Avatar"
+                            />
 
                             <div class="contacts-list-info">
                               <span class="contacts-list-name">
                                 John K.
-                                <small class="contacts-list-date float-end">1/27/2023</small>
+                                <small class="contacts-list-date float-end">
+                                  1/27/2023
+                                </small>
+                              </span>
+                              <span class="contacts-list-msg">
+                                Can I take a look at...
                               </span>
-                              <span class="contacts-list-msg">Can I take a look at...</span>
                             </div>
                             <!-- /.contacts-list-info -->
                           </a>
@@ -311,14 +456,22 @@ const page = 'index';
                         <!-- End Contact Item -->
                         <li>
                           <a href="#">
-                            <img class="contacts-list-img" src={path + '/assets/img/user8-128x128.jpg'} alt="User Avatar">
+                            <img
+                              class="contacts-list-img"
+                              src={path + "/assets/img/user8-128x128.jpg"}
+                              alt="User Avatar"
+                            />
 
                             <div class="contacts-list-info">
                               <span class="contacts-list-name">
                                 Kenneth M.
-                                <small class="contacts-list-date float-end">1/4/2023</small>
+                                <small class="contacts-list-date float-end">
+                                  1/4/2023
+                                </small>
+                              </span>
+                              <span class="contacts-list-msg">
+                                Never mind I found...
                               </span>
-                              <span class="contacts-list-msg">Never mind I found...</span>
                             </div>
                             <!-- /.contacts-list-info -->
                           </a>
@@ -333,9 +486,16 @@ const page = 'index';
                   <div class="card-footer">
                     <form action="#" method="post">
                       <div class="input-group">
-                        <input type="text" name="message" placeholder="Type Message ..." class="form-control">
+                        <input
+                          type="text"
+                          name="message"
+                          placeholder="Type Message ..."
+                          class="form-control"
+                        />
                         <span class="input-group-append">
-                          <button type="button" class="btn btn-primary">Send</button>
+                          <button type="button" class="btn btn-primary">
+                            Send
+                          </button>
                         </span>
                       </div>
                     </form>
@@ -348,11 +508,18 @@ const page = 'index';
 
               <!-- Start col -->
               <div class="col-lg-5 connectedSortable">
-                <div class="card text-white bg-primary bg-gradient  border-primary">
+                <div
+                  class="card text-white bg-primary bg-gradient border-primary"
+                >
                   <div class="card-header border-0">
                     <h3 class="card-title">Sales Value</h3>
                     <div class="card-tools">
-                      <button type="button" class="btn btn-primary btn-sm " data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
+                      <button
+                        type="button"
+                        class="btn btn-primary btn-sm"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i class="fa-solid fa-plus"></i>
                       </button>
                     </div>
                   </div>
@@ -397,25 +564,36 @@ const page = 'index';
     <!-- OPTIONAL SCRIPTS -->
 
     <!-- sortablejs -->
-    <script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js" integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ=" crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"
+      integrity="sha256-ipiJrswvAR4VAx/th+6zWsdeYmVae0iJuiR+6OqHJHQ="
+      crossorigin="anonymous"
+    ></script>
 
     <!-- sortablejs -->
     <script is:inline>
-      const connectedSortables = document.querySelectorAll('.connectedSortable')
+      const connectedSortables =
-      connectedSortables.forEach(connectedSortable => {
+        document.querySelectorAll(".connectedSortable");
+      connectedSortables.forEach((connectedSortable) => {
         let sortable = new Sortable(connectedSortable, {
-          group: 'shared',
+          group: "shared",
-        })
+        });
-      })
+      });
 
-      const cardHeaders = document.querySelectorAll('.connectedSortable .card-header');
+      const cardHeaders = document.querySelectorAll(
-      cardHeaders.forEach(cardHeader => {
+        ".connectedSortable .card-header"
-        cardHeader.style.cursor = 'move';
+      );
+      cardHeaders.forEach((cardHeader) => {
+        cardHeader.style.cursor = "move";
       });
     </script>
 
     <!-- apexcharts -->
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
+      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
+      crossorigin="anonymous"
+    ></script>
 
     <!-- ChartJS -->
     <script is:inline>
@@ -424,48 +602,70 @@ const page = 'index';
       // ++++++++++++++++++++++++++++++++++++++++++
 
       const sales_chart_options = {
-          series: [{
+        series: [
-          name: 'Digital Goods',
+          {
-          data: [28, 48, 40, 19, 86, 27, 90]
+            name: "Digital Goods",
-        },{
+            data: [28, 48, 40, 19, 86, 27, 90],
-          name: 'Electronics',
+          },
-          data: [65, 59, 80, 81, 56, 55, 40]
+          {
-        }],
+            name: "Electronics",
+            data: [65, 59, 80, 81, 56, 55, 40],
+          },
+        ],
         chart: {
           height: 300,
-          type: 'area',
+          type: "area",
           toolbar: {
             show: false,
           },
         },
         legend: {
-          show: false
+          show: false,
         },
-        colors:['#0d6efd', '#20c997'],
+        colors: ["#0d6efd", "#20c997"],
         dataLabels: {
           enabled: false,
         },
         stroke: {
-          curve: 'smooth'
+          curve: "smooth",
         },
         xaxis: {
-          type: 'datetime',
+          type: "datetime",
-          categories: ["2023-01-01", "2023-02-01", "2023-03-01", "2023-04-01", "2023-05-01", "2023-06-01", "2023-07-01"]
+          categories: [
+            "2023-01-01",
+            "2023-02-01",
+            "2023-03-01",
+            "2023-04-01",
+            "2023-05-01",
+            "2023-06-01",
+            "2023-07-01",
+          ],
         },
         tooltip: {
           x: {
-            format: 'MMMM yyyy'
+            format: "MMMM yyyy",
           },
         },
       };
 
-      const sales_chart = new ApexCharts(document.querySelector("#revenue-chart"), sales_chart_options);
+      const sales_chart = new ApexCharts(
+        document.querySelector("#revenue-chart"),
+        sales_chart_options
+      );
       sales_chart.render();
     </script>
 
     <!-- jsvectormap -->
-    <script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js" integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y=" crossorigin="anonymous"></script>
+    <script
-    <script src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js" integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY=" crossorigin="anonymous"></script>
+      src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/js/jsvectormap.min.js"
+      integrity="sha256-/t1nN2956BT869E6H4V1dnt0X5pAQHPytli+1nTZm2Y="
+      crossorigin="anonymous"
+    ></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/jsvectormap@1.5.3/dist/maps/world.js"
+      integrity="sha256-XPpPaZlU8S/HWf7FZLAncLg2SAkP8ScUTII89x9D3lY="
+      crossorigin="anonymous"
+    ></script>
 
     <!-- jsvectormap -->
     <script is:inline>
@@ -480,8 +680,8 @@ const page = 'index';
         BR: 600, // Brazil
         IN: 800, // India
         GB: 320, // Great Britain
-        RU: 3000 // Russia
+        RU: 3000, // Russia
-      }
+      };
 
       // World map by jsVectorMap
       const map = new jsVectorMap({
@@ -491,84 +691,98 @@ const page = 'index';
 
       // Sparkline charts
       const option_sparkline1 = {
-          series: [{
+        series: [
+          {
             data: [1000, 1200, 920, 927, 931, 1027, 819, 930, 1021],
-        }],
+          },
+        ],
         chart: {
-          type: 'area',
+          type: "area",
           height: 50,
           sparkline: {
-            enabled: true
+            enabled: true,
           },
         },
         stroke: {
-          curve: 'straight'
+          curve: "straight",
         },
         fill: {
           opacity: 0.3,
         },
         yaxis: {
-          min: 0
+          min: 0,
         },
-        colors: ['#DCE6EC'],
+        colors: ["#DCE6EC"],
       };
 
-      const sparkline1 = new ApexCharts(document.querySelector("#sparkline-1"), option_sparkline1);
+      const sparkline1 = new ApexCharts(
+        document.querySelector("#sparkline-1"),
+        option_sparkline1
+      );
       sparkline1.render();
 
       const option_sparkline2 = {
-          series: [{
+        series: [
+          {
             data: [515, 519, 520, 522, 652, 810, 370, 627, 319, 630, 921],
-        }],
+          },
+        ],
         chart: {
-          type: 'area',
+          type: "area",
           height: 50,
           sparkline: {
-            enabled: true
+            enabled: true,
           },
         },
         stroke: {
-          curve: 'straight'
+          curve: "straight",
         },
         fill: {
           opacity: 0.3,
         },
         yaxis: {
-          min: 0
+          min: 0,
         },
-        colors: ['#DCE6EC'],
+        colors: ["#DCE6EC"],
       };
 
-      const sparkline2 = new ApexCharts(document.querySelector("#sparkline-2"), option_sparkline2);
+      const sparkline2 = new ApexCharts(
+        document.querySelector("#sparkline-2"),
+        option_sparkline2
+      );
       sparkline2.render();
 
       const option_sparkline3 = {
-          series: [{
+        series: [
+          {
             data: [15, 19, 20, 22, 33, 27, 31, 27, 19, 30, 21],
-        }],
+          },
+        ],
         chart: {
-          type: 'area',
+          type: "area",
           height: 50,
           sparkline: {
-            enabled: true
+            enabled: true,
           },
         },
         stroke: {
-          curve: 'straight'
+          curve: "straight",
         },
         fill: {
           opacity: 0.3,
         },
         yaxis: {
-          min: 0
+          min: 0,
         },
-        colors: ['#DCE6EC'],
+        colors: ["#DCE6EC"],
       };
 
-      const sparkline3 = new ApexCharts(document.querySelector("#sparkline-3"), option_sparkline3);
+      const sparkline3 = new ApexCharts(
+        document.querySelector("#sparkline-3"),
+        option_sparkline3
+      );
       sparkline3.render();
     </script>
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/index3.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE | Dashboard v3';
+const title = "AdminLTE | Dashboard v3";
-const path = '../../dist';
+const path = "../../dist";
-const mainPage = 'dashboard';
+const mainPage = "dashboard";
-const page = 'index3';
+const page = "index3";
 ---
 
 <!DOCTYPE html>
@@ -18,7 +18,12 @@ const page = 'index3';
     <Head title={title} path={path} />
 
     <!-- apexcharts -->
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css" integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0=" crossorigin="anonymous">
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.css"
+      integrity="sha256-4MX+61mt9NVvvuPjUWdUdyfZfxSB1/Rf9WtqRHgG5S0="
+      crossorigin="anonymous"
+    />
   </head>
 
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
@@ -40,7 +45,9 @@ const page = 'index3';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Dashboard v3</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Dashboard v3
+                  </li>
                 </ol>
               </div>
             </div>
@@ -118,7 +125,11 @@ const page = 'index3';
                       <tbody>
                         <tr>
                           <td>
-                          <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
+                            <img
+                              src={path + "/assets/img/default-150x150.png"}
+                              alt="Product 1"
+                              class="rounded-circle img-size-32 me-2"
+                            />
                             Some Product
                           </td>
                           <td>$13 USD</td>
@@ -137,7 +148,11 @@ const page = 'index3';
                         </tr>
                         <tr>
                           <td>
-                          <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
+                            <img
+                              src={path + "/assets/img/default-150x150.png"}
+                              alt="Product 1"
+                              class="rounded-circle img-size-32 me-2"
+                            />
                             Another Product
                           </td>
                           <td>$29 USD</td>
@@ -156,7 +171,11 @@ const page = 'index3';
                         </tr>
                         <tr>
                           <td>
-                          <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
+                            <img
+                              src={path + "/assets/img/default-150x150.png"}
+                              alt="Product 1"
+                              class="rounded-circle img-size-32 me-2"
+                            />
                             Amazing Product
                           </td>
                           <td>$1,230 USD</td>
@@ -175,7 +194,11 @@ const page = 'index3';
                         </tr>
                         <tr>
                           <td>
-                          <img src={path + '/assets/img/default-150x150.png'} alt="Product 1" class="rounded-circle img-size-32 me-2">
+                            <img
+                              src={path + "/assets/img/default-150x150.png"}
+                              alt="Product 1"
+                              class="rounded-circle img-size-32 me-2"
+                            />
                             Perfect Item
                             <span class="badge text-bg-danger">NEW</span>
                           </td>
@@ -253,10 +276,24 @@ const page = 'index3';
                     </div>
                   </div>
                   <div class="card-body">
-                    <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
+                    <div
+                      class="d-flex justify-content-between align-items-center border-bottom mb-3"
+                    >
                       <p class="text-success fs-2">
-                        <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                        <svg
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"></path>
+                          height="32"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M19.5 12c0-1.232-.046-2.453-.138-3.662a4.006 4.006 0 00-3.7-3.7 48.678 48.678 0 00-7.324 0 4.006 4.006 0 00-3.7 3.7c-.017.22-.032.441-.046.662M19.5 12l3-3m-3 3l-3-3m-12 3c0 1.232.046 2.453.138 3.662a4.006 4.006 0 003.7 3.7 48.656 48.656 0 007.324 0 4.006 4.006 0 003.7-3.7c.017-.22.032-.441.046-.662M4.5 12l3 3m-3-3l-3 3"
+                          ></path>
                         </svg>
                       </p>
                       <p class="d-flex flex-column text-end">
@@ -267,10 +304,24 @@ const page = 'index3';
                       </p>
                     </div>
                     <!-- /.d-flex -->
-                    <div class="d-flex justify-content-between align-items-center border-bottom mb-3">
+                    <div
+                      class="d-flex justify-content-between align-items-center border-bottom mb-3"
+                    >
                       <p class="text-warning fs-2">
-                        <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                        <svg
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"></path>
+                          height="32"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 00-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 00-16.536-1.84M7.5 14.25L5.106 5.272M6 20.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm12.75 0a.75.75 0 11-1.5 0 .75.75 0 011.5 0z"
+                          ></path>
                         </svg>
                       </p>
                       <p class="d-flex flex-column text-end">
@@ -281,15 +332,30 @@ const page = 'index3';
                       </p>
                     </div>
                     <!-- /.d-flex -->
-                    <div class="d-flex justify-content-between align-items-center mb-0">
+                    <div
+                      class="d-flex justify-content-between align-items-center mb-0"
+                    >
                       <p class="text-danger fs-2">
-                        <svg height="32" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                        <svg
-                          <path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"></path>
+                          height="32"
+                          fill="none"
+                          stroke="currentColor"
+                          stroke-width="1.5"
+                          viewBox="0 0 24 24"
+                          xmlns="http://www.w3.org/2000/svg"
+                          aria-hidden="true"
+                        >
+                          <path
+                            stroke-linecap="round"
+                            stroke-linejoin="round"
+                            d="M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z"
+                          ></path>
                         </svg>
                       </p>
                       <p class="d-flex flex-column text-end">
                         <span class="fw-bold">
-                          <i class="ion ion-android-arrow-down text-danger"></i> 1%
+                          <i class="ion ion-android-arrow-down text-danger"></i>
+                          1%
                         </span>
                         <span class="text-secondary">REGISTRATION RATE</span>
                       </p>
@@ -316,7 +382,11 @@ const page = 'index3';
     <!-- OPTIONAL SCRIPTS -->
 
     <!-- apexcharts -->
-    <script src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js" integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8=" crossorigin="anonymous"></script>
+    <script
+      src="https://cdn.jsdelivr.net/npm/apexcharts@3.37.1/dist/apexcharts.min.js"
+      integrity="sha256-+vh8GkaU7C9/wbSLIcwq82tQ2wTf44aOHA8HlBMwRI8="
+      crossorigin="anonymous"
+    ></script>
 
     <script is:inline>
       // NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
@@ -327,99 +397,117 @@ const page = 'index3';
         series: [
           {
             name: "High - 2023",
-            data: [100, 120, 170, 167, 180, 177, 160]
+            data: [100, 120, 170, 167, 180, 177, 160],
           },
           {
             name: "Low - 2023",
-            data: [60, 80, 70, 67, 80, 77, 100]
+            data: [60, 80, 70, 67, 80, 77, 100],
-          }
+          },
         ],
         chart: {
           height: 200,
-          type: 'line',
+          type: "line",
           toolbar: {
-            show: false
+            show: false,
-          }
           },
-        colors: ['#0d6efd', '#adb5bd'],
+        },
+        colors: ["#0d6efd", "#adb5bd"],
         stroke: {
-          curve: 'smooth'
+          curve: "smooth",
         },
         grid: {
-          borderColor: '#e7e7e7',
+          borderColor: "#e7e7e7",
           row: {
-            colors: ['#f3f3f3', 'transparent'], // takes an array which will be repeated on columns
+            colors: ["#f3f3f3", "transparent"], // takes an array which will be repeated on columns
-            opacity: 0.5
+            opacity: 0.5,
           },
         },
         legend: {
-          show: false
+          show: false,
         },
         markers: {
-          size: 1
+          size: 1,
         },
         xaxis: {
-          categories: ['22th', '23th', '24th', '25th', '26th', '27th', '28th'],
+          categories: ["22th", "23th", "24th", "25th", "26th", "27th", "28th"],
         },
       };
 
-      var visitors_chart = new ApexCharts(document.querySelector("#visitors-chart"), visitors_chart_options);
+      var visitors_chart = new ApexCharts(
+        document.querySelector("#visitors-chart"),
+        visitors_chart_options
+      );
       visitors_chart.render();
 
-
       var sales_chart_options = {
-        series: [{
+        series: [
-        name: 'Net Profit',
+          {
-        data: [44, 55, 57, 56, 61, 58, 63, 60, 66]
+            name: "Net Profit",
-      }, {
+            data: [44, 55, 57, 56, 61, 58, 63, 60, 66],
-        name: 'Revenue',
+          },
-        data: [76, 85, 101, 98, 87, 105, 91, 114, 94]
+          {
-      }, {
+            name: "Revenue",
-        name: 'Free Cash Flow',
+            data: [76, 85, 101, 98, 87, 105, 91, 114, 94],
-        data: [35, 41, 36, 26, 45, 48, 52, 53, 41]
+          },
-      }],
+          {
+            name: "Free Cash Flow",
+            data: [35, 41, 36, 26, 45, 48, 52, 53, 41],
+          },
+        ],
         chart: {
-        type: 'bar',
+          type: "bar",
-        height: 200
+          height: 200,
         },
         plotOptions: {
           bar: {
             horizontal: false,
-          columnWidth: '55%',
+            columnWidth: "55%",
-          endingShape: 'rounded'
+            endingShape: "rounded",
           },
         },
         legend: {
-        show: false
+          show: false,
         },
-      colors:['#0d6efd', '#20c997', '#ffc107'],
+        colors: ["#0d6efd", "#20c997", "#ffc107"],
         dataLabels: {
-        enabled: false
+          enabled: false,
         },
         stroke: {
           show: true,
           width: 2,
-        colors: ['transparent']
+          colors: ["transparent"],
         },
         xaxis: {
-        categories: ['Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct'],
+          categories: [
+            "Feb",
+            "Mar",
+            "Apr",
+            "May",
+            "Jun",
+            "Jul",
+            "Aug",
+            "Sep",
+            "Oct",
+          ],
         },
         fill: {
-        opacity: 1
+          opacity: 1,
         },
         tooltip: {
           y: {
             formatter: function (val) {
-            return "$ " + val + " thousands"
+              return "$ " + val + " thousands";
-          }
+            },
-        }
+          },
-      }
+        },
       };
 
-      var sales_chart = new ApexCharts(document.querySelector("#sales-chart"), sales_chart_options);
+      var sales_chart = new ApexCharts(
+        document.querySelector("#sales-chart"),
+        sales_chart_options
+      );
       sales_chart.render();
     </script>
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/layout/collapsed-sidebar.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Sidebar Mini';
+const title = "AdminLTE 4 | Sidebar Mini";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'layout';
+const mainPage = "layout";
-const page = 'collapsed-sidebar';
+const page = "collapsed-sidebar";
 ---
 
 <!DOCTYPE html>
@@ -19,7 +19,9 @@ const page = 'collapsed-sidebar';
   </head>
   <!--end::Head-->
   <!--begin::Body-->
-  <body class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary">
+  <body
+    class="layout-fixed sidebar-expand-lg sidebar-mini sidebar-collapse bg-body-tertiary"
+  >
     <!--begin::App Wrapper-->
     <div class="app-wrapper">
       <Topbar path={path} />
@@ -38,7 +40,9 @@ const page = 'collapsed-sidebar';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Collapsed Sidebar</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Collapsed Sidebar
+                  </li>
                 </ol>
               </div>
             </div>
@@ -60,10 +64,20 @@ const page = 'collapsed-sidebar';
                     <h3 class="card-title">Title</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
                         <i class="fa-solid fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                        title="Remove"
+                      >
                         <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
@@ -72,9 +86,7 @@ const page = 'collapsed-sidebar';
                     Start creating your amazing application!
                   </div>
                   <!-- /.card-body -->
-                  <div class="card-footer">
+                  <div class="card-footer">Footer</div>
-                    Footer
-                  </div>
                   <!-- /.card-footer-->
                 </div>
                 <!-- /.card -->
@@ -93,6 +105,5 @@ const page = 'collapsed-sidebar';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/layout/fixed-sidebar.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Fixed Sidebar';
+const title = "AdminLTE 4 | Fixed Sidebar";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'layout';
+const mainPage = "layout";
-const page = 'fixed-sidebar';
+const page = "fixed-sidebar";
 ---
 
 <!DOCTYPE html>
@@ -39,7 +39,9 @@ const page = 'fixed-sidebar';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Fixed Layout</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Fixed Layout
+                  </li>
                 </ol>
               </div>
             </div>
@@ -61,10 +63,20 @@ const page = 'fixed-sidebar';
                     <h3 class="card-title">Title</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
                         <i class="fa-solid fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                        title="Remove"
+                      >
                         <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
@@ -73,9 +85,7 @@ const page = 'fixed-sidebar';
                     Start creating your amazing application!
                   </div>
                   <!-- /.card-body -->
-                  <div class="card-footer">
+                  <div class="card-footer">Footer</div>
-                    Footer
-                  </div>
                   <!-- /.card-footer-->
                 </div>
                 <!-- /.card -->
@@ -94,6 +104,5 @@ const page = 'fixed-sidebar';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/layout/layout-rtl.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Layout RTL';
+const title = "AdminLTE 4 | Layout RTL";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'layout';
+const mainPage = "layout";
-const page = 'layout-rtl';
+const page = "layout-rtl";
 const isRtl = true;
 ---
 
@@ -39,7 +39,9 @@ const isRtl = true;
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Layout RTL</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Layout RTL
+                  </li>
                 </ol>
               </div>
             </div>
@@ -61,10 +63,20 @@ const isRtl = true;
                     <h3 class="card-title">Title</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
                         <i class="fa-solid fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                        title="Remove"
+                      >
                         <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
@@ -73,9 +85,7 @@ const isRtl = true;
                     Start creating your amazing application!
                   </div>
                   <!-- /.card-body -->
-                  <div class="card-footer">
+                  <div class="card-footer">Footer</div>
-                    Footer
-                  </div>
                   <!-- /.card-footer-->
                 </div>
                 <!-- /.card -->
@@ -94,6 +104,5 @@ const isRtl = true;
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/layout/logo-switch.astro

@@ -1,14 +1,15 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
-import { convertPathToHtml } from '../../../utils/index.js';
+import { convertPathToHtml } from "../../../utils/index.js";
 
-const title = 'AdminLTE 4 | Sidebar Mini';
+const title = "AdminLTE 4 | Sidebar Mini";
-const path = '../../../dist';
+const path = "../../../dist";
 const htmlPath = convertPathToHtml(path);
 ---
+
 <!DOCTYPE html>
 <html lang="en">
   <!--begin::Head-->
@@ -24,9 +25,17 @@ const htmlPath = convertPathToHtml(path);
       <!-- Sidebar Container -->
       <aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
         <div class="sidebar-brand">
-          <a href={htmlPath + '/index.html'} class="brand-link logo-switch">
+          <a href={htmlPath + "/index.html"} class="brand-link logo-switch">
-            <img src={path + '/assets/img/AdminLTELogo.png'} alt="AdminLTE Logo Small" class="brand-image-xl logo-xs opacity-75 shadow">
+            <img
-            <img src={path + '/assets/img/AdminLTEFullLogo.png'} alt="AdminLTE Logo Large" class="brand-image-xs logo-xl opacity-75">
+              src={path + "/assets/img/AdminLTELogo.png"}
+              alt="AdminLTE Logo Small"
+              class="brand-image-xl logo-xs opacity-75 shadow"
+            />
+            <img
+              src={path + "/assets/img/AdminLTEFullLogo.png"}
+              alt="AdminLTE Logo Large"
+              class="brand-image-xs logo-xl opacity-75"
+            />
           </a>
         </div>
         <!-- Sidebar -->
@@ -50,7 +59,9 @@ const htmlPath = convertPathToHtml(path);
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Logo Switch</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Logo Switch
+                  </li>
                 </ol>
               </div>
             </div>
@@ -72,10 +83,20 @@ const htmlPath = convertPathToHtml(path);
                     <h3 class="card-title">Title</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
                         <i class="fa-solid fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                        title="Remove"
+                      >
                         <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
@@ -84,9 +105,7 @@ const htmlPath = convertPathToHtml(path);
                     Start creating your amazing application!
                   </div>
                   <!-- /.card-body -->
-                  <div class="card-footer">
+                  <div class="card-footer">Footer</div>
-                    Footer
-                  </div>
                   <!-- /.card-footer-->
                 </div>
                 <!-- /.card -->
@@ -105,6 +124,5 @@ const htmlPath = convertPathToHtml(path);
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/layout/sidebar-mini.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Sidebar Mini';
+const title = "AdminLTE 4 | Sidebar Mini";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'layout';
+const mainPage = "layout";
-const page = 'sidebar-mini';
+const page = "sidebar-mini";
 ---
 
 <!DOCTYPE html>
@@ -38,7 +38,9 @@ const page = 'sidebar-mini';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Sidebar Mini</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Sidebar Mini
+                  </li>
                 </ol>
               </div>
             </div>
@@ -60,10 +62,20 @@ const page = 'sidebar-mini';
                     <h3 class="card-title">Title</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
                         <i class="fa-solid fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                        title="Remove"
+                      >
                         <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
@@ -72,9 +84,7 @@ const page = 'sidebar-mini';
                     Start creating your amazing application!
                   </div>
                   <!-- /.card-body -->
-                  <div class="card-footer">
+                  <div class="card-footer">Footer</div>
-                    Footer
-                  </div>
                   <!-- /.card-footer-->
                 </div>
                 <!-- /.card -->
@@ -93,6 +103,5 @@ const page = 'sidebar-mini';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/layout/unfixed-sidebar.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Unfixed Sidebar';
+const title = "AdminLTE 4 | Unfixed Sidebar";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'layout';
+const mainPage = "layout";
-const page = 'unfixed-sidebar';
+const page = "unfixed-sidebar";
 ---
 
 <!DOCTYPE html>
@@ -38,7 +38,9 @@ const page = 'unfixed-sidebar';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Unfixed Layout</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Unfixed Layout
+                  </li>
                 </ol>
               </div>
             </div>
@@ -60,10 +62,20 @@ const page = 'unfixed-sidebar';
                     <h3 class="card-title">Title</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse" title="Collapse">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                        title="Collapse"
+                      >
                         <i class="fa-solid fa-minus"></i>
                       </button>
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove" title="Remove">
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                        title="Remove"
+                      >
                         <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
@@ -72,9 +84,7 @@ const page = 'unfixed-sidebar';
                     Start creating your amazing application!
                   </div>
                   <!-- /.card-body -->
-                  <div class="card-footer">
+                  <div class="card-footer">Footer</div>
-                    Footer
-                  </div>
                   <!-- /.card-footer-->
                 </div>
                 <!-- /.card -->
@@ -92,6 +102,5 @@ const page = 'unfixed-sidebar';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/tables/simple.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Simple Tables';
+const title = "AdminLTE 4 | Simple Tables";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'tables';
+const mainPage = "tables";
-const page = 'simple';
+const page = "simple";
 ---
 
 <!DOCTYPE html>
@@ -38,7 +38,9 @@ const page = 'simple';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Simple Tables</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Simple Tables
+                  </li>
                 </ol>
               </div>
             </div>
@@ -75,7 +77,11 @@ const page = 'simple';
                           <td>Update software</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
+                              <div
+                                class="progress-bar progress-bar-danger"
+                                style="width: 55%"
+                              >
+                              </div>
                             </div>
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
@@ -85,30 +91,52 @@ const page = 'simple';
                           <td>Clean database</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
+                              <div
+                                class="progress-bar text-bg-warning"
+                                style="width: 70%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-warning">70%</span></td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
                         </tr>
                         <tr>
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
-                            <div class="progress progress-xs progress-striped active">
+                            <div
-                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-primary"
+                                style="width: 30%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-primary">30%</span></td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
                         </tr>
                         <tr>
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
-                            <div class="progress progress-xs progress-striped active">
+                            <div
-                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-success"
+                                style="width: 90%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-success">90%</span></td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
                         </tr>
                       </tbody>
                     </table>
@@ -116,11 +144,21 @@ const page = 'simple';
                   <!-- /.card-body -->
                   <div class="card-footer clearfix">
                     <ul class="pagination pagination-sm m-0 float-end">
-                      <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
+                      <li class="page-item">
-                      <li class="page-item"><a class="page-link" href="#">1</a></li>
+                        <a class="page-link" href="#">&laquo;</a>
-                      <li class="page-item"><a class="page-link" href="#">2</a></li>
+                      </li>
-                      <li class="page-item"><a class="page-link" href="#">3</a></li>
+                      <li class="page-item">
-                      <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
+                        <a class="page-link" href="#">1</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">2</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">3</a>
+                      </li>
+                      <li class="page-item">
+                        <a class="page-link" href="#">&raquo;</a>
+                      </li>
                     </ul>
                   </div>
                 </div>
@@ -147,7 +185,11 @@ const page = 'simple';
                           <td>Update software</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
+                              <div
+                                class="progress-bar progress-bar-danger"
+                                style="width: 55%"
+                              >
+                              </div>
                             </div>
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
@@ -157,30 +199,52 @@ const page = 'simple';
                           <td>Clean database</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
+                              <div
+                                class="progress-bar text-bg-warning"
+                                style="width: 70%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-warning">70%</span></td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
                         </tr>
                         <tr>
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
-                            <div class="progress progress-xs progress-striped active">
+                            <div
-                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-primary"
+                                style="width: 30%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-primary">30%</span></td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
                         </tr>
                         <tr>
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
-                            <div class="progress progress-xs progress-striped active">
+                            <div
-                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-success"
+                                style="width: 90%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-success">90%</span></td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
                         </tr>
                       </tbody>
                     </table>
@@ -197,11 +261,21 @@ const page = 'simple';
 
                     <div class="card-tools">
                       <ul class="pagination pagination-sm float-end">
-                        <li class="page-item"><a class="page-link" href="#">&laquo;</a></li>
+                        <li class="page-item">
-                        <li class="page-item"><a class="page-link" href="#">1</a></li>
+                          <a class="page-link" href="#">&laquo;</a>
-                        <li class="page-item"><a class="page-link" href="#">2</a></li>
+                        </li>
-                        <li class="page-item"><a class="page-link" href="#">3</a></li>
+                        <li class="page-item">
-                        <li class="page-item"><a class="page-link" href="#">&raquo;</a></li>
+                          <a class="page-link" href="#">1</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">2</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">3</a>
+                        </li>
+                        <li class="page-item">
+                          <a class="page-link" href="#">&raquo;</a>
+                        </li>
                       </ul>
                     </div>
                   </div>
@@ -222,7 +296,11 @@ const page = 'simple';
                           <td>Update software</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
+                              <div
+                                class="progress-bar progress-bar-danger"
+                                style="width: 55%"
+                              >
+                              </div>
                             </div>
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
@@ -232,30 +310,52 @@ const page = 'simple';
                           <td>Clean database</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
+                              <div
+                                class="progress-bar text-bg-warning"
+                                style="width: 70%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-warning">70%</span></td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
                         </tr>
                         <tr>
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
-                            <div class="progress progress-xs progress-striped active">
+                            <div
-                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-primary"
+                                style="width: 30%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-primary">30%</span></td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
                         </tr>
                         <tr>
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
-                            <div class="progress progress-xs progress-striped active">
+                            <div
-                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-success"
+                                style="width: 90%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-success">90%</span></td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
                         </tr>
                       </tbody>
                     </table>
@@ -285,7 +385,11 @@ const page = 'simple';
                           <td>Update software</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar progress-bar-danger" style="width: 55%"></div>
+                              <div
+                                class="progress-bar progress-bar-danger"
+                                style="width: 55%"
+                              >
+                              </div>
                             </div>
                           </td>
                           <td><span class="badge text-bg-danger">55%</span></td>
@@ -295,30 +399,52 @@ const page = 'simple';
                           <td>Clean database</td>
                           <td>
                             <div class="progress progress-xs">
-                              <div class="progress-bar text-bg-warning" style="width: 70%"></div>
+                              <div
+                                class="progress-bar text-bg-warning"
+                                style="width: 70%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-warning">70%</span></td>
+                          <td>
+                            <span class="badge text-bg-warning">70%</span>
+                          </td>
                         </tr>
                         <tr>
                           <td>3.</td>
                           <td>Cron job running</td>
                           <td>
-                            <div class="progress progress-xs progress-striped active">
+                            <div
-                              <div class="progress-bar text-bg-primary" style="width: 30%"></div>
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-primary"
+                                style="width: 30%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-primary">30%</span></td>
+                          <td>
+                            <span class="badge text-bg-primary">30%</span>
+                          </td>
                         </tr>
                         <tr>
                           <td>4.</td>
                           <td>Fix and squish bugs</td>
                           <td>
-                            <div class="progress progress-xs progress-striped active">
+                            <div
-                              <div class="progress-bar text-bg-success" style="width: 90%"></div>
+                              class="progress progress-xs progress-striped active"
+                            >
+                              <div
+                                class="progress-bar text-bg-success"
+                                style="width: 90%"
+                              >
+                              </div>
                             </div>
                           </td>
-                          <td><span class="badge text-bg-success">90%</span></td>
+                          <td>
+                            <span class="badge text-bg-success">90%</span>
+                          </td>
                         </tr>
                       </tbody>
                     </table>
@@ -342,6 +468,5 @@ const page = 'simple';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/widgets/cards.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Widgets - Cards';
+const title = "AdminLTE 4 | Widgets - Cards";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'widgets';
+const mainPage = "widgets";
-const page = 'cards';
+const page = "cards";
 ---
 
 <!DOCTYPE html>
@@ -38,7 +38,9 @@ const page = 'cards';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Cards</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Cards
+                  </li>
                 </ol>
               </div>
             </div>
@@ -62,15 +64,18 @@ const page = 'cards';
                     <h3 class="card-title">Expandable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i class="fa-solid fa-plus"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -82,15 +87,18 @@ const page = 'cards';
                     <h3 class="card-title">Collapsable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i class="fa-solid fa-minus"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -102,15 +110,18 @@ const page = 'cards';
                     <h3 class="card-title">Removable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                      >
+                        <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -122,15 +133,18 @@ const page = 'cards';
                     <h3 class="card-title">Maximizable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-maximize"
+                      >
+                        <i class="fa-solid fa-expand"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -148,15 +162,18 @@ const page = 'cards';
                     <h3 class="card-title">Expandable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i class="fa-solid fa-plus"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -168,15 +185,18 @@ const page = 'cards';
                     <h3 class="card-title">Collapsable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i class="fa-solid fa-minus"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -188,15 +208,18 @@ const page = 'cards';
                     <h3 class="card-title">Removable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                      >
+                        <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -208,15 +231,18 @@ const page = 'cards';
                     <h3 class="card-title">Maximizable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-maximize"
+                      >
+                        <i class="fa-solid fa-expand"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -225,7 +251,7 @@ const page = 'cards';
             </div>
             <!--end::Row-->
 
-            <h5 class="mb-2">Card with <code>.text-bg-*</code> </h5>
+            <h5 class="mb-2">Card with <code>.text-bg-*</code></h5>
             <!--begin::Row-->
             <div class="row">
               <div class="col-md-3">
@@ -234,15 +260,18 @@ const page = 'cards';
                     <h3 class="card-title">Expandable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i class="fa-solid fa-plus"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -254,15 +283,18 @@ const page = 'cards';
                     <h3 class="card-title">Collapsable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-collapse"
+                      >
+                        <i class="fa-solid fa-minus"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -274,15 +306,18 @@ const page = 'cards';
                     <h3 class="card-title">Removable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-dismiss="card-remove"
+                      >
+                        <i class="fa-solid fa-times"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -294,15 +329,18 @@ const page = 'cards';
                     <h3 class="card-title">Maximizable</h3>
 
                     <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
+                      <button
+                        type="button"
+                        class="btn btn-tool"
+                        data-lte-toggle="card-maximize"
+                      >
+                        <i class="fa-solid fa-expand"></i>
                       </button>
                     </div>
                     <!-- /.card-tools -->
                   </div>
                   <!-- /.card-header -->
-                  <div class="card-body">
+                  <div class="card-body">The body of the card</div>
-                    The body of the card
-                  </div>
                   <!-- /.card-body -->
                 </div>
                 <!-- /.card -->
@@ -322,6 +360,5 @@ const page = 'cards';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/widgets/info-box.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Widgets - Info Box';
+const title = "AdminLTE 4 | Widgets - Info Box";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'widgets';
+const mainPage = "widgets";
-const page = 'info-box';
+const page = "info-box";
 ---
 
 <!DOCTYPE html>
@@ -38,7 +38,9 @@ const page = 'info-box';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Info Box</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Info Box
+                  </li>
                 </ol>
               </div>
             </div>
@@ -56,7 +58,9 @@ const page = 'info-box';
             <div class="row">
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
+                  <span class="info-box-icon text-bg-primary shadow-sm">
+                    <i class="fa-solid fa-cog"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">CPU Traffic</span>
@@ -73,7 +77,9 @@ const page = 'info-box';
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
+                  <span class="info-box-icon text-bg-success shadow-sm">
+                    <i class="fa-solid fa-shopping-cart"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Sales</span>
@@ -90,7 +96,9 @@ const page = 'info-box';
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
+                  <span class="info-box-icon text-bg-warning shadow-sm">
+                    <i class="fa-solid fa-users"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">New Members</span>
@@ -104,7 +112,9 @@ const page = 'info-box';
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box">
-                  <span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
+                  <span class="info-box-icon text-bg-danger shadow-sm">
+                    <i class="fa-solid fa-thumbs-up"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Likes</span>
@@ -119,12 +129,18 @@ const page = 'info-box';
             <!--end::Row-->
 
             <!-- =========================================================== -->
-            <h5 class="mb-2">Info Box With Custom Shadows <small><i>Using Bootstrap's Shadow Utility</i></small></h5>
+            <h5 class="mb-2">
+              Info Box With Custom Shadows <small>
+                <i>Using Bootstrap's Shadow Utility</i>
+              </small>
+            </h5>
             <!--begin::Row-->
             <div class="row">
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-none">
-                  <span class="info-box-icon text-bg-primary shadow-sm"><i class="fa-solid fa-cog"></i></span>
+                  <span class="info-box-icon text-bg-primary shadow-sm">
+                    <i class="fa-solid fa-cog"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">CPU Traffic</span>
@@ -141,7 +157,9 @@ const page = 'info-box';
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-sm">
-                  <span class="info-box-icon text-bg-success shadow-sm"><i class="fa-solid fa-shopping-cart"></i></span>
+                  <span class="info-box-icon text-bg-success shadow-sm">
+                    <i class="fa-solid fa-shopping-cart"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Sales</span>
@@ -158,7 +176,9 @@ const page = 'info-box';
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow">
-                  <span class="info-box-icon text-bg-warning shadow-sm"><i class="fa-solid fa-users"></i></span>
+                  <span class="info-box-icon text-bg-warning shadow-sm">
+                    <i class="fa-solid fa-users"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">New Members</span>
@@ -172,7 +192,9 @@ const page = 'info-box';
 
               <div class="col-12 col-sm-6 col-md-3">
                 <div class="info-box shadow-lg">
-                  <span class="info-box-icon text-bg-danger shadow-sm"><i class="fa-solid fa-thumbs-up"></i></span>
+                  <span class="info-box-icon text-bg-danger shadow-sm">
+                    <i class="fa-solid fa-thumbs-up"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Likes</span>
@@ -192,7 +214,9 @@ const page = 'info-box';
             <div class="row">
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-primary">
-                  <span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
+                  <span class="info-box-icon">
+                    <i class="fa-regular fa-bookmark"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Bookmarks</span>
@@ -212,7 +236,9 @@ const page = 'info-box';
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-success">
-                  <span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
+                  <span class="info-box-icon">
+                    <i class="fa-regular fa-thumbs-up"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Likes</span>
@@ -232,7 +258,9 @@ const page = 'info-box';
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-warning">
-                  <span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
+                  <span class="info-box-icon">
+                    <i class="fa-regular fa-calendar-alt"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Events</span>
@@ -252,7 +280,9 @@ const page = 'info-box';
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-danger">
-                  <span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
+                  <span class="info-box-icon">
+                    <i class="fa-solid fa-comments"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Comments</span>
@@ -279,7 +309,9 @@ const page = 'info-box';
             <div class="row">
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-primary bg-gradient">
-                  <span class="info-box-icon"><i class="fa-regular fa-bookmark"></i></span>
+                  <span class="info-box-icon">
+                    <i class="fa-regular fa-bookmark"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Bookmarks</span>
@@ -299,7 +331,9 @@ const page = 'info-box';
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-success bg-gradient">
-                  <span class="info-box-icon"><i class="fa-regular fa-thumbs-up"></i></span>
+                  <span class="info-box-icon">
+                    <i class="fa-regular fa-thumbs-up"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Likes</span>
@@ -319,7 +353,9 @@ const page = 'info-box';
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-warning bg-gradient">
-                  <span class="info-box-icon"><i class="fa-regular fa-calendar-alt"></i></span>
+                  <span class="info-box-icon">
+                    <i class="fa-regular fa-calendar-alt"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Events</span>
@@ -339,7 +375,9 @@ const page = 'info-box';
               <!-- /.col -->
               <div class="col-md-3 col-sm-6 col-12">
                 <div class="info-box text-bg-danger bg-gradient">
-                  <span class="info-box-icon"><i class="fa-solid fa-comments"></i></span>
+                  <span class="info-box-icon">
+                    <i class="fa-solid fa-comments"></i>
+                  </span>
 
                   <div class="info-box-content">
                     <span class="info-box-text">Comments</span>
@@ -371,6 +409,5 @@ const page = 'info-box';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>

src/html/pages/widgets/small-box.astro

@@ -1,14 +1,14 @@
 ---
-import Head from '@components/_head.astro';
+import Head from "@components/_head.astro";
-import Footer from '@components/dashboard/_footer.astro';
+import Footer from "@components/dashboard/_footer.astro";
-import Topbar from '@components/dashboard/_topbar.astro';
+import Topbar from "@components/dashboard/_topbar.astro";
-import Sidenav from '@components/dashboard/_sidenav.astro';
+import Sidenav from "@components/dashboard/_sidenav.astro";
-import Scripts from '@components/_scripts.astro';
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Widgets - Small Box';
+const title = "AdminLTE 4 | Widgets - Small Box";
-const path = '../../../dist';
+const path = "../../../dist";
-const mainPage = 'widgets';
+const mainPage = "widgets";
-const page = 'small-box';
+const page = "small-box";
 ---
 
 <!DOCTYPE html>
@@ -38,7 +38,9 @@ const page = 'small-box';
               <div class="col-sm-6">
                 <ol class="breadcrumb float-sm-end">
                   <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Small Box</li>
+                  <li class="breadcrumb-item active" aria-current="page">
+                    Small Box
+                  </li>
                 </ol>
               </div>
             </div>
@@ -63,10 +65,20 @@ const page = 'small-box';
 
                     <p>New Orders</p>
                   </div>
-                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <svg
-                    <path d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"></path>
+                    class="small-box-icon"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M2.25 2.25a.75.75 0 000 1.5h1.386c.17 0 .318.114.362.278l2.558 9.592a3.752 3.752 0 00-2.806 3.63c0 .414.336.75.75.75h15.75a.75.75 0 000-1.5H5.378A2.25 2.25 0 017.5 15h11.218a.75.75 0 00.674-.421 60.358 60.358 0 002.96-7.228.75.75 0 00-.525-.965A60.864 60.864 0 005.68 4.509l-.232-.867A1.875 1.875 0 003.636 2.25H2.25zM3.75 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0zM16.5 20.25a1.5 1.5 0 113 0 1.5 1.5 0 01-3 0z"
+                    ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                  <a href="#" class="small-box-footer"></a>
+                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                  </a>
                 </div>
               </div>
               <!-- ./col -->
@@ -78,10 +90,20 @@ const page = 'small-box';
 
                     <p>Bounce Rate</p>
                   </div>
-                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <svg
-                    <path d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"></path>
+                    class="small-box-icon"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M18.375 2.25c-1.035 0-1.875.84-1.875 1.875v15.75c0 1.035.84 1.875 1.875 1.875h.75c1.035 0 1.875-.84 1.875-1.875V4.125c0-1.036-.84-1.875-1.875-1.875h-.75zM9.75 8.625c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v11.25c0 1.035-.84 1.875-1.875 1.875h-.75a1.875 1.875 0 01-1.875-1.875V8.625zM3 13.125c0-1.036.84-1.875 1.875-1.875h.75c1.036 0 1.875.84 1.875 1.875v6.75c0 1.035-.84 1.875-1.875 1.875h-.75A1.875 1.875 0 013 19.875v-6.75z"
+                    ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                  <a href="#" class="small-box-footer">
+                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                  </a>
                 </div>
               </div>
               <!-- ./col -->
@@ -93,10 +115,20 @@ const page = 'small-box';
 
                     <p>User Registrations</p>
                   </div>
-                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <svg
-                    <path d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"></path>
+                    class="small-box-icon"
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      d="M6.25 6.375a4.125 4.125 0 118.25 0 4.125 4.125 0 01-8.25 0zM3.25 19.125a7.125 7.125 0 0114.25 0v.003l-.001.119a.75.75 0 01-.363.63 13.067 13.067 0 01-6.761 1.873c-2.472 0-4.786-.684-6.76-1.873a.75.75 0 01-.364-.63l-.001-.122zM19.75 7.5a.75.75 0 00-1.5 0v2.25H16a.75.75 0 000 1.5h2.25v2.25a.75.75 0 001.5 0v-2.25H22a.75.75 0 000-1.5h-2.25V7.5z"
+                    ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                  <a href="#" class="small-box-footer">
+                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                  </a>
                 </div>
               </div>
               <!-- ./col -->
@@ -108,11 +140,27 @@ const page = 'small-box';
 
                     <p>Unique Visitors</p>
                   </div>
-                  <svg class="small-box-icon" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <svg
-                    <path clip-rule="evenodd" fill-rule="evenodd" d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"></path>
+                    class="small-box-icon"
-                    <path clip-rule="evenodd" fill-rule="evenodd" d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"></path>
+                    fill="currentColor"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                    aria-hidden="true"
+                  >
+                    <path
+                      clip-rule="evenodd"
+                      fill-rule="evenodd"
+                      d="M2.25 13.5a8.25 8.25 0 018.25-8.25.75.75 0 01.75.75v6.75H18a.75.75 0 01.75.75 8.25 8.25 0 01-16.5 0z"
+                    ></path>
+                    <path
+                      clip-rule="evenodd"
+                      fill-rule="evenodd"
+                      d="M12.75 3a.75.75 0 01.75-.75 8.25 8.25 0 018.25 8.25.75.75 0 01-.75.75h-7.5a.75.75 0 01-.75-.75V3z"
+                    ></path>
                   </svg>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
+                  <a href="#" class="small-box-footer">
+                    More info <i class="fa-solid fa-arrow-circle-right"></i>
+                  </a>
                 </div>
               </div>
               <!-- ./col -->
@@ -130,6 +178,5 @@ const page = 'small-box';
     <!--begin::Script-->
     <Scripts path={path} />
     <!--end::Script-->
-  </body>
+  </body><!--end::Body-->
-  <!--end::Body-->
 </html>