rocket_cms 0.24.0 → 0.25.0

data/lib/generators/rocket_cms/templates/webpack.config.js

@@ -2,36 +2,39 @@
 
 var path = require('path');
 var webpack = require('webpack');
-var functions = require('postcss-functions');
-var StatsPlugin = require('stats-webpack-plugin');
+var ManifestPlugin = require('webpack-manifest-plugin');
 
 var ExtractTextPlugin = require("extract-text-webpack-plugin");
-
 var autoprefixer = require('autoprefixer');
 var CompressionPlugin = require("compression-webpack-plugin");
 
 var host = process.env.HOST || 'localhost'
-var devServerPort = 3808;
+var devServerPort = <%= port %>;
 
 var production = process.env.NODE_ENV === 'production';
 
 const extractSass = new ExtractTextPlugin({
-    filename: production ? "[name].[contenthash].css" : "[name].css",
+  filename: production ? "[name]-[chunkhash].css" : "[name].css",
 });
 
-//console.log("dir:", __dirname)
-
 var sassExtractor = () => {
-  return ['css-hot-loader'].concat(extractSass.extract({
+  return ['extracted-loader'].concat(extractSass.extract({
     use: [{
+      loader: "babel-loader",
+      options: {
+        cacheDirectory: true
+      }
+    }, {
       loader: "css-loader",
       options: {
-        sourceMap: true
+        minimize: !production,
+        sourceMap: !production,
       }
     }, {
       loader: "sass-loader",
       options: {
-        sourceMap: true
+        sourceMap: !production,
+        includePaths: [path.resolve(__dirname, "..", "webpack")]
       }
     }],
     fallback: "style-loader"
@@ -39,29 +42,52 @@ var sassExtractor = () => {
 }
 
 var config = {
+  mode: production ? "production" : "development",
   entry: {
-    // Sources are expected to live in $app_root/webpack
-    vendor: [
-      'babel-polyfill',
-      'axios',
-      'jquery',
-      'lodash',
-    ],
-    application: 'application.es6'
+    // Sources are expected to live in $app_root
+    //vendor: [],
+    application: 'application.es6',
   },
 
   module: {
       rules: [
-          { test: /\.es6/, use: "babel-loader" },
-          { test: /\.handlebars$/, use: "handlebars-loader" },
-          { test: /\.(jpe?g|png|gif)$/i, use: "file-loader" },
           {
-            test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.eot($|\?)|\.svg($|\?)/,
-            use: production ? 'file-loader' : 'url-loader'
+            test: /(\.es6)$/,
+            use: {
+              loader: "babel-loader",
+              options: {
+                cacheDirectory: true
+              }
+            }
+          },
+          {
+            test: /(\.pug)$/,
+            loader: "pug-loader",
+            query: {}
+          },
+          {
+            test: /\.vue/,
+            use: {
+              loader: "vue-loader",
+            }
+          },
+          {
+            test: /\.(jpe?g|png|gif)$/i,
+            use: "file-loader"
+          },
+          {
+            test: /\.svg$/i,
+            exclude: /inline/i,
+            use: "file-loader"
+          },
+          {
+            test: /\.woff($|\?)|\.woff2($|\?)|\.ttf($|\?)|\.otf($|\?)|\.eot($|\?)/,
+            use: 'file-loader'
+          },
+          {
+            test: /\.(s?css|sass)$/i,
+            use: sassExtractor()
           },
-          { test: /\.sass$/, use: sassExtractor() },
-          { test: /\.scss$/, use: sassExtractor() },
-          { test: /\.css$/, use: sassExtractor() }
       ]
   },
 
@@ -70,51 +96,58 @@ var config = {
     // that all webpacked assets start with webpack/
 
     // must match config.webpack.output_dir
-    path: path.join(__dirname, '..', 'public', 'webpack'),
+    path: path.join(__dirname, "..", "public", "webpack"),
     publicPath: '/webpack/',
 
-    filename: production ? '[name]-[chunkhash].js' : '[name].js'
+    filename: production ? '[name]-[chunkhash].js' : '[name].js',
+    chunkFilename: production ? '[name]-[chunkhash].js' : '[name].js',
   },
 
   resolve: {
-    modules: [path.resolve(__dirname, "..", "webpack"), path.resolve(__dirname, "..", "node_modules")],
-    extensions: [".js", ".es6", ".css", ".sass", ".scss"],
+    modules: [
+      path.resolve(__dirname, "..", "webpack"),
+      path.resolve(__dirname, "..", "node_modules"),
+    ],
+    extensions: [".es6", ".vue", ".sass", ".css", ".js"],
+    alias: {
+      '~': path.resolve(__dirname, "..", "webpack"),
+    }
   },
 
   plugins: [
     extractSass,
-    new StatsPlugin('manifest.json', {
-      chunkModules: false,
-      source: false,
-      chunks: false,
-      modules: false,
-      assets: true
+    new ManifestPlugin({
+      writeToFileEmit: true,
+      publicPath: production ? "/webpack/" : 'http://' + host + ':' + devServerPort + '/webpack/',
     }),
     new webpack.ProvidePlugin({
-      $: "jquery/dist/jquery",
-      jQuery: "jquery/dist/jquery",
-      "window.jQuery": "jquery/dist/jquery",
-      //Tether: "tether",
-      //"window.Tether": "tether",
-      "_": "lodash",
-      "window._": "lodash",
-      //Alert: "exports-loader?Alert!bootstrap/js/dist/alert",
-      //Button: "exports-loader?Button!bootstrap/js/dist/button",
+      $: "jquery",
+      jQuery: "jquery",
+      "window.jQuery": "jquery",
     })
-  ]
+  ],
+  optimization: {
+    runtimeChunk: { name: 'vendor' },
+    splitChunks: {
+      chunks: "initial",
+      cacheGroups: {
+        default: false,
+        vendors: {
+          chunks: "initial",
+          test: /[\\/]node_modules[\\/]/,
+          priority: -10,
+          name: "vendor",
+        },
+      },
+    },
+  },
 };
 
 if (production) {
   config.plugins.push(
-    new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor-[chunkhash].js'}),
-    new webpack.optimize.UglifyJsPlugin({
-      compressor: { warnings: false },
-      sourceMap: false
-    }),
     new webpack.DefinePlugin({ // <--key to reduce React's size
       'process.env': { NODE_ENV: JSON.stringify('production') }
     }),
-    new webpack.optimize.ModuleConcatenationPlugin(),
     new CompressionPlugin({
         asset: "[path].gz",
         algorithm: "gzip",
@@ -123,9 +156,9 @@ if (production) {
         minRatio: 0.8
     })
   );
+  config.output.publicPath = '/webpack/';
 } else {
   config.plugins.push(
-    new webpack.optimize.CommonsChunkPlugin({name: 'vendor', filename: 'vendor.js'}),
     new webpack.NamedModulesPlugin()
   )
 
@@ -135,6 +168,7 @@ if (production) {
     headers: { 'Access-Control-Allow-Origin': '*' },
   };
   config.output.publicPath = 'http://' + host + ':' + devServerPort + '/webpack/';
+  // Source maps
   config.devtool = 'source-map';
 }
 

data/lib/generators/rocket_cms/templates/webpack/analytics.es6

@@ -0,0 +1,29 @@
+var old_url = window.location.href;
+
+document.addEventListener("turbolinks:load", function() {
+  //console.log("analytics load");
+
+  if (window[metrika]) {
+    window[metrika].hit(window.location.href, document.title, old_url)
+  }
+  old_url = window.location.href
+
+  if (window.gtag) {
+    gtag('event', 'page_view');
+    //  gtag('event', 'page_view', { 'send_to': 'YOUR_ID_HERE' });
+  }
+});
+
+export default function(name) {
+  if (window[metrika] && window[metrika].reachGoal) {
+    window[metrika].reachGoal(name);
+  } else {
+    if (window.console) {
+      console.log('unable to send event - no metrika');
+    }
+  }
+
+  //if (window.gtag) {
+    //gtag('event', name);
+  //}
+};

data/lib/generators/rocket_cms/templates/webpack/application.es6

@@ -1,20 +1,30 @@
-//import 'font-awesome/css/font-awesome.css';
-import 'application.sass';
-import 'rails-ujs';
+import './fonts';
+import './layout';
+
 import Errors from 'errors';
 import 'flash';
-//import 'bootstrap';
-
-window.A = {}
-A.errors = new Errors()
 
-$(function() {
-  A.errors.checkCookie();
+var errors = new Errors()
+document.addEventListener("DOMContentLoaded", function(event) {
+  errors.checkCookie();
 });
 
-//import Turbolinks from "turbolinks";
-//Turbolinks.start()
+import Turbolinks from "turbolinks";
+Turbolinks.start()
+
+import Rails from 'rails-ujs';
+Rails.start();
+
+import axios from 'axios';
 
-//document.addEventListener("turbolinks:load", function() {
-//})
+import "./blocks";
+import "./pages";
+
+import "analytics"
+//import goal from "analytics"
+
+document.addEventListener("turbolinks:load", function() {
+  axios.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
+  axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+});
 

data/lib/generators/rocket_cms/templates/webpack/blocks/footer/index.sass

@@ -0,0 +1,2 @@
+footer.footer
+

data/lib/generators/rocket_cms/templates/webpack/blocks/header/index.sass

@@ -0,0 +1 @@
+header.header

data/lib/generators/rocket_cms/templates/webpack/blocks/index.es6

@@ -0,0 +1,4 @@
+// import your blocks here
+import "./header";
+import "./footer";
+

data/lib/generators/rocket_cms/templates/webpack/common/index.sass

@@ -0,0 +1,2 @@
+@import './mixins'
+@import './variables'

data/lib/generators/rocket_cms/templates/webpack/common/mixins.sass

@@ -0,0 +1,5 @@
+=clearfix
+  &:after
+    content: ''
+    display: table
+    clear: both

data/lib/generators/rocket_cms/templates/webpack/common/variables.sass

@@ -0,0 +1 @@
+$font_main: sans-serif

data/lib/generators/rocket_cms/templates/webpack/errors/errors.pug

@@ -0,0 +1,7 @@
+.errors
+  .errors-inner
+    h3= title
+    a(target="_blank" href=link)
+      = anchor
+    = message
+

data/lib/generators/rocket_cms/templates/webpack/errors/index.es6

@@ -1,6 +1,6 @@
 import './index.sass';
 import Cookies from 'js-cookie';
-import template from './errors.handlebars';
+import template from './errors.pug';
 
 const COOKIE_ERROR = {
   title: 'В вашем броузере отключены Cookies',

data/lib/generators/rocket_cms/templates/webpack/fonts/index.sass

@@ -0,0 +1,6 @@
+@import '~common'
+@import 'mixin'
+
+// +font-face('Circe', './Circe/Circe-Light', 300)
+// +font-face('Circe', './Circe/Circe-Bold', 700)
+// +font-face('Circe', './Circe/Circe-ExtraBold', 800)

data/lib/generators/rocket_cms/templates/webpack/fonts/mixin.sass

@@ -0,0 +1,25 @@
+@function str-replace($string, $search, $replace: "")
+  $index: str-index($string, $search)
+
+  @if $index
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
+  @return $string
+
+=font-face($name, $path, $weight: null, $style: null, $exts: woff2 woff ttf)
+  $src: null
+
+  //$extmods: (eot: "?", svg: "#" + str-replace($name, " ", "_"))
+  $extmods: ()
+
+  $formats: (otf: "opentype", ttf: "truetype")
+
+  @each $ext in $exts
+    $extmod: if(map-has-key($extmods, $ext), $ext + map-get($extmods, $ext), $ext)
+    $format: if(map-has-key($formats, $ext), map-get($formats, $ext), $ext)
+    $src: append($src, url(quote($path + "." + $extmod)) format(quote($format)), comma)
+
+  @font-face
+    font-family: quote($name)
+    font-style: $style
+    font-weight: $weight
+    src: $src

data/lib/generators/rocket_cms/templates/webpack/layout/buttons.sass

@@ -0,0 +1,23 @@
+.btn
+  padding-left: 30px
+  padding-right: 30px
+  padding-top: 11px
+  padding-bottom: 11px
+  font-family: Raleway, sans-serif
+  font-size: 14px
+  text-decoration: none
+  text-transform: uppercase
+  font-weight: 700
+  line-height: 20px
+  letter-spacing: 1px
+  cursor: pointer
+  display: inline-block
+
+  &-primary
+    background-color: #e14b4b
+    border: 1px solid #e14b4b
+    color: #ffffff
+    transition: background-color 0.3s ease, border 0.3s ease
+    &:hover
+      background-color: darken(#e14b4b, 20%)
+      border: 1px solid darken(#e14b4b, 20%)

data/lib/generators/rocket_cms/templates/webpack/layout/index.sass

@@ -0,0 +1,5 @@
+@import "~common"
+
+@import "./main"
+@import "./typography"
+@import "./buttons"

data/lib/generators/rocket_cms/templates/webpack/layout/main.sass

@@ -0,0 +1,20 @@
+*
+  box-sizing: border-box
+
+html, body
+  height: 100%
+
+html
+  font-size: 14px
+  text-rendering: optimizeLegibility
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  overflow-y: scroll
+
+body
+  width: 100%
+  margin: 0
+  padding: 0
+  font-family: sans-serif
+
+

data/lib/generators/rocket_cms/templates/webpack/layout/typography.sass

@@ -0,0 +1,4 @@
+h1
+  font-size: 40px
+h2
+  font-size: 30px

data/lib/generators/rocket_cms/templates/webpack/pages/home/index.es6

@@ -0,0 +1 @@
+// import page-specific blocks here

data/lib/generators/rocket_cms/templates/webpack/pages/index.es6

@@ -0,0 +1,2 @@
+// import your pages here
+import "./home"

data/lib/generators/rocket_cms/webpack_generator.rb

@@ -2,6 +2,8 @@ require 'rails/generators'
 
 module RocketCms
   class WebpackGenerator < Rails::Generators::Base
+    argument :port, type: :string
+
     source_root File.expand_path('../templates', __FILE__)
     def app_name
       Rails.application.class.name.split("::")[0]
@@ -10,20 +12,40 @@ module RocketCms
     desc 'RocketCMS webpack generator'
     def install
       copy_file ".babelrc", ".babelrc"
-      copy_file "webpack.config.js", "config/webpack.config.js"
 
-      copy_file "webpack/application.es6", "webpack/application.es6"
-      copy_file "webpack/application.sass", "webpack/application.sass"
+      copy_file "webpack/common/mixins.sass", "webpack/common/mixins.sass"
+      copy_file "webpack/common/variables.sass", "webpack/common/variables.sass"
+      copy_file "webpack/common/index.sass", "webpack/common/index.sass"
 
+      copy_file "webpack/errors/errors.pug", "webpack/errors/errors.pug"
       copy_file "webpack/errors/index.es6", "webpack/errors/index.es6"
       copy_file "webpack/errors/index.sass", "webpack/errors/index.sass"
-      copy_file "webpack/errors/errors.handlebars", "webpack/errors/errors.handlebars"
 
       copy_file "webpack/flash/index.es6", "webpack/flash/index.es6"
       copy_file "webpack/flash/index.sass", "webpack/flash/index.sass"
 
+      copy_file "webpack/fonts/index.sass", "webpack/fonts/index.sass"
+      copy_file "webpack/fonts/mixin.sass", "webpack/fonts/mixin.sass"
+
+      copy_file "webpack/layout/buttons.sass", "webpack/layout/buttons.sass"
+      copy_file "webpack/layout/index.sass", "webpack/layout/index.sass"
+      copy_file "webpack/layout/main.sass", "webpack/layout/main.sass"
+      copy_file "webpack/layout/typography.sass", "webpack/layout/typography.sass"
+
+      copy_file "webpack/blocks/index.es6", "webpack/blocks/index.es6"
+      copy_file "webpack/blocks/header/index.sass", "webpack/blocks/header/index.sass"
+      copy_file "webpack/blocks/footer/index.sass", "webpack/blocks/footer/index.sass"
+
+      copy_file "webpack/pages/index.es6", "webpack/pages/index.es6"
+      copy_file "webpack/pages/home/index.es6", "webpack/pages/home/index.es6"
+
+      copy_file "webpack/analytics.es6", "webpack/analytics.es6"
+      copy_file "webpack/application.es6", "webpack/application.es6"
+
       remove_file "package.json"
+
       template "package.json", "package.json"
+      template "webpack.config.js", "config/webpack.config.js"
     end
   end
 end