initial commit

Author: lazabogdan

.gitignore

@@ -0,0 +1 @@
+node_modules

bs-config.json

@@ -0,0 +1,10 @@
+{
+  "port": 3000,
+  "files": ["./dist/**/*.{html,css,js}"],
+  "server": { "baseDir": "./dist" },
+  "injectChanges": true,
+  "notify": false,
+  "ghostMode": false,
+  "logLevel": "silent",
+  "proxy": null
+}

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "theme-mix",
+  "version": "0.1.0",
+  "author": "FrontendMatter <contact@frontendmatter.com> (http://themeforest.net/user/frontendmatter/portfolio)",
+  "dependencies": {
+    "del": "^2.2.2",
+    "front-matter-loader": "^0.1.2",
+    "fs-simple-cache": "^1.0.0",
+    "jsbeautify-loader": "^0.3.0",
+    "laravel-mix": "^0.10.0",
+    "lodash.merge": "^4.6.0",
+    "nunjucks-html-loader": "github:lazabogdan/nunjucks-html-loader#front-matter",
+    "sass-importer-npm": "^1.0.2",
+    "webpack-rtl-plugin": "^1.6.0",
+    "webpack-rtl-wrap-plugin": "^1.2.0",
+    "webpack-sources": "^0.2.3",
+    "yargs": "^7.0.2"
+  },
+  "description": "Webpack config for FrontendMatter HTML Themes",
+  "main": "webpack.mix.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "license": "ISC"
+}

webpack-wrap-theme-plugin.js

