tomhazledine · tomhazledine · Feb 15, 2024 · Feb 14, 2024 · Feb 14, 2024 · Feb 15, 2024
diff --git a/demo/audio-examples/long-audio-example.mp3 b/demo/audio-examples/long-audio-example.mp3
diff --git a/demo/build.js b/demo/build.js
@@ -1,6 +1,9 @@
 import * as esbuild from "esbuild";
 import { parseArgs, watchFiles } from "../build.utils.js";
 
+import _package from "../package.json" assert { type: "json" };
+const version = _package.version;
+
 const args = parseArgs(process.argv);
 
 const config = {
@@ -9,7 +12,14 @@ const config = {
     minify: args.mode !== "development",
     treeShaking: args.mode !== "development",
     sourcemap: args.mode === "development",
-    entryPoints: ["demo/index.js", "demo/composable.js", "demo/types.js"],
+    entryPoints: [
+        "demo/index.js",
+        "demo/composable.js",
+        "demo/types.js",
+        "build/picobel-component.js",
+        "build/picobel.all.css",
+        { out: `manual`, in: `build/picobel.${version}.js` }
+    ],
     entryNames: "picobel-demo-[name]"
 };
 

diff --git a/demo/component-default.html b/demo/component-default.html
@@ -3,13 +3,6 @@
     <head>
         <meta charset="UTF-8" />
         <title>Picobel.js Test Page</title>
-
-        <!-- Load the Picobel CSS -->
-        <link
-            rel="stylesheet"
-            href="../src/css/picobel.all.css"
-            type="text/css"
-        />
     </head>
     <body style="font-family: sans-serif">
         <nav>

diff --git a/demo/component.html b/demo/component.html
@@ -7,7 +7,7 @@
         <!-- Load the Picobel CSS -->
         <link
             rel="stylesheet"
-            href="../src/css/picobel.all.css"
+            href="./build/picobel-demo-picobel.all.css"
             type="text/css"
         />
     </head>
@@ -81,7 +81,7 @@ <h2>
 
         <script
             type="text/javascript"
-            src="../build/picobel-component.js"
+            src="./build/picobel-demo-picobel-component.js"
         ></script>
     </body>
 </html>
diff --git a/demo/composable.html b/demo/composable.html
@@ -7,7 +7,7 @@
         <!-- Load the Picobel CSS -->
         <link
             rel="stylesheet"
-            href="../src/css/picobel.all.css"
+            href="./build/picobel-demo-picobel.all.css"
             type="text/css"
         />
     </head>

diff --git a/demo/index.html b/demo/index.html
@@ -7,7 +7,7 @@
         <!-- Load the Picobel CSS -->
         <link
             rel="stylesheet"
-            href="../src/css/picobel.all.css"
+            href="./build/picobel-demo-picobel.all.css"
             type="text/css"
         />
     </head>
@@ -50,6 +50,11 @@ <h1>Some stuff...</h1>
                 <source src="./audio-examples/taken-at-the-flood.mp3" />
                 Your browser does not support the <code>audio</code> element.
             </audio>
+
+            <audio controls preload="auto">
+                <source src="./audio-examples/long-audio-example.mp3" />
+                Your browser does not support the <code>audio</code> element.
+            </audio>
         </div>
 
         <p>
@@ -59,9 +64,11 @@ <h1>Some stuff...</h1>
             natus earum nisi ducimus.
         </p>
 
+        <h2>With an "unfound" source URL</h2>
+
         <audio
             class="testClass--one testClass--two"
-            src="http://audio.eatenbymonsters.com/reviews/coldWarKids/lostThatEasy.mp3"
+            src="./audio-examples/missing.mp3"
             controls
         >
             Your browser does not support the <code>audio</code> element.

diff --git a/demo/index.js b/demo/index.js
@@ -3,7 +3,8 @@ import picobel from "../build/picobel.js";
 // Picobel();
 // Picobel({ theme: "bare" });
 // Picobel({ theme: "default" });
-const audio = picobel({ theme: "itunes" });
+// const audio = picobel({ theme: "itunes" });
+const audio = picobel({ theme: "skeleton" });
 // Picobel({ theme: "bbc" });
 // Picobel({ theme: "eatenbymonsters" });
 // Picobel({ theme: "itunes" });

diff --git a/demo/manual.html b/demo/manual.html
@@ -7,7 +7,7 @@
         <!-- Load the Picobel CSS -->
         <link
             rel="stylesheet"
-            href="../src/css/picobel.all.css"
+            href="./build/picobel-demo-picobel.all.css"
             type="text/css"
         />
     </head>
@@ -68,7 +68,10 @@ <h1>Some stuff...</h1>
         </audio>
 
         <!-- Load Scripts -->
-        <script type="text/javascript" src="../build/picobel.3.0.3.js"></script>
+        <script
+            type="text/javascript"
+            src="./build/picobel-demo-manual.js"
+        ></script>
         <script>
             const picobelInstance = picobel();
             console.log({ picobelInstance });

diff --git a/demo/package.json b/demo/package.json
@@ -2,5 +2,8 @@
     "name": "picobel-demo",
     "version": "1.0.0",
     "description": "Demo page for Picobel",
-    "type": "module"
+    "type": "module",
+    "devDependencies": {
+        "node-static": "^0.7.11"
+    }
 }
