template varnish config using gomplate

src/lib/components/LiveImage.svelte

@@ -3,8 +3,7 @@
 	import { grey400x225 } from '$lib/utils/staticImageSource';
 	import Dialog from './Dialog.svelte';
 
-	const IMAGE_PROXY_URL = 'http://localhost:6081';
-	const IMAGE_REFRESH_INTERVAL = 300;
+	const IMAGE_REFRESH_INTERVAL = 3000;
 
 	let { imageUrl }: { imageUrl: string } = $props();
 	let lastUpdated = new Date();
@@ -17,10 +16,15 @@
 	function loadBlob(blob: Blob) {
 		const reader = new FileReader();
 		reader.onloadend = () => {
-			imageSource = reader.result || '';
 			const img = document.getElementById('live-image') as HTMLImageElement;
 			if (!img) return;
 
+			imageSource = reader?.result || '';
+			if (imageSource === '') {
+				console.log("no image data, returning")
+				return
+			}
+
 			// set imageSource to image element
 			img.src = `data:image/jpeg;base64; ${imageSource}`;
 			lastUpdated = new Date();
@@ -80,6 +84,7 @@
 	{:else}
 		<Dialog title="Live stream of printer" on:close={() => (fullscreen = false)}>
 			<img style="width: 100%;" src={String(imageSource)} id="live-image" />
+			<span>Last update {timestamp}s ago</span>
 		</Dialog>
 
 		<img src={String(grey400x225)} />

src/routes/+page.svelte

@@ -25,8 +25,6 @@
 		if (counter + 1 >= colors.length) counter = 1;
 		else counter += 1;
 
-		console.log(counter);
-
 		return {
 			bgColor: colors[counter - 1][0],
 			color: colors[counter - 1][1],
@@ -99,7 +97,6 @@
 		font-size: 1.1rem;
 		line-height: 1.4;
 		line-height: 1.7;
-		max-width: 80%;
 		color: #333;
 
 		background-color: #fafafa; /* Subtle background to separate it from the rest */

src/routes/cluster/[resource]/[uid]/+page.server.ts

@@ -13,7 +13,6 @@ const AVAILABLE_RESOURCES = [
 
 export const load: PageServerLoad = async ({ params }) => {
 	const { resource, uid } = params;
-	console.log('PARAMS:', params);
 
 	if (!AVAILABLE_RESOURCES.includes(resource)) {
 		return {

src/routes/cluster/[resource]/[uid]/logs/+server.ts

@@ -3,13 +3,11 @@ import { produce } from 'sveltekit-sse';
 
 export function GET({ request }) {
 	return produce(async function start({ emit }) {
-		console.log('----- REQUEST -----');
 		const url = new URL(request.url);
 		const pod = url.searchParams.get('pod');
 		const namespace = url.searchParams.get('namespace');
 		const container = url.searchParams.get('container');
 
-		console.log('pod, namespace:', pod, namespace);
 		const k8sLogs = createLogStream(pod, namespace, container);
 		k8sLogs.start();
 		const unsubscribe = k8sLogs.logEmitter.subscribe((msg: string) => {

src/routes/image-proxy/[...catchall]/+server.ts

@@ -23,7 +23,6 @@ async function fetchImage(src: string) {
 }
 
 export const GET: RequestHandler = async ({ url }) => {
-	console.log('GET');
 	url.pathname = url.pathname.replace('/image/', '');
 
 	const res = await fetchImage(url.href);