Adding more translations but will have a hard time with server rendered meta tags.

languages/en.json

@@ -3,6 +3,24 @@
 	"home_title": "Hello! I'm Bradley Shellnut.",
 	"home_about": "I'm a full stack software engineer currently working on Java Spring, PostgreSQL, and React / Angular JS.",
 	"home_learning": "At home you can usually find me learning new things and working with SvelteKit, Next.js, and Gatsby.",
+	"home_other_about_me": "Or you may find me jamming out to music 🎶, hiking ⛰️, making ",
+	"cocktails": "cocktails",
+	"home_fun_with_cats": " 🍸, or having fun with my cats. 🐈",
+	"home_check_me_out": "Check me out on",
+	"contact_through": "Contact through",
+	"read_more": "or read more",
+	"about_me": "about me",
+	"music_currently_listening": "Currently listening to",
+	"music_link_to": "Link to",
+	"music_by": "by",
+	"music_album_art_alt": "Album art for",
+	"articles_favorite_articles": "Favorite Articles",
+	"articles_favorite_tech_articles": "Favorite Tech Articles",
+	"articles_reading_time": "Reading time",
+	"articles_minute": "minute",
+	"articles_minutes": "minutes",
+	"articles_tags": "Tags",
+	"articles_more_articles": "more articles",
 	"nav_home": "Home",
 	"nav_about": "About",
 	"nav_about_link": "about",

languages/es.json

@@ -3,6 +3,24 @@
 	"home_title": "!Hola! Me llamo Bradley Shellnut.",
 	"home_about": "Soy un ingeniero de software de pila completa que actualmente trabaja en Java Spring, PostgreSQL y React / Angular JS.",
 	"home_learning": "En casa por lo general me puedes encontrar aprendiendo cosas nuevas y trabajando con SvelteKit, Next.js, y Gatsby.",
+	"home_other_about_me": "O puede que me encuentres improvisando música 🎶, haciendo senderismo ⛰️, haciendo ",
+	"cocktails": "cócteles",
+	"home_fun_with_cats": "🍸, o divertirme con mis gatos. 🐈",
+	"home_check_me_out": "Visítame en LinkedIn , Github , o lee más sobre mí",
+	"contact_through": "Contacto a través de",
+	"read_more": "o leer más",
+	"about_me": "sobre mí",
+	"music_currently_listening": "Actualmente escuchando",
+	"music_link_to": "Enlace",
+	"music_by": "por",
+	"music_album_art_alt": "Carátula del álbum de",
+	"articles_favorite_articles": "Artículos favoritos",
+	"articles_favorite_tech_articles": "Artículos tecnológicos favoritos",
+	"articles_reading_time": "Tiempo de lectura",
+	"articles_minute": "minuto",
+	"articles_minutes": "minutos",
+	"articles_tags": "Etiquetas",
+	"articles_more_articles": "más artículos",
 	"nav_home": "Inicio",
 	"nav_about": "Acerca de",
 	"nav_about_link": "acerca-de",

src/hooks.server.ts

