From afb98799e60e982ae1b54982a8f22bb66f0c2bfd Mon Sep 17 00:00:00 2001 From: Stephanie Hays Date: Mon, 11 Mar 2024 16:31:02 -0500 Subject: [PATCH 1/3] (#68) Remove Gulp This removes Gulp and introduces a number of new technologies. The build process is now handled by esbuild, SASS, and a number of new technologies. Instead of running `gulp` to compile assets, the command `yarn run choco-theme` is now used. By running this, all necessary files are put in place and CSS is purged. --- bundleconfig.json | 20 ----- gulpfile.js | 193 ------------------------------------------- input/_Layout.cshtml | 7 +- package.json | 8 +- recipe.cake | 2 +- 5 files changed, 7 insertions(+), 223 deletions(-) delete mode 100644 bundleconfig.json delete mode 100644 gulpfile.js diff --git a/bundleconfig.json b/bundleconfig.json deleted file mode 100644 index d70c098..0000000 --- a/bundleconfig.json +++ /dev/null @@ -1,20 +0,0 @@ -[ - { - "outputFileName": "input/assets/css/boxstarter.bundle.css", - "inputFiles": [ - "input/assets/css/boxstarter.css" - ] - }, - { - "outputFileName": "input/assets/js/boxstarter-head.bundle.js", - "inputFiles": [ - "input/assets/js/temp/chocolatey-theme-toggle-head.js" - ] - }, - { - "outputFileName": "input/assets/js/boxstarter.bundle.js", - "inputFiles": [ - "input/assets/js/temp/init/chocolatey-boxstarter-org.js" - ] - } -] \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js deleted file mode 100644 index 4b8e625..0000000 --- a/gulpfile.js +++ /dev/null @@ -1,193 +0,0 @@ -'use strict'; - -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 log = require('fancy-log'); -const bundleconfig = require('./bundleconfig.json'); -const fs = require('fs'); -const ts = require('gulp-typescript'); - -const editFilePartial = 'Edit this file at https://github.com/chocolatey/choco-theme/partials'; -const { series, parallel, src, dest } = require('gulp'); - -const regex = { - css: /\.css$/, - js: /\.js$/ -}; - -const paths = { - input: 'input/', - assets: 'input/assets/', - partials: 'input/global-partials', - node_modules: 'node_modules/', - theme: 'node_modules/choco-theme/' -}; - -const tsProject = ts.createProject(`${paths.theme}tsconfig.json`); - -const getBundles = regexPattern => { - return bundleconfig.filter(bundle => { - return regexPattern.test(bundle.outputFileName); - }); -}; - -const del = () => { - return src([ - `${paths.assets}css`, - `${paths.assets}js`, - `${paths.assets}fonts`, - `${paths.assets}images/global-shared`, - paths.partials - ], { allowEmpty: true }) - .pipe(clean({ force: true })); -}; - -const copyTheme = () => { - const copyFontAwesome = src(`${paths.node_modules}@fortawesome/fontawesome-free/webfonts/*.*`) - .pipe(dest(`${paths.assets}fonts/fontawesome-free`)); - - const copyPartials = src([`${paths.theme}partials/ThemeToggle.txt`, `${paths.theme}partials/TopAlertBanner.txt`, `${paths.theme}partials/GoogleTag.html`]) - .pipe(injectstring.prepend(`@* ${editFilePartial} *@\n`)) - .pipe(injectstring.replace(/topNoticeText = ""/, `topNoticeText = "${fs.readFileSync(`${paths.theme}partials/AlertText.txt`, 'utf8')}"`)) - .pipe(injectstring.replace(//, fs.readFileSync(`${paths.theme}partials/ThemeToggle.txt`))) - .pipe(injectstring.replace(//, '')) // eslint-disable-line - .pipe(rename({ prefix: '_', extname: '.cshtml' })) - .pipe(dest(paths.partials)); - - const copyChocoThemeJs = src(`${paths.theme}js/**/*.*`) - .pipe(dest(`${paths.assets}js/temp`)); - - return merge(copyFontAwesome, copyPartials, copyChocoThemeJs); -}; - -const compileSass = () => { - return src(`${paths.theme}scss/*.scss`) - .pipe(sass().on('error', sass.logError)) - .pipe(dest(`${paths.assets}css`)); -}; - -const compileTs = () => { - const tsResult = src(`${paths.assets}js/temp/ts/**/*.ts`) - .pipe(tsProject()); - - return tsResult.js.pipe(dest(`${paths.assets}js/temp/ts`)); -}; - -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', error => { log.error(error.message); }) - .pipe(dest('.')); - }); - - return merge(tasks); -}; - -const compileCss = () => { - const tasks = getBundles(regex.css).map(bundle => { - return src(bundle.inputFiles, { base: '.' }) - .pipe(concat(bundle.outputFileName)) - .pipe(dest('.')); - }); - - return merge(tasks); -}; - -const purgeCss = () => { - return src(`${paths.assets}css/boxstarter.bundle.css`) - .pipe(purgecss({ - content: [ - `${paths.input}**/*.cshtml`, - `${paths.input}**/*.md`, - `${paths.assets}js/*.*` - ], - safelist: [ - '::-webkit-scrollbar', - '::-webkit-scrollbar-thumb', - 'link-light', - 'btn-website', - 'btn-facebook', - 'btn-twitter', - 'btn-linkedin', - 'fa-check', - 'fa-triangle-exclamation', - 'fa-info', - 'fa-xmark', - 'text-bg-warning', - 'text-bg-danger', - 'text-bg-success', - 'text-bg-info' - ], - keyframes: true, - variables: true - })) - .pipe(dest(`${paths.assets}css/`)); -}; - -const minCss = () => { - const tasks = getBundles(regex.css).map(bundle => { - return src(bundle.outputFileName, { base: '.' }) - .pipe(cleancss({ - level: 2, - compatibility: 'ie8' - })) - .pipe(rename({ suffix: '.min' })) - .pipe(dest('.')); - }); - - return merge(tasks); -}; - -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); -}; - -const delEnd = () => { - return src([ - `${paths.assets}css/*.css`, - `!${paths.assets}css/*.min.css`, - `${paths.assets}js/*.js`, - `!${paths.assets}js/*.min.js`, - `${paths.assets}js/temp` - ], { allowEmpty: true }) - .pipe(clean({ force: true })); -}; - -// Gulp series -exports.compileSassJs = parallel(compileSass, compileJs); -exports.minCssJs = parallel(minCss, minJs); - -// Gulp default -exports.default = series(del, copyTheme, compileTs, exports.compileSassJs, compileCss, purgeCss, exports.minCssJs, delEnd); diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml index 8caf18f..17974d0 100644 --- a/input/_Layout.cshtml +++ b/input/_Layout.cshtml @@ -36,8 +36,8 @@ - - + + @title @@ -309,7 +309,6 @@ - - + \ No newline at end of file diff --git a/package.json b/package.json index 660c585..35096a0 100644 --- a/package.json +++ b/package.json @@ -11,12 +11,10 @@ "url": "https://github.com/chocolatey/boxstarter.org/issues" }, "homepage": "https://github.com/chocolatey/boxstarter.org#readme", + "scripts": { + "choco-theme": "yarn dlx --quiet ts-node --skipIgnore node_modules/choco-theme/build/choco-theme.ts --repository=boxstarter" + }, "devDependencies": { "choco-theme": "0.5.14" - }, - "resolutions": { - "glob-parent": "^6.0.2", - "nth-check": "^2.1.1", - "terser": "^5.14.2" } } diff --git a/recipe.cake b/recipe.cake index 182d29c..78ef347 100644 --- a/recipe.cake +++ b/recipe.cake @@ -1,4 +1,4 @@ -#load nuget:?package=Chocolatey.Docs.Cake.Recipe&version=0.1.2 +#load nuget:?package=Chocolatey.Docs.Cake.Recipe&version=0.2.0 Environment.SetVariableNames(); From 6ae0e4ca0a6d659de83d77e2b9ce02d1566e4a02 Mon Sep 17 00:00:00 2001 From: Stephanie Hays Date: Wed, 27 Mar 2024 13:09:14 -0500 Subject: [PATCH 2/3] (#58) Upgrade Bootstrap to 5.3.x This upgrades Bootstrap to 5.3.x. A large effort was made to update choco-theme to use Bootstraps css variables and dark mode settings. This will help future upgrades to Bootstrap and choco-theme. This also adds new social media icons and adjusts old ones. --- input/404.md | 2 +- input/_Layout.cshtml | 18 +++++++++--------- input/index.cshtml | 18 +++++++++--------- 3 files changed, 19 insertions(+), 19 deletions(-) diff --git a/input/404.md b/input/404.md index a05c066..0333dca 100644 --- a/input/404.md +++ b/input/404.md @@ -7,7 +7,7 @@ ShowInSidebar: false
-
+
diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml index 17974d0..260851c 100644 --- a/input/_Layout.cshtml +++ b/input/_Layout.cshtml @@ -43,7 +43,7 @@
@Html.Partial("global-partials/_TopAlertBanner") -