Refactor Analytics component to encode URI parameters

Refactor Analytics and Head components
Add Analytics component to BaseLayout
2024-09-12 23:33:43 +00:00 · 2024-09-12 22:57:55 +00:00 · 2024-09-12 22:42:08 +00:00 · 2024-09-12 22:38:34 +00:00 · 2024-09-12 22:26:48 +00:00 · 2024-09-12 22:10:31 +00:00
16 changed files with 253 additions and 62 deletions
--- a/astro.config.mjs
+++ b/astro.config.mjs
@ -8,4 +8,10 @@ export default defineConfig({
 	markdown: {
 		remarkPlugins: [remarkReadingTime],
 	},
+	redirects: {
+		"/blog": {
+			destination: "/",
+			status: 301,
+		},
+	},
 });
--- a/package-lock.json
+++ b/package-lock.json
@ -14,6 +14,7 @@
        "astro": "^4.15.4",
        "autoprefixer": "^10.4.20",
        "cssnano": "^7.0.6",
+        "cssnano-preset-advanced": "^7.0.6",
        "dayjs": "^1.11.13",
        "mdast-util-to-string": "^4.0.0",
        "reading-time": "^1.5.0",
@ -1633,44 +1634,43 @@
      ]
    },
    "node_modules/@shikijs/core": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.17.0.tgz",
-      "integrity": "sha512-Mkk4Mp4bNnW1kytU8I7S5PK5teNSe0iKlfqxPss4sdwnlcU8a2N62Z3te2gVmZfU9t1HF6L3wyWuM43IvEeEsg==",
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.17.5.tgz",
+      "integrity": "sha512-JDgFZbJvfZ1g0lRVHtPTv6n2MwWnbTSGwncL/Qmlg7BZBzHCcDY2CxYGkNUm7k+lljOrFzXFGh38s8CRRZH+TQ==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/engine-javascript": "1.17.0",
-        "@shikijs/engine-oniguruma": "1.17.0",
-        "@shikijs/types": "1.17.0",
+        "@shikijs/engine-javascript": "1.17.5",
+        "@shikijs/engine-oniguruma": "1.17.5",
+        "@shikijs/types": "1.17.5",
        "@shikijs/vscode-textmate": "^9.2.2",
        "@types/hast": "^3.0.4",
        "hast-util-to-html": "^9.0.2"
      }
    },
    "node_modules/@shikijs/engine-javascript": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.17.0.tgz",
-      "integrity": "sha512-EiBVlxmzJZdC2ypzn8k+vxLngbBNgHLS4RilwrFOABGRc72kUZubbD/6Chrq2RcVtD3yq1GtiiIdFMGd9BTX3Q==",
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-javascript/-/engine-javascript-1.17.5.tgz",
+      "integrity": "sha512-129knB7yGxq51i5f9ci1lsrC/9rJwo7yzOmHVjQIRk+e1C0caaSwzm4mhLJ506ui0vEmQZ9LzY6a/crW1UsReA==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/types": "1.17.0",
-        "oniguruma-to-js": "0.3.3",
-        "regex": "4.3.2"
+        "@shikijs/types": "1.17.5",
+        "oniguruma-to-js": "0.4.0"
      }
    },
    "node_modules/@shikijs/engine-oniguruma": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.17.0.tgz",
-      "integrity": "sha512-nsXzJGLQ0fhKmA4Gwt1cF7vC8VuZ1HSDrTRuj48h/qDeX/TzmOlTDXQ3uPtyuhyg/2rbZRzNhN8UFU4fSnQfXg==",
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/@shikijs/engine-oniguruma/-/engine-oniguruma-1.17.5.tgz",
+      "integrity": "sha512-GcuDWdUcs06sCoRS/JwbcO8M55MOvirTs3wIR7E6pMoePJWgAxhIYDQHURvSrgKgyUrTl3EKwujHljivS5BJVA==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/types": "1.17.0",
+        "@shikijs/types": "1.17.5",
        "@shikijs/vscode-textmate": "^9.2.2"
      }
    },
    "node_modules/@shikijs/types": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.17.0.tgz",
-      "integrity": "sha512-Tvu2pA69lbpXB+MmgIaROP1tio8y0uYvKb5Foh3q0TJBTAJuaoa5eDEtS/0LquyveacsiVrYF4uEZILju+7Ybg==",
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/@shikijs/types/-/types-1.17.5.tgz",
+      "integrity": "sha512-xDIczjZ7QB6opNrCObX/6/78Jb/BFglRPo7E7f9swd1TCabhumOLsv23103pNUOMZrJYARUkHJpEx7ryFLM3FA==",
      "license": "MIT",
      "dependencies": {
        "@shikijs/vscode-textmate": "^9.2.2",
@ -2041,12 +2041,12 @@
      "license": "Python-2.0"
    },
    "node_modules/aria-query": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
