Switch to staging dockerfile for staging

.drone.yml

@@ -60,14 +60,13 @@ volumes:
 
 kind: pipeline
 type: kubernetes
-name: deploy
+name: deploy-staging
 
 trigger:
   event:
     - push
   branch:
-    exclude:
-      - main
+    - staging
 
 steps:
 - name: build-publish-image
@@ -83,7 +82,69 @@ steps:
       from_secret: org_docker_username
     password:
       from_secret: org_docker_password
-    dockerfile: Dockerfile
+    dockerfile: staging.Dockerfile
+    repo: dutchellie/${DRONE_REPO_NAME}
+    tags:
+      - ${DRONE_BRANCH}-${DRONE_COMMIT_SHA:0:8}
+      - ${DRONE_BRANCH}-latest
+- name: deploy
+  image: pelotech/drone-helm3
+  settings:
+    mode: upgrade
+    chart: .drone/helm/chart
+    namespace: drone-staging
+    release: ${DRONE_REPO_NAME}-${DRONE_BRANCH}
+    skip_tls_verify: true
+    values_files:
+      - .drone/helm/prod-val.yaml
+    values:
+      - "image=dutchellie/${DRONE_REPO_NAME}:${DRONE_BRANCH}-${DRONE_COMMIT_SHA:0:8}"
+      - "baseURL=staging.quenten.nl"
+      - "name=${DRONE_REPO_NAME}-${DRONE_BRANCH}"
+    kube_api_server:
+      from_secret: org_api_server
+    kube_token:
+      from_secret: org_kube_token
+    kube_certificate:
+      from_secret: org_kube_certificate
+    kube_service_account: drone-deploy
+    dry_run: false
+  depends_on:
+    - build-publish-image
+
+volumes:
+  - name: build
+    temp: {}
+
+---
+
+kind: pipeline
+type: kubernetes
+name: deploy
+
+trigger:
+  event:
+    - push
+  branch:
+    exclude:
+      - main
+      - staging
+
+steps:
+- name: build-publish-image
+  image: plugins/docker
+  privileged: true
+  volumes:
+    - name: build
+      path: /drone/src/build
+  settings:
+    cache_from:
+      "dutchellie/${DRONE_REPO_NAME}:${DRONE_BRANCH}-latest"
+    username:
+      from_secret: org_docker_username
+    password:
+      from_secret: org_docker_password
+    dockerfile: staging.Dockerfile
     repo: dutchellie/${DRONE_REPO_NAME}
     tags:
       - ${DRONE_BRANCH}-${DRONE_COMMIT_SHA:0:8}

.drone/helm/staging-val.yaml

@@ -1,6 +1,5 @@
 baseURL: changemestaging.dutchellie.nl
 name: changeme-staging
-replicas: 2
 containerEnv:
 # - name: APIURL
 #   value: https://api.quenten.nl/api/testing

package.json

@@ -4,6 +4,7 @@
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build",
+		"staging": "vite build --mode staging",
 		"package": "svelte-kit package",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync",

src/components/misc/guestbook.svelte

@@ -15,9 +15,11 @@
 	import { onMount } from 'svelte';
 	import { sha256 } from 'js-sha256';
 	import GuestbookEntry from './guestbook/guestbook-entry.svelte';
-	import { page } from '$app/stores';
-import { comment } from 'postcss';
-
+	import { mode } from '$app/env';
+	
+	//const ApiURL = dev ? 'https://api.quenten.nl/api/testing' : 'https://api.quenten.nl/api';
+	//const ApiURL = import.meta.env.APIURL;
+	const ApiURL = mode == 'production' ? 'https://api.quenten.nl/api' : 'https://api.quenten.nl/api/testing';
 	let showError = false;
 	let errorTitle = 'Error';
 	let errorMessage = 'Error message';
@@ -58,7 +60,7 @@ import { comment } from 'postcss';
 		};
 
 		const jsonData = JSON.stringify(data);
