mirror of
https://github.com/gpxstudio/gpx.studio.git
synced 2025-08-31 15:43:25 +00:00
inject static meta tags for each language
This commit is contained in:
vcoppe
43
website/src/hooks.server.js
Normal file
43
website/src/hooks.server.js
Normal 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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import * as Select from '$lib/components/ui/select';
|
||||
import { languages } from '$lib/languages';
|
||||
import { getURLForLanguage } from '$lib/utils';
|
||||
@@ -34,9 +35,11 @@
|
||||
|
||||
<!-- hidden links for svelte crawling -->
|
||||
<div class="hidden">
|
||||
{#each Object.entries(languages) as [lang, label]}
|
||||
<a href={getURLForLanguage(lang)}>
|
||||
{label}
|
||||
</a>
|
||||
{/each}
|
||||
{#if $page.url.pathname !== '/404'}
|
||||
{#each Object.entries(languages) as [lang, label]}
|
||||
<a href={getURLForLanguage(lang, $page.url.pathname)}>
|
||||
{label}
|
||||
</a>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
@@ -1,29 +1,48 @@
|
||||
<script lang="ts">
|
||||
import '../app.pcss';
|
||||
import { ModeWatcher } from 'mode-watcher';
|
||||
import { isLoading, _ } from 'svelte-i18n';
|
||||
import { isLoading, _, locale } from 'svelte-i18n';
|
||||
import { page } from '$app/stores';
|
||||
import Head from '$lib/components/Head.svelte';
|
||||
import Nav from '$lib/components/Nav.svelte';
|
||||
import Footer from '$lib/components/Footer.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
import { convertOldEmbeddingOptions } from '$lib/components/embedding/Embedding';
|
||||
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'];
|
||||
|
||||
onMount(() => {
|
||||
if ($page.url.searchParams.has('embed')) {
|
||||
// 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)))}`;
|
||||
}
|
||||
});
|
||||
|
||||
$: 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);
|
||||
</script>
|
||||
|
||||
<Head />
|
||||
<ModeWatcher />
|
||||
|
||||
<div class="flex flex-col min-h-screen">
|
||||
|
||||
@@ -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 />
|
||||
@@ -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>
|
||||
@@ -23,7 +23,7 @@ const config = {
|
||||
relative: false,
|
||||
},
|
||||
prerender: {
|
||||
entries: ['/', '/404', '/l/fr/'],
|
||||
entries: ['/', '/404'],
|
||||
crawl: true,
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user