steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-02 08:42:31 +00:00
Code Issues Packages Projects Releases Wiki Activity

inject static meta tags for each language

Browse Source
This commit is contained in:
vcoppe
2024-08-16 12:25:24 +02:00
parent 3bc9ac4639
commit fa30739fd0
7 changed files with 75 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
website/src/hooks.server.js Normal file
View File

@@ -0,0 +1,43 @@
import { base } from '$app/paths';
import { languages } from '$lib/languages';
import { getURLForLanguage } from '$lib/utils';
export async function handle({ event, resolve }) {
let language = event.params.language ?? 'en';
const strings = await import(`./locales/${language}.json`);
let path = event.url.pathname;
let page = event.route.id?.replace('/[[language]]', '').split('/')[1] ?? 'home';
let title = strings.metadata[`${page}_title`];
let description = strings.metadata[`description`];
let head = `<head>
<title>gpx.studio — ${title}</title>
<meta name="description" content="${description}" />
<meta property="og:title" content="gpx.studio — ${title}" />
<meta property="og:description" content="${description}" />
<meta name="twitter:title" content="gpx.studio — ${title}" />
<meta name="twitter:description" content="${description}" />
<meta property="og:image" content="https://gpx.studio${base}/og_logo.png" />
<meta property="og:url" content="https://gpx.studio/" />
<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:image" content="https://gpx.studio${base}/og_logo.png" />
<meta name="twitter:url" content="https://gpx.studio/" />
<meta name="twitter:site" content="@gpxstudio" />
<meta name="twitter:creator" content="@gpxstudio" />
<link rel="alternate" hreflang="x-default" href="https://gpx.studio${getURLForLanguage('en', path)}" />`;
for (let lang of Object.keys(languages)) {
head += ` <link rel="alternate" hreflang="${lang}" href="https://gpx.studio${getURLForLanguage(lang, path)}" />
`;
}
const response = await resolve(event, {
transformPageChunk: ({ html }) => html.replace('<head>', head)
});
return response;
}

70
website/src/lib/components/Head.svelte
View File

