.drone.yml

@@ -107,7 +107,7 @@ steps:
       CYPRESS_RECORD_KEY:
         from_secret: cypress_project_key
     commands:
-      - sed -i 's/localhost/api/g' dist/index.html
+      - sed -i '' 's|localhost|api|g' dist/index.html
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm cypress install
       - pnpm run test:e2e-record
@@ -147,7 +147,7 @@ steps:
     commands:
       - cp -r dist dist-preview
       # Override the default api url used for preview
-      - sed -i 's|http://localhost:3456|https://try.vikunja.io|g' dist-preview/index.html
+      - sed -i '' 's|http://localhost:3456|https://try.vikunja.io|g' dist-preview/index.html
       - apk add --no-cache perl-utils
       - shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
       - node ./scripts/deploy-preview-netlify.js
@@ -202,13 +202,13 @@ steps:
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - apk add git
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm install --fetch-timeout 100000 --frozen-lockfile
       - pnpm run lint
-      - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
+      - apk add git jq
+      - ./scripts/version-update-package.sh
       - pnpm run build
-      - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
+      - sed -i '' 's|http://localhost:3456/api/v1|/api/v1|g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
 
@@ -279,13 +279,12 @@ steps:
     environment:
       PNPM_CACHE_FOLDER: .cache/pnpm
     commands:
-      - apk add git
       - corepack enable && pnpm config set store-dir .cache/pnpm
       - pnpm install --fetch-timeout 100000 --frozen-lockfile
       - pnpm run lint
-      - "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
+      - ./scripts/version-update-package.sh
       - pnpm run build
-      - sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
+      - sed -i '' 's|http://localhost:3456/api/v1|/api/v1|g' dist/index.html # Override the default api url used for developing
 #    depends_on:
 #      - restore-cache
 

Dockerfile

@@ -21,8 +21,8 @@ RUN \
   # we have renovate to keep our dependencies up to date
   # Build the frontend
   pnpm install && \
-  apk add --no-cache git && \
-  echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
+	apk add --no-cache git jq && \
+  ./scripts/version-update-package.sh && \
   pnpm run build
 
 # Stage 2: copy 

env.d.ts

@@ -3,6 +3,8 @@
 /// <reference types="cypress" />
 /// <reference types="@histoire/plugin-vue/components" />
 
+declare const __APP_VERSION__: string
+
 interface ImportMetaEnv {
   readonly VITE_IS_ONLINE: boolean
 }

flake.nix

@@ -5,6 +5,16 @@
     let pkgs = nixpkgs.legacyPackages.x86_64-linux;
     in {
       defaultPackage.x86_64-linux =
-        pkgs.mkShell { buildInputs = [ pkgs.nodePackages.pnpm pkgs.cypress pkgs.git-cliff ]; };
+        pkgs.mkShell { buildInputs = with pkgs; [ 
+          nodePackages.pnpm 
+          cypress 
+          git-cliff 
+          jq 
+          python310Packages.fonttools
+          b2sum
+          wget
+          gawk
+          brotli
+        ]; };
     };
 }

package.json

@@ -2,7 +2,7 @@
   "name": "vikunja-frontend",
   "description": "The todo app to organize your life.",
   "private": true,
