v2.0.0 - Complete overhaul with compiling and linting (#6)

* v2.0.0 - Complete overhaul with compiling and linting

* Massive progress commit

* Progress commit

* Add compile to build, change name for NPM

.eslintrc.json

@@ -0,0 +1,14 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "jquery": true
+    },
+    "extends": [
+        "standard"
+    ],
+    "parserOptions": {
+        "ecmaVersion": 12
+    },
+    "rules": {}
+}

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: [Justintime50]

.github/workflows/build.yml

@@ -0,0 +1,33 @@
+name: build
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - name: Install dependencies
+        run: npm install
+      - name: Run CSS lint
+        run: npm run lint-css
+      - name: Run JS lint
+        run: npm run lint-js
+  compile:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+      - name: Install dependencies
+        run: npm install
+      - name: Compile assets
+        run: npm run compile

.github/workflows/release.yml

@@ -0,0 +1,24 @@
+name: release
+
+on:
+  push:
+    tags:
+      - "*"
+
+jobs:
+  release:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v2
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: "14"
+          registry-url: "https://registry.npmjs.org"
+      - name: Install dependencies
+        run: npm install
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -1,4 +1,3 @@
 .idea
 .DS_Store
-*.css
-*.css.map
+node_modules

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+    "extends": "stylelint-config-standard"
+}

CHANGELOG.md

@@ -1,5 +1,25 @@
 # CHANGELOG
 
+## v2.0.0 (2021-06-03)
+
+* Pineapple CSS is now completely `SCSS` and gets compiled upon release to a beautified and minified version along with source maps
+* Pineapple JS is now compile to a beautified and minified version along with source maps
+* Introduced linters and linted the entire project fixing hundreds of errors and best practices
+* Cut out a lot of fluff in the JS of the library
+* Added much needed inline comments and additional documentation on how to use the library and what each piece does
+* Cleaned up themes, removed unneeded assets, and now use `SCSS` for theme CSS, compiled just like the library
+* Unified color palette by using SCSS variables and less variations of each color
+* Fixed various bugs related to Javascript functions and CSS including:
+    * Years long bug where smooth-scrolling would scroll to the right location but then jump back to the anchor point (without the offset)
+    * Smooth scrolling buttons now actually scroll instead of jumping
+    * Pineapple no longer sets the `.navbar` background-color to initial
+    * Dozens of other small bugs throughout the JS and CSS
+* Changed `.pa-loaderDiv` to `.pa-loader-div` to match the style of dash notation for all classes
+
 ## v1.0.0 (2020)
 
 * Stable release
+
+## v0.1.0 (2017)
+
+* Initial release, compatible with Bootstrap 3

README.md

@@ -1,20 +1,41 @@
+<div align="center">
+
 # Pineapple 🍍
 
-Pineapple is a CSS, HTML, and Javascript web development library. Built on top of Bootstrap, Pineapple allows websites to be easily and quickly built.
+CSS and Javascript web development library built on top of Bootstrap.
 
