(#392) Remove Gulp

This removes Gulp and introduces a number of new technologies. The build process is now handled by esbuild and a number of new scripts. The build process is now much faster and more reliable with less chance of introducing security vulnerabilities. Choco-design has been updated to reflect these changes as well as the README of this repository.
chocolatey · Apr 3, 2024 · 506749f · 506749f
1 parent 7b96991
commit 506749f
Show file tree

Hide file tree

Showing 132 changed files with 2,092 additions and 1,388 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,7 +3,7 @@ module.exports = {
         browser: true,
         es2021: true
     },
-    ignorePatterns: ['js/lib', 'node_modules', 'wwwroot/js/*.min.js', 'input/assets/js/*.min.js', 'Scripts/*.min.js'],
+    ignorePatterns: ['js/src/lib', 'node_modules', 'wwwroot/js/*.min.js', 'input/assets/js/*.min.js', 'Scripts/*.min.js'],
     globals: {
         Prism: 'readonly'
     },
@@ -14,7 +14,7 @@ module.exports = {
     },
     overrides: [
         {
-            files: ['js/ts/**/*.ts', 'playwright/**/*.ts'],
+            files: ['js/src/ts/**/*.ts', 'playwright/**/*.ts', 'build/**/*.ts'],
             extends: [
                 'standard',
                 'eslint:recommended',
@@ -42,7 +42,7 @@ module.exports = {
             }
         },
         {
-            files: ['.eslintrc.js', 'js/**/*.*', 'getting-started/*.js', 'playwright/**/*.ts', 'wwwroot/js/src/**/*.js', 'gulpfile.js'],
+            files: ['.eslintrc.js', 'postcss.config.js', 'js/**/**/*.*', 'getting-started/*.js', 'playwright/**/*.ts', 'wwwroot/js/src/**/*.js', 'build/**/*.*'],
             rules: {
                 semi: ['error', 'always'],
                 quotes: ['error', 'single'],
@@ -55,6 +55,7 @@ module.exports = {
                 'prefer-arrow-callback': ['error'],
                 'func-style': ['error', 'expression'],
                 'arrow-parens': ['error', 'as-needed'],
+                'object-shorthand': ['error', 'consistent-as-needed'],
                 eqeqeq: 0
             }
         }

diff --git a/.github/workflows/eslint.yaml b/.github/workflows/eslint.yaml
@@ -7,6 +7,6 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - run: yarn
-      - run: yarn run eslint js/**/**/*.{js,ts}
+      - run: yarn run eslint js/**/*.{js,ts}
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
@@ -11,7 +11,7 @@ jobs:
       # Setup .npmrc file to publish to npm
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           registry-url: 'https://registry.npmjs.org'
           # Defaults to the user or organization that owns the workflow file
           scope: '@chocolatey-software'

diff --git a/.github/workflows/stylelint.yaml b/.github/workflows/stylelint.yaml
@@ -7,6 +7,6 @@ jobs:
       - uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 18
+          node-version: 20
       - run: yarn
-      - run: yarn run stylelint "scss/**/**/*.scss"
+      - run: yarn run stylelint "scss/**/*.scss"
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 node_modules/
 package-lock.json
-.DS_Store
+.DS_Store
+.cache/
diff --git a/.stylelintignore b/.stylelintignore
@@ -1,3 +1,2 @@
-scss/_atcb.scss
 scss/_datatables.scss
 scss/_prism.scss
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -4,7 +4,7 @@
     ],
     "rules": {
         "scss/selector-no-union-class-name": true,
-        "indentation": 4,
+        "@stylistic/indentation": 4,
         "selector-max-id" : 20,
         "selector-max-class" : 20,
         "selector-max-compound-selectors": 20,

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -9,26 +9,40 @@
         "choco",
         "chocolateyfest",
         "Chocolatiers",
+        "combinators",
+        "cssnano",
         "datatables",
         "DOCSEARCH",
+        "easymde",
+        "favicons",
         "fileupload",
         "Flatpickr",
+        "fontawesome",
+        "fortawesome",
         "globalnavigation",
         "lazyload",
         "livestream",
         "Livestreams",
         "Luxon",
         "navigations",
+        "nouislider",
         "offcanvas",
+        "outdir",
+        "popperjs",
+        "prismjs",
+        "purgecss",
         "scrollspy",
         "searchbox",
         "socialmedia",
         "splide",
         "splidejs",
         "stylelint",
         "svgstyles",
+        "tarekraafat",
         "textbox",
         "topnav",
-        "typeahead"
+        "typeahead",
+        "webfonts",
+        "xmark"
     ]
 }
diff --git a/README.md b/README.md
@@ -1,141 +1,29 @@
-# Chocolatey choco-theme
+# Chocolatey choco-theme 0.6.0
 
 **NOTE: This project is used on Chocolatey websites and is being released for the benefit of the community. While we endeavour to help and fix issues, it will be limited to GitHub issues, discussions and pull requests when we are able to.**
 
 This repository holds all of the CSS, JS, images, and shared partial files that are used across many Chocolatey projects. 
 
-## Getting Started
+## Commands
 
-### Step 1: Setup Yarn
+Before running any commands below, ensure you have ran `yarn` in the root of this repository, and have enabled corepack by running `corepack enable`.
 
-#### Install Yarn
+| Script                                  | Action                                                                                 |
+|-----------------------------------------|----------------------------------------------------------------------------------------|
+| build                                   | Builds CSS, JS, and Partials.                                                          |
+| lint                                    | Runs Stylelint and ESLint to determine code style errors.                              |
+| release OLD_VERSION NEW_VERSION         | Runs all build steps and updates choco-theme to the version specified.                 |
+| watch                                   | Watches for changes in CSS, JS, and Partials, and rebuilds them automatically.         |
 
-Navigate to the root of your repository where you want the `node_modules` folder to be installed. Follow the directions at the below links:
+## Install ESLint Extension
 
-1. https://yarnpkg.com/getting-started/install#install-corepack
-1. https://yarnpkg.com/getting-started/install#initializing-your-project
+In order to see ESLint errors while in the source code, ensure that you have installed and enabled an [ESLint Extension](https://eslint.org/docs/latest/use/integrations) for your editor.
 
-A new `package.json` and `.yarnrc.yml` file will be generated after the above steps are complete.
+## Install Stylelint Extension
 
-#### Modify `.yarnrc.yml` File
+In order to see Stylelint errors while in the source code, ensure that you have installed and enabled a [Stylelint Extension](https://stylelint.io/awesome-stylelint/#editor-integrations) for your editor.
 
-In the newly generated `.yarnrc.yml` file, copy the following lines to the end of the document:
-
-```
-nodeLinker: node-modules
-checksumBehavior: "update"
-```
-
-#### Modify `package.json` File
-
-In the choco-theme repository, navigate to `getting-started/_package.json`, and copy the contents into the new `package.json` file that was just created in your project.
-
-* Be sure not to change lines 2 and 3, as these are specific to your new project.
-* Update the git information in the package.json file in your new project to the correct information.
-
-#### Update `.gitignore` File
-
-Add the following lines to the `.gitignore` file in your repository. Any file path containing `input` may need updated to your specific repository folder structure.
-
-```
-input/assets/css/
-input/assets/js/
-input/assets/fonts/
-input/assets/images/global-shared/
-input/global-partials/
-apple-touch-*.png
-favicon.ico
-node_modules/
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-```
-
-### Step 2: Setup Gulp
-
-#### Copy `gulpfile.js` File Into Your Repository
-
-In the choco-theme repository, navigate to `getting-started/_gulpfile.js`, and copy the file into your new repository in the same directory as the `package.json` file. Change the name to `gulpfile.js`.
-
-Depending on the new project setup, the variable paths in `gulpfile.js` may need updated. There is a block in `gulpfile.js` that should look similar to below:
-
-```
-const paths = {
-    input: 'input/',
-    assets: 'input/assets/',
-    partials: 'input/global-partials',
-    node_modules: 'node_modules/',
-    theme: 'node_modules/choco-theme/'
-};
-```
-
-#### Copy `bundleconfig.json` File Into Your Repository
-
-In the choco-theme repository, navigate to `getting-started/_bundleconfig.json`, and copy the file into your new repository in the same directory as the `package.json` file. Change the name to `bundleconfig.json`.
-
-In the bundle named `input/assets/js/chocolatey.bundle.js` you will need to modify the input file name to match the name of your project. Replace the `${projectName}` variable.
-
-#### Create a New JavaScript File
-
-In choco-theme, you will need to copy a file inside of `js/init` into the same folder and name it according to the project name, and the name that you chose for the `bundleconfig.json` file's input path in the step above.
-
-At this point, an informed decision will need to be made about what JavaScript files from choco-theme need to be included in the project.
-
-### Step 3: Run It!
-
-#### Yarn
-
-From the command line in the root of your repository where the `package.json` file is located, run the command:
-
-```
-yarn
-```
-
-This will generate the `node_modules` folder an install any dependencies.
-
-#### Gulp
-
-From the command line in the root of your repository where the `package.json` file is located, run the command:
-
-```
-gulp
-```
-
-This will generate all the CSS and JS and place images and global partials in the correct folders.
-
-#### Include Assets in HTML
-
-Directly before the closing `</head>` tag in your HTML document, include the following lines:
-
-```
-<link rel="stylesheet" href="/assets/css/chocolatey.bundle.min.css">
-<script type="text/javascript" src="/assets/js/chocolatey-head.bundle.min.js"></script>
-```
-
-Directly before the closing `</body>` tag in your HTML document, include the following lines:
-
-```
-<script type="text/javascript" src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.includes,Array.prototype.find,Number.parseFloat%2CNumber.parse%2CNodeList.prototype.forEach%2CNumber.parseInt"></script>
-<script type="text/javascript" src="/assets/js/chocolatey.bundle.min.js"></script>
-```
-
-File paths may need to be updated based on your project structure.
-
-Given that everything succeeded, choco-theme is set up and ready to go!
-
-## ESLint
-To run ESLint on a file or folder, run the following command `yarn run eslint js/filename.js`. Visit the [ESLint documentation](https://eslint.org/docs/latest/user-guide/getting-started#installation-and-usage) for more information.
-
-## Sytlelint
-To run Stylelint on a file or folder, run the following command `yarn run stylelint "scss/filename.scss"`. Visit the [Stylelint documentation](https://stylelint.io/) for more information.
-
-## What's Included
-
-### External Libraries
+## External Libraries
 
 Choco-theme contains many external libraries in which it depends on for various features.
 
@@ -146,7 +34,7 @@ Choco-theme contains many external libraries in which it depends on for various
 | :heavy_minus_sign: | Not used.                                                 |
 | :grey_question:    | May or may not be used. Project may be under development. |
 
-| External Libraries            | chocolatey.org     | community          | docs               | blog               | design             | company            | chocolateyfest.com | boxstarter.org     | zendesk            |
+| External Libraries            | org                | community          | docs               | blog               | design             | portal             | fest               | boxstarter         | zendesk            |
 |-------------------------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------|--------------------| -------------------|
 | jQuery                        | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_check_mark: | :heavy_check_mark: | :heavy_minus_sign: | :heavy_check_mark: | :heavy_minus_sign: |
 | Bootstrap                     | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: | :heavy_check_mark: |