-		const res = await fetch('https://api.quenten.nl/api/testing/comment', {
+		const res = await fetch(ApiURL + '/comment', {
 			method: 'POST',
 			body: jsonData
 		});
@@ -91,7 +93,7 @@ import { comment } from 'postcss';
 			return;
 		}
 
-		let newHash = await fetch('https://api.quenten.nl/api/testing/commenthash')
+		let newHash = await fetch(ApiURL + '/commenthash')
 			.then((res) => res.text())
 			.then((t) => {
 				return t;
@@ -107,7 +109,7 @@ import { comment } from 'postcss';
 
 	async function fetchComments() {
 		let comments: Comment[];
-		comments = await fetch('https://api.quenten.nl/api/testing/comment')
+		comments = await fetch(ApiURL + '/comment')
 			.then((res) => res.json())
 			.then((data) => {
 				return data;
@@ -161,15 +163,15 @@ import { comment } from 'postcss';
 			bind:value={message}
 		/>
 		<button
-			class="bg-blue-100 border-slate-400 border-2 rounded-full py-2 w-fit px-10"
+			class="bg-blue-100 dark:bg-slate-700 border-slate-400 border-2 rounded-full py-2 w-fit px-10"
 			type="submit">Submit</button
 		>
 	</form>
 	<div>
 		{#if DisplayComments != null}
 			<div class="mt-4">
-				<button class="px-5 py-2 bg-slate-400 rounded-xl" on:click={() => {if (commentPage > 0) commentPage -= 1}}>Previous</button>
-				<button class="px-5 py-2 bg-slate-400 rounded-xl" on:click={() => commentPage += 1}>Next Page</button>
+				<button class="px-5 py-2 bg-slate-400 dark:bg-slate-800 dark:ring-slate-400 dark:ring-2 rounded-xl mx-1" on:click={() => {if (commentPage > 0) commentPage -= 1}}>Previous</button>
+				<button class="px-5 py-2 bg-slate-400 dark:bg-slate-800 dark:ring-slate-400 dark:ring-2 rounded-xl mx-1" on:click={() => commentPage += 1}>Next Page</button>
 				<p class="ml-2 mt-1 w-full md:w-max">Current page: {commentPage + 1}</p>
 			</div>
 			{#each DisplayComments.slice(commentPage * pageSize, commentPage * pageSize + pageSize) as c}

src/components/misc/guestbook/guestbook-entry.svelte

@@ -3,8 +3,8 @@
 	export let comment: Comment;
 </script>
 
-<div class="rounded bg-red-100 mt-2 break-words">
-	<div class="rounded-t bg-slate-400 grid grid-cols-2 gap-1 min-h-fit  px-3 py-1">
+<div class="rounded bg-red-100 dark:bg-slate-800 dark:ring-2 dark:ring-slate-400 mt-2 break-words">
+	<div class="rounded-t bg-slate-400 dark:bg-slate-700 grid grid-cols-2 gap-1 min-h-fit  px-3 py-1">
 		<p class="text-xs">Author: {comment.name}</p>
 		<p class="text-xs">
 			Time:
@@ -18,7 +18,7 @@
 			<p class="text-xs col-span-2">Site: {comment.website}</p>
 		{/if}
 	</div>
-	<div class="px-3 ">
+	<div class="px-3 py-2">
 		<p class="">{comment.message}</p>
 	</div>
 </div>

staging.Dockerfile

@@ -0,0 +1,18 @@
+FROM node:18.2.0-alpine
+
+WORKDIR /app
+COPY . .
+RUN npm ci
+RUN npm audit fix
+RUN npm run staging
+
+FROM node:18.2.0-alpine
+
+WORKDIR /app
+COPY --from=0 /app/package*.json ./
+RUN npm ci --ignore-scripts
+RUN npm audit fix
+COPY --from=0 /app/build ./
+
+EXPOSE 3000
+CMD ["node", "./index.js"]

vite.config.js

@@ -2,7 +2,7 @@ import { sveltekit } from '@sveltejs/kit/vite';
 
 /** @type {import('vite').UserConfig} */
 const config = {
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
 };
 
 export default config;