diff --git a/demo/server.js b/demo/server.js
@@ -0,0 +1,34 @@
+import http from "http";
+import path from "path";
+import readline from "readline";
+
+import { Server } from "node-static";
+
+export const server = (buildPath, port) => {
+    const file = new Server(buildPath);
+
+    http.createServer(function (request, response) {
+        request
+            .addListener("end", function () {
+                // Serve files!
+                file.serve(request, response);
+            })
+            .resume();
+    }).listen(port);
+};
+
+const PORT = 8080;
+const OUT = path.resolve(".", `./demo/`);
+console.log(OUT);
+console.log(`Serving result at http://localhost:${PORT}/`);
+server(OUT, PORT);
+
+console.log(`Press "q" to exit`);
+readline.emitKeypressEvents(process.stdin);
+process.stdin.setRawMode(true);
+
+process.stdin.on("keypress", (str, key) => {
+    if (key.name === "q") {
+        process.exit();
+    }
+});
diff --git a/demo/yarn.lock b/demo/yarn.lock
@@ -0,0 +1,40 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+colors@>=0.6.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
+  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
+
+mime@^1.2.9:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+minimist@~0.0.1:
+  version "0.0.10"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
+  integrity sha512-iotkTvxc+TwOm5Ieim8VnSNvCDjCK9S8G3scJ50ZthspSxa7jx50jkhYduuAtAjvfDUwSgOwf8+If99AlOEhyw==
+
+node-static@^0.7.11:
+  version "0.7.11"
+  resolved "https://registry.yarnpkg.com/node-static/-/node-static-0.7.11.tgz#60120d349f3cef533e4e820670057eb631882e7f"
+  integrity sha512-zfWC/gICcqb74D9ndyvxZWaI1jzcoHmf4UTHWQchBNuNMxdBLJMDiUgZ1tjGLEIe/BMhj2DxKD8HOuc2062pDQ==
+  dependencies:
+    colors ">=0.6.0"
+    mime "^1.2.9"
+    optimist ">=0.3.4"
+
+optimist@>=0.3.4:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
+  integrity sha512-snN4O4TkigujZphWLN0E//nQmm7790RYaE53DdL7ZYwee2D8DDo9/EyYiKUfN3rneWUjhJnueija3G9I2i0h3g==
+  dependencies:
+    minimist "~0.0.1"
+    wordwrap "~0.0.2"
+
+wordwrap@~0.0.2:
+  version "0.0.3"
+  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
+  integrity sha512-1tMA907+V4QmxV7dbRvb4/8MaRALK6q9Abid3ndMYnbyo8piisCmeONVqVSXqQA3KaP4SLt5b7ud6E2sqP8TFw==
diff --git a/package.json b/package.json
@@ -10,6 +10,7 @@
         "build:dev": "node build.js --mode=development",
         "build:demo": "node build.js && node demo/build.js",
         "build:demo:dev": "node build.js --mode=development && node demo/build.js --mode=development",
+        "demo:serve": "node ./demo/server",
         "prepublish": "npm run build",
         "prepublishOnly": "npm run build"
     },

diff --git a/src/css/picobel.bbc.css b/src/css/picobel.bbc.css
@@ -48,7 +48,7 @@
     background-size: 2em 2em;
     background-repeat: repeat;
     background-position: 0 0;
-    animation: background_slide linear infinite 0.4s;
+    animation: bbc_background_slide linear infinite 0.4s;
 }
 .bbc.picobel .bbc__loader:after {
     content: "Loading";
@@ -622,7 +622,7 @@
 }
 
 /* Simulates an infinite slide-to-the-right effect. */
-@keyframes background_slide {
+@keyframes bbc_background_slide {
     0% {
         background-position: 0 0;
     }

diff --git a/src/css/picobel.default.css b/src/css/picobel.default.css
@@ -16,7 +16,7 @@
 }
 
 /* Simulates an infinite slide-to-the-right effect. */
-@keyframes background_slide {
+@keyframes default_background_slide {
     0% {
         background-position: 0 0;
     }
@@ -74,7 +74,7 @@
     background-size: var(--progress-bar-height) var(--progress-bar-height);
     background-repeat: repeat;
     background-position: 0 0;
-    animation: background_slide linear infinite 0.4s;
+    animation: default_background_slide linear infinite 0.4s;
 }
 
 /* Only show the loader when we're loading */

diff --git a/src/css/picobel.eatenbymonsters.css b/src/css/picobel.eatenbymonsters.css
@@ -8,7 +8,7 @@
 }
 
 /* Simulates an infinite slide-to-the-right effect. */
-@keyframes background_slide {
+@keyframes ebm_background_slide {
     0% {
         background-position: 0 0;
     }
@@ -51,7 +51,7 @@
     background-size: 2em 2em;
     background-repeat: repeat;
     background-position: 0 0;
-    animation: background_slide linear infinite 0.4s;
+    animation: ebm_background_slide linear infinite 0.4s;
 }
 
 /* Only show the loader when we're loading */

diff --git a/src/css/picobel.pitchfork.css b/src/css/picobel.pitchfork.css
@@ -51,7 +51,7 @@
     background-size: 2em 2em;
     background-repeat: repeat;
     background-position: 0 0;
-    animation: background_slide linear infinite 0.3s;
+    animation: pitchfork_background_slide linear infinite 0.3s;
 }
 .pitchfork.picobel.loading .loader {
     display: block;
@@ -237,7 +237,7 @@
 }
 
 /* Simulates an infinite slide-to-the-right effect. */
-@keyframes background_slide {
+@keyframes pitchfork_background_slide {
     0% {
         background-position: 0 0;
     }