improve and extend configuration, using Hugo's $.Param method

assets/js/common.ts

@@ -1,30 +1,32 @@
 import { createApp } from 'petite-vue'
 
 import { api, polling } from './settings'
-import { pageid } from '@params'
+import { pageid, domain } from '@params'
 
-const interaction = createRandString(1)
-
-type confdata = {
+type Config = {
 	apiurl: string
 	pollurl: string
+	domain: string
 	itemid: string
 	sid: string
+	iid: string
 }
 
-export function config (api, polling): confdata {
+export function config (api, polling): Config {
 	const pu = polling ? `${api.path}/${polling.msgbase.join('/')}` : ''
 	const urlparams = new URL(location.href).searchParams
 	return { 
 		apiurl: api.path, 
 		pollurl: pu, 
+		domain: domain,
 		itemid: urlparams.get('id'),
-		sid: getSid()
+		sid: getSid(),
+		iid: createRandString(1)
 	}
 }
 
 export const pvapp = {
-	run(conf: confdata) {
+	run(conf: Config) {
 		appdata.conf = conf
 		createApp(appdata).mount()
 		if (appdata.conf.pollurl) {
@@ -35,7 +37,7 @@ export const pvapp = {
 
 const appdata = {
 	$delimiters: ['{|', '|}'],
-	conf: {} as confdata,
+	conf: {} as Config,
 	components: {},
 	output: '',
 	handle,
@@ -46,7 +48,6 @@ const appdata = {
 	Data
 }
 
-
 // components
 
 function Data(name: string): object {
@@ -62,12 +63,14 @@ function Data(name: string): object {
 // appdata and component method definitions
 
 function save() {
+	const data = this.data
 	let value = ''
-	for (const k of Object.keys(this.data)) {
-		value += `${k}: ${this.data[k]}, `
+	for (const k of Object.keys(data)) {
+		value += `${k}: ${data[k]}, `
 	}
 	this.output += '\n' + value
 	console.log('save:', value)
+	// sendMsg(this.conf, [conf.domain, 'data', this.name, data.id], data)
 }
 
 function poll() {
@@ -84,8 +87,8 @@ function handle(msg) {
 
 // basic functions - move to api.ts
 
-async function send(url: string, data: any) {
-	data._interaction = interaction
+async function send(url: string, conf: Config, data: any) {
+	data._interaction = conf.iid
 	const body = JSON.stringify(data)
 	return fetch(url, {
 		method: 'POST',
@@ -119,7 +122,7 @@ async function dopoll(app: typeof appdata) {
 	const wait_time = 10000
 	while (true) {
 		try {
-			const res = await(send(app.conf.pollurl, {}))
+			const res = await(send(app.conf.pollurl, app.conf, {}))
 			const msg = await res.json()
 			console.log(msg)
 			switch (msg.status) {

exampleSite/config.yaml

@@ -21,6 +21,10 @@ params:
     name: Helmut Merz
     link: https://blog.cy7.eu
 
+  api:
+    domain: demo
+    module: main.ts
+
 taxonomies:
   domain: domains
   topic: topics

exampleSite/content/app/test1.md

@@ -5,11 +5,12 @@ img:
 pageid: test1
 domains: [App]
 topics: [Examples]
-date:   2023-03-07
+date:   2023-03-10
 author: helmutm
 draft:  false
 weight: 10
-jsModule: main.ts
+api:
+  domain: test
 ---
 
 cyberscopes example site - use petite-vue in Hugo-generated sites.

layouts/partials/js.html

@@ -1,6 +1,7 @@
-{{- if $jsmod := .Params.JsModule -}}
+{{- if $jsmod := $.Param "api.module" -}}
   {{- $pageid := or .Params.Pageid (and .File .File.UniqueID) "unknown" -}}
-  {{- $params := dict "pageid" $pageid -}}
+  {{- $params := dict "pageid" $pageid 
+  					  "domain" ($.Param "api.domain") -}}
   {{- $js := resources.Get (printf "js/%s" $jsmod) | js.Build (
   		dict "minify" false "params" $params) -}}
   <script src="{{ $js.Permalink }}" defer></script>