Merge branch 'release/1.2.7' into main

README.md

@@ -7,15 +7,16 @@ Personal website created with Astro.
 
 ### Features
 
-- [x] HTML layout
 - [x] Adaptive & Responsive layout
 - [x] Search articles by title or description
 - [x] Dark/Light Theme
 - [x] Multilang web-site
+- [x] Prefetch pages via [Quicklink](https://getquick.link/)
 - [x] Form handling via [Netlify Forms](https://www.netlify.com/products/forms/)
 - [x] Comment system via [utterances](https://utteranc.es/)
 - [x] RSS Feed for articles
 - [x] SEO optimized
+- [x] Views counter 
 
 ## License
 

astro.config.ts

@@ -100,14 +100,5 @@ export default defineConfig({
 		ssr: {
 			external: ["svgo"],
 		},
-		build: {
-			rollupOptions: {
-				output: {
-					entryFileNames: `[name].[hash].js`,
-					chunkFileNames: `chunks/[name].[hash].js`,
-					assetFileNames: `assets/[hash].[ext]`,
-				},
-			},
-		},
 	},
 });

netlify/functions/views.ts

@@ -1,16 +1,9 @@
 import { Handler } from "@netlify/functions";
-
-import Redis from "ioredis";
-
-const redis = new Redis({
-	host: process.env.REDIS_HOST,
-	port: Number.parseInt(process.env.REDIS_PORT || "6379", 10),
-	password: process.env.REDIS_PASSWORD,
-});
+import { redisClient } from "../../redis";
 
 const getViewsBySlug = async (slug: string): Promise<number> => {
 	let views = 1;
-	const data = await redis.get(`views:${slug}`);
+	const data = await redisClient.get(`views:${slug}`);
 	if (data) views = Number.parseInt(data, 10);
 	if (Number.isNaN(views)) views = 1;
 	return views;
@@ -27,7 +20,7 @@ const handler: Handler = async (event) => {
 		}
 		case "POST": {
 			if (!slug) return { statusCode: 400, body: "Bad request." };
-			const views = await redis.incr(`views:${slug}`);
+			const views = await redisClient.incr(`views:${slug}`);
 			return { statusCode: 200, body: views.toString() };
 		}
 		default: {

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "yarkov.tech",
-	"version": "1.1.7",
+	"version": "1.2.7",
 	"private": true,
 	"description": "Personal website created with Astro.",
 	"author": {
@@ -19,18 +19,18 @@
 		"lint": "eslint '**/*.{js,mjs,ts,tsx}'"
 	},
 	"devDependencies": {
-		"@astrojs/image": "^0.11.1",
-		"@astrojs/mdx": "^0.11.5",
+		"@astrojs/image": "^0.11.6",
+		"@astrojs/mdx": "^0.11.6",
 		"@astrojs/rss": "^1.0.3",
 		"@astrojs/sitemap": "^1.0.0",
-		"@astrojs/solid-js": "^1.2.2",
+		"@astrojs/solid-js": "^1.2.3",
 		"@types/html-escaper": "^3.0.0",
 		"@types/mdx": "^2.0.3",
-		"@typescript-eslint/eslint-plugin": "^5.42.0",
-		"@typescript-eslint/parser": "^5.42.0",
-		"astro": "^1.6.3",
+		"@typescript-eslint/eslint-plugin": "^5.43.0",
+		"@typescript-eslint/parser": "^5.43.0",
+		"astro": "^1.6.10",
 		"astro-icon": "^0.8.0",
-		"eslint": "^8.26.0",
+		"eslint": "^8.27.0",
 		"eslint-plugin-solid": "^0.8.0",
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^7.1.0",
@@ -43,12 +43,13 @@
 		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
 		"remark-smartypants": "^2.0.0",
-		"sass": "^1.56.0",
-		"solid-js": "^1.6.1"
+		"sass": "^1.56.1",
+		"solid-js": "^1.6.2"
 	},
 	"dependencies": {
 		"@netlify/functions": "^1.3.0",
 		"ioredis": "^5.2.4",
+		"quicklink": "^2.3.0",
 		"sharp": "^0.31.2"
 	}
 }

redis.ts

@@ -0,0 +1,9 @@
+import Redis from "ioredis";
+
+const redisClient = new Redis({
+	host: process.env.REDIS_HOST,
+	port: Number.parseInt(process.env.REDIS_PORT || "6379", 10),
+	password: process.env.REDIS_PASSWORD,
+});
+
+export { redisClient };

src/components/ArticleComments/ArticleComments.astro

@@ -20,7 +20,7 @@ import UIString from "../UIString";
 	$commentsScript.setAttribute("crossorigin", "anonymous");
 
 	if (window.theme) {
-		$commentsScript.setAttribute("theme", theme === "dark" ? "dark-blue" : "github-light");
+		$commentsScript.setAttribute("theme", window.theme === "dark" ? "dark-blue" : "github-light");
 	} else {
 		$commentsScript.setAttribute("theme", "github-light");
 	}

src/components/ArticlePost/ArticlePost.astro

@@ -84,6 +84,7 @@ const t = useTranslation(Astro);
 		const views = await response.text();
 		const $views = document.getElementById("views");
 
+		if (isNaN(parseInt(views, 10))) return;
 		if ($views) $views.textContent = views;
 	})();
 </script>

src/components/BaseHead.astro

@@ -51,4 +51,5 @@ const { title = SITE_METADATA.title, description, canonicalUrl } = Astro.props a
 	<meta name="msapplication-TileColor" content="#da532c" />
 	<slot />
 	<script is:inline src="/assets/js/detect-theme.js"></script>
+	<script src="../quicklink.js"></script>
 </head>

src/lib/api.ts

@@ -46,14 +46,16 @@ export function fetchTranslatedArticles(Astro: Readonly<AstroGlobal>): MDXInstan
 	return utils.getPublishedArticles(articles);
 }
 
-export async function fetchAboutMe(Astro: Readonly<AstroGlobal>): Promise<MDXInstance<{}>> {
+export async function fetchAboutMe(Astro: Readonly<AstroGlobal>): Promise<MDXInstance<Record<string, never>>> {
 	const lang = getLanguageFromURL(Astro.url.pathname);
-	let markdown: MDXInstance<{}> | undefined;
+	let markdown: MDXInstance<Record<string, never>> | undefined;
 
 	try {
-		markdown = (await import(`../../content/about/${lang}/index.mdx`)) as MDXInstance<{}>;
+		markdown = (await import(`../../content/about/${lang}/index.mdx`)) as MDXInstance<Record<string, never>>;
 	} catch (error) {
-		markdown = (await import(`../../content/about/${DEFAULT_LANGUAGE}/index.mdx`)) as MDXInstance<{}>;
+		markdown = (await import(`../../content/about/${DEFAULT_LANGUAGE}/index.mdx`)) as MDXInstance<
+			Record<string, never>
+		>;
 	}
 
 	return markdown;

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") });
+});