Merge pull request #214 from openstreetmap-polska/mpa

Vite: MultiPageApp for languages
openstreetmap-polska · Feb 23, 2024 · a88784a · a88784a
2 parents 0ca7bd0 + 7b80185
commit a88784a
Show file tree

Hide file tree

Showing 9 changed files with 56 additions and 53 deletions.
diff --git a/.github/workflows/ci_test.yml b/.github/workflows/ci_test.yml
@@ -32,5 +32,4 @@ jobs:
     - name: Build
       run: bun run build
       env:
-        VITE_DEFAULT_LANG: en
         VITE_BACKEND_API_URL: "https://dev.openaedmap.org"
diff --git a/.github/workflows/deploy_development.yml b/.github/workflows/deploy_development.yml
@@ -34,7 +34,6 @@ jobs:
       - name: Build app (main)
         env:
           VITE_ENV: development
-          VITE_DEFAULT_LANG: en
           VITE_OSM_API_URL: "https://master.apis.dev.openstreetmap.org"
           VITE_OSM_OAUTH2_CLIENT_ID: ${{ secrets.REACT_APP_OSM_OAUTH2_CLIENT_ID }}
           VITE_BACKEND_API_URL: "https://dev.openaedmap.org"
@@ -47,17 +46,6 @@ jobs:
           User-agent: *
           Disallow: /
           EOF
-      - name: Copy main build to server
+      - name: Copy result to server
         run: |
