url workaround

pad-bis.py

@@ -156,13 +156,13 @@ def init_page(padliography, description):
 @app.route('/')
 def home():
     '''Serve the homepage layout'''
-    return render_template('home.html', page=DEFAULT_PAGE)
+    return render_template('home.html', page=DEFAULT_PAGE, base_url=base_url)
 
 
 @app.route('/<padliography>/')
 def page(padliography):
     '''Serve a specific padliography'''
-    return render_template('home.html', page=padliography)
+    return render_template('home.html', page=padliography, base_url=base_url)
 
 
 @app.route('/api/<padliography>/', methods=['GET', 'POST'])

static/js/PadForm.js

@@ -40,7 +40,7 @@ export default {
 
 			pad.categories = pad.categories.join(", ");
 
-			fetch(`api/${currentPage.value}`, {
+            fetch(`${baseUrl.value}/api/${currentPage.value}`, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify(pad),

static/js/PadStore.js

@@ -2,7 +2,8 @@ const { ref } = Vue;
 
 const padStore = ref([]);
 const currentPage = ref("");
+const baseUrl = ref("")
 
 export default function padliographyStore() {
-	return { padStore, currentPage };
+	return { padStore, currentPage, baseUrl };
 }

static/js/PadTable.js

@@ -7,13 +7,13 @@ export default {
 
 		const loaded = ref(false);
 
-		const { padStore, currentPage } = padliographyStore();
+		const { padStore, currentPage, baseUrl } = padliographyStore();
 		const newPage = ref("");
 		const initPage = ref("");
 		const pageDescription = ref("");
 
 		const initialize = function () {
-			fetch(`/api/${initPage.value}/init`, {
+			fetch(`${baseUrl.value}/api/${initPage.value}/init`, {
 				method: "POST",
 				headers: { "Content-Type": "application/json" },
 				body: JSON.stringify({
@@ -37,7 +37,7 @@ export default {
 		};
 
 		watchEffect(() => {
-			fetch(`/api/${currentPage.value}`)
+			fetch(`${baseUrl.value}/api/${currentPage.value}`)
 				.then((res) => res.json())
 				.then((data) => {
 					pads.value = data.pads;

templates/home.html

@@ -15,6 +15,7 @@
 			<pad-table></pad-table>
 		</div>
         <div id="current-page" class="hidden">{{page}}</div>
+        <div id="base-url" class="hidden">{{base_url}}</div>
 		<script type="module">
 			import PadForm from "{{url_for('static', filename='js/PadForm.js')}}";
 			import PadTable from "{{url_for('static', filename='js/PadTable.js')}}";
@@ -22,8 +23,9 @@
 			const { createApp } = Vue;
             
             import PadStore from "{{url_for('static', filename='js/PadStore.js')}}";
-            const { currentPage } = PadStore()
+            const { currentPage, baseUrl } = PadStore()
             currentPage.value = document.querySelector('#current-page').textContent
+            baseUrl.value = document.querySelector('#base-url').textContent
 
 			createApp({
 				components: { PadForm, PadTable },