Updating latest

data/panaetius-theme/assets.json

@@ -1,5 +1,21 @@
 {
+  "vendors~app~bootstrap": {
+    "js": "0.vendors~app~bootstrap.e59019bd2c01f8f5dd1c.min.js"
+  },
+  "app": {
+    "js": "1.app.560974f2ae70ee78fbb4.min.js"
+  },
+  "lazyload": {
+    "js": "2.lazyload.1168fc21175de558d316.min.js"
+  },
   "main": {
-    "js": "main.787e24f578908f557852.min.js"
+    "css": "main.8d8f975136c9cc17a7c6.min.css",
+    "js": "main.5f5dabd521a484e6869a.min.js"
+  },
+  "vendors~app": {
+    "js": "4.vendors~app.5fe693a38fabc29c6181.min.js"
+  },
+  "vendors~bootstrap": {
+    "js": "5.vendors~bootstrap.ebc6358ec2d8424a6fb0.min.js"
   }
 }

package.json

@@ -8,15 +8,26 @@
   "dependencies": {
     "@babel/core": "^7.9.6",
     "@babel/preset-env": "^7.9.6",
+    "@fortawesome/fontawesome-svg-core": "^1.2.28",
+    "@fortawesome/free-brands-svg-icons": "^5.13.0",
+    "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "assets-webpack-plugin": "^3.9.12",
     "babel-loader": "^8.1.0",
+    "bootstrap": "^4.5.0",
     "clean-webpack-plugin": "^3.0.0",
     "css-loader": "^3.5.3",
+    "jquery": "^3.5.1",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.3",
+    "popper.js": "^1.16.1",
     "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.7.0",
+    "purgecss-webpack-plugin": "^2.2.0",
     "sass-loader": "^8.0.2",
     "style-loader": "^1.2.1",
+    "terser-webpack-plugin": "^3.0.2",
+    "vanilla-lazyload": "^16.1.0",
     "webpack-merge": "^4.2.2"
   },
   "devDependencies": {

src/js/App.js

@@ -1,7 +1,7 @@
-'use strict';
+"use strict";
+
+import { library, dom } from "@fortawesome/fontawesome-svg-core";
 
-import $ from 'jquery';
-import { library, dom } from '@fortawesome/fontawesome-svg-core';
 import {
   faBookOpen,
   faChevronLeft,
@@ -12,7 +12,8 @@ import {
   faRss,
   faTag,
   faSearch,
-} from '@fortawesome/free-solid-svg-icons';
+} from "@fortawesome/free-solid-svg-icons";
+
 import {
   faFacebook,
   faFacebookF,
@@ -30,7 +31,7 @@ import {
   faStackOverflow,
   faTwitter,
   faWeibo,
-} from '@fortawesome/free-brands-svg-icons';
+} from "@fortawesome/free-brands-svg-icons";
 
 library.add(
   faBookOpen,
@@ -57,7 +58,7 @@ library.add(
   faTag,
   faTwitter,
   faWeibo,
-    faSearch,
+  faSearch
 );
 
 export default {
@@ -65,15 +66,17 @@ export default {
     dom.watch();
   },
   bootstrapify: () => {
-        $('.content blockquote').addClass('blockquote');
+    $(".content blockquote").addClass("blockquote");
-        $('.content table').addClass('table');
+    $(".content table").addClass("table");
-        $('.content table').wrap('<div class="table-responsive" />');
+    $(".content table").wrap('<div class="table-responsive" />');
-        $('.content table thead').addClass('thead-dark');
+    $(".content table thead").addClass("thead-dark");
-        $('.content pre').wrap('<figure class="highlight" />');
+    $(".content pre").wrap('<figure class="highlight" />');
-        $('.content figure > img').addClass('img-fluid');
+    $(".content figure > img").addClass("img-fluid");
   },
   lazyload: async () => {
-        const { default: LazyLoad } = await import(/* webpackChunkName: "lazyload" */ 'vanilla-lazyload');
+    const { default: LazyLoad } = await import(
+      /* webpackChunkName: "lazyload" */ "vanilla-lazyload"
+    );
     new LazyLoad({
       thresholds: "40px 10%",
       load_delay: 100,
@@ -84,37 +87,17 @@ export default {
 
     $(window).scroll(() => {
       const $scroll = $(window).scrollTop();
-            const $navbarHeight = $('#navbar-main-menu.fixed-top').outerHeight();
+      const $navbarHeight = $("#navbar-main-menu.fixed-top").outerHeight();
 
-            $scroll > $position ? $('#navbar-main-menu.fixed-top').css('top', -$navbarHeight) :
+      $scroll > $position
-                $('#navbar-main-menu.fixed-top').css('top', 0);
+        ? $("#navbar-main-menu.fixed-top").css("top", -$navbarHeight)
+        : $("#navbar-main-menu.fixed-top").css("top", 0);
 
       if ($scroll <= 0) {
-              $('#navbar-main-menu.fixed-top').css('top', 0);
+        $("#navbar-main-menu.fixed-top").css("top", 0);
       }
 
       $position = $scroll;
     });
   },
-    lightbox: async () => {
-        const { default: ekkoLightbox } = await import(/* webpackChunkName: "ekkoLightbox" */ 'ekko-lightbox');
-        $('[data-toggle="lightbox"]').click(function(e) {
-            e.preventDefault();
-            $(this).ekkoLightbox();
-        });
-    },
-    syntaxHighlight: () => {
-        if (!window.Prism) {
-          return;
-        }
-
-        Prism.highlightAll();
-
-        $('pre:has(> code[class*=language-])').removeAttr('style');
-
-        const element = $('pre:has(> code:not([class*=language-]))');
-
-        element.addClass('language-none');
-        $('> code', element).addClass('language-none');
-    }
 };

src/main.js

@@ -1 +1,12 @@
-import './scss/styles.scss';
+import "./scss/styles.scss";
+import(/* webpackChunkName: "bootstrap" */ "bootstrap");
+
+window.addEventListener("DOMContentLoaded", async (event) => {
+  const { default: App } = await import(
+    /* webpackChunkName: "app" */ "./js/App"
+  );
+  App.bootstrapify();
+  App.lazyload();
+  App.loadFontAwesome();
+  App.navbarFade();
+});

src/scss/chunky-poster.scss

@@ -1,86 +0,0 @@
-.homepage-image {
-    @include media-breakpoint-up(lg) {
-        position: absolute;
-        width: 400px;
-        right: 100px;
-        top: 50px;
-    }
-}
-
-.author .name a, .author .social a {
-    color: $gray-900;
-    text-decoration: none;
-}
-
-blockquote {
-    color: $gray-400;
-    border-left: 6px solid $gray-400;
-    padding-left: $spacer;
-}
-
-code {
-    background-color: $gray-100;
-    border-radius: $border-radius-sm;
-    padding: .125rem .2rem;
-}
-
-code[class*=language-], pre[class*=language-] {
-    font-family: $font-family-monospace;
-    @include font-size($code-font-size);
-}
-
-figure.highlight pre:not([class*=language-]) {
-    padding: 1em;
-    margin: .5em 0;
-    overflow: auto;
-    background-color: $gray-100;
-}
-
-pre code {
-    padding: 0;
-    background-color: transparent;
-}
-
-.latest h2 a, .navbar a, .card > a, a.badge {
-    text-decoration: none;
-}
-
-figure.highlight {
-    margin-left: -($grid-gutter-width / 2);
-    margin-right: -($grid-gutter-width / 2);
-
-    @include media-breakpoint-up(md) {
-        margin-left: 0;
-        margin-right: 0;
-    }
-}
-
-img[data-src] {
-    opacity: 0;
-    @include transition($transition-fade);
-
-    &.loaded {
-        opacity: 1;
-    }
-}
-
-#navbar-main-menu {
-    transition: top 0.2s ease;
-
-    .nav-item .nav-link {
-        font-size: $navbar-brand-font-size;
-    }
-}
-
-ul.share.nav {
-    .nav-link {
-        padding: $nav-link-padding-y 0.2rem;
-        text-align: center;
-    }
-}
-
-footer a:not(.icons) {
-    color: $gray-200;
-}
-
-

src/scss/search.scss

@@ -1,43 +0,0 @@
-.searchbar {
-    margin-bottom: auto;
-    margin-top: auto;
-    height: 60px;
-    background-color: #353b48;
-    border-radius: 30px;
-    padding: 10px;
-}
-
-.search_input {
-    color: white;
-    border: 0;
-    outline: 0;
-    background: none;
-    width: 0;
-    caret-color: transparent;
-    line-height: 40px;
-    transition: width 0.4s linear;
-}
-
-.searchbar:hover>.search_input {
-    padding: 0 10px;
-    width: 450px;
-    caret-color: red;
-    transition: width 0.4s linear;
-}
-
-.searchbar:hover>.search_icon {
-    background: white;
-    color: #e74c3c;
-}
-
-.search_icon {
-    height: 40px;
-    width: 40px;
-    float: right;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    border-radius: 50%;
-    color: white;
-    text-decoration: none;
-}

src/scss/sticky-footer.scss

@@ -1,16 +0,0 @@
-html, body {
-    height: 100%;
-}
-
-body {
-    display: flex;
-    flex-direction: column;
-}
-
-header, footer {
-    flex-shrink: 0;
-}
-
-main {
-    flex: 1 0 auto;
-}

src/scss/styles.scss

@@ -1,8 +1 @@
-@import url('https://fonts.googleapis.com/css?family=Jost:400,400i,700,700i|Roboto+Mono:400,400i,700,700i|Open+Sans:400,700|Roboto:400,600,700&display=swap');
-
-@import "_variables";
 @import "~bootstrap/scss/bootstrap";
-@import '~ekko-lightbox/dist/ekko-lightbox.css';
-@import "chunky-poster";
-@import "sticky-footer";
-@import "search";

webpack.prod.js

@@ -2,6 +2,11 @@ const webpack = require("webpack");
 const common = require("./webpack.common");
 const merge = require("webpack-merge");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
+const CssMinimizer = require("optimize-css-assets-webpack-plugin");
+const PurgeCssPlugin = require("purgecss-webpack-plugin");
+const glob = require("glob");
+const path = require("path")
 
 module.exports = merge(common, {
   mode: "production",
@@ -32,5 +37,17 @@ module.exports = merge(common, {
       sourceMap: true,
     }),
     new webpack.HashedModuleIdsPlugin(),
+    new PurgeCssPlugin({
+      paths: glob.sync(path.join(__dirname, "layouts") + "/**/*.html", {
+        nodir: true,
+      }),
+    }),
   ],
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+      new CssMinimizer(),
+    ],
+  },
 });