-      "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.1.tgz",
+      "integrity": "sha512-Z/ZeOgVl7bcSYZ/u/rh0fOpvEpq//LZmdbkXyc7syVzjPAhfOa9ebsdTSjEBDU4vs5nC98Kfduj1uFo0qyET3g==",
      "license": "Apache-2.0",
-      "dependencies": {
-        "dequal": "^2.0.3"
+      "engines": {
+        "node": ">= 0.4"
      }
    },
    "node_modules/array-iterate": {
@ -2806,6 +2806,27 @@
        "postcss": "^8.4.31"
      }
    },
+    "node_modules/cssnano-preset-advanced": {
+      "version": "7.0.6",
+      "resolved": "https://registry.npmjs.org/cssnano-preset-advanced/-/cssnano-preset-advanced-7.0.6.tgz",
+      "integrity": "sha512-wk/YPSv965EjpPNEGteiXZ32BKilJcYNnX4EGUd/AriVGgHL/y59uaWVJ/ZDx69jCNUrmwiBzioCV+SG5wk3PQ==",
+      "license": "MIT",
+      "dependencies": {
+        "autoprefixer": "^10.4.20",
+        "browserslist": "^4.23.3",
+        "cssnano-preset-default": "^7.0.6",
+        "postcss-discard-unused": "^7.0.3",
+        "postcss-merge-idents": "^7.0.0",
+        "postcss-reduce-idents": "^7.0.0",
+        "postcss-zindex": "^7.0.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
    "node_modules/cssnano-preset-default": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cssnano-preset-default/-/cssnano-preset-default-7.0.6.tgz",
@ -3067,9 +3088,9 @@
      "license": "MIT"
    },
    "node_modules/electron-to-chromium": {
-      "version": "1.5.20",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.20.tgz",
-      "integrity": "sha512-74mdl6Fs1HHzK9SUX4CKFxAtAe3nUns48y79TskHNAG6fGOlLfyKA4j855x+0b5u8rWJIrlaG9tcTPstMlwjIw==",
+      "version": "1.5.21",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.21.tgz",
+      "integrity": "sha512-+rBAerCpQvFSPyAO677i5gJuWGO2WFsoujENdcMzsrpP7Ebcc3pmpERgU8CV4fFF10a5haP4ivnFQ/AmLICBVg==",
      "license": "ISC"
    },
    "node_modules/emmet": {
@ -5023,10 +5044,13 @@
      }
    },
    "node_modules/oniguruma-to-js": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.3.3.tgz",
-      "integrity": "sha512-m90/WEhgs8g4BxG37+Nu3YrMfJDs2YXtYtIllhsEPR+wP3+K4EZk6dDUvy2v2K4MNFDDOYKL4/yqYPXDqyozTQ==",
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/oniguruma-to-js/-/oniguruma-to-js-0.4.0.tgz",
+      "integrity": "sha512-GwNFPQygkpDjO9MOr54Rqi01dGS+h9VAS//Qxz9lTN5B09CxqiIc7rydvdV+Ex2Z8Vk+zqfHH7hU6ePn8uf+Mg==",
      "license": "MIT",
+      "dependencies": {
+        "regex": "^4.3.2"
+      },
      "funding": {
        "url": "https://github.com/sponsors/antfu"
      }
@ -5364,6 +5388,37 @@
        "postcss": "^8.4.31"
      }
    },
+    "node_modules/postcss-discard-unused": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/postcss-discard-unused/-/postcss-discard-unused-7.0.3.tgz",
+      "integrity": "sha512-OVxIMVMjkJ1anDTbHFSYUZnmoDWv3vF5JPZvr9hi6HjMNH/RjfR39IMeLThbIjrSb9ZLcwzqziU+XxFQkgF4Vw==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.2"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
+    "node_modules/postcss-merge-idents": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-merge-idents/-/postcss-merge-idents-7.0.0.tgz",
+      "integrity": "sha512-Kr+DniMg0IsW7OGoaMB1Foreb3fIE2XcExCRynogQLngkpNVKTX5GlaxyEZDBB8bISeoztFHFK/GcQtFiPTnpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "cssnano-utils": "^5.0.0",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
    "node_modules/postcss-merge-longhand": {
      "version": "7.0.4",
      "resolved": "https://registry.npmjs.org/postcss-merge-longhand/-/postcss-merge-longhand-7.0.4.tgz",
@ -5612,6 +5667,21 @@
        "postcss": "^8.4.31"
      }
    },
