admin-lte 4.0.0-alpha2 → 4.0.0-alpha3

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

@@ -0,0 +1,129 @@
+The sidebar used in this page to the left provides an example of what your sidebar would look like. Construction of a sidebar:
+
+```html
+<!--begin::Sidebar-->
+<aside class="app-sidebar bg-body-secondary shadow" data-bs-theme="dark">
+  <!--begin::Sidebar Brand-->
+  <div class="sidebar-brand">
+    <!--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"
+      />
+      <!--end::Brand Image-->
+      <!--begin::Brand Text-->
+      <span class="brand-text fw-light">AdminLTE 4</span>
+      <!--end::Brand Text-->
+    </a>
+    <!--end::Brand Link-->
+  </div>
+  <!--end::Sidebar Brand-->
+  <!--begin::Sidebar Wrapper-->
+  <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"
+      >
+        <li class="nav-header">Nav Header</li>
+        <li class="nav-item">
+          <a href="./index.html" class="nav-link">
+            <i class="nav-icon bi bi-circle-fill"></i>
+            <p>Level 1</p>
+          </a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link">
+            <i class="nav-icon bi bi-circle-fill"></i>
+            <p>
+              Treeview
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="./index.html" class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>
+                  Level 2 (Badge)
+                  <span
+                    class="nav-badge badge text-bg-secondary me-3"
+                  >
+                    6
+                  </span>
+                </p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="./index.html" class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+        <li class="nav-item">
+          <a href="./index.html" class="nav-link active">
+            <i class="nav-icon bi bi-circle-fill"></i>
+            <p>Level 1 Active</p>
+          </a>
+        </li>
+
+        <li class="nav-item menu-open">
+          <a href="#" class="nav-link active">
+            <i class="nav-icon bi bi-circle-fill"></i>
+            <p>
+              Treeview Menu Open
+              <i class="nav-arrow bi bi-chevron-right"></i>
+            </p>
+          </a>
+          <ul class="nav nav-treeview">
+            <li class="nav-item">
+              <a href="./index.html" class="nav-link active">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Level 2 Active</p>
+              </a>
+            </li>
+            <li class="nav-item">
+              <a href="./index.html" class="nav-link">
+                <i class="nav-icon bi bi-circle"></i>
+                <p>Level 2</p>
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+      <!--end::Sidebar Menu-->
+    </nav>
+  </div>
+  <!--end::Sidebar Wrapper-->
+</aside>
+<!--end::Sidebar-->
+```
+
+## Alternate Logo
+
+You can use two logo images instead of logo with text, you only need to change the markup to this:
+
+```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
+      src="./assets/img/AdminLTEFullLogo.png"
+      alt="AdminLTE Logo Large"
+      class="brand-image-xs logo-xl opacity-75"
+    />
+  </a>
+</div>
+```

package/src/html/components/docs/faq.mdx

