Commit 201bf6e8 authored by Evaryont's avatar Evaryont

webpack asset helpers now function

I've had to delete the webpack clean plugin since it breaks
livereloading per https://github.com/middleman/middleman/issues/2118#issuecomment-378619949
parent 7d8e595c
Pipeline #25 failed with stage
in 2 minutes and 3 seconds
......@@ -18,3 +18,9 @@ source/calendar.svg
node_modules/
yarn-error.log
# this css file is dynamically generated
source/assets/stylesheets/syntax.css
# webpack output dir
.tmp/
......@@ -75,14 +75,24 @@ task :dirty_git do
end
desc "Build the middleman site"
task :build do
task :build => ['build:syntax_css'] do
cd File.expand_path('..', __FILE__)
sh "bundle exec middleman build --clean --verbose --environment=production"
cp '.tmp/dist/stats.json', 'build/assets/'
end
namespace :build do
task :syntax_css do
puts 'Creating syntax.css from rouge theme.'
require 'rouge'
open('source/assets/stylesheets/syntax.css', 'w') do |css_file|
css_file.puts Rouge::Themes::Github.render(:scope => '.highlight')
end
end
end
desc "Run the middleman preview server"
task :server do
task :server => ['build:syntax_css'] do
cd File.expand_path('..', __FILE__)
sh "bundle exec middleman server"
end
......
......@@ -12,6 +12,7 @@ $color_palette = ['#00c853', '#00e676', '#1b5e20', '#2e7d32', '#33691e',
require_relative 'lib/helpers/resume.rb'
require_relative 'lib/helpers/blog.rb'
require_relative 'lib/helpers/reviews.rb'
require_relative 'lib/helpers/webpack.rb'
require_relative 'lib/tag_cloud.rb'
# Dumb hacks are dumb. Since the blog posts don't include '.html.' in the file
......@@ -24,6 +25,7 @@ helpers do
include EvaryontsHelpers::Blog
include EvaryontsHelpers::Resume
include EvaryontsHelpers::Reviews
include WebpackStatsLoader
end
activate :blog do |blog|
......@@ -57,7 +59,7 @@ set :js_dir, 'assets/javascript'
set :images_dir, 'assets/images'
# Enable cache buster
activate :asset_hash
#activate :asset_hash
set :layout, 'page'
page '/blog/*', layout: 'post'
......@@ -89,4 +91,4 @@ configure :build do
end
activate :gzip
activate :minify_html
#activate :minify_html
......@@ -204,3 +204,24 @@ aside.onebox:last-child, aside.onebox header.source {
float: right;
}
}
.highlight table pre {
padding: 0px;
}
pre.highlight, .highlight table pre {
word-break: none;
word-wrap: pre;
white-space: pre;
overflow: auto;
}
/* I want to expand the code blocks when they're hovered, but the layout
doesn't work with that. Investigate later?
pre.highlight:hover, .highlight table pre:hover {
width: 150%;
transition: width .5s ease;
-webkit-transition: width .5s ease;
}
*/
@import "normalize.css";
@import "open-sans.css";
@import "raleway.css";
@import "font-awesome.css.scss";
@import "syntax.css";
@import "all.css.scss";
//
// ___
// /\_ \
// _____ ___ ___\//\ \ __
// /\ '__`\ / __`\ / __`\\ \ \ /'__`\
// \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
// \ \ ,__/\ \____/\ \____//\____\ \____\
// \ \ \/ \/___/ \/___/ \/____/\/____/
// \ \_\
// \/_/
//
// Designed, built, and released under MIT license by @mdo. Learn more at
// https://github.com/poole/poole.
@import "poole/variables";
@import "poole/base";
@import "poole/type";
@import "poole/syntax";
@import "poole/code";
@import "poole/layout";
@import "poole/masthead";
@import "poole/posts";
@import "poole/pagination";
@import "poole/message";
......@@ -6,12 +6,7 @@
<title><%= data.site.title %> - <%= current_resource.data.title %></title>
<%= feed_tag :atom, "#{blog.options.prefix.to_s}/feed.xml", title: "Atom Feed" %>
<link rel="alternate" title="Json Feed" type="application/json" href="<%= URI.join(data.site.url, "/feed.json") %>" />
<%= stylesheet_link_tag "normalize" %>
<%= stylesheet_link_tag "open-sans" %>
<%= stylesheet_link_tag "raleway" %>
<%= stylesheet_link_tag "font-awesome" %>
<%= stylesheet_link_tag "syntax" %>
<%= stylesheet_link_tag "all" %>
<%= link_webpack_css_chunk 'styles' %>
<!-- Begin favicons -->
<link rel="apple-touch-icon" sizes="57x57" href="/icons/apple-touch-icon-57x57.png">
......@@ -68,5 +63,7 @@
<noscript><p><img src="//<%= data.site.piwik.host %>/piwik.php?idsite=<%= data.site.piwik.id %>" style="border:0;" alt="" /></p></noscript>
<% end %>
<!-- End Matomo Code -->
<%= link_webpack_js_chunk 'index' %>
</body>
</html>
......@@ -2,7 +2,7 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const StatsWriterPlugin = require("webpack-stats-plugin").StatsWriterPlugin;;
const SriPlugin = require('webpack-subresource-integrity');
const webpack = require('webpack');
const Clean = require('clean-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = (env, options) => {
const isProduction = options.mode === 'production';
......@@ -10,7 +10,7 @@ module.exports = (env, options) => {
return {
entry: {
index: "./source/assets/javascript/index.js",
styles: "./source/assets/stylesheets/all.css.scss",
styles: "./source/assets/stylesheets/entry.scss",
},
output: {
"path": __dirname + '/.tmp/dist/',
......@@ -49,15 +49,22 @@ module.exports = (env, options) => {
]
},
plugins: [
new Clean(['.tmp']),
new webpack.DefinePlugin({
__PRODUCTION: isProduction
}),
new MiniCssExtractPlugin({filename: "assets/stylesheets/[name].css"}),
new OptimizeCssAssetsPlugin({
cssProcessorOptions: {
map: {
inline: false,
annotation: true,
}
}
}),
new SriPlugin({
hashFuncNames: ['sha256', 'sha384'],
enabled: isProduction,
}),
new webpack.DefinePlugin({
__PRODUCTION: isProduction
}),
new StatsWriterPlugin({
filename: 'stats.json',
fields: null,
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment