yametrika

astro.config.mjs

@@ -325,6 +325,13 @@ export default defineConfig({
 										default: false,
 										hint: "Отображает баннер на всех старницах о том, что веб-сайт находится в разработке",
 									},
+									{
+										label: "Счетчик Яндекс.Метрики",
+										name: "ymCounter",
+										widget: "number",
+										hint: "Например: 90034656",
+										required: false,
+									},
 									{
 										label: "Статьи",
 										name: "articles",

siteconfig.json

@@ -1,12 +1,13 @@
 {
-  "globalTitle": "Sergey Yarkov",
-  "articles": {
-    "recentLimit": 5
-  },
-  "isSiteUnderConstruction": false,
-  "contacts": {
-    "email": "serzh.yarkov@gmail.com",
-    "telegram": "https://t.me/sergeyyarkov",
-    "github": "https://github.com/sergeyyarkov"
-  }
-}
+	"globalTitle": "Sergey Yarkov",
+	"articles": {
+		"recentLimit": 5
+	},
+	"isSiteUnderConstruction": false,
+	"contacts": {
+		"email": "serzh.yarkov@gmail.com",
+		"telegram": "https://t.me/sergeyyarkov",
+		"github": "https://github.com/sergeyyarkov"
+	},
+	"ymCounter": 90034656
+}

src/components/Analytics/YaMetrika.astro

@@ -0,0 +1,21 @@
+---
+export interface Props {
+  counter: number;
+}
+
+const { counter } = Astro.props as Props
+---
+
+<script type="text/javascript" define:vars={{ counter }} is:inline>
+  (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
+  var z = null;m[i].l=1*new Date();
+  for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
+  k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
+  (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");
+
+  ym(counter, "init", {
+      clickmap:true,
+      trackLinks:true,
+      accurateTrackBounce:true
+  });
+</script>

src/components/ArticlePost.astro

@@ -4,7 +4,7 @@ import { Icon } from "astro-icon";
 import { createDateFormatter } from "@root/utils";
 import ArticleCover from "@components/ArticleCover.astro";
 import ArticleComments from "@components/ArticleComments.astro";
-// import TranslatedLink from "../TranslatedLink";
+import TranslatedLink from "@components/TranslatedLink.astro";
 import { useTranslation, getLanguageFromURL } from "@i18n/utils";
 
 export type Props = {
@@ -19,8 +19,7 @@ const {
 	data: { coverImage, title, author, description, tags, pubDate },
 	slug,
 } = article;
-
-// const t = useTranslation(Astro);
+const t = useTranslation(Astro);
 ---
 
 <article itemscope itemtype="http://schema.org/BlogPosting" class="article">
@@ -32,9 +31,9 @@ const {
 						<ul itemprop="keywords">
 							{tags.map((tag) => (
 								<li>
-									<a rel="tag" href={`/articles/?tags=${tag.toLocaleLowerCase()}`}>
+									<TranslatedLink rel="tag" to={`/articles/?tags=${tag.toLocaleLowerCase()}`}>
 										{tag}
-									</a>
+									</TranslatedLink>
 								</li>
 							))}
 						</ul>
@@ -43,7 +42,7 @@ const {
 			}
 			<div class="views">
 				<Icon name="eye" width="21" height="21" />
-				<span><span id="views">---</span>&nbsp;{"просмотров"}</span>
+				<span><span id="views">---</span>&nbsp;{t("article.views")}</span>
 			</div>
 		</div>
 		<div class="heading">

src/components/BaseHead.astro

@@ -1,6 +1,8 @@
 ---
 import "@styles/global.scss";
+import siteconfig from "siteconfig.json";
 import { SITE_METADATA } from "@root/constants";
+import YaMetrika from "./Analytics/YaMetrika.astro";
 
 export interface Props {
 	title?: string;
@@ -10,6 +12,7 @@ export interface Props {
 
 const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 const { title, description } = Astro.props;
+const isDev = import.meta.env.DEV;
 ---
 
 <head>
@@ -72,5 +75,6 @@ const { title, description } = Astro.props;
 	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
 	<slot />
 	<script is:inline src="/assets/js/detect-theme.js"></script>
-	<!-- <script src="../quicklink.js"></script> -->
+	<script src="../quicklink.js"></script>
+	{!isDev && siteconfig?.ymCounter && <YaMetrika counter={siteconfig.ymCounter} />}
 </head>

src/quicklink.js

@@ -0,0 +1,5 @@
+import { listen } from "quicklink/dist/quicklink.mjs";
+window.addEventListener("load", () => {
+	listen({ el: document.querySelector("body > header") });
+	listen({ el: document.querySelector("body > main article header") });
+});