-  "version": "0.10.0",
+  "version": "0.20.2",
   "license": "AGPL-3.0-or-later",
   "repository": {
     "type": "git",
@@ -37,12 +37,14 @@
     "test:unit": "vitest",
     "typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "browserslist:update": "pnpm dlx browserslist@latest --update-db",
+    "story:dev": "histoire dev",
+    "story:build": "histoire build",
+    "story:preview": "histoire preview",
     "fonts:update": "pnpm fonts:download && pnpm fonts:subset",
     "fonts:download": "./scripts/fonts-download.sh",
     "fonts:subset": "./scripts/fonts-subset.sh",
-    "story:dev": "histoire dev",
-    "story:build": "histoire build",
-    "story:preview": "histoire preview"
+    "// TODO:": "add release including creating changelog via `git-cliff`",
+    "release:update-version": "pnpm dlx bumpp --no-push $(./scripts/version-get-string.sh)"
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "6.2.1",

scripts/run.sh

@@ -1,4 +1,4 @@
-#!/bin/bash
+#!/bin/sh
 
 # This shell script sets the api url based on an environment variable and starts nginx in foreground.
 
@@ -10,16 +10,13 @@ VIKUNJA_HTTPS_PORT="${VIKUNJA_HTTPS_PORT:-443}"
 
 echo "Using $VIKUNJA_API_URL as default api url"
 
-# Escape the variable to prevent sed from complaining
-VIKUNJA_API_URL=$(echo $VIKUNJA_API_URL |sed 's/\//\\\//g')
+sed -i "" "s|http://localhost:3456||g" /usr/share/nginx/html/index.html # replacing in two steps to make sure api urls from releases are properly replaced as well
+sed -i "" "s|/api/v1|$VIKUNJA_API_URL|g" /usr/share/nginx/html/index.html
+sed -i "" "s|.SENTRY_ENABLED = false|.SENTRY_ENABLED = $VIKUNJA_SENTRY_ENABLED|g" /usr/share/nginx/html/index.html
+sed -i "" "s|.SENTRY_DSN = '.*'|.SENTRY_DSN = '$VIKUNJA_SENTRY_DSN'|g" /usr/share/nginx/html/index.html
 
-sed -i "s/http\:\/\/localhost\:3456//g" /usr/share/nginx/html/index.html # replacing in two steps to make sure api urls from releases are properly replaced as well
-sed -i "s/'\/api\/v1/'$VIKUNJA_API_URL/g" /usr/share/nginx/html/index.html
-sed -i "s/\.SENTRY_ENABLED = false/\.SENTRY_ENABLED = $VIKUNJA_SENTRY_ENABLED/g" /usr/share/nginx/html/index.html
-sed -i "s|\.SENTRY_DSN = '.*'|\.SENTRY_DSN = '$VIKUNJA_SENTRY_DSN'|g" /usr/share/nginx/html/index.html
-
-sed -i "s/listen 80/listen $VIKUNJA_HTTP_PORT/g" /etc/nginx/nginx.conf
-sed -i "s/listen 443/listen $VIKUNJA_HTTPS_PORT/g" /etc/nginx/nginx.conf
+sed -i "" "s|listen 80|listen $VIKUNJA_HTTP_PORT|g" /etc/nginx/nginx.conf
+sed -i "" "s|listen 443|listen $VIKUNJA_HTTPS_PORT|g" /etc/nginx/nginx.conf
 
 # Set the uid and gid of the nginx run user
 usermod --non-unique --uid ${PUID} nginx

scripts/version-get-string.sh

@@ -0,0 +1,20 @@
+#!/bin/sh
+
+# ensure packages are installed
+if ! command -v git &> /dev/null; then
+	echo "Error: git is not installed. Please install git and try again."
+	exit 1
+fi
+
+# This script returns the new version string.
+# It's built using the last semver git tag.
+# For this
+# - we use git describe (1).
+# - remove the prefix 'v' (2)
+# - remove the prefix 'g' from the current hash
+
+get_version_string() {
+	git describe --tags --always --abbrev=10 | sed 's/^v//' | sed 's/-g/-/'
+}
+
+echo $(get_version_string)

scripts/version-update-package.sh

@@ -0,0 +1,15 @@
+#!/bin/sh
+
+# This script updates the version field in the packges.json
+
+new_version=$(./get_version_string.sh)
+
+# ensure packages are installed
+if ! command -v jq &> /dev/null; then
+	echo "Error: jq is not installed. Please install jq and try again."
+	exit 1
+fi
+
+# Update the version field in package.json
+jq '.version = "'$new_version'"' package.json > package.json.tmp
+mv package.json.tmp package.json

src/main.ts

@@ -7,8 +7,6 @@ import App from './App.vue'
 
 import {error, success} from './message'
 
-import {VERSION} from './version.json'
-
 // Notifications
 import Notifications from '@kyvg/vue3-notification'
 
@@ -26,7 +24,7 @@ declare global {
 	}
 }
 
-console.info(`Vikunja frontend version ${VERSION}`)
+console.info(`Vikunja frontend version ${__APP_VERSION__}`)
 
 // Check if we have an api url in local storage and use it if that's the case
 const apiUrlFromStorage = localStorage.getItem('API_URL')

src/sentry.ts

@@ -1,13 +1,12 @@
 import type { App } from 'vue'
 import type { Router } from 'vue-router'
-import {VERSION} from './version.json'
 
 export default async function setupSentry(app: App, router: Router) {
 	const Sentry = await import('@sentry/vue')
 	const {Integrations} = await import('@sentry/tracing')
 
 	Sentry.init({
-		release: VERSION,
+		release: __APP_VERSION__,
 		app,
 		dsn: window.SENTRY_DSN,
 		integrations: [

src/views/About.vue

@@ -34,10 +34,9 @@
 <script setup lang="ts">
 import {computed} from 'vue'
 
-import {VERSION} from '@/version.json'
 import {useConfigStore} from '@/stores/config'
 
 const configStore = useConfigStore()
 const apiVersion = computed(() => configStore.version)
-const frontendVersion = VERSION
+const frontendVersion = __APP_VERSION__
 </script>

tsconfig.config.json

@@ -1,6 +1,12 @@
 {
   "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "env.config.d.ts"],
+  "include": [
+    "env.config.d.ts",
+    "package.json",
+    "vite.config.*",
+    "vitest.config.*",
+    "cypress.config.*"
+  ],
   "compilerOptions": {
     "composite": true,
     "types": ["node"]

vite.config.ts

@@ -4,6 +4,7 @@ import vue from '@vitejs/plugin-vue'
 import legacyFn from '@vitejs/plugin-legacy'
 import { URL, fileURLToPath } from 'node:url'
 import { dirname, resolve } from 'node:path'
+import {version} from './package.json'
 
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
 import {VitePWA}  from 'vite-plugin-pwa'
@@ -36,6 +37,9 @@ console.log(isModernBuild
 // https://vitejs.dev/config/
 export default defineConfig({
 	// https://vitest.dev/config/
+	define: {
+		'__APP_VERSION__': version,
+	},
 	test: {
 		environment: 'happy-dom',
 	},