gulp setup

.eslintignore

@@ -3,3 +3,4 @@
 /dist/js/adminlte.js
 /docs/
 /docs_html/
+/.temp/

.gitignore

@@ -69,3 +69,4 @@ TODO
 test.html
 ad.js
 /.cache/
+/.temp/

.stylelintignore

@@ -5,3 +5,4 @@
 **/docs_html/
 **/plugins/
 **/.cache/
+/.temp/

gulpfile.js

@@ -0,0 +1,199 @@
+/* eslint-disable camelcase */
+/* eslint-disable no-undef */
+/* eslint-disable unicorn/prefer-module */
+
+// const autoprefixer = require('autoprefixer')
+const browserSync = require('browser-sync').create()
+const cleanCss = require('gulp-clean-css')
+const del = require('del')
+const gulp = require('gulp')
+const npmDist = require('gulp-npm-dist')
+const sass = require('gulp-sass')
+const wait = require('gulp-wait')
+const postcss = require('gulp-postcss')
+// const rtlcss = require('rtlcss')
+const sourcemaps = require('gulp-sourcemaps')
+const fileinclude = require('gulp-file-include')
+
+// Define paths
+
+const paths = {
+  dist: {
+    base: './dist/',
+    css: './dist/css',
+    html: './dist/pages',
+    assets: './dist/assets',
+    img: './dist/assets/img',
+    vendor: './dist/vendor'
+  },
+  base: {
+    base: './',
+    node: './node_modules'
+  },
+  src: {
+    base: './src/',
+    css: './src/css',
+    html: './src/pages/**/*.html',
+    assets: './src/assets/**/*.*',
+    partials: './src/partials/**/*.html',
+    scss: './src/scss',
+    node_modules: './node_modules/',
+    vendor: './vendor'
+  },
+  temp: {
+    base: './.temp/',
+    css: './.temp/css',
+    html: './.temp/pages',
+    assets: './.temp/assets',
+    vendor: './.temp/vendor'
+  }
+}
+
+function postcssCallback() {
+  return {
+    map: {
+      inline: false,
+      annotation: true,
+      sourcesContent: true
+    },
+    plugins: [
+      require('autoprefixer')({
+        cascade: false
+      })
+    ]
+  }
+}
+
+// Compile SCSS
+gulp.task('scss', () => {
+  return gulp.src(paths.src.scss + '/adminlte.scss')
+      .pipe(wait(500))
+      .pipe(sourcemaps.init())
+      .pipe(sass({
+        outputStyle: 'expanded',
+        includePaths: ['./node_modules/']
+      }).on('error', sass.logError))
+      .pipe(postcss(postcssCallback))
+      .pipe(sourcemaps.write('.'))
+      .pipe(gulp.dest(paths.temp.css))
+      .pipe(browserSync.stream())
+})
+
+gulp.task('index', () => {
+  return gulp.src([paths.src.base + '*.html'])
+      .pipe(fileinclude({
+        prefix: '@@',
+        basepath: './src/partials/',
+        context: {
+          environment: 'development'
+        }
+      }))
+      .pipe(gulp.dest(paths.temp.base))
+      .pipe(browserSync.stream())
+})
+
+gulp.task('html', () => {
+  return gulp.src([paths.src.html])
+      .pipe(fileinclude({
+        prefix: '@@',
+        basepath: './src/partials/',
+        context: {
+          environment: 'development'
+        }
+      }))
+      .pipe(gulp.dest(paths.temp.html))
+      .pipe(browserSync.stream())
+})
+
+gulp.task('assets', () => {
+  return gulp.src([paths.src.assets])
+      .pipe(gulp.dest(paths.temp.assets))
+      .pipe(browserSync.stream())
+})
+
+gulp.task('vendor', () => {
+  return gulp.src(npmDist(), { base: paths.src.node_modules })
+    .pipe(gulp.dest(paths.temp.vendor))
+})
+
+gulp.task('serve', gulp.series('scss', 'html', 'index', 'assets', 'vendor', () => {
+  browserSync.init({
+    server: paths.temp.base
+  })
+
+  gulp.watch([paths.src.scss + '/**/*.scss', paths.src.scss + '/adminlte.scss'], gulp.series('scss'))
+  gulp.watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], gulp.series('html', 'index'))
+  gulp.watch([paths.src.assets], gulp.series('assets'))
+  gulp.watch([paths.src.vendor], gulp.series('vendor'))
+}))
+
+// Minify CSS
+gulp.task('minify:css', () => {
+  return gulp.src([
+    paths.dist.css + '/adminlte.css'
+  ])
+  .pipe(cleanCss())
+  .pipe(gulp.dest(paths.dist.css))
+})
+
+// Copy assets
+gulp.task('copy:dist:assets', () => {
+  return gulp.src(paths.src.assets)
+      .pipe(gulp.dest(paths.dist.assets))
+})
+
+// Clean
+gulp.task('clean:dist', () => {
+  return del([paths.dist.base])
+})
+
+// Compile and copy scss/css
+gulp.task('copy:dist:css', () => {
+  return gulp.src([paths.src.scss + '/adminlte.scss'])
+      .pipe(wait(500))
+      .pipe(sourcemaps.init())
+      .pipe(sass({
+        outputStyle: 'expanded',
+        includePaths: ['./node_modules/']
+      }).on('error', sass.logError))
+      .pipe(postcss(postcssCallback))
+      .pipe(sourcemaps.write('.'))
+      .pipe(gulp.dest(paths.dist.css))
+})
+
+// Copy Html
+gulp.task('copy:dist:html', () => {
+  return gulp.src([paths.src.html])
+      .pipe(fileinclude({
+        prefix: '@@',
+        basepath: './src/partials/',
+        context: {
+          environment: 'production'
+        }
+      }))
+      .pipe(gulp.dest(paths.dist.html))
+})
+
+// Copy index
+gulp.task('copy:dist:html:index', () => {
+  return gulp.src([paths.src.base + '*.html'])
+      .pipe(fileinclude({
+        prefix: '@@',
+        basepath: './src/partials/',
+        context: {
+          environment: 'production'
+        }
+      }))
+      .pipe(gulp.dest(paths.dist.base))
+})
+
+// Copy node_modules to vendor
+gulp.task('copy:dist:vendor', () => {
+  return gulp.src(npmDist(), { base: paths.src.node_modules })
+    .pipe(gulp.dest(paths.dist.vendor))
+})
+
+gulp.task('build', gulp.series('clean:dist', 'copy:dist:css', 'copy:dist:html', 'copy:dist:html:index', 'copy:dist:assets', 'copy:dist:vendor'))
+
+// Default
+gulp.task('default', gulp.series('serve'))

