Updating latest
This commit is contained in:
@@ -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"
|
||||
}
|
||||
}
|
||||
11
package.json
11
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": {
|
||||
|
||||
BIN
src/.DS_Store
vendored
BIN
src/.DS_Store
vendored
Binary file not shown.
197
src/js/App.js
197
src/js/App.js
@@ -1,120 +1,103 @@
|
||||
'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,
|
||||
faChevronRight,
|
||||
faCircle,
|
||||
faClock,
|
||||
faEnvelope,
|
||||
faRss,
|
||||
faTag,
|
||||
faSearch,
|
||||
} from '@fortawesome/free-solid-svg-icons';
|
||||
faBookOpen,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faCircle,
|
||||
faClock,
|
||||
faEnvelope,
|
||||
faRss,
|
||||
faTag,
|
||||
faSearch,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
import {
|
||||
faFacebook,
|
||||
faFacebookF,
|
||||
faGithub,
|
||||
faGitlab,
|
||||
faInstagram,
|
||||
faKeybase,
|
||||
faLinkedin,
|
||||
faLinkedinIn,
|
||||
faMastodon,
|
||||
faMedium,
|
||||
faPinterest,
|
||||
faReddit,
|
||||
faRedditAlien,
|
||||
faStackOverflow,
|
||||
faTwitter,
|
||||
faWeibo,
|
||||
} from '@fortawesome/free-brands-svg-icons';
|
||||
faFacebook,
|
||||
faFacebookF,
|
||||
faGithub,
|
||||
faGitlab,
|
||||
faInstagram,
|
||||
faKeybase,
|
||||
faLinkedin,
|
||||
faLinkedinIn,
|
||||
faMastodon,
|
||||
faMedium,
|
||||
faPinterest,
|
||||
faReddit,
|
||||
faRedditAlien,
|
||||
faStackOverflow,
|
||||
faTwitter,
|
||||
faWeibo,
|
||||
} from "@fortawesome/free-brands-svg-icons";
|
||||
|
||||
library.add(
|
||||
faBookOpen,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faCircle,
|
||||
faClock,
|
||||
faEnvelope,
|
||||
faFacebook,
|
||||
faFacebookF,
|
||||
faGithub,
|
||||
faGitlab,
|
||||
faInstagram,
|
||||
faKeybase,
|
||||
faLinkedin,
|
||||
faLinkedinIn,
|
||||
faMastodon,
|
||||
faMedium,
|
||||
faPinterest,
|
||||
faReddit,
|
||||
faRedditAlien,
|
||||
faRss,
|
||||
faStackOverflow,
|
||||
faTag,
|
||||
faTwitter,
|
||||
faWeibo,
|
||||
faSearch,
|
||||
faBookOpen,
|
||||
faChevronLeft,
|
||||
faChevronRight,
|
||||
faCircle,
|
||||
faClock,
|
||||
faEnvelope,
|
||||
faFacebook,
|
||||
faFacebookF,
|
||||
faGithub,
|
||||
faGitlab,
|
||||
faInstagram,
|
||||
faKeybase,
|
||||
faLinkedin,
|
||||
faLinkedinIn,
|
||||
faMastodon,
|
||||
faMedium,
|
||||
faPinterest,
|
||||
faReddit,
|
||||
faRedditAlien,
|
||||
faRss,
|
||||
faStackOverflow,
|
||||
faTag,
|
||||
faTwitter,
|
||||
faWeibo,
|
||||
faSearch
|
||||
);
|
||||
|
||||
export default {
|
||||
loadFontAwesome: () => {
|
||||
dom.watch();
|
||||
},
|
||||
bootstrapify: () => {
|
||||
$('.content blockquote').addClass('blockquote');
|
||||
$('.content table').addClass('table');
|
||||
$('.content table').wrap('<div class="table-responsive" />');
|
||||
$('.content table thead').addClass('thead-dark');
|
||||
$('.content pre').wrap('<figure class="highlight" />');
|
||||
$('.content figure > img').addClass('img-fluid');
|
||||
},
|
||||
lazyload: async () => {
|
||||
const { default: LazyLoad } = await import(/* webpackChunkName: "lazyload" */ 'vanilla-lazyload');
|
||||
new LazyLoad({
|
||||
thresholds: "40px 10%",
|
||||
load_delay: 100,
|
||||
});
|
||||
},
|
||||
navbarFade: () => {
|
||||
let $position = $(window).scrollTop();
|
||||
loadFontAwesome: () => {
|
||||
dom.watch();
|
||||
},
|
||||
bootstrapify: () => {
|
||||
$(".content blockquote").addClass("blockquote");
|
||||
$(".content table").addClass("table");
|
||||
$(".content table").wrap('<div class="table-responsive" />');
|
||||
$(".content table thead").addClass("thead-dark");
|
||||
$(".content pre").wrap('<figure class="highlight" />');
|
||||
$(".content figure > img").addClass("img-fluid");
|
||||
},
|
||||
lazyload: async () => {
|
||||
const { default: LazyLoad } = await import(
|
||||
/* webpackChunkName: "lazyload" */ "vanilla-lazyload"
|
||||
);
|
||||
new LazyLoad({
|
||||
thresholds: "40px 10%",
|
||||
load_delay: 100,
|
||||
});
|
||||
},
|
||||
navbarFade: () => {
|
||||
let $position = $(window).scrollTop();
|
||||
|
||||
$(window).scroll(() => {
|
||||
const $scroll = $(window).scrollTop();
|
||||
const $navbarHeight = $('#navbar-main-menu.fixed-top').outerHeight();
|
||||
$(window).scroll(() => {
|
||||
const $scroll = $(window).scrollTop();
|
||||
const $navbarHeight = $("#navbar-main-menu.fixed-top").outerHeight();
|
||||
|
||||
$scroll > $position ? $('#navbar-main-menu.fixed-top').css('top', -$navbarHeight) :
|
||||
$('#navbar-main-menu.fixed-top').css('top', 0);
|
||||
$scroll > $position
|
||||
? $("#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);
|
||||
}
|
||||
if ($scroll <= 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');
|
||||
}
|
||||
$position = $scroll;
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
13
src/main.js
13
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();
|
||||
});
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
html, body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
header, footer {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
main {
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
@@ -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(),
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user