-          rsync -rp -e 'ssh -p ${{ secrets.SSH_HOST_NEW_PORT }}' build/* ${{ secrets.SSH_USER_NEW }}@${{ secrets.SSH_HOST_NEW_IP }}:~/dev-static/
-      - name: Build app lang versions
-        env:
-          VITE_ENV: development
-          VITE_OSM_API_URL: "https://master.apis.dev.openstreetmap.org"
-          VITE_OSM_OAUTH2_CLIENT_ID: ${{ secrets.REACT_APP_OSM_OAUTH2_CLIENT_ID }}
-          VITE_BACKEND_API_URL: "https://dev.openaedmap.org"
-          VITE_SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: ./scripts/build_every_lang.sh
-      - name: Copy lang version builds to server
-        run: |
-          rsync -rp --delete -e 'ssh -p ${{ secrets.SSH_HOST_NEW_PORT }}' build/* ${{ secrets.SSH_USER_NEW }}@${{ secrets.SSH_HOST_NEW_IP }}:~/dev-static/
+          rsync -rp --delete -e 'ssh -p ${{ secrets.SSH_HOST_NEW_PORT }}' build/* ${{ secrets.SSH_USER_NEW }}@${{ secrets.SSH_HOST_NEW_IP }}:~/dev-static/
diff --git a/.github/workflows/deploy_production.yml b/.github/workflows/deploy_production.yml
@@ -34,13 +34,12 @@ jobs:
       - name: Build app
         env:
           VITE_ENV: production
-          VITE_DEFAULT_LANG: en
           VITE_OSM_AUTH_URL: "https://www.openstreetmap.org"
           VITE_OSM_API_URL: "https://api.openstreetmap.org"
           VITE_OSM_OAUTH2_CLIENT_ID: ${{ secrets.REACT_APP_OSM_OAUTH2_CLIENT_ID }}
           VITE_BACKEND_API_URL: "https://openaedmap.org"
           VITE_SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
-        run: bun run build && ./scripts/build_every_lang.sh
-      - name: Run deploy script on host
+        run: bun run build
+      - name: Copy result to server
         run: |
           rsync -rp --delete -e 'ssh -p ${{ secrets.SSH_HOST_NEW_PORT }}' build/* ${{ secrets.SSH_USER_NEW }}@${{ secrets.SSH_HOST_NEW_IP }}:~/main-static/
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
+langs
+
 # Logs
 logs
 *.log

diff --git a/README.md b/README.md
@@ -47,7 +47,6 @@ Second way is if you are using VS Code and have Docker installed you can use dev
 
 Create .env file and put these variables there:
 ```
-VITE_DEFAULT_LANG=en
 VITE_OSM_API_URL=https://master.apis.dev.openstreetmap.org
 VITE_BACKEND_API_URL=https://dev.openaedmap.org
 VITE_OSM_OAUTH2_CLIENT_ID=xXaPFXSLizLHuZzoLI1eebHncPdDdVH7nA917S9uFUo

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="%VITE_DEFAULT_LANG%">
+<html lang="en">
   <head>
     <title>OpenAEDMap - Map of Defibrillators</title>
     <meta charset="utf-8" />

diff --git a/scripts/build_every_lang.sh b/scripts/build_every_lang.sh
diff --git a/src/i18n.ts b/src/i18n.ts
@@ -10,7 +10,6 @@ if (!isProduction) {
 	languages.debug = { nativeName: "--debug--" };
 }
 const languagesIsoCodes = Object.keys(languages);
-const defaultLanguage = import.meta.env.VITE_DEFAULT_LANG ?? "en";
 
 i18n
 	// i18next-http-backend
@@ -57,7 +56,8 @@ function useLanguage(): string {
 	const {
 		i18n: { resolvedLanguage },
 	} = useTranslation();
-	return resolvedLanguage ?? defaultLanguage;
+	const htmlLanguage = document.getElementsByTagName("html")[0].lang;
+	return resolvedLanguage ?? htmlLanguage ?? "en";
 }
 
 export default i18n;

diff --git a/vite.config.js b/vite.config.js
@@ -1,4 +1,6 @@
+import * as fs from "fs";
 import path from "path";
+import { resolve } from "path";
 import { sentryVitePlugin } from "@sentry/vite-plugin";
 import react from "@vitejs/plugin-react";
 import { defineConfig, loadEnv } from "vite";
@@ -14,26 +16,28 @@ const getTranslatedStrings = async (languageCode) => {
 
 const htmlPlugin = async (env) => {
 	const translationsEn = await getTranslatedStrings("en");
-	const translationsTarget = await getTranslatedStrings(
-		env.VITE_DEFAULT_LANG ?? "en",
-	).catch((e) => console.error(e));
-	const { meta_title, meta_description, website_title } = {
-		...translationsEn,
-		...translationsTarget,
-	};
-	const baseUrl = env.VITE_BASE_URL ?? "";
-	const canonicalLinks = `<link href="${env.VITE_BACKEND_API_URL}${baseUrl}" rel="canonical" />`;
-	const alternateLinks = Object.keys(languages)
-		.map(
-			(lang) =>
-				`\t<link href="${env.VITE_BACKEND_API_URL}/${lang}/" rel="alternate" hreflang="${lang}" />`,
-		)
-		.join("\n");
-	const defaultAlternateLink = `\t<link href="${env.VITE_BACKEND_API_URL}/" rel="alternate" hreflang="x-default" />`;
-	const seoLinks = `${canonicalLinks}\n${alternateLinks}\n${defaultAlternateLink}`;
 	return {
 		name: "html-transform",
-		transformIndexHtml(html) {
+		async transformIndexHtml(html) {
+			const currentLang = html.match(/<html lang="([a-zA-Z-]+)">/)[1];
+			const translationsTarget = await getTranslatedStrings(currentLang).catch(
+				(e) => console.error(e),
+			);
+			const { meta_title, meta_description, website_title } = {
+				...translationsEn,
+				...translationsTarget,
+			};
+			const baseUrl = currentLang === "en" ? "" : `/${currentLang}/`;
+			const canonicalLinks = `<link href="${env.VITE_BACKEND_API_URL}${baseUrl}" rel="canonical" />`;
+			const alternateLinks = Object.keys(languages)
+				.filter((lang) => lang !== currentLang)
+				.map(
+					(lang) =>
+						`\t<link href="${env.VITE_BACKEND_API_URL}/${lang}/" rel="alternate" hreflang="${lang}" />`,
+				)
+				.join("\n");
+			const defaultAlternateLink = `\t<link href="${env.VITE_BACKEND_API_URL}/" rel="alternate" hreflang="x-default" />`;
+			const seoLinks = `${canonicalLinks}\n${alternateLinks}\n${defaultAlternateLink}`;
 			return html
 				.replace(/<title>(.*?)<\/title>/, `<title>${website_title}</title>`)
 				.replace(
@@ -49,6 +53,23 @@ const htmlPlugin = async (env) => {
 					seoLinks,
 				);
 		},
+		buildStart(options) {
+			const content = fs.readFileSync("index.html", "utf-8");
+			for (const lang of Object.keys(languages)) {
+				fs.mkdirSync(`langs/${lang}`, { recursive: true });
+				const contentLang = content.replace(
+					/<html lang="en">/,
+					`<html lang="${lang}">`,
+				);
+				fs.writeFileSync(`langs/${lang}/index.html`, contentLang);
+			}
+		},
+		writeBundle() {
+			for (const lang of Object.keys(languages)) {
+				fs.mkdirSync(`build/${lang}`, { recursive: true });
+				fs.renameSync(`build/langs/${lang}`, `build/${lang}`);
+			}
+		},
 	};
 };
 
@@ -85,6 +106,11 @@ export default defineConfig(({ mode }) => {
 		);
 	}
 
+	const rollupInputs = { main: resolve(__dirname, "index.html") };
+	for (const lang of Object.keys(languages)) {
+		rollupInputs[lang] = resolve(__dirname, `langs/${lang}/index.html`);
+	}
+
 	return {
 		// https://github.com/vitejs/vite/issues/1973#issuecomment-787571499
 		define: {
@@ -100,6 +126,9 @@ export default defineConfig(({ mode }) => {
 			outDir: "build",
 			chunkSizeWarningLimit: 1900,
 			sourcemap: true,
+			rollupOptions: {
+				input: rollupInputs,
+			},
 		},
 		plugins: plugins,
 		server: {
-Original file line number
+Diff line change
@@ -1,3 +1,5 @@
+    langs
     # Logs
     logs
     *.log
@@ Expand Down @@