Move demo site into its own directory

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 
 /built
+/demo/built
 /coverage
 /examples/webpack/bundle.js
 **/__diff_output__/

config/webpack.bundle-analyzer.js

@@ -1,11 +0,0 @@
-const BundleAnalyzerPlugin = require("webpack-bundle-analyzer")
-  .BundleAnalyzerPlugin;
-
-const merge = require("webpack-merge");
-const prod = require("./webpack.prod.js");
-
-const config = merge(prod, {
-  plugins: [new BundleAnalyzerPlugin()]
-});
-
-module.exports = config;

demo/config/webpack.common.js

@@ -56,17 +56,17 @@ module.exports = {
       background_color: "#ffffff", // eslint-disable-line camelcase
       icons: [
         {
-          src: path.resolve("./images/manifest/icon-192x192.png"),
+          src: path.resolve("./demo/images/manifest/icon-192x192.png"),
           sizes: "192x192",
           type: "image/png"
         },
         {
-          src: path.resolve("./images/manifest/icon-512x512.png"),
+          src: path.resolve("./demo/images/manifest/icon-512x512.png"),
           sizes: "512x512",
           type: "image/png"
         },
         {
-          src: path.resolve("./images/manifest/icon.svg"),
+          src: path.resolve("./demo/images/manifest/icon.svg"),
           sizes: "513x513",
           type: "image/svg+xml"
         }
@@ -82,6 +82,7 @@ module.exports = {
   entry: {
     webamp: ["./js/index.js"]
   },
+  context: path.resolve(__dirname, "../"),
   output: {
     filename: "[name]-[hash].js",
     chunkFilename: "[name]-[hash].js",

demo/config/webpack.dev.js

@@ -13,7 +13,11 @@ module.exports = merge(common, {
       )
     }),
     new CopyWebpackPlugin([
-      { from: "js/dev-service-worker.js", to: "service-worker.js", force: true }
+      {
+        from: "./js/dev-service-worker.js",
+        to: "service-worker.js",
+        force: true
+      }
     ])
   ]
 });

demo/index.html

@@ -69,13 +69,13 @@
     <div id="webamp-icon"></div>
     <p class='about'>
         <a target="_blank" href='https://github.com/jberg/butterchurn' id='butterchurn-share' style="background-image: url(<%= require('./images/share/butterchurn-bg.png') %>)">
-            <img inline src="images/share/eye.svg" />
+            <img inline src="demo/images/share/eye.svg" />
         </a>
         <a target="_blank" href='https://twitter.com/captbaritone' id='twitter-share'>
-            <img inline src="images/share/twitter.svg" />
+            <img inline src="demo/images/share/twitter.svg" />
         </a>
         <a target="_blank" href='https://github.com/captbaritone/webamp' id='github-share'>
-            <img inline src="images/share/github.svg" />
+            <img inline src="demo/images/share/github.svg" />
         </a>
     </p>
     <script type="text/javascript">

demo/js/WebampIcon.tsx

@@ -1,4 +1,4 @@
-import WebampLazy from "./webampLazy";
+import WebampLazy from "../../js/webampLazy";
 // @ts-ignore #hook-types
 import React, { useEffect, useState, useRef } from "react";
 // @ts-ignore

demo/js/config.ts

@@ -1,4 +1,4 @@
-import { Track, AppState } from "./types";
+import { Track, AppState } from "../../js/types";
 // @ts-ignore
 import llamaAudio from "../mp3/llama-2.91.mp3";
 import { DeepPartial } from "redux";

demo/js/index.js

@@ -5,22 +5,19 @@ import React from "react";
 import ReactDOM from "react-dom";
 import createMiddleware from "raven-for-redux";
 import isButterchurnSupported from "butterchurn/lib/isSupported.min";
-import osx from "../skins/MacOSXAqua1-5.wsz";
-import topaz from "../skins/TopazAmp1-2.wsz";
-import visor from "../skins/Vizor1-01.wsz";
-import xmms from "../skins/XMMS-Turquoise.wsz";
-import zaxon from "../skins/ZaxonRemake1-0.wsz";
-import green from "../skins/Green-Dimension-V2.wsz";
-import base from "../skins/base-2.91-png.wsz";
-import internetArchive from "../skins/Internet-Archive.wsz";
-import screenshotInitialState from "./screenshotInitialState";
-import partialButterchurnOptions from "./components/MilkdropWindow/options";
-import { WINDOWS } from "./constants";
-import * as Selectors from "./selectors";
+import osx from "../../skins/MacOSXAqua1-5.wsz";
+import topaz from "../../skins/TopazAmp1-2.wsz";
+import visor from "../../skins/Vizor1-01.wsz";
+import xmms from "../../skins/XMMS-Turquoise.wsz";
+import zaxon from "../../skins/ZaxonRemake1-0.wsz";
+import green from "../../skins/Green-Dimension-V2.wsz";
+import base from "../../skins/base-2.91-png.wsz";
+import internetArchive from "../../skins/Internet-Archive.wsz";
+import partialButterchurnOptions from "../../js/components/MilkdropWindow/options";
+import { WINDOWS } from "../../js/constants";
+import * as Selectors from "../../js/selectors";
 