@@ -0,0 +1,11 @@
+#### Can AdminLTE be used with WordPress?
+
+AdminLTE is an HTML template that can be used for any purpose. However, it is not made to be easily installed on WordPress. It will require some effort and enough knowledge of the WordPress script to do so.
+
+#### Is there an integration guide for PHP frameworks such as Yii or Symfony?
+
+Short answer, no. However, there are forks and tutorials around the web that provide info on how to integrate with many different frameworks. There are even versions of AdminLTE that are integrated with jQuery ajax, AngularJS and/or MVC5 ASP .NET.
+
+#### How do I get notified of new AdminLTE versions?
+
+You may watch the [releases on GitHub](https://github.com/ColorlibHQ/AdminLTE).

package/src/html/components/docs/how-to-contribute.mdx

@@ -0,0 +1,34 @@
+# Contributing to AdminLTE
+
+Contributions are always **welcome and recommended**! Here is how for beginner's: [Get started with open source click here](https://youtu.be/GbqSvJs-6W4)
+
+1. Contribution Requirements :
+    * When you contribute, you agree to give a non-exclusive license to AdminLTE.io to use that contribution in any context as we (AdminLTE.io) see appropriate.
+    * If you use content provided by another party, it must be appropriately licensed using an [open source](https://opensource.org/licenses) license.
+    * Contributions are only accepted through GitHub pull requests.
+    * Finally, contributed code must work in all supported browsers (see above for browser support).
+2. Installation :
+    * Fork the repository ([here is the guide](https://help.github.com/articles/fork-a-repo/)).
+    * Clone to your machine
+
+    ```bash
+    git clone https://github.com/YOUR_USERNAME/AdminLTE.git
+    ```
+    * Create a new branch from `master`
+3. Compile dist files (Development) :
+    * To compile the dist files you need Node.js 18 or higher/npm (node package manager)
+    * `npm install` (install npm deps)
+    * `npm run dev` (developer mode, autocompile with browsersync support for live demo)
+    * Make your changes only in `./src` Folder OR `package.json` in any files which are necessary for contribution
+    * Do not make changes in `./dist/**` Because it contains compiled files and do not include in PR (Pull Request)
+    * `npm run production` (compile css/js files and test all pages are perfectly working fine, before creating a pull request)
+4. Create a pull request to `master` branch
+
+## Online one-click setup for contributing
+
+You can use [Codespace](https://docs.github.com/en/codespaces) an online IDE which is free for Open Source for working on issues or making PRs (Pull Requests). With a single click it will launch a workspace and automatically:
+
+- clone the `AdminLTE` repo.
+- Open with [Codespace](https://docs.github.com/en/codespaces) or [![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/from-referrer/)
+- install the dependencies.
+- run `npm run dev` to start the server.

package/src/html/components/docs/{introduction/index.md → 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
 ```

package/src/html/components/docs/license.mdx

@@ -0,0 +1,9 @@
+AdminLTE is an open source project that is licensed under the [MIT license](https://opensource.org/licenses/MIT). This allows you to do pretty much anything you want as long as you include the copyright in "all copies or substantial portions of the Software." Attribution is not required (though very much appreciated).
+
+<h5 class="text-bold text-dark mt-3">What You Are <span class="text-success">Allowed</span> To Do With AdminLTE</h5>
+
+- Use in commercial projects.
+- Use in personal/private projects.
+- Modify and change the work.
+- Distribute the code.
+- Sublicense: incorporate the work into something that has a more restrictive license.

package/src/html/components/javascript/treeview.mdx

@@ -0,0 +1,39 @@
+The Treeview plugin converts a nested list into a tree view where sub menus can be expanded.
+
+##### Usage
+
+This plugin can be used as the data api.
+
+**Data API**
+
+Add `data-lte-toggle="treeview"` to any ul or ol element to activate the plugin.
+
+```html
+<ul data-lte-toggle="treeview">
+  <li><a href="#">One Level</a></li>
+  <li class="nav-item menu-open">
+    <a class="nav-link" href="#">Multilevel</a>
+    <ul class="nav-treeview">
+      <li><a href="#">Level 2</a></li>
+    </ul>
+  </li>
+</ul>
+```
+
+##### Example
+
+<ul data-lte-toggle="treeview">
+  <li>
+    <a href="#">One Level</a>
+  </li>
+  <li class="nav-item menu-open">
+    <a class="nav-link" href="#">
+      Multilevel
+    </a>
+    <ul class="nav-treeview">
+      <li>
+        <a href="#">Level 2</a>
+      </li>
+    </ul>
+  </li>
+</ul>

package/src/html/pages/UI/timeline.astro

@@ -1,28 +1,36 @@
 ---
-import Head from '@components/_head.astro';
-import Footer from '@components/dashboard/_footer.astro';
-import Topbar from '@components/dashboard/_topbar.astro';
-import Sidenav from '@components/dashboard/_sidenav.astro';
-import Scripts from '@components/_scripts.astro';
+import Head from "@components/_head.astro";
+import Footer from "@components/dashboard/_footer.astro";
+import Topbar from "@components/dashboard/_topbar.astro";
+import Sidenav from "@components/dashboard/_sidenav.astro";
+import Scripts from "@components/_scripts.astro";
 
-const title = 'AdminLTE 4 | Timeline Elements'
-const path = '../../../dist'
-const mainPage = 'ui-elements'
-const page = 'timeline'
+const title = "AdminLTE 4 | Timeline Elements";
+const path = "../../../dist";
+const mainPage = "ui-elements";
+const page = "timeline";
 ---
+
 <!DOCTYPE html>
 <html lang="en">
+  <!--begin::Head-->
   <head>
     <Head title={title} path={path} />
   </head>
+  <!--end::Head-->
+  <!--begin::Body-->
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
     <div class="app-wrapper">
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
-      <!-- Main content -->
+      <!--begin::App Main-->
       <main class="app-main">
+        <!--begin::App Content Header-->
         <div class="app-content-header">
+          <!--begin::Container-->
           <div class="container-fluid">
+            <!--begin::Row-->
             <div class="row">
               <div class="col-sm-6">
                 <h3 class="mb-0">Timeline</h3>
@@ -30,14 +38,20 @@ 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>
+            <!--end::Row-->
           </div>
+          <!--end::Container-->
         </div>
-        <!-- Main content -->
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
         <div class="app-content">
+          <!--begin::Container-->
           <div class="container-fluid">
             <!-- Timelime example  -->
             <div class="row">
@@ -51,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 bi bi-envelope text-bg-primary"
+                    >
+                    </i>
                     <div class="timeline-item">
-                      <span class="time"><i class="fa-solid fa-clock"></i> 12:05</span>
-                      <h3 class="timeline-header"><a href="#">Support Team</a> sent you an email</h3>
+                      <span class="time">
+                        <i class="bi bi-clock-fill"></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,
-                        weebly ning heekya handango imeem plugg dopplr jibjab, movity
-                        jajah plickers sifteo edmodo ifttt zimbra. Babblely odeo kaboodle
-                        quora plaxo ideeli hulu weebly balihoo...
+                        Etsy doostang zoodles disqus groupon greplin oooj voxy
+                        zoodles, weebly ning heekya handango imeem plugg dopplr
+                        jibjab, movity jajah plickers sifteo edmodo ifttt
+                        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>
@@ -71,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 bi bi-person text-bg-success">
+                    </i>
                     <div class="timeline-item">
-                      <span class="time"><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>
+                      <span class="time">
+                        <i class="bi bi-clock-fill"></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 bi bi-chat-text-fill text-bg-warning"
+                    >
+                    </i>
                     <div class="timeline-item">
-                      <span class="time"><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>
+                      <span class="time">
+                        <i class="bi bi-clock-fill"></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!
-                        Switzerland is small and neutral!
-                        We are more like Germany, ambitious and misunderstood!
+                        Take me to your leader! Switzerland is small and
+                        neutral! We are more like Germany, ambitious and
+                        misunderstood!
                       </div>
                       <div class="timeline-footer">
                         <a class="btn btn-warning btn-sm">View comment</a>
@@ -102,57 +136,86 @@ const page = 'timeline'
                   <!-- /.timeline-label -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-camera text-bg-primary"></i>
+                    <i class="timeline-icon bi bi-camera text-bg-primary">
+                    </i>
                     <div class="timeline-item">
-                      <span class="time"><i class="fa-solid fa-clock"></i> 2 days ago</span>
-                      <h3 class="timeline-header"><a href="#">Mina Lee</a> uploaded new photos</h3>
+                      <span class="time">
+                        <i class="bi bi-clock-fill"></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 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="..."
+                        />
+                        <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>
                   <!-- END timeline item -->
                   <!-- timeline item -->
                   <div>
-                    <i class="timeline-icon fa-solid fa-video text-bg-info"></i>
+                    <i class="timeline-icon bi bi-camera-film 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="bi bi-clock-fill"></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 bi bi-clock-fill text-bg-secondary"
+                    >
+                    </i>
                   </div>
                 </div>
               </div>
               <!-- /.col -->
             </div>
             <!-- /.row -->
-          </div><!-- /.container-fluid -->
+          </div>
+          <!--end::Container-->
         </div>
-        <!-- /.content -->
+        <!--end::App Content-->
       </main>
-      <!-- /.app-content -->
-
+      <!--end::App Main-->
       <Footer />
     </div>
-    <!--  ./app-wrapper -->
-
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
     <Scripts path={path} />
-  </body>
+    <!--end::Script-->
+  </body><!--end::Body-->
 </html>

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

@@ -2,28 +2,36 @@
 import Head from "@components/_head.astro";
 import Footer from "@components/dashboard/_footer.astro";
 import Topbar from "@components/dashboard/_topbar.astro";
-import BrowserSupport from "@components/docs/browser-support/index.md";
+import BrowserSupport from "@components/docs/browser-support.mdx";
 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";
 ---
 
 <!DOCTYPE html>
 <html lang="en">
+  <!--begin::Head-->
   <head>
     <Head title={title} path={path} />
   </head>
+  <!--end::Head-->
+  <!--begin::Body-->
   <body class="layout-fixed sidebar-expand-lg bg-body-tertiary">
+    <!--begin::App Wrapper-->
     <div class="app-wrapper">
       <Topbar path={path} />
       <Sidenav path={path} mainPage={mainPage} page={page} />
-      <!-- Main content -->
+      <!--begin::App Main-->
       <main class="app-main">
+        <!--begin::App Content Header-->
         <div class="app-content-header">
+          <!--begin::Container-->
           <div class="container-fluid">
+            <!--begin::Row-->
             <div class="row">
               <div class="col-sm-6">
                 <h3 class="mb-0">Browser Support</h3>
@@ -37,22 +45,27 @@ const page = "browser-support";
                 </ol>
               </div>
             </div>
+            <!--end::Row-->
           </div>
+          <!--end::Container-->
         </div>
-        <!-- Main content -->
+        <!--end::App Content Header-->
+        <!--begin::App Content-->
         <div class="app-content">
+          <!--begin::Container-->
           <div class="container-fluid">
             <BrowserSupport />
-          </div><!-- /.container-fluid -->
+          </div>
+          <!--end::Container-->
         </div>
-        <!-- /.content -->
+        <!--end::App Content-->
       </main>
-      <!-- /.app-content -->
-
+      <!--end::App Main-->
       <Footer />
     </div>
-    <!--  ./app-wrapper -->
-
+    <!--end::App Wrapper-->
+    <!--begin::Script-->
     <Scripts path={path} />
-  </body>
+    <!--end::Script-->
+  </body><!--end::Body-->
 </html>