Skip to content

Commit 09fd283

Browse files
batersonbaterson
authored
Merge pull request #4 from baterson/nternationalization_seo
Added JSON-LD structured and improved internationalization SEO
2 parents 6b47ae4 + 059c716 commit 09fd283

File tree

9 files changed

+305
-48
lines changed

9 files changed

+305
-48
lines changed

‎robots.txt

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
User-agent: *
2-
Disallow:
2+
Disallow:
3+
4+
Sitemap: https://pathfinding-visualizer.ivan-sem.com/sitemap.xml

‎sitemap.xml

+64
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
3+
xmlns:xhtml="http://www.w3.org/1999/xhtml">
4+
5+
<url>
6+
7+
<loc>https://pathfinding-visualizer.ivan-sem.com/</loc>
8+
<changefreq>weekly</changefreq>
9+
<priority>1.0</priority>
10+
<xhtml:link rel="alternate" hreflang="en" href="https://pathfinding-visualizer.ivan-sem.com/" />
11+
<xhtml:link rel="alternate" hreflang="ru" href="https://pathfinding-visualizer.ivan-sem.com/ru" />
12+
<xhtml:link rel="alternate" hreflang="de" href="https://pathfinding-visualizer.ivan-sem.com/de" />
13+
<xhtml:link rel="alternate" hreflang="es" href="https://pathfinding-visualizer.ivan-sem.com/es" />
14+
<xhtml:link rel="alternate" hreflang="zh" href="https://pathfinding-visualizer.ivan-sem.com/zh" />
15+
</url>
16+
17+
18+
<url>
19+
<loc>https://pathfinding-visualizer.ivan-sem.com/ru</loc>
20+
<changefreq>weekly</changefreq>
21+
<priority>0.9</priority>
22+
<xhtml:link rel="alternate" hreflang="en" href="https://pathfinding-visualizer.ivan-sem.com/" />
23+
<xhtml:link rel="alternate" hreflang="ru" href="https://pathfinding-visualizer.ivan-sem.com/ru" />
24+
<xhtml:link rel="alternate" hreflang="de" href="https://pathfinding-visualizer.ivan-sem.com/de" />
25+
<xhtml:link rel="alternate" hreflang="es" href="https://pathfinding-visualizer.ivan-sem.com/es" />
26+
<xhtml:link rel="alternate" hreflang="zh" href="https://pathfinding-visualizer.ivan-sem.com/zh" />
27+
</url>
28+
29+
30+
<url>
31+
<loc>https://pathfinding-visualizer.ivan-sem.com/de</loc>
32+
<changefreq>weekly</changefreq>
33+
<priority>0.9</priority>
34+
<xhtml:link rel="alternate" hreflang="en" href="https://pathfinding-visualizer.ivan-sem.com/" />
35+
<xhtml:link rel="alternate" hreflang="ru" href="https://pathfinding-visualizer.ivan-sem.com/ru" />
36+
<xhtml:link rel="alternate" hreflang="de" href="https://pathfinding-visualizer.ivan-sem.com/de" />
37+
<xhtml:link rel="alternate" hreflang="es" href="https://pathfinding-visualizer.ivan-sem.com/es" />
38+
<xhtml:link rel="alternate" hreflang="zh" href="https://pathfinding-visualizer.ivan-sem.com/zh" />
39+
</url>
40+
41+
42+
<url>
43+
<loc>https://pathfinding-visualizer.ivan-sem.com/es</loc>
44+
<changefreq>weekly</changefreq>
45+
<priority>0.9</priority>
46+
<xhtml:link rel="alternate" hreflang="en" href="https://pathfinding-visualizer.ivan-sem.com/" />
47+
<xhtml:link rel="alternate" hreflang="ru" href="https://pathfinding-visualizer.ivan-sem.com/ru" />
48+
<xhtml:link rel="alternate" hreflang="de" href="https://pathfinding-visualizer.ivan-sem.com/de" />
49+
<xhtml:link rel="alternate" hreflang="es" href="https://pathfinding-visualizer.ivan-sem.com/es" />
50+
<xhtml:link rel="alternate" hreflang="zh" href="https://pathfinding-visualizer.ivan-sem.com/zh" />
51+
</url>
52+
53+
54+
<url>
55+
<loc>https://pathfinding-visualizer.ivan-sem.com/zh</loc>
56+
<changefreq>weekly</changefreq>
57+
<priority>0.9</priority>
58+
<xhtml:link rel="alternate" hreflang="en" href="https://pathfinding-visualizer.ivan-sem.com/" />
59+
<xhtml:link rel="alternate" hreflang="ru" href="https://pathfinding-visualizer.ivan-sem.com/ru" />
60+
<xhtml:link rel="alternate" hreflang="de" href="https://pathfinding-visualizer.ivan-sem.com/de" />
61+
<xhtml:link rel="alternate" hreflang="es" href="https://pathfinding-visualizer.ivan-sem.com/es" />
62+
<xhtml:link rel="alternate" hreflang="zh" href="https://pathfinding-visualizer.ivan-sem.com/zh" />
63+
</url>
64+
</urlset>