@@ -0,0 +1,48 @@
+const async = require('async')
+const RawSource = require('webpack-sources').RawSource
+const merge  = require('lodash.merge')
+const Cache = require('fs-simple-cache')
+
+class WebpackWrapThemePlugin {
+  constructor (options = {}) {
+    this.options = merge({
+      test: /\.css?$/,
+      themeClass: '.theme-default',
+    }, options)
+  }
+
+  apply (compiler) {
+    const cache = new Cache(this.options)
+    compiler.plugin('emit', (compilation, callback) => {
+      async.eachOfLimit(compilation.chunks, 5, (chunk, key, cb) => {
+        let promise = Promise.resolve()
+
+        chunk.files.forEach((file) => {
+          const asset = compilation.assets[file]
+
+          if (this.options.test.test(file)) {
+            const source = asset.source()
+            let content
+            if (content = cache.get(source).content) {
+              promise = promise.then(() => content)
+            }
+            else {
+              promise = promise.then(() => {
+                const result = source.replace(/\[dir=/g, this.options.themeClass + '[dir=')
+                cache.put(source, { content: result })
+                return result
+              })
+            }
+            promise = promise.then(result => {
+              compilation.assets[file] = new RawSource(result)
+            })
+          }
+        })
+
+        promise.then(() => cb())
+      }, callback)
+    })
+  }
+}
+
+module.exports = WebpackWrapThemePlugin

webpack.mix.js

@@ -0,0 +1,183 @@
+const { mix } = require('laravel-mix')
+const Mix     = mix.config
+const glob    = require('glob')
+const argv    = require('yargs').argv
+const del     = require('del')
+const merge   = require('webpack-merge').smart
+let webpackConfig = {}
+
+///////////////////////////////////////////
+// RUN SPECIFIC TASKS                    //
+// npm run development -- --env.run html //
+// npm run development -- --env.run js   //
+// npm run development -- --env.run sass //
+// npm run development -- --env.run copy //
+///////////////////////////////////////////
+
+const __RUN = argv.env ? argv.env.run : undefined
+
+/////////////
+// CLEANUP //
+/////////////
+
+if (__RUN === 'clean' || !__RUN) {
+  del.sync([
+    'dist/**/*.html',
+    'dist/assets/{css,fonts,js,vendor}'
+  ])
+}
+
+////////
+// JS //
+////////
+
+// npm run development -- --env.run js
+if (__RUN === 'js' || !__RUN) {
+  for (let file of glob.sync('./src/js/**/**.{js,vue}', { ignore: '**/_*' })) {
+    mix.js(file, './dist/assets/js')
+  }
+}
+
+////////////////////////
+// COPY VENDOR ASSETS //
+// from node_modules  //
+////////////////////////
+
+// npm run development -- --env.run copy
+if (__RUN === 'copy' || !__RUN) {
+  try {
+    require(path.join(process.cwd(), 'copy-vendor-assets.json')).forEach(function(asset) {
+      var dest = path.join(process.cwd(), 'dist/assets/vendor')
+      var src = asset
+      if (asset instanceof Object) {
+        src = Object.keys(asset).pop()
+        dest = Object.values(asset).pop()
+      }
+      for (let file of glob.sync(src, { cwd: path.join(process.cwd(), 'node_modules/') })) {
+        mix.copy(path.join(process.cwd(), 'node_modules', file), dest)
+      }
+    })
+  }
+  catch (e) {}
+}
+
+//////////
+// SASS //
+//////////
+
+// npm run development -- --env.theme dark
+const __THEME = argv.env ? argv.env.theme || 'default' : 'default'
+
+// npm run development -- --env.run sass
+if (__RUN === 'sass' || !__RUN) {
+
+  let sassOptions = { 
+    importer: require('sass-importer-npm'),
+    // inject $theme variable
+    data: '$theme: ' + __THEME + ';'
+  }
+
+  mix.options({
+    // ignore fonts
+    processCssUrls: false
+  })
+
+  for (let file of glob.sync('src/sass/*.scss', { ignore: '**/_*' })) {
+    mix.sass(file, './dist/assets/css/themes/' + __THEME, sassOptions)
+  }
+}
+
+/////////
+// RTL //
+/////////
+
+// npm run development -- --env.run sass
+if (__RUN === 'sass' || !__RUN) {
+  const WebpackRTLPlugin = require('webpack-rtl-plugin')
+  const WebpackRTLWrapPlugin = require('webpack-rtl-wrap-plugin')
+  const cacheDirectory = path.resolve(path.join('temp', 'rtl', __THEME))
+
+  del.sync(cacheDirectory)
+
+  webpackConfig = merge(webpackConfig, { 
+    plugins: [
+      // Creates .rtl.css
+      new WebpackRTLPlugin({
+        minify: false
+      }),
+      // wraps CSS into [dir=ltr|rtl]
+      new WebpackRTLWrapPlugin({
+        cacheDirectory
+      })
+    ]
+  })
+}
+
+///////////////////////////////////
+// WRAP CSS with .theme-$__THEME //
+///////////////////////////////////
+
+// npm run development -- --env.run sass
+if (__RUN === 'sass' || !__RUN) {
+  const WebpackWrapThemePlugin = require('./webpack-wrap-theme-plugin')
+  const cacheDirectory = path.resolve(path.join('temp', 'themeClass', __THEME))
+
+  del.sync(cacheDirectory)
+
+  webpackConfig = merge(webpackConfig, {
+    plugins: [
+      new WebpackWrapThemePlugin({ 
+        themeClass: '.theme-' + __THEME,
+        cacheDirectory
+      })
+    ]
+  })
+}
+
+//////////////
+// NUNJUCKS //
+//////////////
+
+// npm run development -- --env.run html
+if (__RUN === 'html' || !__RUN) {
+  for (let file of glob.sync('./src/html/pages/*.html', { ignore: '**/_*' })) {
+    Mix.entry().entry.add('mix', path.resolve(file))
+  }
+
+  webpackConfig = merge(webpackConfig, {
+    module: {
+      rules: [{
+        test: /\.html$/,
+        loaders: [{
+          loader: 'file-loader',
+          options: {
+            name: 'dist/[path][name].html',
+            context: './src/html/pages',
+            useRelativePath: true
+          }
+        }, 'jsbeautify-loader', {
+          loader: 'nunjucks-html-loader',
+          options: {
+            searchPaths: [
+              './src/html'
+            ]
+          }
+        }, 'front-matter-loader']
+      }]
+    }
+  })
+}
+
+//////////////////
+// APPLY CONFIG //
+//////////////////
+
+mix.webpackConfig(webpackConfig)
+
+/////////////////
+// BROWSERSYNC //
+/////////////////
+
+if (!__RUN) {
+  mix.browserSync(require('./bs-config.json'))
+}