Refactor Analytics and Head components

This commit is contained in:
Valentin Popov 2024-09-12 22:57:55 +00:00
parent b16d8ce36c
commit 33c9464dad
Signed by: Valentin Popov
GPG Key ID: AE3CE523DAAA8401
6 changed files with 33 additions and 18 deletions

View File

@ -1,5 +1,17 @@
---
const id = "T5X0z12SoASBV8Dv";
type Props = {
readonly title: string;
};
const path = Astro.url.pathname;
const { title } = Astro.props;
---
<script is:inline src={`https://appmetrix.com/pixel/${id}`}></script>
<!-- AppMetrix -->
<script is:inline src="https://appmetrix.com/pixel/T5X0z12SoASBV8Dv"></script>
<!-- GoatCounter -->
<script is:inline data-goatcounter="https://analytics.popov.link/count" src="//gc.zgo.at/count.js"></script>
<noscript>
<img alt="pixel" src={`https://analytics.popov.link/count?p=${path}&t=${title}`} />
</noscript>

View File

@ -1,18 +1,18 @@
---
type Props = {
readonly description?: string;
readonly title?: string;
readonly description: string;
readonly title: string;
};
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
const { title, description } = Astro.props;
const { description, title } = Astro.props;
---
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content={description ?? import.meta.env.DEFAULT_DESCRIPTION} />
<meta name="description" content={description} />
<meta name="robots" content="index, follow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
@ -20,5 +20,5 @@ const { title, description } = Astro.props;
<link href="/sitemap-index.xml" rel="sitemap" />
<link href={canonicalURL} rel="canonical" />
<title>{title ?? import.meta.env.DEFAULT_TITLE}</title>
<title>{title}</title>
</head>

View File

@ -3,11 +3,11 @@ import Next from "./Pagination/Next.astro";
import Prev from "./Pagination/Prev.astro";
type Props = {
readonly prevUrl?: string;
readonly nextUrl?: string;
readonly prevUrl?: string;
};
const { prevUrl, nextUrl } = Astro.props;
const { nextUrl, prevUrl } = Astro.props;
---
<style lang="scss">

View File

@ -9,17 +9,20 @@ type Props = {
readonly title?: string;
};
const { title, description } = Astro.props;
const { description, title } = Astro.props;
---
<html lang="ru">
<Head title={title} description={description} />
<Head
description={description ?? import.meta.env.DEFAULT_DESCRIPTION}
title={title ?? import.meta.env.DEFAULT_TITLE}
/>
<body>
<Header />
<main>
<slot />
</main>
<Analytics />
<Analytics title={title ?? import.meta.env.DEFAULT_TITLE} />
</body>
</html>

View File

@ -5,6 +5,8 @@ import Layout from "../layouts/BaseLayout.astro";
import Pagination from "../components/Pagination.astro";
import PostSummary from "../components/PostSummary.astro";
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
export const getStaticPaths = (async ({ paginate }) => {
const posts = await getCollection("blog");
posts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
@ -14,8 +16,6 @@ export const getStaticPaths = (async ({ paginate }) => {
});
}) satisfies GetStaticPaths;
type Props = InferGetStaticPropsType<typeof getStaticPaths>;
const { page } = Astro.props;
---
@ -25,6 +25,6 @@ const { page } = Astro.props;
</section>
<section>
<Pagination prevUrl={page.url.prev} nextUrl={page.url.next} />
<Pagination nextUrl={page.url.next} prevUrl={page.url.prev} />
</section>
</Layout>

View File

@ -3,6 +3,8 @@ import { type CollectionEntry, getCollection } from "astro:content";
import Comments from "../../components/Comments.astro";
import Layout from "../../layouts/BaseLayout.astro";
type Props = CollectionEntry<"blog">;
export async function getStaticPaths() {
const posts = await getCollection("blog");
@ -12,8 +14,6 @@ export async function getStaticPaths() {
}));
}
type Props = CollectionEntry<"blog">;
const post = Astro.props;
const { Content, remarkPluginFrontmatter } = await post.render();
---
@ -24,7 +24,7 @@ const { Content, remarkPluginFrontmatter } = await post.render();
}
</style>
<Layout title={post.data.title} description={post.data.description}>
<Layout description={post.data.description} title={post.data.title}>
<article>
<section class="header">
<h1>{post.data.title}</h1>