+    "node_modules/postcss-reduce-idents": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-reduce-idents/-/postcss-reduce-idents-7.0.0.tgz",
+      "integrity": "sha512-ghFHqxigYW/bbfr+bXSDB5Tv3qPaYZZxiQh+Gne0NYRlTOzFft1V/DUvGFVJbFkackHleSjFdVXdlNB+5f3mKg==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.2.0"
+      },
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
    "node_modules/postcss-reduce-initial": {
      "version": "7.0.2",
      "resolved": "https://registry.npmjs.org/postcss-reduce-initial/-/postcss-reduce-initial-7.0.2.tgz",
@ -5693,6 +5763,18 @@
      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
      "license": "MIT"
    },
+    "node_modules/postcss-zindex": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-zindex/-/postcss-zindex-7.0.0.tgz",
+      "integrity": "sha512-Agp+5C0qBZxT9S4k9iO/C9oqce3gvPJ/7av4JcAsDl17vsboSN60ncTokIYDtDMlVXvwuhFED3edoy1YG5O1+g==",
+      "license": "MIT",
+      "engines": {
+        "node": "^18.12.0 || ^20.9.0 || >=22.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.31"
+      }
+    },
    "node_modules/preferred-pm": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/preferred-pm/-/preferred-pm-4.0.0.tgz",