@@ -1,4 +1,4 @@
-import { getTextDirection } from "$lib/i18n"
+import { getTextDirection } from "$root/lib/i18n-routing"
 import { sourceLanguageTag, type AvailableLanguageTag } from "$paraglide/runtime"
 
 /*

src/lib/I18NHeader.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { availableLanguageTags } from "$paraglide/runtime";
+  import { page } from "$app/stores";
+  import { translatePath } from "$lib/i18n-routing";
+</script>
+
+<svelte:head>
+	{#each availableLanguageTags as lang}
+		<link rel="alternate" hreflang={lang} href={translatePath($page.url.pathname, lang)} />
+	{/each}
+</svelte:head>

src/lib/components/Articles.svelte

@@ -1,15 +1,19 @@
 <script lang="ts">
+  import * as m from "$paraglide/messages";
 	import type { Article } from "$lib/types/article";
 	import ExternalLink from './ExternalLink.svelte';
+  import { languageTag } from '$paraglide/runtime';
 
   export let articles: Article[];
 	export let totalArticles: number;
   export let compact: boolean = false;
   export let classes: string[] = [];
+
+  $: lang = languageTag();
 </script>
 
 <div>
-  <h2>Favorite Articles</h2>
+  <h2>{m.articles_favorite_articles()}</h2>
   <div class={classes.join(' ')}>
     {#each articles as article (article.hashed_url)}
       <article class='card'>
@@ -29,9 +33,9 @@
           </h3>
         </section>
         <section>
-          <p>Reading time: {article.reading_time} minutes</p>
+          <p>{m.articles_reading_time()}: {article.reading_time} {article.reading_time === 1 ? m.articles_minute() : m.articles_minutes()}</p>
           <div class="tagsStyles">
-            <p>Tags:</p>
+            <p>{m.articles_tags()}:</p>
             {#each article.tags as tag}
               <p>{tag}</p>
             {/each}
@@ -41,8 +45,10 @@
     {/each}
   </div>
   <div class="moreArticles">
-    <a href="/articles">{`${totalArticles} more articles`}</a>
-    <a href="/articles" aria-label={`${totalArticles} more articles`}>
+    <a href={`${lang}/${m.nav_articles_link()}`}>
+      {`${totalArticles} ${m.articles_more_articles()}`}
+    </a>
+    <a href={`${lang}/${m.nav_articles_link()}`}>
       <iconify-icon icon="material-symbols:arrow-right-alt-rounded"></iconify-icon>
     </a>
   </div>

src/lib/components/bandcamp/index.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
-	import Img from '@zerodevx/svelte-img';
+	import * as m from "$paraglide/messages";
 	import type { Album } from "$lib/types/album";
 	import LazyImage from '../LazyImage.svelte';
 
-
 	export let albums: Album[];
 	const displayAlbums =
 		albums?.length > 6 ? albums.slice(0, 6) : albums;
@@ -27,18 +26,18 @@
 </script>
 
 <div>
-	<h2>Currently listening to:</h2>
+	<h2>{m.music_currently_listening()}:</h2>
 	<div class="albumsStyles">
 		{#each displayAlbums as album}
 			<div class="albumStyles">
 				<figure>
 					<a
-						title={`Link to ${album.title} by ${album.artist}`}
+						title={`${m.music_link_to()} ${album.title} ${m.music_by()} ${album.artist}`}
 						target="_blank"
 						href={album.url}
 						rel="noreferrer"
 					>
-						<LazyImage clazz="album-artwork" src={album.src} alt={`Album art for ${album.title}`} />
+						<LazyImage clazz="album-artwork" src={album.src} alt={`${m.music_album_art_alt()} ${album.title}`} />
 					</a>
 				</figure>
 				<a

src/lib/components/nav/index.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
-	import { translatePath } from '$lib/i18n';
+	import { translatePath } from '$root/lib/i18n-routing';
 	import { availableLanguageTags, languageTag } from '$paraglide/runtime';
 	import * as m from "$paraglide/messages";
 

src/lib/i18n-routing.ts

@@ -22,7 +22,7 @@ export function translatePath(path: string, lang: AvailableLanguageTag) {
  */
 function getPathWithoutLang(path: string) {
 	const [_, maybeLang, ...rest] = path.split("/")
-	if (availableLanguageTags.includes(maybeLang as any)) {
+	if (availableLanguageTags.includes(maybeLang as AvailableLanguageTag)) {
 		return `/${rest.join("/")}`;
 	} else {
 		return path;

src/routes/+layout.svelte

@@ -7,11 +7,12 @@
 	import { PUBLIC_SITE_URL } from '$env/static/public';
 	import "nprogress/nprogress.css";
 	import '$root/styles/styles.pcss';
-	import { setLanguageTag, sourceLanguageTag, type AvailableLanguageTag, availableLanguageTags } from "$paraglide/runtime";
+	import { setLanguageTag, sourceLanguageTag, type AvailableLanguageTag } from "$paraglide/runtime";
 	import Header from '$lib/components/header/index.svelte';
 	import Footer from '$lib/components/footer/index.svelte';
 	import Analytics from '$lib/components/analytics/index.svelte';
-	import { getTextDirection, translatePath } from '$lib/i18n';
+	import { getTextDirection } from '$root/lib/i18n-routing';
+	import I18NHeader from '$root/lib/I18NHeader.svelte';
 
 	NProgress.configure({
 			// Full list: https://github.com/rstacruz/nprogress#configuration
@@ -67,11 +68,7 @@
 
 <MetaTags {...metaTags} />
 
-<svelte:head>
-	{#each availableLanguageTags as lang}
-		<link rel="alternate" hreflang={lang} href={translatePath($page.url.pathname, lang)} />
-	{/each}
-</svelte:head>
+<I18NHeader />
 
 <div class="wrapper">
 	{#key lang}

src/routes/[[lang=lang]]/+page.svelte

@@ -5,6 +5,7 @@
 	import Articles from '$lib/components/Articles.svelte';
 	import type { Album } from '$lib/types/album';
 	import type { Article, ArticlePageLoad } from '$lib/types/article';
+	import { languageTag } from '$paraglide/runtime';
 
 	export let data: PageData;
 	let albums: Album[];
@@ -13,6 +14,7 @@
 	let totalArticles: number;
 	$: ({ albums, articlesData } = data);
 	$: ({ articles, totalArticles } = articlesData);
+	$: lang = languageTag();
 
   const userNames = {
     github: 'BradNut',
@@ -25,44 +27,47 @@
 	<div>
 		<h1>{m.home_title()}</h1>
 	</div>
-		<p>
-			{m.home_about()}
-		</p>
-		<p>
-			{m.home_learning()}
-		</p>
-		<p>
-			Or you may find me jamming out to music 🎶, hiking ⛰️, making{' '}
-			<a
-				target="_blank"
-				href="https://kindredcocktails.com"
-				rel="noreferrer"
-			>
-				cocktails
-			</a>
-			🍸, or having fun with my cats. 🐈
-		</p>
-		<p>
-			Check me out on
-			<a
-				href={`https://www.linkedin.com/in/${userNames.linkedIn}`}
-				target="_blank"
-				aria-label="Contact through LinkedIn"
-				rel="noreferrer"
-			>
-				LinkedIn
-			</a>
-			,
-			<a
-				href={`https://www.github.com/${userNames.github}`}
-				target="_blank"
-				aria-label="Contact through Github"
-				rel="noreferrer"
-			>
-				Github
-			</a>
-			, or read more <a href="/about">about me</a>.
-		</p>
+	<p>
+		{m.home_about()}
+	</p>
+	<p>
+		{m.home_learning()}
+	</p>
+	<p>
+		{m.home_other_about_me()}{' '}
+		<a
+			target="_blank"
+			href="https://kindredcocktails.com"
+			rel="noreferrer"
+		>
+			{m.cocktails()}
+		</a>
+		{m.home_fun_with_cats()}
+	</p>
+	<p>
+		{m.home_check_me_out()}
+		<a
+			href={`https://www.linkedin.com/in/${userNames.linkedIn}`}
+			target="_blank"
+			aria-label={`${m.contact_through()} LinkedIn`}
+			rel="noreferrer"
+		>
+			LinkedIn
+		</a>
+		,
+		<a
+			href={`https://www.github.com/${userNames.github}`}
+			target="_blank"
+			aria-label={`${m.contact_through()} Github`}
+			rel="noreferrer"
+		>
+			Github
+		</a>
+		, {m.read_more()}
+		<a href={`/${lang}/${m.nav_about_link()}`}>
+			{m.about_me()}
+		</a>.
+	</p>
 	<div class="social-info">
 		<Bandcamp {albums} />
 		<Articles {articles} {totalArticles} compact />

src/routes/[[lang=lang]]/articles/[page]/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import Pagination from "$lib/components/pagination/index.svelte";
+	import * as m from "$paraglide/messages";
 	import type { Article } from "$lib/types/article";
 	import Articles from "$lib/components/Articles.svelte";
 	import type { PageData } from "./$types";
@@ -15,7 +16,7 @@
 </script>
 
 <div class="pageStyles">
-	<h1 style="margin-bottom: 2rem">Favorite Tech Articles</h1>
+	<h1 style="margin-bottom: 2rem">{m.articles_favorite_tech_articles()}</h1>
 	<Pagination
 		additionalClasses="top-pagination"
 		pageSize={limit}
@@ -25,33 +26,6 @@
 		base="/articles"
 	/>
 	<Articles {articles} {totalArticles} classes={['columns']} />
-	<!-- <div class="articlesStyles">
-		{#each articles as article (article.hashed_url)}
-			<div class="articleStyles card">
-				<section>
-					<h3>
-						<a
-							target="_blank"
-							aria-label={`Link to ${article.title}`}
-							href={article.url.toString()}
-							rel="noreferrer"
-						>
-							{article.title}
-						</a>
-					</h3>
-				</section>
-				<section>
-					<p>Reading time: {article.reading_time} minutes</p>
-					<div class="tagStyles">
-						<p>Tags:</p>
-						{#each article.tags as tag}
-							<p>{tag}</p>
-						{/each}
-					</div>
-				</section>
-			</div>
-		{/each}
-	</div> -->
 	<Pagination
 		additionalClasses="bottom-pagination"
 		pageSize={limit}