@@ -1,70 +0,0 @@
<script lang="ts">
import { base } from '$app/paths';
import { page } from '$app/stores';
import { languages } from '$lib/languages';
import { _, isLoading } from 'svelte-i18n';
let location: string = '';
let title: string;
$: if ($page.route.id) {
location = $page.route.id;
Object.keys($page.params).forEach((param) => {
if (param !== 'language') {
location = location.replace(`[${param}]`, $page.params[param]);
location = location.replace(`[...${param}]`, $page.params[param]);
}
});
title = location.replace('/[[language]]', '').split('/')[1] ?? 'home';
}
</script>
<svelte:head>
{#if $isLoading}
<title>gpx.studio — the online GPX file editor</title>
<meta
name="description"
content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
/>
<meta property="og:title" content="gpx.studio — the online GPX file editor" />
<meta
property="og:description"
content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
/>
<meta name="twitter:title" content="gpx.studio — the online GPX file editor" />
<meta
name="twitter:description"
content="View, edit and create GPX files online with advanced route planning capabilities and file processing tools, beautiful maps and detailed data visualizations."
/>
{:else}
<title>gpx.studio — {$_(`metadata.${title}_title`)}</title>
<meta name="description" content={$_('metadata.description')} />
<meta property="og:title" content="gpx.studio — {$_(`metadata.${title}_title`)}" />
<meta property="og:description" content={$_('metadata.description')} />
<meta name="twitter:title" content="gpx.studio — {$_(`metadata.${title}_title`)}" />
<meta name="twitter:description" content={$_('metadata.description')} />
{/if}
<meta property="og:image" content="https://gpx.studio/og_logo.png" />
<meta property="og:url" content="https://gpx.studio/" />
<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:image" content="https://gpx.studio/og_logo.png" />
<meta name="twitter:url" content="https://gpx.studio/" />
<meta name="twitter:site" content="@gpxstudio" />
<meta name="twitter:creator" content="@gpxstudio" />
<link
rel="alternate"
hreflang="x-default"
href="https://gpx.studio{base}{location.replace('/[[language]]', '')}"
/>
{#each Object.keys(languages) as lang}
<link
rel="alternate"
hreflang={lang}
href="https://gpx.studio{base}{location.replace('[[language]]', lang)}"
/>
{/each}
</svelte:head>

13
website/src/lib/components/LanguageSelect.svelte
View File

@@ -1,4 +1,5 @@
<script lang="ts"> <script lang="ts">
import { page } from '$app/stores';
import * as Select from '$lib/components/ui/select'; import * as Select from '$lib/components/ui/select';
import { languages } from '$lib/languages'; import { languages } from '$lib/languages';
import { getURLForLanguage } from '$lib/utils'; import { getURLForLanguage } from '$lib/utils';
@@ -34,9 +35,11 @@
<!-- hidden links for svelte crawling --> <!-- hidden links for svelte crawling -->
<div class="hidden"> <div class="hidden">
{#each Object.entries(languages) as [lang, label]} {#if $page.url.pathname !== '/404'}
<a href={getURLForLanguage(lang)}> {#each Object.entries(languages) as [lang, label]}
{label} <a href={getURLForLanguage(lang, $page.url.pathname)}>
</a> {label}
{/each} </a>
{/each}
{/if}
</div> </div>

27
website/src/routes/+layout.svelte
View File

@@ -1,29 +1,48 @@
<script lang="ts"> <script lang="ts">
import '../app.pcss'; import '../app.pcss';
import { ModeWatcher } from 'mode-watcher'; import { ModeWatcher } from 'mode-watcher';
import { isLoading, _ } from 'svelte-i18n'; import { isLoading, _, locale } from 'svelte-i18n';
import { page } from '$app/stores'; import { page } from '$app/stores';
import Head from '$lib/components/Head.svelte';
import Nav from '$lib/components/Nav.svelte'; import Nav from '$lib/components/Nav.svelte';
import Footer from '$lib/components/Footer.svelte'; import Footer from '$lib/components/Footer.svelte';
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { convertOldEmbeddingOptions } from '$lib/components/embedding/Embedding'; import { convertOldEmbeddingOptions } from '$lib/components/embedding/Embedding';
import { base } from '$app/paths'; import { base } from '$app/paths';
import { languages } from '$lib/languages';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
const appRoutes = ['/[[language]]/app', '/[[language]]/embed']; const appRoutes = ['/[[language]]/app', '/[[language]]/embed'];
onMount(() => { onMount(() => {
if ($page.url.searchParams.has('embed')) { if ($page.url.searchParams.has('embed')) {
// convert old embedding options to new format and redirect to new embed page // convert old embedding options to new format and redirect to new embed page
let locale = $page.params.language; let locale = $page.url.pathname.split('/')[1] ?? 'en';
window.location.href = `${base}${locale ? '/' + locale : ''}/embed?options=${encodeURIComponent(JSON.stringify(convertOldEmbeddingOptions($page.url.searchParams)))}`; window.location.href = `${base}${locale ? '/' + locale : ''}/embed?options=${encodeURIComponent(JSON.stringify(convertOldEmbeddingOptions($page.url.searchParams)))}`;
} }
}); });
$: if ($page.params.language) {
if ($page.params.language === '' && $locale !== 'en') {
locale.set('en');
} else if ($page.params.language) {
let lang = $page.params.language.replace('/', '');
if ($locale !== lang) {
if (languages.hasOwnProperty(lang)) {
locale.set(lang);
} else if (browser) {
goto(`${base}/404`);
}
}
}
}
$: if (browser && !$isLoading && $_) {
document.title = `gpx.studio — ${$_(`metadata.${$page.route.id?.replace('/[[language]]', '').split('/')[1] ?? 'home'}_title`)}`;
}
$: showNavAndFooter = $page.route.id === null || !appRoutes.includes($page.route.id); $: showNavAndFooter = $page.route.id === null || !appRoutes.includes($page.route.id);
</script> </script>
<Head />
<ModeWatcher /> <ModeWatcher />
<div class="flex flex-col min-h-screen"> <div class="flex flex-col min-h-screen">

23
website/src/routes/[[language]]/+layout.svelte
View File

@@ -1,23 +0,0 @@
<script lang="ts">
import { locale, _ } from 'svelte-i18n';
import { page } from '$app/stores';
import { languages } from '$lib/languages';
import { browser } from '$app/environment';
import { goto } from '$app/navigation';
import { base } from '$app/paths';
$: if ($page.params.language === '' && $locale !== 'en') {
locale.set('en');
} else if ($page.params.language) {
let lang = $page.params.language.replace('/', '');
if ($locale !== lang) {
if (languages.hasOwnProperty(lang)) {
locale.set(lang);
} else if (browser) {
goto(`${base}/404`);
}
}
}
</script>
<slot />

14
website/src/routes/l/[[language]]/+page.svelte
View File

@@ -1,14 +0,0 @@
<script lang="ts">
import { languages } from '$lib/languages';
</script>
<!-- hidden links for svelte crawling -->
<div>
{#each Object.entries(languages) as [lang, label]}
{#if lang !== 'en'}
<a href="./{lang}">
{label}
</a>
{/if}
{/each}
</div>

2
website/svelte.config.js
View File

@@ -23,7 +23,7 @@ const config = {
relative: false, relative: false,
}, },
prerender: { prerender: {
entries: ['/', '/404', '/l/fr/'], entries: ['/', '/404'],
crawl: true, crawl: true,
} }
} }