From 8e274ddec45800cd727bb7138683b81cf2f7dcb1 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 15 Feb 2023 11:36:58 +0100
Subject: [PATCH] more alternate/canonical links

---
 .../js/components/common/CanonicalLinks.js    | 40 +++++++++++++++++++
 resources/js/components/pages/Front.js        |  3 ++
 resources/js/components/pages/Map.js          |  2 +
 resources/js/components/pages/Technique.js    | 21 ++++------
 resources/js/components/pages/Techniques.js   |  2 +
 resources/js/components/pages/Tournament.js   |  2 +
 resources/js/components/pages/User.js         |  2 +
 resources/js/helpers/Technique.js             | 12 ++++++
 8 files changed, 70 insertions(+), 14 deletions(-)
 create mode 100644 resources/js/components/common/CanonicalLinks.js

diff --git a/resources/js/components/common/CanonicalLinks.js b/resources/js/components/common/CanonicalLinks.js
new file mode 100644
index 0000000..26e8696
--- /dev/null
+++ b/resources/js/components/common/CanonicalLinks.js
@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+
+const CanonicalLinks = ({ base, lang, langs }) => {
+	const { i18n } = useTranslation();
+
+	const activeLang = lang || i18n.language;
+	const availableLangs = langs || ['de', 'en'];
+
+	return <Helmet>
+		<link
+			href={`https://alttp.localhorst.tv${base}?lng=${activeLang}`}
+			hrefLang={activeLang}
+			rel="canonical"
+		/>
+		<link
+			href={`https://alttp.localhorst.tv${base}`}
+			hrefLang="x-default"
+			rel="alternate"
+		/>
+		{availableLangs.filter(l => l !== activeLang).map(l =>
+			<link
+				key={l}
+				href={`https://alttp.localhorst.tv${base}?lng=${l}`}
+				hrefLang={l}
+				rel="alternate"
+			/>
+		)}
+	</Helmet>;
+};
+
+CanonicalLinks.propTypes = {
+	base: PropTypes.string.isRequired,
+	lang: PropTypes.string,
+	langs: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default CanonicalLinks;
diff --git a/resources/js/components/pages/Front.js b/resources/js/components/pages/Front.js
index 73b9b23..2ca43f2 100644
--- a/resources/js/components/pages/Front.js
+++ b/resources/js/components/pages/Front.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { Button, Col, Container, Image, Row } from 'react-bootstrap';
 import { useNavigate } from 'react-router-dom';
 
+import CanonicalLinks from '../common/CanonicalLinks';
+
 const Front = () => {
 	const navigate = useNavigate();
 
@@ -14,6 +16,7 @@ const Front = () => {
 	}, []);
 
 	return <Container className="mt-5">
+		<CanonicalLinks base="/" />
 		<Row>
 			<Col md={6}>
 				<Button
diff --git a/resources/js/components/pages/Map.js b/resources/js/components/pages/Map.js
index b275602..09e381a 100644
--- a/resources/js/components/pages/Map.js
+++ b/resources/js/components/pages/Map.js
@@ -3,6 +3,7 @@ import { Container } from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 import { useTranslation } from 'react-i18next';
 
+import CanonicalLinks from '../common/CanonicalLinks';
 import Buttons from '../map/Buttons';
 import List from '../map/List';
 import OpenSeadragon from '../map/OpenSeadragon';
@@ -20,6 +21,7 @@ const Map = () => {
 			<title>{t('map.heading')}</title>
 			<meta name="description" content={t('map.description')} />
 		</Helmet>
+		<CanonicalLinks base="/map" />
 		<OpenSeadragon ref={container}>
 			<div className="d-flex align-items-start justify-content-between">
 				<h1>{t('map.heading')}</h1>
diff --git a/resources/js/components/pages/Technique.js b/resources/js/components/pages/Technique.js
index aabb8d0..c4be066 100644
--- a/resources/js/components/pages/Technique.js
+++ b/resources/js/components/pages/Technique.js
@@ -4,12 +4,13 @@ import { Helmet } from 'react-helmet';
 import { withTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
+import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
 import ErrorMessage from '../common/ErrorMessage';
 import Loading from '../common/Loading';
 import NotFound from '../pages/NotFound';
 import Detail from '../techniques/Detail';
-import { getLanguages, getTranslation } from '../../helpers/Technique';
+import { getLanguages, getMatchedLocale, getTranslation } from '../../helpers/Technique';
 import i18n from '../../i18n';
 
 const Technique = () => {
@@ -56,20 +57,12 @@ const Technique = () => {
 		<Helmet>
 			<title>{getTranslation(technique, 'title', i18n.language)}</title>
 			<meta name="description" content={getTranslation(technique, 'short', i18n.language)} />
-			<link
-				href={`https://alttp.localhorst.tv/tech/${technique.name}`}
-				hrefLang="x-default"
-				rel="alternate"
-			/>
-			{getLanguages(technique).map(l =>
-				<link
-					key={l}
-					href={`https://alttp.localhorst.tv/tech/${technique.name}?lng=${l}`}
-					hrefLang={l}
-					rel="alternate"
-				/>
-			)}
 		</Helmet>
+		<CanonicalLinks
+			base={`/tech/${technique.name}`}
+			lang={getMatchedLocale(technique, i18n.language)}
+			langs={getLanguages(technique)}
+		/>
 		<Detail technique={technique} />
 	</ErrorBoundary>;
 };
diff --git a/resources/js/components/pages/Techniques.js b/resources/js/components/pages/Techniques.js
index a89c3a2..ebeb6e5 100644
--- a/resources/js/components/pages/Techniques.js
+++ b/resources/js/components/pages/Techniques.js
@@ -5,6 +5,7 @@ import { Helmet } from 'react-helmet';
 import { withTranslation } from 'react-i18next';
 
 import NotFound from './NotFound';
+import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
 import ErrorMessage from '../common/ErrorMessage';
 import Loading from '../common/Loading';
@@ -83,6 +84,7 @@ const Techniques = ({ namespace, type }) => {
 			<title>{i18n.t(`${namespace}.heading`)}</title>
 			<meta name="description" content={i18n.t(`${namespace}.description`)} />
 		</Helmet>
+		<CanonicalLinks base="/tech" />
 		<Overview
 			filter={filter}
 			namespace={namespace}
diff --git a/resources/js/components/pages/Tournament.js b/resources/js/components/pages/Tournament.js
index 7abd5e4..d148059 100644
--- a/resources/js/components/pages/Tournament.js
+++ b/resources/js/components/pages/Tournament.js
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useParams } from 'react-router-dom';
 
+import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
 import ErrorMessage from '../common/ErrorMessage';
 import Loading from '../common/Loading';
@@ -131,6 +132,7 @@ const Tournament = () => {
 		<Helmet>
 			<title>{tournament.title}</title>
 		</Helmet>
+		<CanonicalLinks base={`/tournaments/${tournament.id}`} />
 		<Detail addRound={addRound} tournament={tournament} />
 	</ErrorBoundary>;
 };
diff --git a/resources/js/components/pages/User.js b/resources/js/components/pages/User.js
index b481112..144e4c0 100644
--- a/resources/js/components/pages/User.js
+++ b/resources/js/components/pages/User.js
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { useParams } from 'react-router-dom';
 
+import CanonicalLinks from '../common/CanonicalLinks';
 import ErrorBoundary from '../common/ErrorBoundary';
 import ErrorMessage from '../common/ErrorMessage';
 import Loading from '../common/Loading';
@@ -67,6 +68,7 @@ const User = () => {
 		<Helmet>
 			<title>{user.nickname || user.username}</title>
 		</Helmet>
+		<CanonicalLinks base={`/users/${user.id}`} />
 		<Profile user={user} />
 	</ErrorBoundary>;
 };
diff --git a/resources/js/helpers/Technique.js b/resources/js/helpers/Technique.js
index c1375bb..b289341 100644
--- a/resources/js/helpers/Technique.js
+++ b/resources/js/helpers/Technique.js
@@ -19,6 +19,18 @@ export const hasRelations = (tech, type) => getRelations(tech, type).length > 0;
 
 export const getLanguages = tech => ['en', ...tech.translations.map(t => t.locale)];
 
+export const getMatchedLocale = (tech, lang) => {
+	const direct = tech.translations.find(t => t.locale === lang);
+	if (direct) {
+		return direct.locale;
+	}
+	const sameLang = tech.translations.find(t => t.locale.substr(0, 2) === lang.substr(0, 2));
+	if (sameLang) {
+		return sameLang.locale;
+	}
+	return 'en';
+};
+
 export const getTranslation = (tech, prop, lang) => {
 	const direct = tech.translations.find(t => t.locale === lang);
 	if (direct) {
-- 
2.39.2