Merge pull request #12 from st3phhays/choco-theme/release/0.1.0

(#10)(#11) choco-theme JavaScript and Bootstrap

bundleconfig.json

@@ -8,15 +8,13 @@
     {
       "outputFileName": "assets/js/chocolatey-head.bundle.js",
       "inputFiles": [
-        "node_modules/choco-theme/js/chocolatey-theme-toggle-head.js"
+        "assets/js/temp/chocolatey-theme-toggle-head.js"
       ]
     },
     {
       "outputFileName": "assets/js/chocolatey.bundle.js",
       "inputFiles": [
-        "node_modules/choco-theme/js/chocolatey-theme-toggle.js",
-        "node_modules/choco-theme/js/chocolatey-tables.js",
-        "node_modules/choco-theme/js/chocolatey-inputs.js"
+        "assets/js/temp/init/chocolatey-zendesk.js"
       ]
     }
   ]

global-partials/themetoggle.hbs

@@ -5,10 +5,10 @@ partial: themetoggle
 <input id="themeToggle" class="toggle-checkbox theme-toggle" type="checkbox" aria-label="Toggle theme settings" />
 <div class="toggle-slot">
     <div class="sun-icon-wrapper">
-        <div class="sun-icon fas fa-sun"></div>
+        <div class="sun-icon fa-solid fa-sun"></div>
     </div>
     <div class="toggle-button"></div>
     <div class="moon-icon-wrapper">
-        <div class="moon-icon fas fa-moon"></div>
+        <div class="moon-icon fa-solid fa-moon"></div>
     </div>
 </div>

gulpfile.js

@@ -1,23 +1,26 @@
 'use strict';
 
