jaybox325/jaypack

JayBox Webpack framework

jaypack's Issues

Add drawer/modal component

Drawers/modals are common, add nunjucks, Scss and JS to have one out the box.

Add default SEO template

SEO is important, even for nunjucks static sites, add a default template to handle SEO.

SVGs not getting built out to nunjucks file on watch

Add tailwind Dark Mode support

https://github.com/ChanceArthur/tailwindcss-dark-mode

Update Tailwind breakpoints

xs -> sm
sm -> md
md -> lg
lg -> xl
xl -> 2xl

Re-implement keyboard trapping

New Menu JS doesn't use keyboard trapping

Add default Barba.js module

Barba.js page transitions are a common project request, so it makes sense to add a default Barba.js module with the setup work done.

Add a base default menu and header

Headers and Menus are on every project. Set up the initial markup to get these started.

Add focus-visible safari polyfill

focus-visible doesn't work in Safari... need a JS polyfill.

Add Facebook "square" icon

Add a facebook icon with the square element to it.

Convert JS to vanilla!

Time for big boy pants. No Jquery.

Build dummy test form

I have added form markup I've written elsewhere, need to build a dummy form component to test it works out the box with Scss and Nunjucks.

Delete Assets from build dir if they're deleted from the source

If you delete an image/svg/whatever in the _src dir, the built file should be deleted from the build dir, too.

Purge Sass

Tailwind does it's own purge, but I could potentially add this to Gulp to do everything, including my Scss.

https://www.npmjs.com/package/gulp-purgecss

Moving build tasks need to check if it's already been moved

• Move fonts takes 8.32s
• Move favicons takes 8.76s

Try to get that time down by checking if it actually needs to be moved or not. (if it already exists in the build dir).

Run gulp-notify on task completion, not start

Animate accordions

Open and close. Measure all on load, then hide so height can be animated. Then need to re-check heights on resize.

Update Scss colours map to include shades

Update the colour map in Scss to include shades of colours for hover states.

Glue utils and styles css together

https://twitter.com/_jamessmith/status/1326911037707317248?s=20

Include NVM

N is great for managing node versions, but including NVM in projects would manage that for me.

Add accordion component

Accordions are another common component required by most projects, set up the initial JS, Scss and Nunjucks template to get this started.

Move htaccess from gulp to build if static site.

GZipping is added for Craft projects so far, need to learn how to manage these for static sites.

Add autocomplete option to form fields

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

Implement code-splitting in JS

https://webpack.js.org/guides/code-splitting/

https://medium.com/hackernoon/the-100-correct-way-to-split-your-chunks-with-webpack-f8a9df5b7758

Add Brotli compression

Use brotli compression instead of gzipping: https://github.com/google/brotli

Update focus Scss to use focus-visible

Make sure Nunjucks has been moved for initial build

At the moment, I have to run gulp nunjucks-move for new projects because npm run watch throws an error that the data file isn't found:

Error: ENOENT: no such file or directory, open '_src/html/__data/data.json'

Add GZipping

At the moment, bundle.js is about 700kb! This is way too big. Need to add Gzipping.

Lazy loading

https://www.npmjs.com/package/loading-attribute-polyfill

Remove the SVG move task

No need to include the SVGs as images, we're using symbols.

Webpack 5

https://webpack.js.org/blog/2020-10-10-webpack-5-release/

Add lazy loading tag to img tags

loading="lazy".

Easy as that.