fix and improve env var usage

Author: wassfila

.github/workflows/deploy.yml

@@ -17,6 +17,8 @@ permissions:
 jobs:
   build:
     runs-on: ubuntu-latest
+    env:
+      PUBLIC_BASE: /pipeline-visualization
     steps:
       - name: Checkout your repository using git
         uses: actions/checkout@v4

website/build.cmd

@@ -0,0 +1 @@
+pnpm run build

website/config.js

@@ -1,19 +1,12 @@
-import {readFile} from 'fs/promises'
 import {join} from 'path'
-import yaml from 'js-yaml'
-
-async function load_yaml_abs(abs_path){
-    const fileContent = await readFile(abs_path,'utf-8')
-    const data = yaml.load(fileContent);
-    return data;
-}
+import {loadEnv} from 'vite'
 
 const webdir = process.cwd()
+const env = loadEnv("",webdir,"PUBLIC_BASE")
 const rootdir = join(webdir,"..")
 const cachedir = join(rootdir,"cache")
-const manifets = await load_yaml_abs(join(rootdir,"manifest.yaml"))
 const outdir = join(cachedir,"web")
-const base = manifets.website.base
+const base = env.PUBLIC_BASE
 
 const config = {
     rootdir,

website/package.json

@@ -13,6 +13,7 @@
     "astro": "^4.6.3",
     "js-yaml": "^4.1.0",
     "vis-data": "^7.1.9",
-    "vis-timeline": "^7.7.3"
+    "vis-timeline": "^7.7.3",
+    "vite": "^5.2.10"
   }
 }

website/pnpm-lock.yaml

@@ -11,7 +11,9 @@ async function init(){
     for (const timeline_element of containers_els) {
         const data_file = timeline_element.dataset.file;
         try {
-            const response = await fetch(`${config.base}/artifacts/${data_file}`);
+            const file_url = `${config.base}/artifacts/${data_file}`
+            console.log(`fetching ${file_url}`)
+            const response = await fetch(file_url);
             const data_timeline = await response.json(); // Assuming the response needs to be converted to JSON
             new Timeline(timeline_element, data_timeline, {})
         } catch (error) {

website/src/components/timeline.js

@@ -1 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />