Merge pull request #1 from IMMM-SFA/sample/working-sankey-and-deploym…

…ent-example sveltize plotly stuff and add sample deployment action
IMMM-SFA · Dec 13, 2024 · caeecf8 · caeecf8
2 parents c4cb115 + ff29e4d
commit caeecf8
Show file tree

Hide file tree

Showing 8 changed files with 256 additions and 200 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -0,0 +1,40 @@
+name: Deploy
+
+on:
+  push:
+    branches: [ main ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    defaults:
+      run:
+        working-directory: ./sankey_dashboard
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm install
+      - name: Build
+        env:
+          NODE_ENV: production
+        run: npm run build
+      - name: Commit the build dir
+        run: |
+          cd build
+          git init
+          git add -A
+          git config --local user.email "[email protected]"
+          git config --local user.name "GitHub Action"
+          git commit -m 'deploy' -a || true
+      - name: Push changes to gh-pages
+        uses: ad-m/github-push-action@master
+        with:
+          branch: gh-pages
+          directory: build
+          force: true
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+
diff --git a/sankey_dashboard/package-lock.json b/sankey_dashboard/package-lock.json
diff --git a/sankey_dashboard/package.json b/sankey_dashboard/package.json
@@ -21,6 +21,6 @@
 	"dependencies": {
 		"@sveltejs/adapter-static": "^3.0.6",
 		"papaparse": "^5.4.1",
-		"plotly": "^1.0.6"
+		"plotly.js-dist-min": "^2.35.2"
 	}
 }
diff --git a/sankey_dashboard/src/app.html b/sankey_dashboard/src/app.html
@@ -5,7 +5,7 @@
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
-
+		<script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
 
 	</head>
 	<body data-sveltekit-preload-data="hover">

diff --git a/sankey_dashboard/src/routes/+layout.svelte b/sankey_dashboard/src/routes/+layout.svelte
@@ -1,20 +1,27 @@
 
 
 <script>
-const nav_items = ["home", "about"] ;
-
+    // this variable will be important if deploying to a non-root url,
+    // such as with github pages when you don't have a custom domain;
+    // defined in `svelte.config.js`
+	import { base } from '$app/paths';
+    const nav_items = ["home", "about"] ;
 </script>
 
-<style>
-
-</style>
-
-<div> 
+<div id="navbar"> 
 
-{#each nav_items as item}
-<a href="/{item}"> {item}</a>
-{/each}
+    {#each nav_items as item}
+        <a href="{base}/{item === "home" ? '' : item}">{item}</a>
+    {/each}
 
 </div>
 
-<slot></slot>
+<slot/>
+
+<style>
+    #navbar {
+        display: flex;
+        flex-direction: row;
+        gap: 2rem;
+    }
+</style>