index.html

@@ -1,290 +1,21 @@
 <!DOCTYPE html>
 <html lang="en">
-<!-- For RTL verison -->
-<!-- <html lang="en" dir="rtl"> -->
 <head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <!-- The page supports both dark and light color schemes, and the page author prefers / default is light. -->
-  <meta name="color-scheme" content="light dark">
   <title>AdminLTE v4</title>
-  <!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css -->
-  <!-- <link rel="stylesheet" href="dist/css/dark/adminlte-dark.css"> -->
-  <!-- For RTL verison -->
-  <!-- <link rel="stylesheet" href="dist/css/rtl/adminlte.rtl.css"> -->
-  <link rel="stylesheet" href="dist/css/adminlte.css">
-  <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
-  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
 </head>
-
-<body class="layout-fixed">
-  <div class="wrapper">
-    <!-- Navbar -->
-    <nav class="main-header navbar navbar-expand">
-      <div class="container-fluid">
-        <ul class="navbar-nav">
-          <li class="nav-item">
-            <a class="nav-link sidebar-full-icon" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">Home</a>
-          </li>
-          <li class="nav-item">
-            <a href="#" class="nav-link">Contact</a>
-          </li>
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-              Dropdown
-            </a>
-            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
-              <li><a class="dropdown-item" href="#">Action</a></li>
-              <li><a class="dropdown-item" href="#">Another action</a></li>
-              <li><hr class="dropdown-divider"></li>
-              <li><a class="dropdown-item" href="#">Something else here</a></li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-    </nav>
-    <!-- /.navbar -->
-
-    <!-- Main Sidebar Container -->
-    <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
-      <div class="brand-container">
-        <a href="#" class="brand-link">
-          <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
-          <span class="brand-text fw-light">AdminLTE 4</span>
-        </a>
-        <a class="pushmenu mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
-      </div>
-      <!-- Sidebar -->
-      <div class="sidebar">
-        <nav class="mt-2">
-          <!-- Sidebar Menu -->
-          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
-            <li class="nav-item menu-open">
-              <a href="#" class="nav-link active">
-                <i class="nav-icon fas fa-circle"></i>
-                <p>
-                  Dashboard
-                  <i class="right fas fa-angle-left"></i>
-                </p>
-              </a>
-              <ul class="nav nav-treeview">
-                <li class="nav-item">
-                  <a href="#" class="nav-link active">
-                    <i class="nav-icon far fa-circle"></i>
-                    <p>
-                      Dashboard v1
-                    </p>
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a href="#" class="nav-link">
-                    <i class="nav-icon far fa-circle"></i>
-                    <p>
-                      Dashboard v2
-                    </p>
-                  </a>
-                </li>
-              </ul>
-            </li>
-            <li class="nav-item menu-open">
-              <a href="#" class="nav-link">
-                <i class="nav-icon fas fa-circle"></i>
-                <p>
-                  Forms
-                  <i class="right fas fa-angle-left"></i>
-                </p>
-              </a>
-              <ul class="nav nav-treeview">
-                <li class="nav-item">
-                  <a href="./pages/forms/general.html" class="nav-link">
-                    <i class="nav-icon far fa-circle"></i>
-                    <p>
-                      General Elements
-                    </p>
-                  </a>
-                </li>
-                <li class="nav-item">
-                  <a href="#" class="nav-link">
-                    <i class="nav-icon far fa-circle"></i>
-                    <p>
-                      Level 2
-                    </p>
-                  </a>
-                </li>
-              </ul>
-            </li>
-
-            <li class="nav-header">MULTI LEVEL EXAMPLE</li>
-
-            <li class="nav-item">
-              <a href="#" class="nav-link">
-                <i class="nav-icon fas fa-circle"></i>
-                <p>
-                  Level 1
-                  <i class="right fas fa-angle-left"></i>
-                </p>
-              </a>
-              <ul class="nav nav-treeview">
-                <li class="nav-item">
-                  <a href="#" class="nav-link">
-                    <i class="nav-icon far fa-circle"></i>
-                    <p>
-                      Level 2
-                      <i class="right fas fa-angle-left"></i>
-                    </p>
-                  </a>
-                  <ul class="nav nav-treeview">
-                    <li class="nav-item">
-                      <a href="#" class="nav-link">
-                        <i class="nav-icon far fa-dot-circle"></i>
-                        <p>
-                          Level 3
-                        </p>
-                      </a>
-                    </li>
-                  </ul>
-                </li>
-                <li class="nav-item">
-                  <a href="#" class="nav-link">
-                    <i class="nav-icon far fa-circle"></i>
-                    <p>
-                      Level 2
-                    </p>
-                  </a>
-                </li>
-              </ul>
-            </li>
-          </ul>
-        </nav>
-      </div>
-      <!-- /.sidebar -->
-    </aside>
-
-    <!-- Main content -->
-    <div class="content-wrapper">
-      <div class="content-header">
-        <div class="container-fluid">
-          <div class="row mb-2">
-            <div class="col-sm-6">
-              <div class="fs-3">Dashboard</div>
-            </div>
-            <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">Library</li>
-              </ol>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="content">
-        <div class="container-fluid">
-          <!-- Small boxes (Stat box) -->
-          <div class="row">
-            <div class="col-lg-3 col-6">
-              <!-- small box -->
-              <div class="small-box bg-primary text-light">
-                <div class="inner">
-                  <h3>150</h3>
-
-                  <p>New Orders</p>
-                </div>
-                <div class="icon">
-                  <i class="inner-icon ion ion-bag"></i>
-                </div>
-                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
-              </div>
-            </div>
-            <!-- ./col -->
-            <div class="col-lg-3 col-6">
-              <!-- small box -->
-              <div class="small-box bg-success text-light">
-                <div class="inner">
-                  <h3>53<sup class="fs-5">%</sup></h3>
-
-                  <p>Bounce Rate</p>
-                </div>
-                <div class="icon">
-                  <i class="inner-icon ion ion-stats-bars"></i>
-                </div>
-                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
-              </div>
-            </div>
-            <!-- ./col -->
-            <div class="col-lg-3 col-6">
-              <!-- small box -->
-              <div class="small-box bg-warning text-light">
-                <div class="inner">
-                  <h3>44</h3>
-
-                  <p>User Registrations</p>
-                </div>
-                <div class="icon">
-                  <i class="inner-icon ion ion-person-add"></i>
-                </div>
-                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
-              </div>
-            </div>
-            <!-- ./col -->
-            <div class="col-lg-3 col-6">
-              <!-- small box -->
-              <div class="small-box bg-danger text-light">
-                <div class="inner">
-                  <h3>65</h3>
-
-                  <p>Unique Visitors</p>
-                </div>
-                <div class="icon">
-                  <i class="inner-icon ion ion-pie-graph"></i>
-                </div>
-                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
-              </div>
-            </div>
-            <!-- ./col -->
-          </div>
-          <!-- /.row -->
-          <!-- Main row -->
-          <div class="row">
-            <!-- Left col -->
-            <section class="col-lg-7">
-              <button type="button" class="btn btn-primary">Primary</button>
-              <button type="button" class="btn btn-secondary">Secondary</button>
-              <button type="button" class="btn btn-success">Success</button>
-              <button type="button" class="btn btn-danger">Danger</button>
-              <button type="button" class="btn btn-warning">Warning</button>
-              <button type="button" class="btn btn-info">Info</button>
-              <button type="button" class="btn btn-light">Light</button>
-              <button type="button" class="btn btn-dark">Dark</button>
-              <button type="button" class="btn btn-link">Link</button>
-            </section>
-          </div>
-          <!-- /.row (main row) -->
-        </div><!-- /.container-fluid -->
-      </div>
-    </div>
-    <!-- /.content-wrapper -->
-
-    <!-- Main Footer -->
-    <footer class="main-footer">
-      <!-- To the right -->
-      <div class="float-end d-none d-sm-inline">
-        Anything you want
-      </div>
-      <!-- Default to the left -->
-      <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
-    </footer>
-  </div>
-  <!-- ./wrapper -->
-
-  <!-- REQUIRED SCRIPTS -->
-
-  <!-- Bootstrap 5 -->
-  <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
-  <!-- AdminLTE App -->
-  <script src="dist/js/adminlte.js"></script>
+<body>
+  <!-- TODO: Remove below link Before Alpha Release of AdminLTE v4 -->
+  <a href="https://github.com/ColorlibHQ/AdminLTE/tree/v4-dev">Check once</a>
+  <script>
+    /**
+     * TODO: Uncomment Before Alpha Release of AdminLTE v4
+     * Will redirect properly
+     */
+
+    // window.location = './dist/index.html';
+  </script>
 </body>
 </html>