+[![Build Status](https://github.com/Justintime50/pineapple/workflows/build/badge.svg)](https://github.com/Justintime50/pineapple/actions)
+[![NPM](https://img.shields.io/npm/v/pineapple-library)](https://www.npmjs.com/package/pineapple-library)
 [![Licence](https://img.shields.io/github/license/justintime50/pineapple)](LICENSE)
 
-## Background
+</div>
+
+Pineapple came about as a way to help me quickly build brochure style websites some years ago. I found I was copying and pasting a lot of custom CSS around my projects to extend Bootstrap's library and decided to build my own. Over the years as Bootstrap evolved, certain Pineapple functions were removed in favor of the better battle-tested Bootstrap equivalent. Pineapple still serves as a nice addition to any Bootstrap project.
+
+**Notable Features:**
 
-Pineapple was created as a way to fill in the gaps that Bootstrap did not fill years ago. Since Bootstrap 4 and other frameworks have been updated, many of the original issues Pineapple fixed have found their way into these other frameworks and therefore, the Pineapple equivelent has been removed. This library is now quite dated.
+* Full-screen banners, YouTube videos, and Bootstrap carousels with incredible customization for overlaid text, images, and buttons
+* Beautiful sliding animations (full page and individual components)
+* Page loader animation
+* Countdown timer with custom messaging
+* Fading and appearing navbar
+* Icons, cards, and slanted sections
+* Dynamic screen-sized fonts, buttons, and more
 
 ## Install
 
-Pineapple includes both SCSS and Javascript files. The SCSS will need to be compiled into CSS as raw CSS is not included in this repo. Choose between implementing the `styles`, `utilities`, or the entire `Pineapple library`, all three options are included in the root of the `css` folder.
+Pineapple has been compiled into CSS from SCSS and JS. You will find either the beautified or minified equivelant of each along with source maps. Either import Pineapple from NPM, use a CDN, or manually download the assets into your own project.
+
+The Pineapple CSS has been compiled into three separate bundles: 
+* `pineapple` includes everything
+* `pineapple-styles` includes everything but the `grid` and `animations` CSS and can be used without the accompanying JS
+* `pineapple-utilities` includes the `grid` and `animations` CSS which accompanies the JS
+
+**NOTE:** Pineapple Javascript functions require jQuery. With the release of Bootstrap 5 (which does not include or require jQuery), you will either need to remain on Bootstrap 4 or import jQuery separately. Pineapple is not compatible with the `slim` version of jQuery.
 
 ## Usage
 
-Once the CSS has been compiled, include the CSS and Javascript in your project:
+Simply include the Pineapple CSS and JS assets in your project to get started.
 
 ```html
 <link rel="stylesheet" href="path/to/pineapple.css">
@@ -23,4 +44,17 @@ Once the CSS has been compiled, include the CSS and Javascript in your project:
 
 ## Documentation
 
-See the accompanying [CSS Docs](/docs/css.md) or [Javascript Docs](/docs/js.md) for more information.
+See the accompanying [Documentation](/docs/documentation.md) for more information.
+
+## Development
+
+```bash
+# Lint CSS
+npm run lint-css
+
+# Lint JS
+npm run lint-js
+
+# Compile CSS from SCSS and JS assets
+npm run compile
+```

compile.sh

@@ -0,0 +1,46 @@
+#!/bin/bash
+
+# Compiles the Pineapple SCSS to CSS
+
+main() {
+    echo "Compiling Pineapple assets..."
+    compile_readable_css
+    compile_minified_css
+    compile_readable_js
+    compile_minified_js
+    echo "Script complete!"
+}
+
+compile_readable_css() {
+    # Pineapple
+    ./node_modules/.bin/node-sass pineapple/scss/pineapple.scss pineapple/dist/css/pineapple.css --output-style expanded --source-map true
+    ./node_modules/.bin/node-sass pineapple/scss/pineapple-styles.scss pineapple/dist/css/pineapple-styles.css --output-style expanded --source-map true
+    ./node_modules/.bin/node-sass pineapple/scss/pineapple-utilities.scss pineapple/dist/css/pineapple-utilities.css --output-style expanded --source-map true
+
+    # Templates
+    ./node_modules/.bin/node-sass templates/coming-soon/coming-soon.scss templates/coming-soon/assets/css/coming-soon.css --output-style expanded --source-map true
+    ./node_modules/.bin/node-sass templates/waterfall/waterfall.scss templates/waterfall/assets/css/waterfall.css --output-style expanded --source-map true
+}
+
+compile_minified_css() {
+    # Pineapple
+    ./node_modules/.bin/node-sass pineapple/scss/pineapple.scss pineapple/dist/css/pineapple.min.css --output-style compressed --source-map true
+    ./node_modules/.bin/node-sass pineapple/scss/pineapple-styles.scss pineapple/dist/css/pineapple-styles.min.css --output-style compressed --source-map true
+    ./node_modules/.bin/node-sass pineapple/scss/pineapple-utilities.scss pineapple/dist/css/pineapple-utilities.min.css --output-style compressed --source-map true
+
+    # Templates
+    ./node_modules/.bin/node-sass templates/coming-soon/coming-soon.scss templates/coming-soon/assets/css/coming-soon.min.css --output-style compressed --source-map true
+    ./node_modules/.bin/node-sass templates/waterfall/waterfall.scss templates/waterfall/assets/css/waterfall.min.css --output-style compressed --source-map true
+}
+
+compile_readable_js() {
+    ./node_modules/.bin/uglifyjs pineapple/js/pineapple.js --beautify --no-annotations --source-map --verbose --output pineapple/dist/js/pineapple.js
+    echo "Readable JS step complete"
+}
+
+compile_minified_js() {
+    ./node_modules/.bin/uglifyjs pineapple/js/pineapple.js --source-map --verbose --output pineapple/dist/js/pineapple.min.js
+    echo "Compressed JS step complete"
+}
+
+main