From dafd68fcd289be62c8db6ac7df8e55b9771f92f7 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Fri, 19 Aug 2022 15:52:57 +0300
Subject: [PATCH] feat: added canonical urls

---
 package.json                                  |  2 +-
 src/components/ArticlePost/ArticlePost.astro  |  2 +-
 src/components/BaseHead.astro                 |  9 +++--
 .../ContactsList/ContactsList.astro           | 20 +++++-----
 src/components/Footer/Footer.astro            | 40 +++++++++----------
 src/components/Header/Header.astro            |  2 +-
 .../ProjectsList/ProjectsList.astro           |  6 +--
 src/components/SkillsList/SkillsList.astro    |  4 +-
 src/layouts/article.astro                     |  5 ++-
 src/layouts/default.astro                     |  7 ++--
 src/pages/blog/[...slug].astro                |  3 +-
 src/templates/Articles.astro                  |  3 +-
 src/templates/Home.astro                      |  3 +-
 13 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index e30221c..7ff3e80 100644
--- a/package.json
+++ b/package.json
@@ -15,7 +15,7 @@
 		"start": "astro dev",
 		"build": "astro build",
 		"preview": "astro preview --host",
-		"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json}\"",
+		"format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,astro}\"",
 		"lint": "eslint '**/*.{js,mjs,ts,tsx}'"
 	},
 	"devDependencies": {
diff --git a/src/components/ArticlePost/ArticlePost.astro b/src/components/ArticlePost/ArticlePost.astro
index d5afdda..c942b5d 100644
--- a/src/components/ArticlePost/ArticlePost.astro
+++ b/src/components/ArticlePost/ArticlePost.astro
@@ -39,7 +39,7 @@ const { title, coverImage, tags, author, published_at } = data;
 			coverImage && (
 				<div>
 					<figure>
-						{coverImage && <img src={coverImage} width='700' height='400' alt={title} />}
+						{coverImage && <img src={coverImage} width="700" height="400" alt={title} />}
 						{/* Render remote or local image */}
 						{/* utils.isURL(coverImage) ? (
 							<Image itemprop="image" src={coverImage} width={700} height={400} aspectRatio={"16:9"} format={"webp"} alt={data.title} />
diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index f679274..ce811b1 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -5,10 +5,11 @@ import { useTranslation } from "@i18n/utils";
 export interface Props {
 	title?: string | undefined;
 	description?: string | undefined;
+	canonicalUrl?: string | undefined;
 }
 
 const t = useTranslation(Astro);
-const { title = SITE_METADATA.title, description } = Astro.props as Props;
+const { title = SITE_METADATA.title, description, canonicalUrl } = Astro.props as Props;
 ---
 
 <head>
@@ -16,9 +17,11 @@ const { title = SITE_METADATA.title, description } = Astro.props as Props;
 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 	<link
 		href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono&display=swap"
-		rel="preload" as="style" onload="this.rel='stylesheet'"
+		rel="preload"
+		as="style"
+		onload="this.rel='stylesheet'"
 	/>
-
+	{canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<title>{title}</title>
diff --git a/src/components/ContactsList/ContactsList.astro b/src/components/ContactsList/ContactsList.astro
index 3ab3f95..b3a3691 100644
--- a/src/components/ContactsList/ContactsList.astro
+++ b/src/components/ContactsList/ContactsList.astro
@@ -1,24 +1,24 @@
 ---
-import { SITE_METADATA } from '@root/config';
-import { Icon } from 'astro-icon';
-import './ContactsList.scss';
+import { SITE_METADATA } from "@root/config";
+import { Icon } from "astro-icon";
+import "./ContactsList.scss";
 
 const {
 	contacts: { email, githubUrl, telegramUrl },
 } = SITE_METADATA;
 ---
 
-<div class='contacts-list'>
-	<a href={'mailto:' + email}
+<div class="contacts-list">
+	<a href={"mailto:" + email}
 		>Email
-		<Icon name='arrow-up-right' width='15' height='15' data-filter='none' />
+		<Icon name="arrow-up-right" width="15" height="15" data-filter="none" />
 	</a>
-	<a href={githubUrl} target='_blank'
+	<a href={githubUrl} target="_blank"
 		>Github
-		<Icon name='arrow-up-right' width='15' height='15' data-filter='none' />
+		<Icon name="arrow-up-right" width="15" height="15" data-filter="none" />
 	</a>
-	<a href={telegramUrl} target='_blank'
+	<a href={telegramUrl} target="_blank"
 		>Telegram
-		<Icon name='arrow-up-right' width='15' height='15' data-filter='none' />
+		<Icon name="arrow-up-right" width="15" height="15" data-filter="none" />
 	</a>
 </div>
diff --git a/src/components/Footer/Footer.astro b/src/components/Footer/Footer.astro
index cfc3451..e1298aa 100644
--- a/src/components/Footer/Footer.astro
+++ b/src/components/Footer/Footer.astro
@@ -1,24 +1,24 @@
 ---
-import './Footer.scss';
-import { Icon } from 'astro-icon'
+import "./Footer.scss";
+import { Icon } from "astro-icon";
 ---
 
-<footer class='footer'>
-  <div class='container'>
-    <ul class='footer__links'>
-      <li>
-        <a href='https://astro.build/' target='_blank'>Astro</a>
-        <Icon name='astro' width='20' height='20' />
-      </li>
-      <li>
-        <a href='https://www.netlify.com/' target='_blank'>Netlify</a>
-        <Icon name='netlify' width='20' height='20' />
-      </li>
-      <li>
-        <a href='/rss.xml' target='_blank'>RSS</a>
-        <Icon name='rss' width='20' height='20' />
-      </li>
-    </ul>
-    <p class='footer__copy'>© Sergey Yarkov, 2022</p>
-  </div>
+<footer class="footer">
+	<div class="container">
+		<ul class="footer__links">
+			<li>
+				<a href="https://astro.build/" target="_blank">Astro</a>
+				<Icon name="astro" width="20" height="20" />
+			</li>
+			<li>
+				<a href="https://www.netlify.com/" target="_blank">Netlify</a>
+				<Icon name="netlify" width="20" height="20" />
+			</li>
+			<li>
+				<a href="/rss.xml" target="_blank">RSS</a>
+				<Icon name="rss" width="20" height="20" />
+			</li>
+		</ul>
+		<p class="footer__copy">© Sergey Yarkov, 2022</p>
+	</div>
 </footer>
diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro
index 5c9cf8f..ef6af4c 100644
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -25,7 +25,7 @@ const { pathname } = Astro.url;
 				{
 					nav.map((link) => (
 						<li>
-							<TranslatedLink class={pathname.includes(removeSlashes(link.url)) && pathname.split('/').length < 5 && "active"} to={link.url}>
+							<TranslatedLink class={pathname.includes(removeSlashes(link.url)) && pathname.split("/").length < 5 && "active"} to={link.url}>
 								<UIString key={link.key} />
 							</TranslatedLink>
 						</li>
diff --git a/src/components/ProjectsList/ProjectsList.astro b/src/components/ProjectsList/ProjectsList.astro
index 7b7abe2..f0343e2 100644
--- a/src/components/ProjectsList/ProjectsList.astro
+++ b/src/components/ProjectsList/ProjectsList.astro
@@ -1,7 +1,7 @@
 ---
-import './ProjectsList.scss';
+import "./ProjectsList.scss";
 ---
 
-<div class='projects-list'>
-	<slot></slot>
+<div class="projects-list">
+	<slot />
 </div>
diff --git a/src/components/SkillsList/SkillsList.astro b/src/components/SkillsList/SkillsList.astro
index 3bd6913..19b910d 100644
--- a/src/components/SkillsList/SkillsList.astro
+++ b/src/components/SkillsList/SkillsList.astro
@@ -1,5 +1,5 @@
 ---
-import './SkillsList.scss';
+import "./SkillsList.scss";
 ---
 
-<div class='skills-list'><slot></slot></div>
+<div class="skills-list"><slot /></div>
diff --git a/src/layouts/article.astro b/src/layouts/article.astro
index cebed14..31a3ce7 100644
--- a/src/layouts/article.astro
+++ b/src/layouts/article.astro
@@ -10,13 +10,14 @@ import "@styles/global.scss";
 export interface Props extends BaseHeadProps {
 	lang?: string | undefined;
 	content: ArticleType;
+	canonicalUrl?: string | undefined;
 }
 
-const { lang = "ru", content } = Astro.props as Props;
+const { lang = "ru", content, canonicalUrl } = Astro.props as Props;
 ---
 
 <html lang={lang}>
-	<BaseHead title={content.title} description={content.description}>
+	<BaseHead title={content.title} description={content.description} canonicalUrl={canonicalUrl}>
 		<script is:inline defer src="/assets/js/load-code-highlight.js"></script>
 	</BaseHead>
 	<BaseLayout>
diff --git a/src/layouts/default.astro b/src/layouts/default.astro
index 7bf789e..7d42720 100644
--- a/src/layouts/default.astro
+++ b/src/layouts/default.astro
@@ -10,14 +10,15 @@ import "@styles/global.scss";
 export interface Props extends BaseHeadProps {
 	lang?: string | undefined;
 	showPageHeading?: boolean | undefined;
-	noIndex?: boolean;
+	noIndex?: boolean | undefined;
+	canonicalUrl?: string | undefined;
 }
 
-const { title, description, lang = "ru", showPageHeading = true, noIndex = false } = Astro.props as Props;
+const { title, description, lang = "ru", showPageHeading = true, noIndex = false, canonicalUrl } = Astro.props as Props;
 ---
 
 <html lang={lang}>
-	<BaseHead title={title ? `${title} | ${SITE_METADATA.title}` : SITE_METADATA.title} description={description}>
+	<BaseHead title={title ? `${title} | ${SITE_METADATA.title}` : SITE_METADATA.title} description={description} canonicalUrl={canonicalUrl}>
 		{noIndex && <meta name="robots" content="noindex" />}
 	</BaseHead>
 	<BaseLayout>
diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro
index 0f517d1..2b32f9f 100644
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@@ -6,6 +6,7 @@ import { getLanguageFromURL } from "@root/utils";
 import { DEFAULT_LANGUAGE } from "@root/config";
 
 const lang = getLanguageFromURL(Astro.url.pathname);
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
 
 export async function getStaticPaths() {
 	const modules = import.meta.glob<MDXInstance<ArticleType>>("../../../content/articles/**/*.mdx", { eager: true });
@@ -23,6 +24,6 @@ export async function getStaticPaths() {
 const { Content, frontmatter } = Astro.props as MDXInstance<ArticleType>;
 ---
 
-<ArticleLayout lang={lang} content={frontmatter}>
+<ArticleLayout lang={lang} content={frontmatter} canonicalUrl={canonicalUrl.href}>
 	<Content />
 </ArticleLayout>
diff --git a/src/templates/Articles.astro b/src/templates/Articles.astro
index 7ce1421..d0f19b1 100644
--- a/src/templates/Articles.astro
+++ b/src/templates/Articles.astro
@@ -10,9 +10,10 @@ const data = getTranslatedArticles(Astro);
 const tags = new Set(data.map((article) => article.frontmatter.tags).flat());
 const lang = getLanguageFromURL(Astro.url.pathname);
 const articles = transformArticles(data);
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
 ---
 
-<PageLayout lang={lang} title={t("pageTitle.articles")} description={t("pageDescription.articles")}>
+<PageLayout lang={lang} title={t("pageTitle.articles")} description={t("pageDescription.articles")} canonicalUrl={canonicalUrl.href}>
 	<section>
 		<ArticlesList
 			client:load
diff --git a/src/templates/Home.astro b/src/templates/Home.astro
index 9ec3c64..44bb9fb 100644
--- a/src/templates/Home.astro
+++ b/src/templates/Home.astro
@@ -11,9 +11,10 @@ const data = getTranslatedArticles(Astro);
 const t = useTranslation(Astro);
 const lang = getLanguageFromURL(Astro.url.pathname);
 const articles = utils.transformArticles(data);
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
 ---
 
-<PageLayout lang={lang} description={t("site.description")} showPageHeading={false}>
+<PageLayout lang={lang} description={t("site.description")} showPageHeading={false} canonicalUrl={canonicalUrl.href}>
 	<Splash>
 		<SplashHeading>
 			<hgroup>