Bump deps & better fallback if font not found (#312)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.gitignore

@@ -28,4 +28,5 @@ coverage
 *.sw?
 
 *.timestamp*.mjs
-.env
+.env
+*.env

compose.yaml

@@ -1,10 +1,19 @@
 services:
-    server:
+    frontend:
         build:
             context: .
         environment:
-            NODE_ENV: production
-            IN_CONTAINER: true
+            - NODE_ENV=production
+            - IN_CONTAINER=true
         ports:
             - 50000:80 # .com
             - 50001:81 # .nl
+    backend:
+        image: ghcr.io/jonathanbout/portfolio-backend:release
+        env_file: backend.compose.env
+        environment:
+            - ASPNETCORE_ENVIRONMENT=Production
+            - ASPNETCORE_URLS=http://+:5000
+            - CORS_ALLOWED_ORIGINS=http://localhost:50000,http://localhost:50001
+        ports:
+            - 32769:5000

env.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="vite/client" />
 
+import type { Locale } from "@/localizer"
 import "module"
 
+declare global {
+    interface Window {
+        app: {
+            locale: Locale
+        }
+    }
+}

nginx/default.conf

@@ -9,10 +9,10 @@ server {
 
 	root /app;
 
-	index index.nl.html;
+	index nl/index.html;
 
 	location / {
-		try_files $uri $uri/ /index.nl.html;
+		try_files $uri $uri/ /nl/index.html;
 	}
 
 	include shared_cache.conf;
@@ -25,10 +25,10 @@ server {
 
 	root /app;
 
-	index index.en.html;
+	index en/index.html;
 
 	location / {
-		try_files $uri $uri/ /index.en.html;
+		try_files $uri $uri/ /en/index.html;
 	}
 
 	include shared_cache.conf;

package.json

@@ -14,14 +14,14 @@
         "compose-up": "docker compose up --build"
     },
     "dependencies": {
-        "@typescript-eslint/parser": "^8.12.1",
+        "@typescript-eslint/parser": "^8.12.2",
         "bootstrap-icons": "^1.11.3",
         "eslint-plugin-vue": "^9.30.0",
         "flag-icons": "^7.2.3",
         "npm-run-all": "^4.1.5",
         "parse-css-color": "^0.2.1",
         "read-last-lines": "^1.8.0",
-        "typescript-eslint": "^8.12.1",
+        "typescript-eslint": "^8.12.2",
         "vue": "^3.5.12",
         "vue-eslint-parser": "^9.4.3",
         "vue-i18n": "^10.0.4",
@@ -30,7 +30,7 @@
     "devDependencies": {
         "@babel/types": "^7.26.0",
         "@tsconfig/node18": "^18.2.4",
-        "@types/node": "^22.8.2",
+        "@types/node": "^22.8.5",
         "@vitejs/plugin-vue": "^5.1.4",
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "^10.4.20",
@@ -39,7 +39,7 @@
         "prettier": "^3.3.3",
         "typescript": "~5.6.3",
         "vite": "^5.4.10",
-        "vite-plugin-vue-devtools": "^7.5.4",
-        "vue-tsc": "^2.1.8"
+        "vite-plugin-vue-devtools": "^7.5.6",
+        "vue-tsc": "^2.1.10"
     }
 }

plugins/localizer.plugin.ts

@@ -9,18 +9,20 @@ function getFiles(bundle: OutputBundle): { [key: string]: (OutputAsset | OutputB
         const { fileName } = file
         const extension = extname(fileName).substring(1)
 
-        result[extension] = (result[extension] || []).concat(file as any)
+        result[extension] = (result[extension] || []).concat(file as OutputAsset)
     }
 
     return result
 }
 
-function doReplace(oldHtml: string, key: string, value: any) {
+type LocaleData = string | { [key: string]: LocaleData }
+
+function doReplace(oldHtml: string, key: string, value: LocaleData): string {
     if (typeof value === "string") {
         // match [[localize:key]] but not \[[localize:key]]
         return oldHtml.replace(new RegExp(`(?<!\\\\)\\[\\[localize:${key}\\]\\]`, "g"), value)
     } else {
-        for (const [innerKey, innerValue] of Object.entries(value)) {
+        for (const [innerKey, innerValue] of Object.entries(value || {})) {
             let fullKey = innerKey
             if (key !== "") {
                 fullKey = key + "." + innerKey
@@ -60,10 +62,10 @@ export default function localizerPlugin(): Plugin {
                 const allLocales = Object.keys(json).filter((locale) => locale !== "common")
 
                 for (const locale of allLocales) {
-                    const newFileName = `index.${locale}.html`
+                    const newFileName = `${locale}/index.html`
                     let newHtml = html
 
-                    const pairs = Object.entries(json[locale]).concat(commonKeys)
+                    const pairs = Object.entries(json[locale]).concat(commonKeys) as [string, LocaleData][]
 
                     for (const [key, value] of pairs) {
                         newHtml = doReplace(newHtml, key, value)
@@ -75,6 +77,8 @@ export default function localizerPlugin(): Plugin {
                     newHtml =
                         "<!-- This page is search engine optimized for the '" + locale + "' locale -->\n" + newHtml
 
+                    newHtml = newHtml.replace("<head>", `<head><script>window.app.locale="${locale}"</script>`)
+
                     const htmlFile: EmittedAsset = {
                         type: "asset",
                         source: newHtml,

src/assets/base.less

@@ -55,7 +55,7 @@
         local("Cascadia Code"),
         url("https://static.jonathanbout.dev/CascadiaCode/woff2/CascadiaCode.woff2") format("woff2"),
         url("https://static.jonathanbout.dev/CascadiaCode/ttf/CascadiaCode.ttf") format("truetype"),
-        url("https://static.jonathanbout.dev/CascadiaCode/otf/static/CascadiaCodeNF-Regular.otf") format("opentype"),
+url("https://static.jonathanbout.dev/CascadiaCode/CascadiaCode.ttf") format("truetype"),        url("https://static.jonathanbout.dev/CascadiaCode/otf/static/CascadiaCodeNF-Regular.otf") format("opentype"),
         local("Cascadia Mono"),
         monospace;
 }

src/localizer/index.ts

@@ -74,7 +74,7 @@ export function createLocalizer(): VuePlugin {
      * 6. If none of the above, use the locale for the current domain (.com is English, .nl is Dutch)
      */
 
-    let locale: Locale = "en"
+    let locale: Locale = window.app.locale
 
     for (const loc of LOCALES) {
         if (window.location.origin.toLowerCase() === domainsByLocale[loc].toLowerCase()) {

src/backend/index.ts → src/server/index.ts

@@ -6,7 +6,11 @@ export type Body = { [key: string]: unknown }
 const productionUrl = ""
 
 function configuredBaseUrl() {
-    return import.meta.env.PROD ? productionUrl : (import.meta.env.VITE_BACKEND_URL as string) || productionUrl
+    const url = import.meta.env.VITE_BACKEND_URL || productionUrl
+
+    console.debug(`got base url ${url}`)
+
+    return url
 }
 
 function getPath(route: Route = "/", query: QueryParameters) {

src/stats/index.ts

@@ -1,5 +1,5 @@
 import { CSSColor, contrastingColor } from "@/util/color"
-import backend from "@/backend"
+import server from "@/server"
 export class TopLanguage {
     name: string = ""
     color: CSSColor = new CSSColor()
@@ -57,7 +57,7 @@ export async function getStats() {
     try {
         console.debug("fetching stats")
 
-        const response = await backend.get("/api/top-languages", { exclude_langs: "HLSL,ShaderLab" })
+        const response = await server.get("/api/top-languages", { exclude_langs: "HLSL,ShaderLab" })
 
         const data = (await response.json()) as { [key: string]: unknown }[]
 

vite.config.ts

@@ -21,7 +21,11 @@ export default defineConfig({
             usePolling: true
         },
         port: 3999,
-        strictPort: true,
+        strictPort: true
+    },
+    preview: {
+        port: 3999,
+        strictPort: true
     },
     css: {
         preprocessorOptions: {