Merge branch 'master' into master

.github/workflows/merge.yml

@@ -0,0 +1,35 @@
+name: Merge checks
+
+on:  
+  pull_request:
+    branches:
+      - master
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+    
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Build
+      run: |
+        npm install
+        npm run build
+    
+    - name: Get version
+      run: echo "::set-output name=version::v$(./ci/getVersion.sh)"
+      id: version
+
+    - name: Verify version
+      run: |
+        ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}

.github/workflows/release.yml

@@ -0,0 +1,50 @@
+name: NodeJS with Webpack
+
+on:
+  push:
+    branches: [ "master" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+    
+    steps:
+    - uses: actions/checkout@v3
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Build
+      run: |
+        npm install
+        npm run release:minified
+        zip -r -j static_minified.zip dist/*
+        npm run release:unminified
+        zip -r -j static_unminified.zip dist/*
+    
+    - name: Get version
+      run: echo "::set-output name=version::v$(./ci/getVersion.sh)"
+      id: version
+
+    - name: Verify version
+      run: |
+        ./ci/verifyVersion.sh ${{ steps.version.outputs.version }}
+
+    # Verify changelog has entry with new version
+    - name: Release
+      uses: softprops/action-gh-release@v1
+      with:
+        name: ${{ steps.version.outputs.version }}
+        tag_name: ${{ steps.version.outputs.version }}
+        files: |
+          static_minified.zip
+          static_unminified.zip
+        fail_on_unmatched_files: true
+        prerelease: false
+        draft: false

.nvmrc

@@ -0,0 +1 @@
+14

README.md

@@ -22,7 +22,7 @@
 
 
 ## Getting Started
-In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below.
+In order to run **Adminator** on your local machine all what you need to do is to have the prerequisites stated below installed on your machine and follow the installation steps down below. Prebuilt static assets can be found under [releases](https://github.com/puikinsh/Adminator-admin-dashboard/releases).
 
 #### Prerequisites
   - Node.js

ci/getVersion.sh

@@ -0,0 +1 @@
+echo $(sed 's/.*"version": "\(.*\)".*/\1/;t;d' ./package.json)

ci/verifyVersion.sh

@@ -0,0 +1,9 @@
+VERSION=$1
+TAG_EXISTS=$(git ls-remote --tags origin $VERSION | wc -l)
+
+if [ $TAG_EXISTS -eq "1" ]; then
+   echo "The tag '$VERSION' already exists. Please update version in package.json.";
+   exit 1;
+fi
+
+echo "The tag '$VERSION' does not exist - success.";

package.json

@@ -1,6 +1,6 @@
 {
   "name": "adminator",
-  "version": "2.0.0",
+  "version": "2.0.3",
   "private": true,
   "description": "HTML Admin Template",
   "scripts": {
@@ -8,6 +8,8 @@
     "dev": "webpack-dashboard -t 'Project' -- webpack server",
     "clean": "shx rm -rf ./dist",
     "build": "npm run clean && cross-env webpack",
+    "release:minified": "npm run clean && NODE_ENV=production MINIFY=true cross-env webpack",
+    "release:unminified": "npm run clean && NODE_ENV=production MINIFY=false cross-env webpack",
     "preview": "cross-env webpack server",
     "lint:js": "eslint ./src ./webpack ./*.js -f table --ext .js --ext .jsx",
     "lint:scss": "stylelint ./src/**/*.scss --syntax scss",
@@ -28,17 +30,17 @@
     "copy-webpack-plugin": "^9.0.0",
     "cross-env": "^7.0.3",
     "css-loader": "^5.2.6",
+    "css-minimizer-webpack-plugin": "^4.0.0",
     "eslint": "^7.21.0",
     "eslint-config-airbnb-base": "^14.2.1",
     "eslint-plugin-import": "^2.23.4",
-    "extract-text-webpack-plugin": "^3.0.2",
     "html-webpack-plugin": "^5.3.1",
     "imagemin-webpack-plugin": "^2.4.2",
     "mini-css-extract-plugin": "^1.6.0",
     "postcss": "^8.3.4",
     "postcss-loader": "^6.1.0",
-    "postcss-preset-env": "^6.7.0",
     "sass": "^1.55.0",
+    "postcss-preset-env": "7.8.0",
     "sass-loader": "^12.1.0",
     "shx": "^0.3.3",
     "style-loader": "^2.0.0",

src/assets/scripts/fullcalendar/index.js

@@ -7,6 +7,11 @@ import listPlugin from '@fullcalendar/list';
 document.addEventListener('DOMContentLoaded', function() {
   var calendarEl = document.getElementById('calendar');
 
+  // element found in dom ?
+  if (calendarEl == null) {
+    return
+  }
+
   var calendar = new Calendar(calendarEl, {
     plugins: [ interactionPlugin, dayGridPlugin, timeGridPlugin, listPlugin ],
     headerToolbar: {

src/assets/styles/index.scss

@@ -1,6 +1,6 @@
 @import 'spec/settings/index';
 @import 'spec/tools/index';
-@import "~bootstrap/scss/bootstrap";
+@import "bootstrap/scss/bootstrap";
 @import 'spec/index';
 @import 'vendor/index';
 

src/assets/styles/spec/settings/index.scss

@@ -1,6 +1,6 @@
 @import 'breakpoints';
 @import 'fonts';
-@import '~brand-colors/dist/latest/scss/brand-colors.latest.scss';
+@import 'brand-colors/dist/latest/scss/brand-colors.latest.scss';
 @import 'materialColors';
 @import 'baseColors';
 @import 'borders';

src/assets/styles/vendor/index.scss

@@ -1,4 +1,4 @@
-@import '~perfect-scrollbar/css/perfect-scrollbar';
+@import 'perfect-scrollbar/css/perfect-scrollbar';
 @import 'themify-icons';
 @import 'font-awesome';
 @import 'perfectScrollbar';

src/compose.html

@@ -235,7 +235,7 @@
               <ul class="dropdown-menu">
                 <li>
                   <a class='sidebar-link' href="blank.html">Blank</a>
-                </li>                 
+                </li>
                 <li>
                   <a class='sidebar-link' href="404.html">404</a>
                 </li>
@@ -520,7 +520,7 @@
               <div class="email-side-nav remain-height ov-h">
                 <div class="h-100 layers">
                   <div class="p-20 bgc-grey-100 layer w-100">
-                    <a href="/compose" class="btn btn-danger d-grid">New Message</a>
+                    <a href="compose.html" class="btn btn-danger d-grid">New Message</a>
                   </div>
                   <div class="scrollable pos-r bdT layer w-100 fxg-1">
                     <ul class="p-20 nav flex-column">

src/email.html

@@ -235,7 +235,7 @@
               <ul class="dropdown-menu">
                 <li>
                   <a class='sidebar-link' href="blank.html">Blank</a>
-                </li> 
+                </li>
                 <li>
                   <a class='sidebar-link' href="404.html">404</a>
                 </li>
@@ -520,7 +520,7 @@
                 <div class="email-side-nav remain-height ov-h">
                   <div class="h-100 layers">
                     <div class="p-20 bgc-grey-100 layer w-100">
-                      <a href="/compose" class="btn btn-danger d-grid">New Message</a>
+                      <a href="compose.html" class="btn btn-danger d-grid">New Message</a>
                     </div>
                     <div class="scrollable pos-r bdT layer w-100 fxg-1">
                       <ul class="p-20 nav flex-column">

webpack/config.js

@@ -15,12 +15,14 @@
 // ---------------------
 
 const
-  path      = require('path'),
-  manifest  = require('./manifest'),
+  path = require('path'),
+  manifest = require('./manifest'),
   devServer = require('./devServer'),
-  rules     = require('./rules'),
-  plugins   = require('./plugins');
+  rules = require('./rules'),
+  plugins = require('./plugins');
 
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 
 // ------------------
 // @Entry Point Setup
@@ -44,11 +46,20 @@ const resolve = {
   ],
 };
 
+const optimization = {
+  minimize: manifest.MINIFY
+};
+
+if (manifest.MINIFY) {
+  optimization.minimizer = [
+    new CssMinimizerPlugin(),
+    new TerserPlugin()
+  ];
+}
 
 // -----------------
 // @Exporting Module
 // -----------------
-
 module.exports = {
   devtool: manifest.IS_PRODUCTION ? false : 'source-map',
   context: path.join(manifest.paths.src, manifest.entries.js),
@@ -63,6 +74,7 @@ module.exports = {
   module: {
     rules,
   },
+  optimization: optimization,
   resolve,
   plugins,
   devServer,

webpack/manifest.js

@@ -27,8 +27,8 @@ const path = require('path');
 const
   NODE_ENV       = process.env.NODE_ENV || 'development',
   IS_DEVELOPMENT = NODE_ENV === 'development',
-  IS_PRODUCTION  = NODE_ENV === 'production';
-
+  IS_PRODUCTION  = NODE_ENV === 'production',
+  MINIFY         = process.env.MINIFY === 'true';
 
 // ------
 // @Utils
@@ -82,4 +82,5 @@ module.exports = {
   NODE_ENV,
   IS_DEVELOPMENT,
   IS_PRODUCTION,
+  MINIFY
 };

webpack/plugins/htmlPlugin.js

@@ -25,18 +25,31 @@ const titles = {
   'test': 'Test',
 };
 
+let minify = {
+  collapseWhitespace: false,
+  minifyCSS: false,
+  minifyJS: false,
+  removeComments: true,
+  useShortDoctype: false,
+};
+
+if (manifest.MINIFY) {
+  minify = {
+    collapseWhitespace: true,
+    minifyCSS: true,
+    minifyJS: true,
+    removeComments: true,
+    useShortDoctype: true,
+  };
+}
+
+
 module.exports = Object.keys(titles).map(title => {
   return new HtmlWebpackPlugin({
     template: path.join(manifest.paths.src, `${title}.html`),
     path: manifest.paths.build,
     filename: `${title}.html`,
     inject: true,
-    minify: {
-      collapseWhitespace: true,
-      minifyCSS: true,
-      minifyJS: true,
-      removeComments: true,
-      useShortDoctype: true,
-    },
+    minify: minify
   });
 });

webpack/rules/css.js

@@ -31,7 +31,6 @@ const loaders = [
     loader: 'css-loader',
     options: {
       sourceMap : manifest.IS_DEVELOPMENT,
-      // minimize  : manifest.IS_PRODUCTION,
       importLoaders: 1,
     },
   },
@@ -45,10 +44,9 @@ const loaders = [
 if (manifest.IS_PRODUCTION) {
   rule = {
     test: /\.css$/,
-    // loader: ExtractTextPlugin({
-    //   use: loaders,
-    // }),
-    use: [ExtractTextPlugin.loader, loaders],
+    use: [{
+        loader: ExtractTextPlugin.loader,
+    }].concat(loaders),
   };
 }
 

webpack/rules/sass.js

@@ -16,8 +16,8 @@
 const
   manifest          = require('../manifest'),
   path              = require('path'),
-  cssNext           = require('postcss-preset-env');
-
+  cssNext           = require('postcss-preset-env'),
+  ExtractTextPlugin = require('mini-css-extract-plugin');
 
 // ---------------
 // @Common Loaders
@@ -27,8 +27,7 @@ const loaders = [
   {
     loader: 'css-loader',
     options: {
-      sourceMap : manifest.IS_DEVELOPMENT,
-      // minimize  : manifest.IS_PRODUCTION,
+      sourceMap : manifest.IS_DEVELOPMENT
     },
   },
   {
@@ -49,21 +48,28 @@ const loaders = [
     options: {
       sourceMap: manifest.IS_DEVELOPMENT,
       sassOptions: {
+        outputStyle: manifest.MINIFY ? 'compressed' : 'expanded',
         includePaths: [
           path.join('../../', 'node_modules'),
           path.join(manifest.paths.src, 'assets', 'styles'),
           path.join(manifest.paths.src, ''),
         ],
       },
-    },
-  },
+    }
+  }
 ];
 
+if (manifest.IS_PRODUCTION) {
+  loaders.unshift(ExtractTextPlugin.loader);
+} else {
+  loaders.unshift({
+    loader: 'style-loader',
+  });
+}
+
 const rule = {
   test: /\.scss$/,
-  use: [{
-    loader: 'style-loader',
-  }].concat(loaders),
+  use: loaders
 };
 
 // -----------------