feat: added canonical urls

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": {

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} />

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>

src/components/ContactsList/ContactsList.astro

@@ -1,24 +1,24 @@
 ---
-import { SITE_METADATA } from '@root/config';
+import { SITE_METADATA } from "@root/config";
-import { Icon } from 'astro-icon';
+import { Icon } from "astro-icon";
-import './ContactsList.scss';
+import "./ContactsList.scss";
 
 const {
 	contacts: { email, githubUrl, telegramUrl },
 } = SITE_METADATA;
 ---
 
-<div class='contacts-list'>
+<div class="contacts-list">
-	<a href={'mailto:' + email}
+	<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>

src/components/Footer/Footer.astro

@@ -1,24 +1,24 @@
 ---
-import './Footer.scss';
+import "./Footer.scss";
-import { Icon } from 'astro-icon'
+import { Icon } from "astro-icon";
 ---
 
-<footer class='footer'>
+<footer class="footer">
-  <div class='container'>
+	<div class="container">
-    <ul class='footer__links'>
+		<ul class="footer__links">
 			<li>
-        <a href='https://astro.build/' target='_blank'>Astro</a>
+				<a href="https://astro.build/" target="_blank">Astro</a>
-        <Icon name='astro' width='20' height='20' />
+				<Icon name="astro" width="20" height="20" />
 			</li>
 			<li>
-        <a href='https://www.netlify.com/' target='_blank'>Netlify</a>
+				<a href="https://www.netlify.com/" target="_blank">Netlify</a>
-        <Icon name='netlify' width='20' height='20' />
+				<Icon name="netlify" width="20" height="20" />
 			</li>
 			<li>
-        <a href='/rss.xml' target='_blank'>RSS</a>
+				<a href="/rss.xml" target="_blank">RSS</a>
-        <Icon name='rss' width='20' height='20' />
+				<Icon name="rss" width="20" height="20" />
 			</li>
 		</ul>
-    <p class='footer__copy'>© Sergey Yarkov, 2022</p>
+		<p class="footer__copy">© Sergey Yarkov, 2022</p>
 	</div>
 </footer>

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>

src/components/ProjectsList/ProjectsList.astro

@@ -1,7 +1,7 @@
 ---
-import './ProjectsList.scss';
+import "./ProjectsList.scss";
 ---
 
-<div class='projects-list'>
+<div class="projects-list">
-	<slot></slot>
+	<slot />
 </div>

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>

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>

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>

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>

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

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>