-const gulp = require('gulp'),
-    babel = require('gulp-babel'),
-    concat = require('gulp-concat'),
-    cleancss = require('gulp-clean-css'),
-    uglify = require('gulp-uglify-es').default,
-    sass = require('gulp-sass')(require('sass')),
-    clean = require('gulp-clean'),
-    purgecss = require('gulp-purgecss'),
-    rename = require('gulp-rename'),
-    merge = require('merge-stream'),
-    injectstring = require('gulp-inject-string'),
-    inlinesource = require('gulp-inline-source'),
-    bundleconfig = require('./bundleconfig.json'),
-    zendeskconfig = require('./zendeskconfig.json'),
-    fs = require('fs');
+const concat = require('gulp-concat');
+const cleancss = require('gulp-clean-css');
+const uglify = require('gulp-uglify-es').default;
+const sass = require('gulp-sass')(require('sass'));
+const clean = require('gulp-clean');
+const purgecss = require('gulp-purgecss');
+const rename = require('gulp-rename');
+const merge = require('merge-stream');
+const injectstring = require('gulp-inject-string');
+const browserify = require('browserify');
+const babelify = require('babelify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+const util = require('gulp-util');
+const inlinesource = require('gulp-inline-source');
+const bundleconfig = require('./bundleconfig.json');
+const zendeskconfig = require('./zendeskconfig.json');
+// const fs = require('fs');
 
 const editFilePartial = 'Edit this file at https://github.com/chocolatey/choco-theme/partials';
-const { series, parallel, src, dest, watch } = require('gulp');
+const { series, parallel, src, dest } = require('gulp');
 
 const regex = {
     css: /\.css$/,
@@ -33,105 +36,109 @@ const paths = {
     theme: 'node_modules/choco-theme/'
 };
 
-const getBundles = (regexPattern) => {
+const getBundles = regexPattern => {
     return bundleconfig.filter(bundle => {
         return regexPattern.test(bundle.outputFileName);
     });
 };
 
-const getZendeskBundles = (regexPattern) => {
+const getZendeskBundles = regexPattern => {
     return zendeskconfig.filter(bundle => {
         return regexPattern.test(bundle.outputFileName);
     });
 };
 
-function del() {
+const del = () => {
     return src([
-        paths.assets + 'css',
-        paths.assets + 'js',
+        `${paths.assets}css`,
+        `${paths.assets}js`,
         paths.partials
     ], { allowEmpty: true })
         .pipe(clean({ force: true }));
-}
+};
 
-function copyTheme() {
-    var copyThemeToggleHbs = src(paths.theme + 'partials/ThemeToggle.txt')
-        .pipe(injectstring.prepend('---\npartial: themetoggle\n---\n{{!-- ' + editFilePartial + ' --}}\n'))
+const copyTheme = () => {
+    const copyThemeToggleHbs = src(`${paths.theme}partials/ThemeToggle.txt`)
+        .pipe(injectstring.prepend(`---\npartial: themetoggle\n---\n{{!-- ${editFilePartial} --}}\n`))
         .pipe(rename({ basename: 'themetoggle', extname: '.hbs' }))
         .pipe(dest(paths.partials));
 
-    return merge(copyThemeToggleHbs);
-}
+    const copyChocoThemeJs = src(`${paths.theme}js/**/*.js`)
+        .pipe(dest(`${paths.assets}js/temp`));
 
-function compileSass() {
-    return src(paths.theme + 'scss/zendesk.scss')
-        .pipe(sass().on('error', sass.logError))
-        .pipe(dest(paths.assets + 'css'));
-}
+    return merge(copyThemeToggleHbs, copyChocoThemeJs);
+};
 
-function compileJs() {
-    var tasks = getBundles(regex.js).map(function (bundle) {
+const compileSass = () => {
+    return src(`${paths.theme}scss/zendesk.scss`)
+        .pipe(sass().on('error', sass.logError))
+        .pipe(dest(`${paths.assets}css`));
+};
 
-        return src(bundle.inputFiles, { base: '.' })
-            .pipe(babel({
-                "sourceType": "unambiguous",
-                "presets": [
-                    ["@babel/preset-env", {
-                        "targets": {
-                            "ie": "10"
-                        }
-                    }
-                  ]]
-            }))
-            .pipe(concat(bundle.outputFileName))
+const compileJs = () => {
+    const tasks = getBundles(regex.js).map(bundle => {
+        const b = browserify({
+            entries: bundle.inputFiles,
+            debug: true,
+            transform: [babelify.configure({
+                presets: [
+                    '@babel/preset-env',
+                    ['@babel/preset-react', { runtime: 'automatic' }]
+                ],
+                compact: false
+            })]
+        });
+
+        return b.bundle()
+            .pipe(source(bundle.outputFileName))
+            .pipe(buffer())
+            .on('error', util.log)
             .pipe(dest('.'));
     });
 
     return merge(tasks);
-}
-
-function compileCss() {
-    var tasks = getBundles(regex.css).map(function (bundle) {
+};
 
+const compileCss = () => {
+    const tasks = getBundles(regex.css).map(bundle => {
         return src(bundle.inputFiles, { base: '.' })
             .pipe(concat(bundle.outputFileName))
             .pipe(dest('.'));
     });
 
     return merge(tasks);
-}
+};
 
-function purgeCss() {
-    return src(paths.assets + 'css/chocolatey.bundle.css')
+const purgeCss = () => {
+    return src(`${paths.assets}css/chocolatey.bundle.css`)
         .pipe(purgecss({
             content: [
-                paths.templates + '*.hbs',
-                paths.globalpartials + '*.hbs',
-                paths.assets + 'js/*.*',
-                paths.assets + 'js/*.*.*',
-                paths.assets + 'js/*.*.*.*'
+                `${paths.templates}*.hbs`,
+                `${paths.globalpartials}*.hbs`,
+                `${paths.assets}js/*.*`,
+                `${paths.assets}js/*.*.*`,
+                `${paths.assets}js/*.*.*.*`
             ],
             safelist: [
-                '::-webkit-scrollbar', 
-                '::-webkit-scrollbar-thumb', 
-                'link-light', 
-                'main', 
-                'table-bordered', 
-                'table-striped', 
-                'table-responsive-sm', 
-                'table-responsive', 
+                '::-webkit-scrollbar',
+                '::-webkit-scrollbar-thumb',
+                'link-light',
+                'main',
+                'table-bordered',
+                'table-striped',
+                'table-responsive-sm',
+                'table-responsive',
                 'clear-button',
                 'recent-activity-item-meta'
             ],
             keyframes: true,
             variables: true
         }))
-        .pipe(dest(paths.assets + 'css/'));
-}
-
-function minCss() {
-    var tasks = getBundles(regex.css).map(function (bundle) {
+        .pipe(dest(`${paths.assets}css/`));
+};
 
+const minCss = () => {
+    const tasks = getBundles(regex.css).map(bundle => {
         return src(bundle.outputFileName, { base: '.' })
             .pipe(cleancss({
                 level: 2,
@@ -142,49 +149,48 @@ function minCss() {
     });
 
     return merge(tasks);
-}
-
-function minJs() {
-    var tasks = getBundles(regex.js).map(function (bundle) {
+};
 
+const minJs = () => {
+    const tasks = getBundles(regex.js).map(bundle => {
         return src(bundle.outputFileName, { base: '.' })
             .pipe(uglify())
             .pipe(rename({ suffix: '.min' }))
             .pipe(dest('.'));
     });
 
     return merge(tasks);
-}
-
-function zendeskCss() {
-    var tasks = getZendeskBundles(regex.css).map(function (bundle) {
+};
 
+const zendeskCss = () => {
+    const tasks = getZendeskBundles(regex.css).map(bundle => {
         return src(bundle.inputFiles, { base: '.' })
             .pipe(concat(bundle.outputFileName))
             .pipe(dest('.'));
     });
 
     return merge(tasks);
-}
+};
 
-// If the JS/CSS included in the inline assets below need to be updated, 
+// If the JS/CSS included in the inline assets below need to be updated,
 // replace the inline code with the tags specified above the function, and run `gulp`.
 
 // document_head.hbs - <script type="text/javascript" src="../assets/js/chocolatey-head.bundle.min.js" inline></script>
 // footer.hbs - <script type="text/javascript" src="../assets/js/chocolatey.bundle.min.js" inline></script>
-function inlineAssets() {
-    return src([paths.templates + 'footer.hbs', paths.templates + 'document_head.hbs'])
+const inlineAssets = () => {
+    return src([`${paths.templates}footer.hbs`, `${paths.templates}document_head.hbs`])
         .pipe(inlinesource())
         .pipe(dest(paths.templates));
-}
+};
 
-function delEnd() {
+const delEnd = () => {
     return src([
-        paths.assets + 'css',
-        paths.assets + 'js'
+        `${paths.assets}css`,
+        `${paths.assets}js`,
+        `${paths.assets}js/temp`
     ], { allowEmpty: true })
         .pipe(clean({ force: true }));
-}
+};
 
 // Independednt tasks
 exports.del = del;
@@ -196,8 +202,3 @@ exports.compileZendesk = parallel(zendeskCss, inlineAssets);
 
 // Gulp default
 exports.default = series(copyTheme, exports.compileSassJs, compileCss, purgeCss, exports.minCssJs, exports.compileZendesk, delEnd);
-
-// Watch files
-exports.watchFiles = function () {
-    watch([paths.theme], exports.default);
-};

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "choco-theme",
   "author": "Chocolatey Software",
-  "version": "101.1.0",
+  "version": "101.2.0",
   "api_version": 2,
   "default_locale": "en-us",
   "settings": [

package.json

@@ -12,7 +12,7 @@
     "@semantic-release/changelog": "^5.0.0",
     "@semantic-release/exec": "^5.0.0",
     "@semantic-release/git": "^9.0.0",
-    "choco-theme": "git+https://github.com/chocolatey/choco-theme.git",
+    "choco-theme": "0.1.6",
     "husky": "^4.2.3",
     "js-yaml": "^3.13.1",
     "semantic-release": "^17.0.4"