package.json

@@ -75,12 +75,21 @@
     "clean-css-cli": "^5.3.0",
     "concurrently": "^6.1.0",
     "cross-env": "^7.0.3",
+    "del": "^6.0.0",
     "esbuild": "^0.11.21",
     "eslint": "^7.26.0",
     "eslint-config-xo": "^0.36.0",
     "eslint-config-xo-typescript": "^0.41.1",
-    "eslint-plugin-import": "^2.23.0",
+    "eslint-plugin-import": "^2.23.2",
     "eslint-plugin-unicorn": "^32.0.1",
+    "gulp": "^4.0.2",
+    "gulp-clean-css": "^4.3.0",
+    "gulp-file-include": "^2.3.0",
+    "gulp-npm-dist": "^1.0.3",
+    "gulp-postcss": "^9.0.0",
+    "gulp-sass": "^4.1.0",
+    "gulp-sourcemaps": "^3.0.0",
+    "gulp-wait": "0.0.2",
     "lockfile-lint": "^4.6.2",
     "nodemon": "^2.0.7",
     "npm-run-all": "^4.1.5",

src/index.html

@@ -0,0 +1,294 @@
+<!DOCTYPE html>
+<html lang="en">
+<!-- For RTL verison -->
+<!-- <html lang="en" dir="rtl"> -->
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <!-- The page supports both dark and light color schemes, and the page author prefers / default is light. -->
+  <meta name="color-scheme" content="light dark">
+  <title>AdminLTE v4</title>
+  <!-- For dark mode use dist/css/alt/adminlte.pcs.css, remove dist/css/adminlte.css -->
+  <!-- <link rel="stylesheet" href="dist/css/dark/adminlte-dark.css"> -->
+  <!-- For RTL verison -->
+  <!-- <link rel="stylesheet" href="dist/css/rtl/adminlte.rtl.css"> -->
+  <link rel="stylesheet" href="dist/css/adminlte.css">
+  <link rel="stylesheet" href="./node_modules/@fortawesome/fontawesome-free/css/all.min.css">
+  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
+  @@include('./_head.html', {
+    "path": ".",
+    "title": "Volt - Free Bootstrap 5 Admin Dashboard"
+  })
+</head>
+
+<body class="layout-fixed">
+  <div class="wrapper">
+    <!-- Navbar -->
+    <nav class="main-header navbar navbar-expand">
+      <div class="container-fluid">
+        <ul class="navbar-nav">
+          <li class="nav-item">
+            <a class="nav-link sidebar-full-icon" data-pushmenu="full" href="#" role="button"><i class="fas fa-bars"></i></a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">Home</a>
+          </li>
+          <li class="nav-item">
+            <a href="#" class="nav-link">Contact</a>
+          </li>
+          <li class="nav-item dropdown">
+            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+              Dropdown
+            </a>
+            <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+              <li><a class="dropdown-item" href="#">Action</a></li>
+              <li><a class="dropdown-item" href="#">Another action</a></li>
+              <li><hr class="dropdown-divider"></li>
+              <li><a class="dropdown-item" href="#">Something else here</a></li>
+            </ul>
+          </li>
+        </ul>
+      </div>
+    </nav>
+    <!-- /.navbar -->
+
+    <!-- Main Sidebar Container -->
+    <aside class="main-sidebar sidebar-bg-dark sidebar-color-primary shadow">
+      <div class="brand-container">
+        <a href="#" class="brand-link">
+          <img src="dist/img/AdminLTELogo.png" alt="AdminLTE Logo" class="brand-image opacity-80 shadow">
+          <span class="brand-text fw-light">AdminLTE 4</span>
+        </a>
+        <a class="pushmenu mx-1" data-pushmenu="mini" href="#" role="button"><i class="fas fa-angle-double-left"></i></a>
+      </div>
+      <!-- Sidebar -->
+      <div class="sidebar">
+        <nav class="mt-2">
+          <!-- Sidebar Menu -->
+          <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
+            <li class="nav-item menu-open">
+              <a href="#" class="nav-link active">
+                <i class="nav-icon fas fa-circle"></i>
+                <p>
+                  Dashboard
+                  <i class="right fas fa-angle-left"></i>
+                </p>
+              </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href="#" class="nav-link active">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      Dashboard v1
+                    </p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      Dashboard v2
+                    </p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+            <li class="nav-item menu-open">
+              <a href="#" class="nav-link">
+                <i class="nav-icon fas fa-circle"></i>
+                <p>
+                  Forms
+                  <i class="right fas fa-angle-left"></i>
+                </p>
+              </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href="./pages/forms/general.html" class="nav-link">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      General Elements
+                    </p>
+                  </a>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      Level 2
+                    </p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+
+            <li class="nav-header">MULTI LEVEL EXAMPLE</li>
+
+            <li class="nav-item">
+              <a href="#" class="nav-link">
+                <i class="nav-icon fas fa-circle"></i>
+                <p>
+                  Level 1
+                  <i class="right fas fa-angle-left"></i>
+                </p>
+              </a>
+              <ul class="nav nav-treeview">
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      Level 2
+                      <i class="right fas fa-angle-left"></i>
+                    </p>
+                  </a>
+                  <ul class="nav nav-treeview">
+                    <li class="nav-item">
+                      <a href="#" class="nav-link">
+                        <i class="nav-icon far fa-dot-circle"></i>
+                        <p>
+                          Level 3
+                        </p>
+                      </a>
+                    </li>
+                  </ul>
+                </li>
+                <li class="nav-item">
+                  <a href="#" class="nav-link">
+                    <i class="nav-icon far fa-circle"></i>
+                    <p>
+                      Level 2
+                    </p>
+                  </a>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </nav>
+      </div>
+      <!-- /.sidebar -->
+    </aside>
+
+    <!-- Main content -->
+    <div class="content-wrapper">
+      <div class="content-header">
+        <div class="container-fluid">
+          <div class="row mb-2">
+            <div class="col-sm-6">
+              <div class="fs-3">Dashboard</div>
+            </div>
+            <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">Library</li>
+              </ol>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="content">
+        <div class="container-fluid">
+          <!-- Small boxes (Stat box) -->
+          <div class="row">
+            <div class="col-lg-3 col-6">
+              <!-- small box -->
+              <div class="small-box bg-primary text-light">
+                <div class="inner">
+                  <h3>150</h3>
+
+                  <p>New Orders</p>
+                </div>
+                <div class="icon">
+                  <i class="inner-icon ion ion-bag"></i>
+                </div>
+                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+              </div>
+            </div>
+            <!-- ./col -->
+            <div class="col-lg-3 col-6">
+              <!-- small box -->
+              <div class="small-box bg-success text-light">
+                <div class="inner">
+                  <h3>53<sup class="fs-5">%</sup></h3>
+
+                  <p>Bounce Rate</p>
+                </div>
+                <div class="icon">
+                  <i class="inner-icon ion ion-stats-bars"></i>
+                </div>
+                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+              </div>
+            </div>
+            <!-- ./col -->
+            <div class="col-lg-3 col-6">
+              <!-- small box -->
+              <div class="small-box bg-warning text-light">
+                <div class="inner">
+                  <h3>44</h3>
+
+                  <p>User Registrations</p>
+                </div>
+                <div class="icon">
+                  <i class="inner-icon ion ion-person-add"></i>
+                </div>
+                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+              </div>
+            </div>
+            <!-- ./col -->
+            <div class="col-lg-3 col-6">
+              <!-- small box -->
+              <div class="small-box bg-danger text-light">
+                <div class="inner">
+                  <h3>65</h3>
+
+                  <p>Unique Visitors</p>
+                </div>
+                <div class="icon">
+                  <i class="inner-icon ion ion-pie-graph"></i>
+                </div>
+                <a href="#" class="small-box-footer">More info <i class="fas fa-arrow-circle-right"></i></a>
+              </div>
+            </div>
+            <!-- ./col -->
+          </div>
+          <!-- /.row -->
+          <!-- Main row -->
+          <div class="row">
+            <!-- Left col -->
+            <section class="col-lg-7">
+              <button type="button" class="btn btn-primary">Primary</button>
+              <button type="button" class="btn btn-secondary">Secondary</button>
+              <button type="button" class="btn btn-success">Success</button>
+              <button type="button" class="btn btn-danger">Danger</button>
+              <button type="button" class="btn btn-warning">Warning</button>
+              <button type="button" class="btn btn-info">Info</button>
+              <button type="button" class="btn btn-light">Light</button>
+              <button type="button" class="btn btn-dark">Dark</button>
+              <button type="button" class="btn btn-link">Link</button>
+            </section>
+          </div>
+          <!-- /.row (main row) -->
+        </div><!-- /.container-fluid -->
+      </div>
+    </div>
+    <!-- /.content-wrapper -->
+
+    <!-- Main Footer -->
+    <footer class="main-footer">
+      <!-- To the right -->
+      <div class="float-end d-none d-sm-inline">
+        Anything you want
+      </div>
+      <!-- Default to the left -->
+      <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
+    </footer>
+  </div>
+  <!-- ./wrapper -->
+
+  <!-- REQUIRED SCRIPTS -->
+
+  <!-- Bootstrap 5 -->
+  <script src="./node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
+  <!-- AdminLTE App -->
+  <script src="dist/js/adminlte.js"></script>
+</body>
+</html>

src/partials/_head.html

@@ -0,0 +1 @@
+hiiii