-import WebampLazy from "./webampLazy";
-import WebampIcon from "./WebampIcon";
-import enableMediaSession from "./mediaSession";
+import WebampLazy from "../../js/webampLazy";
 import {
   STEP_MARQUEE,
   UPDATE_TIME_ELAPSED,
@@ -33,9 +30,10 @@ import {
   TOGGLE_SHUFFLE,
   SET_EQ_AUTO,
   SET_DUMMY_VIZ_DATA
-} from "./actionTypes";
+} from "../../js/actionTypes";
 
-import { loadFilesFromReferences } from "./actionCreators";
+import { loadFilesFromReferences } from "../../js/actionCreators";
+import { bindToIndexedDB } from "./indexedDB";
 
 import {
   skinUrl as configSkinUrl,
@@ -43,8 +41,9 @@ import {
   initialState,
   disableMarquee
 } from "./config";
-
-import { bindToIndexedDB } from "./indexedDB";
+import WebampIcon from "./WebampIcon";
+import enableMediaSession from "./mediaSession";
+import screenshotInitialState from "./screenshotInitialState";
 
 const DEFAULT_DOCUMENT_TITLE = document.title;
 

demo/js/indexedDB.js

@@ -1,5 +1,5 @@
 import IdbKvStore from "idb-kv-store";
-import { throttle } from "./utils";
+import { throttle } from "../../js/utils";
 const LOCAL_STORAGE_KEY = "webamp_state";
 
 export async function bindToIndexedDB(webamp, clearState, useState) {

demo/js/mediaSession.ts

@@ -1,5 +1,5 @@
-import WebampLazy from "./webampLazy";
-import { LoadedURLTrack } from "./types";
+import WebampLazy from "../webampLazy";
+import { LoadedURLTrack } from "../types";
 
 export default function enableMediaSession(webamp: WebampLazy) {
   if ("mediaSession" in navigator) {

demo/js/screenshotInitialState.ts

@@ -1,5 +1,5 @@
 import { DeepPartial } from "redux";
-import { AppState } from "./types";
+import { AppState } from "../types";
 
 const defaultTracksState = {
   "0": {

demo/readme.md

@@ -0,0 +1,3 @@
+# Webamp.org
+
+This directory contains the code used for [Webamp.org](https://webamp.org), as opposed to the `webamp` NPM module.

experiments/skin.html

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Webamp Skin Explorer</title>
-        <meta charset="utf-8" />
-        <link rel="shortcut icon" sizes="16x16 32x32" href="./images/favicon.ico">
-    </head>
-    <body>
-        <div id='skin'></div>
-        <script src="./built/skinExplorer.js"></script>
-    </body>
-</html>

js/skinExplorer.js

@@ -1,26 +0,0 @@
-import React from "react";
-import { render } from "react-dom";
-import { skinUrl } from "./config";
-import skinParser from "./skinParser";
-
-const SkinTable = props => (
-  <table>
-    {Object.keys(props.images)
-      .sort()
-      .map(key => (
-        <tr>
-          <td>{key}</td>
-          <td>
-            <img src={props.images[key]} />
-          </td>
-        </tr>
-      ))}
-  </table>
-);
-
-const parse = async () => {
-  const skinData = await skinParser((await fetch(skinUrl)).arrayBuffer());
-  render(<SkinTable {...skinData} />, document.getElementById("skin"));
-};
-
-parse();

netlify.toml

@@ -1,6 +1,6 @@
 [build]
   command = "npm run build && npm run build-library"
-  publish = "built"
+  publish = "demo/built"
 
 # A short URL for listeners of https://changelog.com/podcast/291
 [[redirects]]

package.json

@@ -12,13 +12,12 @@
   "scripts": {
     "lint": "eslint .",
     "type-check": "tsc",
-    "build": "webpack --config=config/webpack.prod.js",
+    "build": "webpack --config=demo/config/webpack.prod.js",
     "build-library": "webpack --config=config/webpack.library.js",
-    "analyze": "webpack --config=config/webpack.bundle-analyzer.js",
     "prepublishOnly": "npm run build-library",
     "serve": "http-server ./built",
-    "start": "webpack-dev-server --open --config=config/webpack.dev.js",
-    "stats": "webpack --config=config/webpack.prod.js --json > stats.json",
+    "start": "webpack-dev-server --open --config=demo/config/webpack.dev.js",
+    "stats": "webpack --config=demo/config/webpack.prod.js --json > stats.json",
     "stats-library": "webpack --config=config/webpack.library.js --json > stats.json",
     "weight": "npm run build-library > /dev/null && gzip-size built/webamp.bundle.min.js",
     "test": "jest --projects config/jest.unit.js config/jest.eslint.js",