seo

website/package.json

@@ -5,6 +5,7 @@
     "scripts": {
         "dev": "vite dev",
         "build": "vite build",
+        "postbuild": "npx tsx src/lib/sitemap.ts",
         "preview": "vite preview",
         "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
         "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
@@ -36,6 +37,7 @@
         "svelte-check": "^3.8.1",
         "tailwindcss": "^3.4.4",
         "tslib": "^2.6.3",
+        "tsx": "^4.15.7",
         "typescript": "^5.4.5",
         "vite": "^5.3.1"
     },
@@ -59,4 +61,4 @@
         "tailwind-merge": "^2.3.0",
         "tailwind-variants": "^0.2.1"
     }
-}
+}

website/src/lib/sitemap.ts

@@ -0,0 +1,31 @@
+import fs from 'fs';
+import { languages } from "./languages";
+
+function getURL(lang: string, path: string = '/') {
+    return 'https://gpx.studio' + (lang === 'en' ? '' : ('/' + lang)) + path;
+}
+
+function generateSitemap() {
+    const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">` +
+
+        Object.keys(languages).map((lang) => `
+    <url>
+        <loc>${getURL(lang)}</loc>${Object.keys(languages).map((lang2) => `
+        <xhtml:link rel="alternate" hreflang="${lang2}" href="${getURL(lang2)}"/>`).join('')}
+    </url>`).join('') +
+
+        Object.keys(languages).map((lang) => `
+    <url>
+        <loc>${getURL(lang, '/about')}</loc>${Object.keys(languages).map((lang2) => `
+        <xhtml:link rel="alternate" hreflang="${lang2}" href="${getURL(lang2, '/about')}"/>`).join('')}
+    </url>`).join('') +
+
+        `
+</urlset>
+`;
+
+    return sitemap;
+}
+
+fs.writeFileSync('build/sitemap.xml', generateSitemap());

website/src/locales/en.json

@@ -1,4 +1,9 @@
 {
+    "metadata": {
+        "app_title": "the online GPX file editor",
+        "about_title": "about",
+        "description": "View, edit and create GPX files online with advanced route planning capabilities, file processing tools and beautiful maps."
+    },
     "menu": {
         "new": "New",
         "new_file": "New file",

website/src/routes/+layout.svelte

@@ -1,12 +1,5 @@
-<script>
+<script lang="ts">
 	import '../app.pcss';
-
-	import { ModeWatcher } from 'mode-watcher';
-	import { isLoading } from 'svelte-i18n';
 </script>
 
-<ModeWatcher />
-
-{#if !$isLoading}
-	<slot />
-{/if}
+<slot />

website/src/routes/[...language]/+layout.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { ModeWatcher } from 'mode-watcher';
+	import { isLoading, locale, _ } from 'svelte-i18n';
+	import { page } from '$app/stores';
+
+	if ($page.params.language) {
+		locale.set($page.params.language);
+	}
+</script>
+
+<ModeWatcher />
+
+{#if !$isLoading}
+	<slot />
+{/if}

website/src/routes/[...language]/+page.svelte

@@ -1,12 +1,35 @@
 <script lang="ts">
 	import App from '$lib/components/App.svelte';
+	import { base } from '$app/paths';
+	import { languages } from '$lib/languages';
+	import { _ } from 'svelte-i18n';
+</script>
 
-	import { locale } from 'svelte-i18n';
-	import { page } from '$app/stores';
+<svelte:head>
+	<title>gpx.studio — {$_('metadata.app_title')}</title>
+	<meta name="description" content={$_('metadata.description')} />
+	<meta property="og:title" content="gpx.studio — {$_('metadata.app_title')}" />
+	<meta property="og:description" content={$_('metadata.description')} />
+	<meta property="og:image" content="{base}/og_logo.png" />
+	<meta property="og:url" content="{base}/" />
+	<meta property="og:type" content="website" />
+	<meta property="og:site_name" content="gpx.studio" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content="gpx.studio — {$_('metadata.app_title')}" />
+	<meta name="twitter:description" content={$_('metadata.description')} />
+	<meta name="twitter:image" content="{base}/og_logo.png" />
+	<meta name="twitter:url" content="{base}/" />
+	<meta name="twitter:site" content="@gpxstudio" />
+	<meta name="twitter:creator" content="@gpxstudio" />
 
-	if ($page.params.language) {
-		locale.set($page.params.language);
-	}
-</script>
+	<link rel="alternate" hreflang="x-default" href="{base}/" />
+	{#each Object.keys(languages) as lang}
+		{#if lang === 'en'}
+			<link rel="alternate" hreflang="en" href="{base}/" />
+		{:else}
+			<link rel="alternate" hreflang={lang} href="{base}/{lang}/" />
+		{/if}
+	{/each}
+</svelte:head>
 
 <App />

website/src/routes/[...language]/about/+page.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { base } from '$app/paths';
+	import { languages } from '$lib/languages';
+	import { _ } from 'svelte-i18n';
+</script>
+
+<svelte:head>
+	<title>gpx.studio — {$_('metadata.about_title')}</title>
+	<meta name="description" content={$_('metadata.description')} />
+	<meta property="og:title" content="gpx.studio — {$_('metadata.about_title')}" />
+	<meta property="og:description" content={$_('metadata.description')} />
+	<meta property="og:image" content="{base}/og_logo.png" />
+	<meta property="og:url" content="{base}/" />
+	<meta property="og:type" content="website" />
+	<meta property="og:site_name" content="gpx.studio" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:title" content="gpx.studio — {$_('metadata.about_title')}" />
+	<meta name="twitter:description" content={$_('metadata.description')} />
+	<meta name="twitter:image" content="{base}/og_logo.png" />
+	<meta name="twitter:url" content="{base}/" />
+	<meta name="twitter:site" content="@gpxstudio" />
+	<meta name="twitter:creator" content="@gpxstudio" />
+
+	<link rel="alternate" hreflang="x-default" href="{base}/" />
+	{#each Object.keys(languages) as lang}
+		{#if lang === 'en'}
+			<link rel="alternate" hreflang="en" href="{base}/" />
+		{:else}
+			<link rel="alternate" hreflang={lang} href="{base}/{lang}/" />
+		{/if}
+	{/each}
+</svelte:head>