Add hreflang alternates

src/components/HeadSEO.astro

@@ -1,7 +1,10 @@
 ---
 import type { CollectionEntry } from 'astro:content';
-import { SITE, OPEN_GRAPH } from '../consts';
-import type { CurrentCollectionEntry } from '../current';
+import { SITE, OPEN_GRAPH, LANGUAGES } from '../consts';
+import type { CurrentCollectionEntry } from '../current'; 
+import { changeUrlLanguage } from '../languages';
+import fs from 'fs';
+import path from 'path';
 
 import  i18next from "i18next";
 
@@ -20,11 +23,39 @@ const translatedSiteName = i18next.t('siteTitleName',SITE.title);
 const imageSrc = image?.src ?? OPEN_GRAPH.image.src;
 const canonicalImageSrc = new URL(imageSrc, Astro.site);
 const imageAlt = image?.alt ?? OPEN_GRAPH.image.alt;
+
+
+// for all languages add <link rel="alternate" hreflang="lang_code" href="url_of_page" />
+const alternateLinks = LANGUAGES.map((lang) => {
+	const alternateUrl = new URL(changeUrlLanguage(canonicalUrl.pathname, lang.folderCode), SITE.address);
+	return `<link rel="alternate" hreflang="${lang.langCode}" href="${alternateUrl}">`;
+});
+
+
+// const filePath = `src/content/${Astro.props.collection}/${Astro.props.id}.json`;
+// // get directory name of filePath
+// const dirName = filePath.substring(0, filePath.lastIndexOf('/'));
+// // get basename for filePath without extension
+// const baseName = filePath.substring(filePath.lastIndexOf('/') + 1, filePath.lastIndexOf('.'));
+
+// const jsonFile = `${dirName}/_json_ld_${baseName}.json`;
+
+// // if the file exists then read it as a string from the filesystem
+// const jsonText = fs.readFileSync(jsonFile, 'utf8');
+
 ---
 
 <!-- Page Metadata -->
 <link rel="canonical" href={canonicalUrl} />
 
+<!-- Alternate Links -->
+{
+LANGUAGES.map((lang) => {
+	const alternateUrl = new URL(changeUrlLanguage(canonicalUrl.pathname, lang.folderCode), SITE.address);
+	return <link rel="alternate" hreflang={lang.langCode} href={alternateUrl}>;
+})
+}
+
 <link rel="sitemap" href="/sitemap-index.xml">
 
 <!-- OpenGraph Tags -->
@@ -37,6 +68,7 @@ const imageAlt = image?.alt ?? OPEN_GRAPH.image.alt;
 <meta name="description" property="og:description" content={description ?? SITE.description} />
 <meta property="og:site_name" content={translatedSiteName} />
 
+
 <!-- Twitter Tags -->
 <!-- <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:site" content={OPEN_GRAPH.twitter} />
@@ -51,3 +83,5 @@ const imageAlt = image?.alt ?? OPEN_GRAPH.image.alt;
   https://www.npmjs.com/package/schema-dts seems like a great resource for implementing this.
   Even better, there's a React component that integrates with `schema-dts`: https://github.com/google/react-schemaorg
 -->
+
+

src/languages.ts

@@ -8,3 +8,7 @@ export function getLanguageFromURL(pathname: string) {
 	const langCode = langCodeMatch ? langCodeMatch[1] : 'en';
 	return langCode as (typeof KNOWN_LANGUAGE_CODES)[number];
 }
+
+export function changeUrlLanguage(url: string, langCode: string) {
+	return url.replace(langPathRegex, `/${langCode}/`);
+}