@ -6240,13 +6322,15 @@
      }
    },
    "node_modules/shiki": {
-      "version": "1.17.0",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.17.0.tgz",
-      "integrity": "sha512-VZf8cPShRwfzPcaswv81+YP7qJEoFwRT+Ehy6bizim7M0zG9bk8Egug550C+xS9g7rKIOPhzAlp2uEyuCxbk/A==",
+      "version": "1.17.5",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.17.5.tgz",
+      "integrity": "sha512-8i4+fbTlnJPUYkgBEZ92QKmK3Gr23n2YVwqwyz0e+VmXqKpJZuV6P/CY00gSGHDXXjXT5l0BLwsMfO2Pe52TLQ==",
      "license": "MIT",
      "dependencies": {
-        "@shikijs/core": "1.17.0",
-        "@shikijs/types": "1.17.0",
+        "@shikijs/core": "1.17.5",
+        "@shikijs/engine-javascript": "1.17.5",
+        "@shikijs/engine-oniguruma": "1.17.5",
+        "@shikijs/types": "1.17.5",
        "@shikijs/vscode-textmate": "^9.2.2",
        "@types/hast": "^3.0.4"
      }
--- a/package.json
+++ b/package.json
@ -18,6 +18,7 @@
    "astro": "^4.15.4",
    "autoprefixer": "^10.4.20",
    "cssnano": "^7.0.6",
+    "cssnano-preset-advanced": "^7.0.6",
    "dayjs": "^1.11.13",
    "mdast-util-to-string": "^4.0.0",
    "reading-time": "^1.5.0",
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@ -2,7 +2,7 @@ module.exports = {
 	plugins: [
 		require("autoprefixer"),
 		require("cssnano")({
-			preset: "default",
+			preset: "advanced",
 		}),
 	],
 };
--- a/src/components/Analytics.astro
+++ b/src/components/Analytics.astro
@ -0,0 +1,17 @@
+---
+type Props = {
+	readonly title: string;
+};
+
+const path = Astro.url.pathname;
+const { title } = Astro.props;
+---
+
+<!-- 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=${encodeURI(path)}&t=${encodeURI(title)}`} />
+</noscript>
--- a/src/components/Head.astro
+++ b/src/components/Head.astro
@ -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>
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@ -12,7 +12,7 @@
 		left: 0;
 		line-height: 3.5em;
 		opacity: 0.975;
-		position: fixed;
+		position: absolute;
 		right: 0;
 		top: 0;
 	}
@ -36,6 +36,7 @@
 	@media (width <=684px) {
 		header {
 			box-shadow: none;
+			position: fixed;
 		}

 		nav {
@ -50,6 +51,6 @@

 <header>
 	<nav>
-		<a href="/feed.xml">RSS</a>
+		<a href="/">Home</a>
 	</nav>
 </header>
--- a/src/components/Pagination.astro
+++ b/src/components/Pagination.astro
@ -0,0 +1,24 @@
+---
+import Next from "./Pagination/Next.astro";
+import Prev from "./Pagination/Prev.astro";
+
+type Props = {
+	readonly nextUrl?: string;
+	readonly prevUrl?: string;
+};
+
+const { nextUrl, prevUrl } = Astro.props;
+---
+
+<style lang="scss">
+	div {
+		overflow: hidden;
+		padding: 3rem 0;
+		width: 100%;
+	}
+</style>
+
+<div>
+	{prevUrl && <Prev url={prevUrl} />}
+	{nextUrl && <Next url={nextUrl} />}
+</div>
--- a/src/components/Pagination/Next.astro
+++ b/src/components/Pagination/Next.astro
@ -0,0 +1,18 @@
+---
+type Props = {
+	readonly url: string;
+};
+
+const { url } = Astro.props;
+---
+
+<style lang="scss">
+	span {
+		float: right;
+		max-width: 40%;
+	}
+</style>
+
+<span>
+	<a href={url}>Next &gt;</a>
+</span>
--- a/src/components/Pagination/Prev.astro
+++ b/src/components/Pagination/Prev.astro
@ -0,0 +1,18 @@
+---
+type Props = {
+	readonly url: string;
+};
+
+const { url } = Astro.props;
+---
+
+<style lang="scss">
+	span {
+		float: left;
+		max-width: 40%;
+	}
+</style>
+
+<span>
+	<a href={url}>&lt; Prev</a>
+</span>
--- a/src/components/PostSummary.astro
+++ b/src/components/PostSummary.astro
--- a/src/layouts/BaseLayout.astro
+++ b/src/layouts/BaseLayout.astro
@ -1,4 +1,5 @@
 ---
+import Analytics from "../components/Analytics.astro";
 import Head from "../components/Head.astro";
 import Header from "../components/Header.astro";
 import "../scss/global.scss";
@ -8,16 +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 title={title ?? import.meta.env.DEFAULT_TITLE} />
 	</body>
 </html>
--- a/src/pages/[...page].astro
+++ b/src/pages/[...page].astro
@ -0,0 +1,30 @@
+---
+import type { GetStaticPaths, InferGetStaticPropsType } from "astro";
+import { getCollection } from "astro:content";
+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());
+
+	return paginate(posts, {
+		pageSize: 5,
+	});
+}) satisfies GetStaticPaths;
+
+const { page } = Astro.props;
+---
+
+<Layout>
+	<section>
+		{page.data.map((post) => <PostSummary post={post} />)}
+	</section>
+
+	<section>
+		<Pagination nextUrl={page.url.next} prevUrl={page.url.prev} />
+	</section>
+</Layout>
--- a/src/pages/blog/[...slug].astro
+++ b/src/pages/blog/[...slug].astro
@ -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>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@ -1,13 +0,0 @@
---
-import { getCollection } from "astro:content";
-import Element from "../components/PostElement.astro";
-import Layout from "../layouts/BaseLayout.astro";
-
-const posts = await getCollection("blog");
---
-
-<Layout>
-	<section>
-		{posts.map((post) => <Element post={post} />)}
-	</section>
-</Layout>
--- a/src/scss/_framework.scss
+++ b/src/scss/_framework.scss
@ -35,7 +35,7 @@ body {
 	margin: auto;
 	max-width: 52em;
 	min-height: 100vh;
-	padding: 6em 4em 4em;
+	padding: 4em;
 	text-rendering: optimizelegibility;
 }
Author	SHA1	Message	Date
Valentin Popov	b8fd186801	Refactor Analytics component to encode URI parameters All checks were successful Test / test (push) Successful in 39s Details Test / test (pull_request) Successful in 37s Details	2024-09-12 23:33:43 +00:00
Valentin Popov	33c9464dad	Refactor Analytics and Head components	2024-09-12 22:57:55 +00:00
Valentin Popov	b16d8ce36c	Add Analytics component to BaseLayout	2024-09-12 22:42:08 +00:00
Valentin Popov	65ee69c645	Refactor Pagination component and add Next and Prev components	2024-09-12 22:38:34 +00:00
Valentin Popov	fd054f0fa4	Update config to use "advanced" preset for cssnano	2024-09-12 22:26:48 +00:00
Valentin Popov	de1885fe8f	Added Pagination component	2024-09-12 22:10:31 +00:00
Valentin Popov	3591bebabf	Sort blog posts by publication date	2024-09-12 21:02:35 +00:00