🔧

.github/workflows/build-pages.yml

@@ -34,7 +34,7 @@ jobs:
         run: npm ci
 
       - name: Build the project
-        run: npm run build
+        run: npm run build -- --mode=gh
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

index.html

@@ -14,7 +14,7 @@
   <button id="play-button" type="button">Play</button>
   <div class="container">
     <div class="audio-container">
-      <audio class="audio-player" controls src="/iiif.mp3"></audio>
+      <audio class="audio-player" controls src="./iiif.mp3"></audio>
     </div>
     <div class="visualizer"></div>
     <div class="lyrics honk-wonk"></div>

src/lyrics.js

@@ -1,4 +1,5 @@
 import posTagger from 'wink-pos-tagger';
+import vttText from './iiif.vtt?raw';
 const wink = posTagger();
 
 // what parts of speech should we use?
@@ -12,14 +13,12 @@ const aicURLParams =
 // Function to fetch and parse VTT file
 export async function loadVTT(url) {
   try {
-    const response = await fetch(url);
-    const vttText = await response.text();
+    // const response = await fetch(url);
+    // const vttText = await response.text();
     const jsonLyrics = parseVTT(vttText);
     // now get parts of speech
     jsonLyrics.forEach((cue) => {
       // get relevant words and add to JSON
-      // const words = new Lexer().lex(cue.text);
-      // const taggedWords = new POSTagger().tag(words);
       const taggedWords = wink.tagSentence(cue.text);
       cue.words = cue.words || [];
       cue.words.push(

src/main.js

@@ -1,5 +1,4 @@
 import "../styles.css";
-
 import { loadVTT } from "./lyrics";
 import { addImage } from "./images";
 import { initFunkyIIIF } from './audio';
@@ -17,7 +16,7 @@ function parseTimecode(timecode) {
 // Init the audio player.
 document.addEventListener("DOMContentLoaded", async (event) => {
 	// lyrics data.
-	const lyricsData = await loadVTT("iiif.vtt");
+	const lyricsData = await loadVTT("/iiif.vtt");
 
 	const audioElement = document.querySelector(".audio-player");
 	const lyricsContainer = document.querySelector(".lyrics");

vite.config.js

@@ -1,12 +1,11 @@
 import { defineConfig } from "vite";
 
 export default defineConfig(({ mode }) => {
-  const config = {};
-
-  // Conditional configuration for GitHub Pages
-  if (mode === "github") {
-    config.base = "/funk-with-iiif/";
+  if (mode === "gh") {
+    return {
+      base: "/funk-with-iiif/",
+    };
+  } else {
+    return {};
   }
-
-  return config;
 });