‎src/lib/Components/Head.svelte

+69-29
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,78 @@
1+
<script lang="ts">
2+
export let data;
3+
const meta = data.meta;
4+
5+
//Fallback meta data
6+
const defaultMeta = {
7+
description: 'Interactive visualization of pathfinding algorithms.',
8+
imageAlt: 'Pathfinding visualizer image',
9+
imageUrl: 'https://pathfinding-visualizer.ivan-sem.com/algo-screen.png',
10+
locale: 'en_US',
11+
url: 'https://pathfinding-visualizer.ivan-sem.com/'
12+
};
13+
14+
const finalMeta = { ...defaultMeta, ...meta };
15+
</script>
16+
117
<svelte:head>
18+
<link rel="canonical" href={finalMeta.url} />
19+
20+
<link rel="alternate" hreflang="en" href="https://pathfinding-visualizer.ivan-sem.com/" />
21+
<link rel="alternate" hreflang="ru" href="https://pathfinding-visualizer.ivan-sem.com/ru" />
22+
<link rel="alternate" hreflang="de" href="https://pathfinding-visualizer.ivan-sem.com/de" />
23+
<link rel="alternate" hreflang="es" href="https://pathfinding-visualizer.ivan-sem.com/es" />
24+
<link rel="alternate" hreflang="zh" href="https://pathfinding-visualizer.ivan-sem.com/zh" />
25+
26+
<!-- General Meta Tags -->
227
<meta name="author" content="Ivan Semochkin" />
3-
<meta
4-
name="description"
5-
content="Visual explanation and practical application of Dijkstra, A*, BFS, and DFS pathfinding algorithms through an interactive visualization built with Svelte and TypeScript."
6-
/>
7-
8-
<meta property="og:image" content="https://ivan-sem.com/pathfinding_visualizer/algo-vis.jpg" />
9-
<meta
10-
property="og:image:secure_url"
11-
content="https://ivan-sem.com/pathfinding_visualizer/algo-vis.jpg"
12-
/>
28+
<meta name="description" content={finalMeta.description} />
29+
<meta name="theme-color" content="#22192B" />
30+
31+
<script type="application/ld+json">
32+
{@html JSON.stringify({
33+
"@context": "http://schema.org",
34+
"@type": "WebApplication",
35+
"name": data.title,
36+
"alternateName": [
37+
"路径查找算法可视化工具",
38+
"Wegfindung-Algorithmen-Visualizer",
39+
"Visualizador de Algoritmos de Búsqueda de Rutas",
40+
"Визуализатор Алгоритмов Поиска Пути"
41+
],
42+
"url": finalMeta.url,
43+
"description": finalMeta.description,
44+
"applicationCategory": "EducationalApplication",
45+
"operatingSystem": "All",
46+
"inLanguage": ["en", "ru", "zh", "es", "de"],
47+
"author": {
48+
"@type": "Person",
49+
"name": "Ivan Semochkin"
50+
},
51+
"image": finalMeta.imageUrl
52+
})}
53+
</script>
54+
55+
<!-- Open Graph Meta Tags -->
56+
<meta property="og:image" content={finalMeta.imageUrl} />
57+
<meta property="og:image:secure_url" content={finalMeta.imageUrl} />
1358
<meta property="og:image:width" content="1200" />
1459
<meta property="og:image:height" content="630" />
15-
<meta
16-
property="og:image:alt"
17-
content="Pathfinding Algorithms Visualizer build with Svelte and TypeScript."
18-
/>
60+
<meta property="og:image:alt" content={finalMeta.imageAlt} />
1961
<meta property="og:title" content="Pathfinding Algorithms Visualizer" />
2062
<meta property="og:type" content="website" />
21-
<meta property="og:url" content="https://ivan-sem.com/pathfinding_visualizer" />
22-
<meta
23-
property="og:description"
24-
content="Visual explanation and practical application of Dijkstra, A*, BFS, and DFS pathfinding algorithms through an interactive visualization built with Svelte and TypeScript."
25-
/>
26-
<meta property="og:locale" content="en_US" />
63+
<meta property="og:url" content={finalMeta.url} />
64+
<meta property="og:description" content={finalMeta.description} />
65+
<meta property="og:locale" content={finalMeta.locale} />
66+
<meta property="og:locale:alternate" content="ru_RU" />
67+
<meta property="og:locale:alternate" content="zh_CN" />
68+
<meta property="og:locale:alternate" content="es_ES" />
69+
<meta property="og:locale:alternate" content="de_DE" />
70+
2771
<!-- Twitter Meta Tags -->
72+
<meta name="twitter:card" content="summary_large_image" />
2873
<meta property="twitter:domain" content="ivan-sem.com" />
29-
<meta property="twitter:url" content="https://ivan-sem.com/pathfinding_visualizer" />
30-
<meta name="twitter:title" content="Pathfinding Visualizer" />
31-
<meta
32-
name="twitter:description"
33-
content="Pathfinding Algorithms Visualizer build with Svelte and TypeScript."
34-
/>
35-
<meta name="twitter:image" content="https://ivan-sem.com/pathfinding_visualizer/algo-vis.jpg" />
36-
37-
<meta name="theme-color" content="#22192B" />
74+
<meta property="twitter:url" content={finalMeta.url} />
75+
<meta name="twitter:title" content={data.title} />
76+
<meta name="twitter:description" content={finalMeta.description} />
77+
<meta name="twitter:image" content={finalMeta.imageUrl} />
3878
</svelte:head>

