chore: Add basic landing page for reloading and contribution (#338)

chuckcarpenter · RobbieTheWagner · commit f4c9cbfa8f77 · 2019-10-01T19:16:59.000-04:00
* chore: Add basic landing page for reloading and contribution

* Move dev dep for browserSync

* Reset some formatting

* Update CONTRIBUTING.md
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -28,7 +28,7 @@ to contribute, we ask that you take the following steps:
 1. Most of the _editable_ code lives in the `src` directory while built code
    will end up in the `dist` directory upon running `yarn build`.
 
-2. The demo app is served out of the `demo` directory. Running `yarn start` will open it in your browser and initiate a live-reloading session as you make changes.
+2. Some examples are served out of the `examples` directory. Running `yarn start` will open the list in your browser and initiate a live-reloading session as you make changes.
 
 
 ## Opening Pull Requests
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Examples</title>
+</head>
+<body>
+  <h3 id="examples">Examples</h3>
+  <p>It's our goal to create a wide variety of example of how Tether
+    can be used. Here's what we have so far, please send a PR with
+    any examples you might create.</p>
+  <h4 id="beginner">Beginner</h4>
+  <ul>
+    <li><a href="./simple">simple</a>: A simple example to get you started</li>
+    <li><a href="./out-of-bounds">out-of-bounds</a>: How to hide the element when it would
+      otherwise be offscreen</li>
+    <li><a href="./pin">pin</a>: How to pin the element so it never goes offscreen</li>
+    <li><a href="./enable-disable">enable-disable</a>: How to enable and disable the Tether
+      in JavaScript</li>
+  </ul>
+  <h4 id="advanced">Advanced</h4>
+  <ul>
+    <li><a href="./content-visible">content-visible</a>: Demonstrates using the <code>'visible'</code>
+      <code>targetModifier</code> to align an element with the visible portion of another.</li>
+    <li><a href="./dolls">dolls</a>: A performance test to show several dozen elements,
+      each tethered to the previous. Try dragging the top left tether.</li>
+    <li><a href="./element-scroll">element-scroll</a>: Demonstrates using the <code>'scroll-handle'</code>
+      <code>targetModifier</code> to align an element with the scrollbar of an element.</li>
+    <li><a href="./scroll">scroll</a>: Demonstrates using the <code>'scroll-handle'</code>
+      <code>targetModifier</code>
+      to align an element with the body's scroll handle.</li>
+    <li><a href="./viewport">viewport</a>: Demonstrates aligning an element with the
+      viewport by using the <code>'visible'</code> <code>targetModifier</code> when tethered to the body.</li>
+  </ul>
+</body>
+</html>
diff --git a/package.json b/package.json
@@ -17,14 +17,15 @@
     "cy:open": "./node_modules/.bin/cypress open",
     "cy:run": "./node_modules/.bin/cypress run",
     "lint:js": "eslint . --ext js",
+    "start": "yarn watch",
     "start-test-server": "http-server -p 9002",
     "test": "yarn lint:js && yarn test:ci",
     "test:ci": "yarn test:unit:ci && yarn test:cy:ci",
     "test:cy:ci": "yarn build && start-server-and-test start-test-server http://localhost:9002 cy:run",
     "test:cy:watch": "yarn build && start-server-and-test start-test-server http://localhost:9002 cy:open",
     "test:unit:ci": "jest --coverage",
     "test:unit:watch": "jest --watch",
-    "watch": "rollup --watch"
+    "watch": "yarn clean && rollup -c --environment DEVELOPMENT --watch"
   },
   "repository": {
     "type": "git",
@@ -55,6 +56,7 @@
     "rimraf": "^3.0.0",
     "rollup": "^1.21.3",
     "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-browsersync": "^1.0.0",
     "rollup-plugin-eslint": "^7.0.0",
     "rollup-plugin-filesize": "^6.2.0",
     "rollup-plugin-license": "^0.12.1",
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,5 +1,6 @@
 import autoprefixer from 'autoprefixer';
 import babel from 'rollup-plugin-babel';
+import browsersync from 'rollup-plugin-browsersync';
 import cssnano from 'cssnano';
 import { eslint } from 'rollup-plugin-eslint';
 import filesize from 'rollup-plugin-filesize';
@@ -13,6 +14,8 @@ import fs from 'fs';
 const pkg = require('./package.json');
 const banner = ['/*!', pkg.name, pkg.version, '*/\n'].join(' ');
 
+const env = process.env.DEVELOPMENT ? 'development' : 'production';
+
 function getSassOptions(minify = false) {
   const postcssPlugins = [
     autoprefixer({
@@ -45,6 +48,40 @@ function getSassOptions(minify = false) {
   };
 }
 
+const plugins = [
+  eslint({
+    include: '**/*.js'
+  }),
+  babel(),
+  sass(getSassOptions(false)),
+  license({
+    banner
+  }),
+  filesize(),
+  visualizer()
+];
+
+// If we are running with --environment DEVELOPMENT, serve via browsersync for local development
+if (process.env.DEVELOPMENT) {
+  plugins.push(
+    browsersync({
+      host: 'localhost',
+      watch: true,
+      port: 3000,
+      notify: false,
+      open: true,
+      server: {
+        baseDir: 'examples',
+        routes: {
+          '/dist/js/tether.js': 'dist/js/tether.js',
+          '/dist/css/tether-theme-arrows-dark.css':
+            'dist/css/tether-theme-arrows-dark.css'
+        }
+      }
+    })
+  );
+}
+
 const rollupBuilds = [
   {
     input: './src/js/tether.js',
@@ -61,18 +98,7 @@ const rollupBuilds = [
         sourcemap: true
       }
     ],
-    plugins: [
-      eslint({
-        include: '**/*.js'
-      }),
-      babel(),
-      sass(getSassOptions(false)),
-      license({
-        banner
-      }),
-      filesize(),
-      visualizer()
-    ]
+    plugins
   }
 ];
 
@@ -104,4 +130,3 @@ rollupBuilds.push({
 });
 
 export default rollupBuilds;
-
diff --git a/yarn.lock b/yarn.lock
