From 12162997868e73a2d05b6e992cd81282ddd3d08b Mon Sep 17 00:00:00 2001
From: Daniel <50356015+danny007in@users.noreply.github.com>
Date: Fri, 29 Jan 2021 00:39:32 +0530
Subject: [PATCH] docs and readme update

---
 README.md                     | 18 +++++++++++++++---
 docs/_includes/preloader.html |  3 +++
 docs/_includes/sidebar.html   | 10 ++++++++++
 docs/_layouts/default.html    |  2 ++
 docs/index.md                 | 21 ++++++++++++++-------
 5 files changed, 44 insertions(+), 10 deletions(-)
 create mode 100644 docs/_includes/preloader.html

diff --git a/README.md b/README.md
index 4eecdd9fc..0bfb9a7b5 100644
--- a/README.md
+++ b/README.md
@@ -2,7 +2,7 @@
 
 [![npm version](https://img.shields.io/npm/v/admin-lte/latest.svg)](https://www.npmjs.com/package/admin-lte)
 [![Packagist](https://img.shields.io/packagist/v/almasaeed2010/adminlte.svg)](https://packagist.org/packages/almasaeed2010/adminlte)
-[![CDNJS](https://img.shields.io/cdnjs/v/admin-lte.svg)](https://cdnjs.com/libraries/admin-lte)
+[![cdn version](https://data.jsdelivr.com/v1/package/npm/admin-lte/badge)](https://www.jsdelivr.com/package/npm/admin-lte)
 [![Gitpod Ready-to-Code](https://img.shields.io/badge/Gitpod-Ready--to--Code-blue?logo=gitpod)](https://gitpod.io/from-referrer/)
 
 **AdminLTE** is a fully responsive administration template. Based on **[Bootstrap 4.5](https://getbootstrap.com/)** framework and also the JS/jQuery plugin.
@@ -26,10 +26,22 @@ There are multiple ways to install AdminLTE.
 
 ### Download & Changelog:
 
-Download from GitHub latest release [AdminLTE 3](https://github.com/ColorlibHQ/AdminLTE/releases/latest).
-Visit the [releases](https://github.com/ColorlibHQ/AdminLTE/releases) page to view the changelog.
+Always Recommended to download from GitHub latest release [AdminLTE 3](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 2](https://github.com/ColorlibHQ/AdminLTE/releases/tag/v2.4.18) / [AdminLTE 1](https://github.com/ColorlibHQ/AdminLTE/releases/tag/1.3.1).
 
+### Grab from [jsdelivr](https://github.com/ColorlibHQ/AdminLTE/releases/latest) 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@3.1.0/dist/js/adminlte.min.js"></script>
+```
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.1.0/dist/css/adminlte.min.css">
+```
+
 ### Using The Command Line:
 
 _**Important Note**: To install it via npm/Yarn, you need at least Node.js 10 or higher._
diff --git a/docs/_includes/preloader.html b/docs/_includes/preloader.html
new file mode 100644
index 000000000..de27f5161
--- /dev/null
+++ b/docs/_includes/preloader.html
@@ -0,0 +1,3 @@
+<div class="preloader flex-column justify-content-center align-items-center">
+  <img class="animation__shake" src="{{ '/assets/img/AdminLTELogo.png' | prepend: site.baseurl }}" alt="AdminLTELogo" height="60" width="60">
+</div>
diff --git a/docs/_includes/sidebar.html b/docs/_includes/sidebar.html
index 99d609ebe..d6cf1c3eb 100644
--- a/docs/_includes/sidebar.html
+++ b/docs/_includes/sidebar.html
@@ -4,6 +4,16 @@
     <img src="{{ '/assets/img/logo-xl.png' | prepend: site.baseurl }}" alt="AdminLTE Docs Logo Large" class="brand-image-xs logo-xl" style="left: 12px">
   </a>
   <div class="sidebar">
+    <div class="form-inline">
+      <div class="input-group" data-widget="sidebar-search">
+        <input class="form-control form-control-sidebar" type="search" placeholder="Search" aria-label="Search">
+        <div class="input-group-append">
+          <button class="btn btn-sidebar">
+            <i class="fas fa-search fa-fw"></i>
+          </button>
+        </div>
+      </div>
+    </div>
     <nav class="mt-2">
       <ul class="nav nav-pills nav-sidebar nav-child-indent flex-column" data-widget="treeview" role="menu">
        {% for item in site.navigation -%}
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 84c27dc73..347476889 100644
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -6,6 +6,8 @@
   <body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
     <div class="wrapper">
 
+      {%- include preloader.html -%}
+
       {%- include navbar.html -%}
       {%- include sidebar.html -%}
 
diff --git a/docs/index.md b/docs/index.md
index 23e0cd186..d4c8cdec6 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -5,14 +5,25 @@ title: Introduction
 
 AdminLTE can be installed using multiple methods. Pick your favorite method from the list below. Please be sure to check the dependencies section before continuing. 
 
-## Download
-{: .h3 }
 
-### From GitHub
+### Download from GitHub
 
 Visit the releases section on GitHub and download the [latest release](https://github.com/ColorlibHQ/AdminLTE/releases).
 
 
+### Grab from [jsdelivr](https://github.com/ColorlibHQ/AdminLTE/releases/latest) 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@3.1.0/dist/js/adminlte.min.js"></script>
+```
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/admin-lte@3.1.0/dist/css/adminlte.min.css">
+```
+
+
 ### Command Line
 
 #### Via NPM
@@ -38,7 +49,3 @@ composer require "almasaeed2010/adminlte=~3.0"
 ```bash
 git clone https://github.com/ColorlibHQ/AdminLTE.git
 ```
-
-### From CDN
-
-[https://www.jsdelivr.com/package/npm/admin-lte](https://www.jsdelivr.com/package/npm/admin-lte)
\ No newline at end of file