Merge pull request #69 from bstaruk/develop

3.2.0

.editorconfig

@@ -8,5 +8,8 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
+[*.{ejs,htm,html}]
+indent_size = 4
+
 [*.md]
 trim_trailing_whitespace = false

.eslintrc.js

@@ -6,9 +6,12 @@ const prettierOptions = JSON.parse(
 );
 
 module.exports = {
-  parser: 'babel-eslint',
   extends: ['airbnb-base', 'prettier'],
   plugins: ['prettier', 'import'],
+  parser: '@babel/eslint-parser',
+  parserOptions: {
+    requireConfigFile: false,
+  },
   rules: {
     'prettier/prettier': ['error', prettierOptions],
     'no-use-before-define': 0,

.stylelintrc.js

@@ -1,11 +1,15 @@
 module.exports = {
-  extends: 'stylelint-config-standard',
+  extends: [
+    'stylelint-config-standard',
+    'stylelint-config-recommended',
+    'stylelint-config-sass-guidelines',
+  ],
+  plugins: ['stylelint-scss'],
   rules: {
-    'at-rule-no-unknown': [
-      true,
-      {
-        ignoreAtRules: ['extend'],
-      },
+    'max-nesting-depth': [
+      5,
+      { ignore: ['blockless-at-rules', 'pseudo-classes'] },
     ],
+    'scss/at-extend-no-missing-placeholder': null,
   },
 };

LICENSE

@@ -1,4 +1,4 @@
-Copyright 2020 Brian Staruk
+Copyright 2021 Brian Staruk
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

README.md

@@ -4,29 +4,29 @@
 [![dependencies status](https://david-dm.org/bstaruk/starbase/status.svg)](https://david-dm.org/bstaruk/starbase)
 [![FOSSA Status](https://app.fossa.io/api/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase.svg?type=shield)](https://app.fossa.io/projects/git%2Bgithub.com%2Fbstaruk%2Fstarbase?ref=badge_shield)
 
-starbase is a website boilerplate built with webpack 5, modern JS (via Babel) & Sass that enables developers to get up and running in minutes using some of the most powerful front-end tools available in 2021:
+starbase is a production-ready website boilerplate built with webpack 5, modern JS (via Babel) & Sass that enables developers to get up and running in minutes using some of the most powerful front-end tools available in 2021:
 
 * [Node.js](https://github.com/nodejs/node), [webpack 5](https://github.com/webpack/webpack) & [webpack-dev-server](https://github.com/webpack/webpack-dev-server)
 * [Babel 7](https://github.com/babel/babel) w/ [ESLint](https://github.com/eslint/eslint) & [Prettier](https://github.com/prettier/prettier)
 * [Sass](https://github.com/sass) w/ [stylelint](https://github.com/stylelint/stylelint)
 
-starbase is intended to be small in scope so that it may be easily extended and customized, or used as a learning tool for folks who are trying to become familiar with webpack 5, Sass and/or modern JS.
+The primary mission is to be small in scope so that it may be easily extended and customized, or used as a learning tool for developers who are trying to become familiar with webpack 5, Sass and/or modern JS.
 
-## license
+## License
 
 starbase is open source and free software, so you may to do whatever you wish with it -- commercially or personally. You can buy me a beer next time you're in Boston, star the project and tell a friend, or you can erase all signs of origin and tell your coworkers that you made it yourself. It's all good!
 
-## getting started
+## Using starbase
+
+### Getting Started
 
 After completing the steps below, you will be ready to begin using starbase:
 
 1. Install [Node.js](https://nodejs.org) (latest LTS recommended)
 2. Clone starbase into your project root directory
 3. Install dependencies by running `npm install` in your project root directory
 
-## building, watching & developing
-
-### local development
+### Local Development
 
 starbase uses [webpack-dev-server](https://github.com/webpack/webpack-dev-server) to serve up your project at [http://localhost:8080](http://localhost:8080) for streamlined and convenient development.
 
@@ -37,7 +37,8 @@ cd /path/to/starbase
 npm run start
 ```
 
-### building for production
+### Building for Production
+
 Use `npm run build` in your project root to run a production build.
 
 Production builds compile & minify your assets into `/dist` for distribution and/or integration into whatever codebase you'll be using these assets in.
@@ -47,16 +48,31 @@ cd /path/to/starbase
 npm run build
 ```
 
-## features you may want to remove
+## Features & Configurations
+
+### JS & Sass linting
 
-### asset hashing
-The assets generated by starbase are [hashed](https://webpack.js.org/guides/caching/) (strings injected into the filenames) as a cache-busting mechanism. Hashes are generated based on file contents so they will only change when the files themselves have changed -- so caching won't be broken entirely.
+starbase uses [ESLint](http://eslint.org/) for Javascript (ES6) linting and [stylelint](https://github.com/stylelint/stylelint) for Sass linting to encourage consistent code throughout your project. The configs (`/.eslintrc.js` and `/.stylelintrc.js` respectively) include a solid foundation to build upon, utilizing the most popular industry-standardized plugins such as [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb) and [stylelint-config-sass-guidelines](https://github.com/bjankord/stylelint-config-sass-guidelines).
+
+### Prettier JS Formatting
+
+starbase uses [Prettier](https://github.com/prettier/prettier) to enforce and simplify code consistency. If you use VS Code, check out the [Prettier VS Code extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
 
-This feature ships with webpack (and the loaders we use), so removing it is pretty straightforward. Simply open up the webpack config files and remove the hashes from the filenames, which should look something like this: `.[hash:8]`.
+### HTML Webpack Plugin
+
+starbase uses [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin), which enables webpack to handle assets that are linked from within our HTML templates, such as images and embedded videos. It also makes sure our generated `.js` & `.css` files are included where they need to be.
+
+Open the webpack configs if you need to add more pages -- and be sure to check out the plugin documentation to learn about the more advanced features such as `.ejs` and environment variable support.
+
+### Asset Hashing (Cache Busting)
+
+The assets generated by starbase are [hashed](https://webpack.js.org/guides/caching/) as a cache-busting mechanism. Hashes are generated via file contents so they will only change when the files themselves have changed.
+
+This feature ships with webpack (and the loaders we use), so removing it is pretty straightforward. Open the webpack configs and remove the hashes from the filenames, which should look something like this: `.[hash:8]`.
 
 Removing hashing for production builds is not recommended.
 
-### build-time cleanup
+### Build-Time Cleanup
 
 starbase is setup to clear all contents of `/dist` (where compiled assets are piped into) during each `npm run build`. If you'd like to remove this part of the build process, perform the following steps:
 
@@ -66,7 +82,7 @@ starbase is setup to clear all contents of `/dist` (where compiled assets are pi
 
 Removing the cleanup process means that deleted assets in `/src` will not be deleted in `/dist` until you manually do so. I recommend keeping the cleanup process intact unless you have a specific reason not to, such as having un-managed assets in `/dist`.
 
-### fetch & promise polyfills
+### Fetch & Promise Polyfills
 
 Because starbase was built to accommodate ES6 & CommonJS (and not jQuery) it is assumed that you'll be using [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) for asynchronous requests.
 
@@ -77,36 +93,10 @@ If you want to remove these for any reason, perform the following steps:
 1. remove `es6-promise` & `whatwg-fetch` from `/package.json`
 2. remove the relevant imports in `/src/app.js`
 
-## features you may want to customize
+## Notes & Considerations
 
-### root path
+### Root Path
 
-starbase is setup to run with assets referenced via relative paths so generated `.html` files can be opened locally. If you plan on deploying to a web server, it'll be a good idea to set the `publicPath` in `/webpack/webpack.config.base.js`.
+starbase is setup to run with assets referenced via relative paths so generated `.html` files can be opened without needing a deployment. If you plan on deploying to a web server, it'll be a good idea to set the `publicPath` in `/webpack/webpack.config.base.js`.
 
 This variable should be set to `/` if the app will run at the root of a domain or subdomain, or to `/folderName` (example) if it'll be deployed to a subfolder.
-
-### javascript & css linting
-
-starbase uses [ESLint](http://eslint.org/) for Javascript (ES6) linting and [stylelint](https://github.com/stylelint/stylelint) for CSS linting. The configs (`/.eslintrc.js` and `/.stylelintrc.js` respectively) included out of the box contain some basic common rules. Modify them to your liking to encourage consistent code throughout your project.
-
-#### airbnb eslint config
-
-starbase enforces the [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript) with ESLint via [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb). These rules are basically the industry standard in 2017 so I'd recommend adhering to them, but you can override individual rules via the project `/.eslintrc.js` file. I've included a couple basic overrides (in `/.eslintrc.js`) to demonstrate usage.
-
-##### to remove the airbnb eslint config:
-
-1. in `/.eslintrc.js`, remove the line that says `extends`
-2. in `/package.json`, remove the `eslint-config-airbnb` dependency
-3. run `npm update`
-
-After completing the steps above, the only rules that eslint will enforce are the ones you define in the `rules` object in `/.eslintrc.js`.
-
-### prettier js formatting
-
-starbase uses [Prettier](https://github.com/prettier/prettier) to enforce and simplify code consistency. If you use VS Code, check out the [Prettier VS Code extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode).
-
-## features you may want to know about
-
-### html webpack plugin
-
-starbase uses [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin) to generate HTML assets. The reason for this is to allow webpack to manage other assets, such as favicons and embedded images, as part of the build process. Adding new templates (pages) is very easy, but you'll need to read the official plugin docs for the latest info.