replace parcel with rollup..

Recidvst · Oct 16, 2023 · 4770a41 · 4770a41
1 parent 52ee923
commit 4770a41
Show file tree

Hide file tree

Showing 8 changed files with 19,904 additions and 4,356 deletions.
diff --git a/.npmignore b/.npmignore
@@ -1,6 +1,8 @@
 index.html
-src/js/example.js
-src/scss/example.scss
+src/js/example*.js
+src/scss/example*.scss
+dist/example*.js
+dist/css/example*.css
 local
 
 # setup

diff --git a/README.md b/README.md
@@ -4,24 +4,46 @@
 
 # Scrub Slider
 
-A lightweight javascript plugin that lets you display transition images with style.
+A lightweight javascript library that lets you 'scrub' transition between two images with style.
 
 [Demo Page](https://recidvst.github.io/scrub-slider "scrub demo")
 
-[Codepen original POC](https://codepen.io/Recidvst/pen/WjybOa "scrub original poc")
-
-To-do:
-
-- Test suite.
-- Performance improvements.
-- Improve landing page.
-
 ## Get Scrub Slider
 
 ### Download
 
-- Download the Scrub Slider dist files from [Github](https://github.com/Recidvst/scrub-slider/archive/master.zip "Github download") or from [NPM](https://www.npmjs.com/package/scrub-slider "npm download") or [Yarn](https://yarnpkg.com/en/package/scrub-slider "yarn download").
-- Include the minified js and css files from the dist folder in the usual fashion...
+- Install the package (or download the dist files manually) from [Github](https://github.com/Recidvst/scrub-slider/archive/master.zip "Github download") or from [NPM](https://www.npmjs.com/package/scrub-slider "npm download") or [Yarn](https://yarnpkg.com/en/package/scrub-slider "yarn download").
+- Include the js and css in your application:
+
+### Install
+
+#### JS
+Either import the JS as a module:
+```bash
+npm install scrub-slider
+```
+```js
+import Scrub from "scrub-slider";
+```
+
+Or consume the module as UMD/IIFE
+```html
+<script src="dist/scrub.iife.js"></script>
+```
+
+#### CS
+Either import the CSS into your JS/CSS:
+```js
+import 'scrub-slider/dist/css/scrub.css';
+```
+```scss
+@import 'scrub-slider/dist/css/scrub.css';
+```
+
+Or include it the old fashioned way:
+```html
+<link href="dist/css/scrub.css" rel="stylesheet" />
+```
 
 ### Initiate
 

diff --git a/index.html b/index.html
@@ -13,8 +13,8 @@
 
     <title>Scrub Slider</title>
 
-    <link href="dist/styles.css" rel="stylesheet" />
-    <link href="src/scss/example.scss" rel="stylesheet" />
+    <link href="dist/css/scrub.css" rel="stylesheet" />
+    <link href="dist/css/example.css" rel="stylesheet" />
     <link
       href="https://fonts.googleapis.com/css?family=Montserrat"
       rel="stylesheet"
@@ -50,8 +50,7 @@
         <div class="col-xs-12">
           <h1 class="text-center">Scrub Slider</h1>
           <h3 class="text-center">
-            Scrub Slider is a lightweight javascript plugin that lets you
-            display transition images with style.
+            A lightweight javascript library that lets you 'scrub' transition between two images with style.
           </h3>
         </div>
       </header>
@@ -75,7 +74,7 @@ <h3 class="text-center">
         <div class="col-xs-12 text-center">
           <h2>Why Scrub?</h2>
           <p>- Vanilla JS with no dependencies -</p>
-          <p>- Just 11.5 kb to be imported -</p>
+          <p>- Only around 10.5 kb to be imported -</p>
           <p>- Support for using multiple sliders on a page -</p>
           <p>
             - Simple configuration options and multiple implementation methods -
@@ -109,7 +108,7 @@ <h2>Getting Started</h2>
           <h3>Download</h3>
           <ul>
             <li>
-              Download the Scrub Slider dist files from
+              Install the package (or download the dist files manually) from
               <a
                 href="https://github.com/Recidvst/scrub-slider"
                 title="Scrub Slider Github pages"
@@ -130,14 +129,8 @@ <h3>Download</h3>
             </li>
             <br />
             <li>
-              Include the minified Scrub js and css files in the usual fashion..
+              Include the js and css in your application by either importing the module or using the UMD/IIFE output via a script tag.
             </li>
-            <pre>
-              `npm install scrub-slider`
-            </pre>
-            <pre>
-              `import Scrub from "scrub-slider"`
-            </pre>
           </ul>
 
           <h3>Initiate</h3>
@@ -281,7 +274,8 @@ <h4>Alt</h4>
       </footer>
     </main>
 
-    <script type="module" src="dist/browser.js"></script>
-    <script type="module" src="src/js/example.js"></script>
+    <script src="dist/scrub.iife.js"></script>
+    <script src="src/js/example.js"></script>
+<!--    <script type="module" src="src/js/example.js"></script>-->
   </body>
 </html>