‎src/lib/Components/HelpModal.svelte

+41-15
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,65 @@
11
<script lang="ts">
2+
import { goto } from '$app/navigation';
3+
export let data;
24
export let toggleModal: () => void;
5+
6+
const changeLanguage = (lang: string) => {
7+
goto(`/${lang}`);
8+
};
9+
const languages = ['en', 'de', 'ru', 'es', 'zh'];
310
</script>
411

512
<div class="wrapper" on:pointerdown={toggleModal}>
613
<article class="content">
714
<header>
8-
<h1>PATHFINDING VISUALIZER</h1>
15+
<h1>{data.title}</h1>
916
</header>
10-
11-
<p>Pick an algorithm.</p>
17+
<div class="buttons-language" on:pointerdown|stopPropagation>
18+
{#each languages as lang}
19+
<button on:click={() => changeLanguage(lang)}>{lang.toLocaleUpperCase()}</button>
20+
{/each}
21+
</div>
22+
<p>{data.pickAlgorithm}</p>
1223
<p>
13-
Select <span style="color: var(--bg-start)">Start</span> or
14-
<span style="color: var(--bg-end)">End</span> to change the direction of the algorithm.
24+
{@html data.selectStartOrEnd
25+
.replace('Start', `<span style="color: var(--bg-start)">Start</span>`)
26+
.replace('End', `<span style="color: var(--bg-end)">End</span>`)}
1527
</p>
1628
<p>
17-
Use the Player to control the execution of the algorithm and navigate through the history.
29+
{data.usePlayer}
1830
</p>
1931
<p>
20-
Select <span style="color: var(--bg-wall)">Walls</span> or
21-
<span style="color: var(--bg-weight-2)">Weights</span> from the menu and draw them on the grid.
32+
{@html data.selectWallsWeights
33+
.replace('Walls', `<span style="color: var(--bg-wall)">Walls</span>`)
34+
.replace('Weights', `<span style="color: var(--bg-weight-2)">Weights</span>`)}
2235
</p>
2336
<section class="description">
24-
<h2>Algorithm Details</h2>
37+
<h2>{data.detailsTitle}</h2>
2538
<p>
26-
Only the Dijkstra and A-star algorithms work with weighted nodes; other algorithms treat
27-
them as regular nodes.
39+
{data.details1}
2840
</p>
29-
<p>Visited nodes can't be modified.</p>
41+
<p>{data.details2}</p>
3042
</section>
3143
</article>
3244
</div>
3345

3446
<style>
47+
.buttons-language {
48+
display: flex;
49+
justify-content: end;
50+
}
51+
button {
52+
background-color: var(--bg-body);
53+
color: var(--main-white);
54+
outline: none;
55+
border: none;
56+
font-size: 18px;
57+
border-right: var(--main-white) 1px solid;
58+
}
59+
button:hover {
60+
background-color: var(--main-white);
61+
color: var(--bg-body);
62+
}
3563
.wrapper {
3664
z-index: 3;
3765
background: hsla(270, 32%, 9%, 0.8);
@@ -52,9 +80,7 @@
5280
.content {
5381
font-size: 18px;
5482
padding: 32px 4px 26px 12px;
55-
5683
width: 100%;
57-
5884
display: flex;
5985
flex-direction: column;
6086
gap: 18px;
@@ -82,7 +108,7 @@
82108
font-size: 1.4rem;
83109
padding: 40px;
84110
85-
width: 70%;
111+
width: 78%;
86112
87113
display: flex;
88114
flex-direction: column;

‎src/lib/translation/i18n.ts

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
export const locale = {
2+
en: {
3+
title: 'PATHFINDING VISUALIZER',
4+
pickAlgorithm: 'Pick an algorithm.',
5+
selectStartOrEnd: 'Select Start or End to change the direction of the algorithm.',
6+
usePlayer:
7+
'Use the Player to control the execution of the algorithm and navigate through the history.',
8+
selectWallsWeights: 'Select Walls or Weights from the menu and draw them on the grid.',
9+
detailsTitle: 'Algorithm Details',
10+
details1:
11+
'Only the Dijkstra and A-star algorithms work with weighted nodes; other algorithms treat them as regular nodes.',
12+
details2: "Visited nodes can't be modified.",
13+
meta: {
14+
description:
15+
'Interactive visualization of Dijkstra, A*, BFS, and DFS pathfinding algorithms built with Svelte and TypeScript.',
16+
imageAlt: 'Interactive pathfinding visualizer built with Svelte and TypeScript.',
17+
imageUrl: 'https://pathfinding-visualizer.ivan-sem.com/algo-screen.png',
18+
locale: 'en_US',
19+
url: 'https://pathfinding-visualizer.ivan-sem.com/'
20+
}
21+
},
22+
de: {
23+
title: 'PFADFINDUNGS VISUALIZER',
24+
pickAlgorithm: 'Wählen Sie einen Algorithmus aus.',
25+
selectStartOrEnd: 'Wählen Sie Start oder End, um die Richtung des Algorithmus zu ändern.',
26+
usePlayer:
27+
'Verwenden Sie den Spieler, um die Ausführung des Algorithmus zu steuern und durch die Geschichte zu navigieren.',
28+
selectWallsWeights:
29+
'Wählen Sie Walls oder Weights aus dem Menü und zeichnen Sie sie auf das Raster.',
30+
detailsTitle: 'Algorithmus-Details',
31+
details1:
32+
'Nur die Dijkstra- und A*-Algorithmen funktionieren mit gewichteten Knoten; andere Algorithmen behandeln sie als reguläre Knoten.',
33+
details2: 'Besuchte Knoten können nicht geändert werden.',
34+
meta: {
35+
description:
36+
'Interaktive Visualisierung der Dijkstra-, A*- und anderer Algorithmen, erstellt mit Svelte und TypeScript.',
37+
imageAlt: 'Interaktiver Pfadfindungsvisualisierer mit Svelte und TypeScript.',
38+
imageUrl: 'https://pathfinding-visualizer.ivan-sem.com/algo-screen.png',
39+
locale: 'de_DE',
40+
url: 'https://pathfinding-visualizer.ivan-sem.com/de'
41+
}
42+
},
43+
ru: {
44+
title: 'ВИЗУАЛИЗАТОР ПОИСКА ПУТИ',
45+
pickAlgorithm: 'Выберите алгоритм.',
46+
selectStartOrEnd: 'Выберите Start или End, чтобы изменить направление алгоритма.',
47+
usePlayer: 'Используйте Player для управления выполнением алгоритма и навигации по истории.',
48+
selectWallsWeights: 'Выберите Walls или Weights в меню и нарисуйте их на сетке.',
49+
detailsTitle: 'Детали алгоритма',
50+
details1:
51+
'Только алгоритмы Дейкстры и A* работают с взвешенными узлами; другие алгоритмы рассматривают их как обычные узлы.',
52+
details2: 'Посещённые узлы нельзя изменять.',
53+
meta: {
54+
description:
55+
'Интерактивная визуализация алгоритмов Дейкстры, A*, BFS и DFS, созданная с помощью Svelte и TypeScript.',
56+
imageAlt: 'Интерактивный визуализатор поиска пути, созданный с помощью Svelte и TypeScript.',
57+
imageUrl: 'https://pathfinding-visualizer.ivan-sem.com/algo-screen.png',
58+
locale: 'ru_RU',
59+
url: 'https://pathfinding-visualizer.ivan-sem.com/ru'
60+
}
61+
},
62+
es: {
63+
title: 'VISUALIZADOR DE RUTAS',
64+
pickAlgorithm: 'Elija un algoritmo.',
65+
selectStartOrEnd: 'Seleccione Start o End para cambiar la dirección del algoritmo.',
66+
usePlayer:
67+
'Use el Player para controlar la ejecución del algoritmo y navegar por el historial.',
68+
selectWallsWeights: 'Seleccione Walls o Weights en el menú y dibújelos en la cuadrícula.',
69+
detailsTitle: 'Detalles del algoritmo',
70+
details1:
71+
'Solo los algoritmos de Dijkstra y A* funcionan con nodos ponderados; otros algoritmos los tratan como nodos normales.',
72+
details2: 'Los nodos visitados no se pueden modificar.',
73+
meta: {
74+
description:
75+
'Visualización interactiva de los algoritmos de Dijkstra, A*, BFS y DFS, creada con Svelte y TypeScript.',
76+
imageAlt: 'Visualizador interactivo de algoritmos de rutas creado con Svelte y TypeScript.',
77+
imageUrl: 'https://pathfinding-visualizer.ivan-sem.com/algo-screen.png',
78+
locale: 'es_ES',
79+
url: 'https://pathfinding-visualizer.ivan-sem.com/es'
80+
}
81+
},
82+
zh: {
83+
title: '路径寻找可视化器',
84+
pickAlgorithm: '选择一个算法。',
85+
selectStartOrEnd: '选择 Start 或 End 来更改算法的方向。',
86+
usePlayer: '使用 Player 控制算法的执行并浏览历史记录。',
87+
selectWallsWeights: '从菜单中选择 Walls 或 Weights 并在网格上绘制它们。',
88+
detailsTitle: '算法详情',
89+
details1: '只有 Dijkstra 和 A* 算法支持加权节点；其他算法将它们视为普通节点。',
90+
details2: '访问过的节点无法修改。',
91+
meta: {
92+
description: '使用 Svelte 和 TypeScript 构建的 Dijkstra、A*、BFS 和 DFS 算法的交互式可视化。',
93+
imageAlt: '使用 Svelte 和 TypeScript 构建的交互式路径查找算法可视化工具。',
94+
imageUrl: 'https://pathfinding-visualizer.ivan-sem.com/algo-screen.png',
95+
locale: 'zh_CN',
96+
url: 'https://pathfinding-visualizer.ivan-sem.com/zh'
97+
}
98+
}
99+
};

‎src/routes/+layout.svelte

-2
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
<script lang="ts">
22
import { dev } from '$app/environment';
3-
import Head from '$lib/Components/Head.svelte';
43
import '../app.css';
54
import { theme } from '$lib/stores/theme';
65
import { inject } from '@vercel/analytics';
76
87
inject({ mode: dev ? 'development' : 'production' });
98
</script>
109

11-
<Head />
1210
<div class:light={$theme === 'light'}>
1311
<slot />
1412
</div>

0 commit comments

Comments
 (0)