admin-lte 4.0.0-alpha2 → 4.0.0-beta1

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-beta1/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-beta1/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
+npm install admin-lte@4.0.0-beta1 --save
 ```
+
 #### Via Yarn
+
 ```bash
-yarn add admin-lte@4.0.0-alpha2
+yarn add admin-lte@4.0.0-beta1
 ```
+
 #### Via Composer
+
 ```bash
-composer require "almasaeed2010/adminlte=4.0.0-alpha2"
+composer require "almasaeed2010/adminlte=4.0.0-beta1"
 ```
+
 #### 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>