dockerfile

Automatically generated. Merged on Decap CMS.

.dockerignore

@@ -0,0 +1,14 @@
+node_modules
+dist
+.astro
+.env
+.env.example
+.git
+.gitignore
+dockerfile
+.dockerignore
+.vscode
+.prettierrc
+codegen.ts
+schema.graphql
+README.md

.env.example

@@ -1,4 +1,4 @@
-IS_SITE_UNDER_CONSTRUCTION=false
-REDIS_HOST=localhost
-REDIS_PORT=6379
-REDIS_PASSWORD=12345
+ASTRO_TELEMETRY_DISABLED=1
+DIRECTUS_URL=
+DIRECTUS_URL_GRAPHQL=
+DIRECTUS_TOKEN=

.eslintrc.json

@@ -1,14 +0,0 @@
-{
-	"env": {
-		"browser": true,
-		"es2021": true
-	},
-	"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:solid/typescript"],
-	"parser": "@typescript-eslint/parser",
-	"parserOptions": {
-		"ecmaVersion": "latest",
-		"sourceType": "module"
-	},
-	"plugins": ["@typescript-eslint", "solid"],
-	"rules": {}
-}

.gitattributes

@@ -1,2 +0,0 @@
-*.css linguist-detectable=false
-*.scss linguist-detectable=false

.gitignore

@@ -1,5 +1,7 @@
 # build output
 dist/
+# generated types
+.astro/
 
 # dependencies
 node_modules/
@@ -10,11 +12,13 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 
+
 # environment variables
 .env
 .env.production
 
 # macOS-specific files
 .DS_Store
+
 # Local Netlify folder
 .netlify

.gitmodules

@@ -1,3 +0,0 @@
-[submodule "content"]
-	path = content
-	url = git@github.com:sergeyyarkov/content.git

.npmrc

@@ -1,2 +0,0 @@
-# Expose Astro dependencies for `pnpm` users
-shamefully-hoist=true

.prettierignore

@@ -1,2 +0,0 @@
-**/*.mdx
-**/*.md

.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

.vscode/settings.json

@@ -1,7 +1,5 @@
 {
-	"files.eol": "\n",
-	"prettier.documentSelectors": ["**/*.astro"],
-	"[astro]": {
-		"editor.defaultFormatter": "esbenp.prettier-vscode"
-	}
+	"githubPullRequests.ignoredPullRequestBranches": ["develop"],
+	"typescript.tsdk": "node_modules/typescript/lib",
+	"typescript.enablePromptUseWorkspaceTsdk": true
 }

Dockerfile

@@ -0,0 +1,22 @@
+ARG NODE_IMAGE=node:24.0.0-alpine
+
+FROM ${NODE_IMAGE} AS build
+
+RUN apk add --no-cache python3 make g++
+
+WORKDIR /app
+COPY package*.json .
+RUN npm ci
+COPY . .
+RUN npm run build
+RUN npm prune --omit=dev
+
+FROM ${NODE_IMAGE} AS production
+WORKDIR /app
+
+COPY --from=build /app/dist ./dist
+COPY --from=build /app/node_modules ./node_modules
+COPY --from=build /app/package*.json .
+
+EXPOSE 9966
+CMD [ "node", "./dist/server/entry.mjs"]

README.md

@@ -1,7 +1,6 @@
 # yarkov.tech
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![Netlify Status](https://api.netlify.com/api/v1/badges/ccd0460a-9725-4e35-8263-1608c4186d9c/deploy-status)](https://app.netlify.com/sites/yarkov/deploys)
 
 Personal website created with Astro.
 
@@ -11,9 +10,10 @@ Personal website created with Astro.
 - [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] Table of contents
+- [x] Content management via [Directus](https://directus.io/)
+- [x] Form handling
+- [x] Comment system via [Remark42](https://github.com/umputun/remark42)
 - [x] RSS Feed for articles
 - [x] SEO optimized
 - [x] Views counter

astro.config.mjs

@@ -0,0 +1,38 @@
+import { defineConfig, envField } from "astro/config";
+
+/**
+ * Integrations
+ */
+import node from "@astrojs/node";
+import solidJs from "@astrojs/solid-js";
+import icon from "astro-icon";
+
+// https://astro.build/config
+export default defineConfig({
+	site: "https://yarkov.tech",
+	compressHTML: true,
+	output: "server",
+	prefetch: true,
+	server: {
+		port: 9966,
+		host: true,
+		allowedHosts: ["showcase.yarkov.tech"],
+	},
+	adapter: node({
+		mode: "standalone",
+	}),
+	env: {
+		schema: {
+			DIRECTUS_URL: envField.string({ context: "server", access: "secret", default: "" }),
+			DIRECTUS_URL_GRAPHQL: envField.string({
+				context: "server",
+				access: "secret",
+				default: "http://directus:8055/graphql",
+			}),
+			DIRECTUS_TOKEN: envField.string({ context: "server", access: "secret", default: "" }),
+		},
+	},
+	integrations: [icon(), solidJs()],
+	trailingSlash: "ignore",
+	scopedStyleStrategy: "where",
+});

astro.config.ts

@@ -1,104 +0,0 @@
-/**
- * Integrations
- */
-import solid from "@astrojs/solid-js";
-import mdx from "@astrojs/mdx";
-import sitemap from "@astrojs/sitemap";
-import image from "@astrojs/image";
-
-/**
- * Remark plugins
- */
-import remarkGfm from "remark-gfm";
-import remarkSmartypants from "remark-smartypants";
-
-/**
- * Rehype plugins
- */
-import rehypeSlug from "rehype-slug";
-import rehypeAutolinkHeadings from "rehype-autolink-headings";
-
-/**
- * Other required modules
- */
-import { defineConfig } from "astro/config";
-import { h } from "hastscript";
-import { toString } from "hast-util-to-string";
-import { escape } from "html-escaper";
-import { DEFAULT_LANGUAGE } from "./src/config";
-import languages from "./src/i18n/languages";
-
-const createAnchorLabel = (heading: string) => {
-	const node = h("span.anchor-label", escape(heading));
-	if (node.properties) node.properties["is:raw"] = true;
-	return node;
-};
-
-// https://astro.build/config
-export default defineConfig({
-	site: "https://yarkov.tech",
-	integrations: [
-		solid(),
-		sitemap({
-			i18n: {
-				defaultLocale: DEFAULT_LANGUAGE,
-				locales: Object.fromEntries(Object.keys(languages).map((key) => [key, key])),
-			},
-		}),
-		image({
-			serviceEntryPoint: "@astrojs/image/sharp",
-		}),
-		mdx({
-			remarkPlugins: [remarkGfm, remarkSmartypants],
-			rehypePlugins: [
-				rehypeSlug,
-				[
-					rehypeAutolinkHeadings,
-					{
-						properties: {
-							class: "anchor-link",
-						},
-						behavior: "after",
-						group: ({ tagName }) =>
-							h(`div.heading-wrapper.level-${tagName}`, {
-								tabIndex: -1,
-							}),
-						content: (heading) => [
-							h(
-								`span.anchor-icon`,
-								undefined,
-								h(
-									"svg",
-									{
-										width: 18,
-										height: 18,
-										version: 1.1,
-										viewBox: "0 0 16 16",
-										xlmns: "http://www.w3.org/2000/svg",
-										ariaHidden: "true",
-										"data-filter": "none",
-									},
-									h("path", {
-										fillRule: "evenodd",
-										fill: "currentcolor",
-										d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z",
-									})
-								)
-							),
-							createAnchorLabel(toString(heading)),
-						],
-					},
-				],
-			],
-		}),
-	],
-	trailingSlash: "ignore",
-	markdown: {
-		syntaxHighlight: "prism",
-	},
-	vite: {
-		ssr: {
-			external: ["svgo"],
-		},
-	},
-});

codegen.ts

@@ -0,0 +1,31 @@
+import type { CodegenConfig } from "@graphql-codegen/cli";
+
+const config: CodegenConfig = {
+	schema: [
+		{
+			[`${process.env.DIRECTUS_URL}/graphql`]: {
+				headers: {
+					Authorization: `Bearer ${process.env.DIRECTUS_TOKEN}`,
+				},
+			},
+		},
+	],
+	documents: ["src/**/*.ts"],
+	ignoreNoDocuments: true,
+	generates: {
+		"./src/graphql/": {
+			preset: "client",
+			config: {
+				documentMode: "string",
+			},
+		},
+		"./schema.graphql": {
+			plugins: ["schema-ast"],
+			config: {
+				includeDirectives: true,
+			},
+		},
+	},
+};
+
+export default config;

compose.yml

@@ -0,0 +1,17 @@
+services:
+  yarkov-tech-node:
+    container_name: yarkov-tech-node
+    restart: unless-stopped
+    image: sergeyyarkov/yarkovtech:latest
+    networks:
+      - nginx_net
+    env_file: .env
+    build:
+      context: ./
+      dockerfile: Dockerfile
+    ports:
+      - 9966
+
+networks:
+  nginx_net:
+    external: true

content

@@ -1 +0,0 @@
-Subproject commit 72aaaa2a262d8322bd449363e7b75b326a3a54be

netlify.toml

@@ -1,10 +0,0 @@
-[build]
-  command = "npm run build"
-  publish = "dist"
-  functions = "netlify/functions"
-
-[[redirects]]
-  from = "/api/*" # simplify all calls to serverless functions
-  to = "/.netlify/functions/:splat" # all function calls will go to this path
-  status = 200 # ok code
-  force = true # ensure to always redirect

netlify/functions/views.ts

@@ -1,35 +0,0 @@
-import { Handler } from "@netlify/functions";
-import { redisClient } from "../../redis";
-
-const getViewsBySlug = async (slug: string): Promise<number> => {
-	let views = 1;
-	const data = await redisClient.get(`views:${slug}`);
-	if (data) views = Number.parseInt(data, 10);
-	if (Number.isNaN(views)) views = 1;
-	return views;
-};
-
-const handler: Handler = async (event) => {
-	const slug = event.queryStringParameters?.slug;
-
-	switch (event.httpMethod) {
-		case "GET": {
-			if (!slug) return { statusCode: 400, body: "Bad request." };
-			const views = await getViewsBySlug(slug);
-			return { statusCode: 200, body: views.toString() };
-		}
-		case "POST": {
-			if (!slug) return { statusCode: 400, body: "Bad request." };
-			const views = await redisClient.incr(`views:${slug}`);
-			return { statusCode: 200, body: views.toString() };
-		}
-		default: {
-			return {
-				statusCode: 500,
-				body: "Unrecognized HTTP Method, must be one of GET/POST",
-			};
-		}
-	}
-};
-
-export { handler };

package.json

@@ -1,55 +1,53 @@
 {
 	"name": "yarkov.tech",
-	"version": "1.2.7",
-	"private": true,
+	"private": false,
+	"version": "3.0.1",
 	"description": "Personal website created with Astro.",
 	"author": {
 		"name": "Sergey Yarkov",
-		"email": "serzh.yarkov@gmail.com",
+		"email": "email@yarkov.tech",
 		"url": "https://yarkov.tech"
 	},
-	"type": "module",
 	"license": "MIT",
+	"type": "module",
 	"scripts": {
-		"dev": "astro dev --host",
-		"start": "astro dev",
-		"build": "astro build",
-		"preview": "astro preview --host",
-		"format": "prettier --write ./src/\"**/*.{js,jsx,ts,tsx,json,astro}\"",
-		"lint": "eslint '**/*.{js,mjs,ts,tsx}'"
-	},
-	"devDependencies": {
-		"@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.3",
-		"@types/html-escaper": "^3.0.0",
-		"@types/mdx": "^2.0.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.27.0",
-		"eslint-plugin-solid": "^0.8.0",
-		"hast-util-to-string": "^2.0.0",
-		"hastscript": "^7.1.0",
-		"html-escaper": "^3.0.3",
-		"mime-types": "^2.1.35",
-		"netlify-plugin-minify-html": "^0.3.1",
-		"prettier": "^2.7.1",
-		"prettier-plugin-astro": "^0.7.0",
-		"rehype-autolink-headings": "^6.1.1",
-		"rehype-slug": "^5.1.0",
-		"remark-gfm": "^3.0.1",
-		"remark-smartypants": "^2.0.0",
-		"sass": "^1.56.1",
-		"solid-js": "^1.6.2"
+		"dev": "astro dev",
+		"build": "astro check && astro build",
+		"start": "node --env-file=.env ./dist/server/entry.mjs",
+		"preview": "astro preview",
+		"astro": "astro",
+		"telemetry-disable": "astro telemetry disable",
+		"codegen": "graphql-codegen --require dotenv/config --config codegen.ts --watch"
 	},
 	"dependencies": {
-		"@netlify/functions": "^1.3.0",
-		"ioredis": "^5.2.4",
-		"quicklink": "^2.3.0",
-		"sharp": "^0.31.2"
+		"@astrojs/check": "^0.9.5",
+		"@astrojs/node": "^9.5.0",
+		"@astrojs/rss": "^4.0.13",
+		"@astrojs/solid-js": "^5.1.3",
+		"@iconify-json/mdi": "^1.2.3",
+		"@types/markdown-it": "^14.1.2",
+		"astro": "^5.15.8",
+		"astro-icon": "^1.1.5",
+		"graphql": "^16.12.0",
+		"hast-util-select": "^6.0.4",
+		"markdown-it": "^14.1.0",
+		"markdown-it-anchor": "^9.2.0",
+		"markdown-it-prism": "^3.0.1",
+		"markdown-it-table-of-contents": "^1.1.0",
+		"mime-types": "^2.1.35",
+		"sharp": "^0.32.6",
+		"solid-js": "^1.7.12"
+	},
+	"devDependencies": {
+		"@0no-co/graphqlsp": "^1.15.1",
+		"@graphql-codegen/cli": "^6.1.0",
+		"@graphql-codegen/schema-ast": "^5.0.0",
+		"@parcel/watcher": "^2.5.1",
+		"@types/html-escaper": "^3.0.4",
+		"@types/mime-types": "^2.1.4",
+		"@types/remark-prism": "^1.3.7",
+		"dotenv": "^17.2.3",
+		"sass": "^1.68.0",
+		"typescript": "^5.9.3"
 	}
 }

public/robots.txt

@@ -1,4 +1,4 @@
 User-agent: *
 Allow: /
 
-Sitemap: https://yarkov.tech/sitemap-index.xml
+Sitemap: https://yarkov.tech/sitemap.xml

redis.ts

@@ -1,9 +0,0 @@
-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 };

siteconfig.json

@@ -0,0 +1,15 @@
+{
+  "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,
+  "name": "yarkov.tech",
+  "author": "Sergey Yarkov"
+}

src/actions/index.ts

@@ -0,0 +1,42 @@
+import { ActionError, defineAction } from "astro:actions";
+import { z } from "astro/zod";
+import { createAppeal, getLatestAppealsByClientIp } from "../queries";
+
+const CREATE_APPEAL_LIMIT_HRS = 1;
+const APPEALS_LAST_HRS_LIMIT = 2;
+
+export const server = {
+	appeal: defineAction({
+		accept: "form",
+		input: z.object({
+			name: z.string(),
+			email: z.string().email(),
+			subject: z.string(),
+			message: z.string(),
+		}),
+		handler: async (data, ctx) => {
+			const currentDate = new Date();
+			const latestAppeals = await getLatestAppealsByClientIp(ctx.clientAddress, 5);
+			const appealsLastHrs = latestAppeals.filter((a) => {
+				const hourDiff = (currentDate.getTime() - new Date(a.date_created).getTime()) / (1000 * 60 * 60);
+				return hourDiff <= CREATE_APPEAL_LIMIT_HRS;
+			});
+
+			if (appealsLastHrs.length >= APPEALS_LAST_HRS_LIMIT) {
+				throw new ActionError({
+					code: "TOO_MANY_REQUESTS",
+					message: "Appeal create limit exceeded.",
+				});
+			}
+
+			const appeal = await createAppeal({ ...data, client_ip: ctx.clientAddress });
+
+			if (appeal) return true;
+
+			throw new ActionError({
+				code: "INTERNAL_SERVER_ERROR",
+				message: "Unable to create appeal.",
+			});
+		},
+	}),
+};

src/components/AboutMeContent.astro

@@ -0,0 +1,12 @@
+---
+import { getLanguageFromURL } from "@i18n/utils";
+import { getAboutMe } from "../queries/global";
+import { markdownToHTML } from "../utils/markdown";
+import ArticleContent from "@components/ArticleContent.astro";
+
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+const data = await getAboutMe(pageLang);
+const aboutMeHtmlContent = await markdownToHTML(data?.about || "");
+---
+
+<ArticleContent set:html={aboutMeHtmlContent} />

src/components/AlternateLangLink/AlternateLangLink.astro

@@ -1,30 +0,0 @@
----
-/**
- * This components is used in article layout to display links in alternative lanugages.
- */
-import { DEFAULT_LANGUAGE } from "@root/config";
-import { getLanguageFromURL } from "@root/utils";
-
-export interface Props extends astroHTML.JSX.AnchorHTMLAttributes {
-	lang: LanguageKeys;
-}
-
-const { pathname } = Astro.url;
-const siteLang = getLanguageFromURL(pathname);
-const { lang, ...attrs } = Astro.props as Props;
-let href: string;
-if (lang === DEFAULT_LANGUAGE) {
-	href = `/${pathname.split("/").slice(2).join("/")}`;
-} else {
-	href = `/${lang}/`;
-	if (siteLang !== DEFAULT_LANGUAGE) {
-		href += `${pathname.split("/").slice(2).join("/")}`;
-	} else {
-		href += `${pathname.split("/").slice(1).join("/")}`;
-	}
-}
----
-
-<a href={href} {...attrs}>
-	<slot />
-</a>

src/components/AlternateLangLink/index.ts

@@ -1 +0,0 @@
-export { default } from "./AlternateLangLink.astro";

src/components/Analytics/YaMetrika.astro

@@ -0,0 +1,19 @@
+---
+import { getSiteSettings } from '@/src/queries';
+
+const siteSettings = await getSiteSettings();
+---
+
+{siteSettings ? <script type="text/javascript" define:vars={{ counter: siteSettings.ym_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> : null}

src/components/ArticleComments.astro

@@ -0,0 +1,53 @@
+---
+import UIString from "./UIString.astro";
+
+interface Props {
+	url: string;
+	id: string;
+	lang: LanguageKeys;
+}
+
+const { url, id, lang } = Astro.props as Props;
+---
+
+<footer itemscope itemtype="http://schema.org/UserComments">
+	<h2><UIString key={"articlePost.comments"} />:</h2>
+	<div id="remark42"></div>
+</footer>
+
+<script is:inline define:vars={{ url, id, lang }}>
+	window.remark_config = {
+		host: "https://remark.yarkov.tech",
+		site_id: "remark",
+		theme: window.theme,
+		show_email_subscription: true,
+		url,
+		locale: lang,
+		no_footer: true,
+	};
+
+	var e = document.getElementById("remark42");
+	if ("IntersectionObserver" in window) {
+		var t = new IntersectionObserver((e) => {
+			e.forEach((e) => {
+				if (e.isIntersecting) {
+					((e, n) => {
+						for (var o = 0; o < e.length; o++) {
+							var r = n.createElement("script"),
+								c = ".js",
+								d = n.head || n.body;
+							("noModule" in r ? ((r.type = "module"), (c = ".mjs")) : (r.async = !0),
+								(r.defer = !0),
+								(r.src = remark_config.host + "/web/" + e[o] + c),
+								d.appendChild(r));
+						}
+					})(remark_config.components || ["embed"], document);
+					t.unobserve(e.target);
+				}
+			});
+		});
+		t.observe(e);
+	}
+
+	window.addEventListener("onthemetoggled", (e) => window.REMARK42.changeTheme(e.detail));
+</script>

src/components/ArticleComments/ArticleComments.astro

@@ -1,29 +0,0 @@
----
-import UIString from "../UIString";
----
-
-<footer>
-	<h2><UIString key={"articlePost.comments"} /></h2>
-	<div id="comments"></div>
-</footer>
-
-<script>
-	const $commentsWrapper = document.getElementById("comments");
-	const $commentsScript = document.createElement("script");
-
-	$commentsScript.async = true;
-	$commentsScript.src = "https://utteranc.es/client.js";
-	$commentsScript.setAttribute("repo", "sergeyyarkov/comments");
-	$commentsScript.setAttribute("issue-term", "title");
-	$commentsScript.setAttribute("label", "Comment");
-	$commentsScript.setAttribute("id", "utterances");
-	$commentsScript.setAttribute("crossorigin", "anonymous");
-
-	if (window.theme) {
-		$commentsScript.setAttribute("theme", window.theme === "dark" ? "dark-blue" : "github-light");
-	} else {
-		$commentsScript.setAttribute("theme", "github-light");
-	}
-
-	if ($commentsWrapper) $commentsWrapper.appendChild($commentsScript);
-</script>

src/components/ArticleComments/index.ts

@@ -1 +0,0 @@
-export { default } from "./ArticleComments.astro";

src/components/ArticleContent.astro

@@ -0,0 +1,271 @@
+---
+import { useTranslation } from "../i18n/utils";
+
+const t = useTranslation(Astro);
+const tocTitle = t("article.tableOfContents");
+---
+
+<div itemprop='articleBody' class='article-content'><slot /></div>
+
+<script is:inline define:vars={{ tocTitle }}>
+	var $toc = document.querySelector(".toc");
+	if ($toc) {
+		$toc.querySelector("summary").textContent = tocTitle;
+		document.querySelector("body")?.addEventListener("click", () => $toc?.removeAttribute("open"));
+	}
+</script>
+
+<style lang='scss' is:global>
+	.article-content {
+		padding-top: 20px;
+		& h1,
+		h2,
+		h3,
+		h4,
+		h5,
+		h6 {
+			margin-top: 3rem;
+			margin-bottom: 1rem;
+			padding-bottom: 5px;
+		}
+
+		& p,
+		em,
+		q {
+			line-height: var(--line-height-base);
+			font-size: var(--font-size-lg);
+		}
+
+		& p {
+			margin: 1.5rem 0;
+		}
+
+		& ul,
+		ol {
+			padding-left: 1.5rem;
+			line-height: var(--line-height-base);
+			margin: 1.5rem 0;
+			& li {
+				font-size: var(--font-size-lg);
+				line-height: var(--line-height-base);
+				margin-bottom: 0.5rem;
+				padding-left: 0.25rem;
+			}
+		}
+
+		& q {
+			font-style: italic;
+			quotes: "« " " »";
+		}
+
+		& figure {
+			margin: 0 0 1em;
+			& figcaption {
+				color: var(--color-gray-400);
+			}
+		}
+
+		& hr {
+			background-color: var(--border-color);
+			margin: 40px 0;
+			border: none;
+			height: 1px;
+		}
+
+		& pre {
+			font-size: var(--font-size-sm);
+			border-radius: var(--border-radius-md);
+		}
+
+		& :not(pre) > code {
+			-webkit-font-smoothing: subpixel-antialiased;
+			background: var(--background-inline-code);
+			border-radius: var(--border-radius-lg);
+			font-size: 1rem;
+			font-weight: 500;
+			font-family: "IBM Plex Mono", monospace;
+			padding: 0.2rem 0.3rem;
+		}
+
+		& figcaption {
+			font-style: italic;
+			font-size: 1em;
+			text-align: center;
+			margin: 0.7rem 0;
+		}
+
+		& .table-wrapper {
+			overflow-x: auto;
+			margin-bottom: 1.25rem;
+		}
+
+		& table {
+			display: table;
+			border-radius: var(--border-radius-md);
+			min-width: 100%;
+			font-size: var(--font-size-md);
+			border: 1px solid var(--border-color);
+			border-collapse: separate;
+			border-spacing: 0;
+			margin: 5px 0;
+			& thead th {
+				background-color: var(--background-card);
+				border-top-left-radius: var(--border-radius-md);
+				border-top-right-radius: var(--border-radius-md);
+			}
+			& td,
+			th {
+				border-bottom: 1px solid var(--border-color);
+				padding: 0.5rem;
+				text-align: left;
+			}
+			& tbody tr:last-child td {
+				border: none;
+			}
+		}
+
+		& ul {
+			& li {
+				list-style: disc;
+				& li {
+					list-style-type: circle;
+				}
+				&::marker {
+					color: var(--color-blue-500);
+					font-size: 1.3rem;
+					line-height: var(--line-height-none);
+				}
+			}
+		}
+
+		& blockquote {
+			margin: 1.5rem 0;
+			font-style: italic;
+			border-left: 0.25rem solid var(--border-color);
+			padding-left: 1rem;
+		}
+
+		& .heading-wrapper {
+			border-bottom: 1px solid var(--border-color);
+			margin: 3rem 0 1rem 0;
+			padding-bottom: 0.35rem;
+
+			& h2 {
+				font-size: var(--font-size-2xl);
+			}
+
+			& h3 {
+				font-size: var(--font-size-xl);
+			}
+
+			& h4 {
+				font-size: var(--font-size-lg);
+			}
+
+			& h1,
+			h2,
+			h3,
+			h4,
+			h5,
+			h6 {
+				margin: 0;
+			}
+		}
+
+		& .heading-wrapper {
+			display: flex;
+			align-items: center;
+			flex-direction: row-reverse;
+			justify-content: flex-end;
+			margin-inline-start: 1px;
+			& .anchor-link {
+				position: relative;
+				display: inline-flex;
+				text-decoration: none;
+				justify-content: center;
+				align-items: center;
+				opacity: 0;
+				& .anchor-icon {
+					position: absolute;
+					left: -25px;
+					top: -13px;
+				}
+				& svg {
+					vertical-align: middle;
+				}
+			}
+			& .anchor-label {
+				position: absolute;
+				width: 0;
+				height: 0;
+				padding: 0;
+				overflow: hidden;
+				white-space: nowrap;
+			}
+			&:hover {
+				& .anchor-link {
+					opacity: 1;
+				}
+			}
+		}
+		& .languages-available {
+			margin: 25px 0;
+			font-size: var(--font-size-lg);
+			& a:not(:last-child)::after {
+				content: ",";
+			}
+		}
+
+		.toc {
+			cursor: pointer;
+			display: block;
+			position: absolute;
+			& summary {
+				font-size: var(--font-size-lg);
+			}
+			& nav {
+				background-color: var(--background-card);
+				border: 1px solid var(--border-color);
+				border-radius: var(--border-radius-lg);
+				margin-top: 10px;
+				padding: 10px 16px;
+				& ul {
+					margin: 6px 0;
+					padding-left: 0;
+					margin-left: 0;
+					& a {
+						display: block;
+						// margin-bottom: 10px;
+						color: var(--font-color);
+						text-decoration: none;
+						font-size: var(--font-size-md);
+						&:hover {
+							color: var(--color-blue-500);
+						}
+					}
+					& li {
+						list-style: none;
+						padding: 0;
+					}
+					& li ul {
+						margin-left: 15px;
+					}
+				}
+			}
+		}
+	}
+
+	@media screen and (max-width: 800px) {
+		.article-content {
+			& .heading-wrapper {
+				flex-direction: row;
+				justify-content: flex-start;
+				& .anchor-link {
+					& .anchor-icon {
+						left: 5px;
+					}
+				}
+			}
+		}
+	}
+</style>

src/components/ArticleContent/ArticleContent.astro

@@ -1,5 +0,0 @@
----
-import "./ArticleContent.scss";
----
-
-<div itemprop="articleBody" class="article-content"><slot /></div>

src/components/ArticleContent/ArticleContent.scss

@@ -1,221 +0,0 @@
-.article-content {
-	& h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6 {
-		margin-top: 3rem;
-		margin-bottom: 1rem;
-		padding-bottom: 5px;
-	}
-
-	& p,
-	em,
-	q {
-		line-height: var(--line-height-base);
-		font-size: var(--font-size-lg);
-	}
-
-	& p {
-		margin: 1.5rem 0;
-	}
-
-	& ul,
-	ol {
-		padding-left: 1.5rem;
-		line-height: var(--line-height-base);
-		margin: 1.5rem 0;
-		& li {
-			font-size: var(--font-size-lg);
-			line-height: var(--line-height-base);
-			margin-bottom: 0.5rem;
-			padding-left: 0.25rem;
-		}
-	}
-
-	& q {
-		font-style: italic;
-		quotes: "« " " »";
-	}
-
-	& a {
-		color: var(--font-color);
-		text-decoration: underline;
-		text-decoration-color: var(--color-blue-500);
-		text-underline-offset: 2.2px;
-		text-decoration-thickness: 2px;
-		font-weight: 500;
-		&:hover {
-			color: var(--color-blue-500);
-			text-decoration-thickness: 2px;
-		}
-	}
-
-	& figure {
-		margin: 0 0 1em;
-		& figcaption {
-			color: var(--color-gray-400);
-		}
-	}
-
-	& hr {
-		background-color: var(--border-color);
-		margin: 40px 0;
-		border: none;
-		height: 1px;
-	}
-
-	& pre {
-		font-size: var(--font-size-sm);
-		border-radius: var(--border-radius-md);
-	}
-
-	& :not(pre) > code {
-		-webkit-font-smoothing: subpixel-antialiased;
-		background: var(--background-inline-code);
-		border-radius: var(--border-radius-lg);
-		font-size: 1rem;
-		font-weight: 500;
-		font-family: "IBM Plex Mono", monospace;
-		padding: 0.2rem 0.3rem;
-	}
-
-	& figcaption {
-		font-style: italic;
-		font-size: 1em;
-		text-align: center;
-		margin: 0.7rem 0;
-	}
-
-	& .table-wrapper {
-		overflow-x: auto;
-		margin-bottom: 1.25rem;
-	}
-
-	& table {
-		display: table;
-		border-radius: var(--border-radius-md);
-		min-width: 100%;
-		font-size: var(--font-size-md);
-		border: 1px solid var(--border-color);
-		border-collapse: separate;
-		border-spacing: 0;
-		margin: 5px 0;
-		& thead th {
-			background-color: var(--background-card);
-			border-top-left-radius: var(--border-radius-md);
-			border-top-right-radius: var(--border-radius-md);
-		}
-		& td,
-		th {
-			border-bottom: 1px solid var(--border-color);
-			padding: 0.5rem;
-			text-align: left;
-		}
-		& tbody tr:last-child td {
-			border: none;
-		}
-	}
-
-	& li {
-		list-style: disc;
-		& li {
-			list-style-type: circle;
-		}
-		&::marker {
-			color: var(--color-blue-500);
-			font-size: 1.3rem;
-			line-height: var(--line-height-none);
-		}
-	}
-
-	& blockquote {
-		margin: 1.5rem 0;
-		font-style: italic;
-		border-left: 0.25rem solid var(--border-color);
-		padding-left: 1rem;
-	}
-
-	& .heading-wrapper {
-		border-bottom: 1px solid var(--border-color);
-		margin: 3rem 0 1rem 0;
-		padding-bottom: 0.35rem;
-
-		& h2 {
-			font-size: var(--font-size-2xl);
-		}
-
-		& h3 {
-			font-size: var(--font-size-xl);
-		}
-
-		& h4 {
-			font-size: var(--font-size-lg);
-		}
-
-		& h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			margin: 0;
-		}
-	}
-
-	& .heading-wrapper {
-		display: flex;
-		align-items: center;
-		flex-direction: row-reverse;
-		justify-content: flex-end;
-		margin-inline-start: 1px;
-		& .anchor-link {
-			position: relative;
-			display: inline-flex;
-			text-decoration: none;
-			justify-content: center;
-			align-items: center;
-			opacity: 0;
-			& .anchor-icon {
-				position: absolute;
-				left: -25px;
-				top: -13px;
-			}
-			& svg {
-				vertical-align: middle;
-			}
-		}
-		& .anchor-label {
-			position: absolute;
-			width: 0;
-			height: 0;
-			padding: 0;
-			overflow: hidden;
-			white-space: nowrap;
-		}
-		&:hover {
-			& .anchor-link {
-				opacity: 1;
-			}
-		}
-	}
-	& .languages-available {
-		margin: 25px 0;
-		font-size: var(--font-size-lg);
-	}
-}
-
-@media screen and (max-width: 800px) {
-	.article-content {
-		& .heading-wrapper {
-			flex-direction: row;
-			justify-content: flex-start;
-			& .anchor-link {
-				& .anchor-icon {
-					left: 5px;
-				}
-			}
-		}
-	}
-}

src/components/ArticleContent/index.ts

@@ -1 +0,0 @@
-export { default } from "./ArticleContent.astro";

src/components/ArticleCover.astro

@@ -0,0 +1,31 @@
+---
+import { Image } from "astro:assets";
+
+export interface Props {
+	src: string;
+	alt?: string;
+}
+
+const { src, alt } = Astro.props as Props;
+---
+
+<div class="cover">
+	<Image
+		itemprop="image"
+		src={src}
+		width={700}
+		height={400}
+		sizes="(max-width: 450px) 450px, 700px"
+		format="webp"
+		alt={alt ? alt : ""}
+	/>
+</div>
+
+<style lang="scss">
+	.cover {
+		margin: 20px 0;
+		& figure {
+			margin: 0;
+		}
+	}
+</style>

src/components/ArticleItem/ArticleItem.tsx

@@ -1,34 +1,41 @@
-/* eslint-disable solid/reactivity */
 import type { Component } from "solid-js";
-import { createDateFormatter } from "@utils/date";
+import { createRelativeArticleUrl, createDateFormatter } from "@root/utils";
+import { DEFAULT_LANGUAGE, URL_BLOG_PREFIX } from "@root/constants";
 import "./ArticleItem.scss";
-import { DEFAULT_LANGUAGE } from "@root/config";
+import { Article_Translations } from "@/src/graphql/graphql";
 
 export type ArticleItemProps = {
-	data: ArticleType;
-	lang: string;
+	title: Article_Translations["title"];
+	pub_date: Article_Translations["pub_date"];
+	slug: Article_Translations["slug"];
+	languages_code: Article_Translations["languages_code"];
+	pageLang: string;
 };
 
-export const ArticleItem: Component<ArticleItemProps> = (props) => {
-	const isNonDefaultLanguage = props.data.lang && props.data.lang !== props.lang;
-	const hrefLangPrefix = props.data.lang && props.data.lang !== DEFAULT_LANGUAGE ? `/${props.data.lang}` : "";
+const ArticleItem: Component<ArticleItemProps> = (props) => {
+	const { title, pub_date: pubDate, slug, languages_code, pageLang } = props;
+	const articleLang = languages_code?.code.split("-")[0] || DEFAULT_LANGUAGE;
+
+	const href = createRelativeArticleUrl({ pubDate, slug, articleLang }, URL_BLOG_PREFIX);
+
 	return (
-		<article class="article-item">
-			<a
-				href={`${hrefLangPrefix}/blog/${new Date(props.data.published_at).toLocaleDateString("en-CA")}/${
-					props.data.slug
-				}/`}
+		<article
+			itemprop="blogPosts"
+			itemscope
+			itemtype="http://schema.org/BlogPosting"
+			class="article-item"
 		>
+			<a href={href}>
 				<div class="flex">
-					<h3>{props.data.title}</h3>
-					{isNonDefaultLanguage && <sup>{props.data.lang.toLocaleUpperCase()}</sup>}
+					<h3 itemprop="headline">{title}</h3>
+					{articleLang !== pageLang && <sup>{articleLang.toLocaleUpperCase()}</sup>}
 				</div>
 				<p>
-					<time datetime={props.data.published_at.toString()}>
-						{createDateFormatter(props.lang).format(new Date(props.data.published_at))}
-					</time>
+					<time datetime={pubDate}>{createDateFormatter(pageLang).format(new Date(pubDate))}</time>
 				</p>
 			</a>
 		</article>
 	);
 };
+
+export default ArticleItem;

src/components/ArticleItem/index.ts

@@ -1 +1 @@
-export * from "./ArticleItem";
+export { default } from "./ArticleItem";

src/components/ArticlePost.astro

@@ -0,0 +1,193 @@
+---
+import { Icon } from "astro-icon/components";
+import { createDateFormatter } from "@root/utils";
+import ArticleCover from "@components/ArticleCover.astro";
+import ArticleComments from "@components/ArticleComments.astro";
+import TranslatedLink from "@components/TranslatedLink.astro";
+import AvailableOnLangs from "@components/AvailableOnLangs.astro";
+import { useTranslation, getLanguageFromURL } from "@i18n/utils";
+import { DIRECTUS_URL } from "astro:env/server";
+import { Article_TranslationsQuery } from "../graphql/graphql";
+
+export type Props = {
+	article: Article_TranslationsQuery["article_translations"][0];
+	lang: string;
+};
+
+const { article } = Astro.props as Props;
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+const canonicalUrl = new URL(Astro.url.pathname, Astro.site);
+const {
+	cover_image,
+	title,
+	author,
+	description,
+	tags,
+	pub_date,
+	slug,
+	views,
+	article_id: articleTranslations,
+} = article;
+
+const t = useTranslation(Astro);
+// const articleCodeLangs = articleTranslations?.translations?.map((t) => t?.languages_code?.code);
+---
+
+<article itemscope itemtype="http://schema.org/BlogPosting" class="article">
+	<header>
+		<div>
+			{
+				tags && (
+					<div class="tags">
+						<ul itemprop="keywords">
+							{tags.map((tag) => (
+								<li>
+									<TranslatedLink rel="tag" to={`/articles/?tags=${tag?.tag_id?.title}`}>
+										{tag?.tag_id?.title}
+									</TranslatedLink>
+								</li>
+							))}
+						</ul>
+					</div>
+				)
+			}
+			<div class="views">
+				<Icon name="eye" width="21" height="21" />
+				<span><span>{views}</span>&nbsp;{t("article.views")}</span>
+			</div>
+		</div>
+		<div class="heading">
+			<h1 itemprop="headline">{title}</h1>
+		</div>
+		<div class="published">
+			<time itemprop="datePublished" datetime={pub_date}>
+				{createDateFormatter(pageLang).format(new Date(pub_date))}&nbsp;
+			</time>
+			<span itemprop="author">{`${author?.first_name} ${author?.last_name}`}</span>
+		</div>
+		{cover_image && <ArticleCover src={`${DIRECTUS_URL}/assets/${cover_image.filename_disk}`} alt={title} />}
+		<div class="description">
+			<p>
+				{description}
+			</p>
+		</div>
+		<AvailableOnLangs articles={articleTranslations} />
+	</header>
+	<slot />
+	<ArticleComments lang={pageLang} url={canonicalUrl.href} id={slug} />
+</article>
+
+<!-- <script define:vars={{ articleCodeLangs }} is:inline>
+	console.log(navigator.language, articleCodeLangs);
+</script> -->
+
+<style lang="scss" is:global>
+	.article {
+		& header {
+			& div:nth-child(1) {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				& .views {
+					display: flex;
+					align-items: center;
+					& span {
+						margin-left: 3.5px;
+						font-size: var(--font-size-sm);
+						color: var(--font-color-grayer);
+					}
+				}
+			}
+			& .heading {
+				margin-top: 1.125rem;
+
+				& h1 {
+					font-weight: 600;
+					font-size: 2.125rem;
+				}
+
+				& p {
+					font-size: 1.125rem;
+					line-height: var(--line-height-base);
+				}
+			}
+
+			& .tags {
+				font-size: var(--font-size-sm);
+				text-transform: uppercase;
+				& ul {
+					display: flex;
+					flex-wrap: wrap;
+					column-gap: 7px;
+					row-gap: 7px;
+					& li:not(:last-child) a::after {
+						content: ",";
+					}
+				}
+			}
+
+			& .published {
+				margin-bottom: 1.25em;
+				color: var(--font-color-gray);
+			}
+		}
+
+		& a {
+			color: var(--font-color);
+			text-decoration: underline;
+			text-decoration-color: var(--color-blue-500);
+			text-underline-offset: 2.2px;
+			text-decoration-thickness: 2px;
+			font-weight: 500;
+			&:hover {
+				color: var(--color-blue-500);
+				text-decoration-thickness: 2px;
+			}
+		}
+
+		& .cover {
+			margin: 20px 0;
+			& figure {
+				margin: 0;
+			}
+		}
+
+		& .description p {
+			line-height: var(--line-height-base);
+			font-size: var(--font-size-lg);
+		}
+
+		& footer {
+			margin-top: 5rem;
+		}
+
+		& img {
+			border-radius: var(--border-radius-lg);
+			display: block;
+			margin: 0 auto;
+			max-width: 100%;
+			height: auto;
+
+			&:not([src*=".svg"]) {
+				filter: var(--image-filter);
+			}
+		}
+	}
+
+	@media screen and (max-width: 560px) {
+		.article {
+			& header {
+				& div:nth-child(1) {
+					flex-direction: column;
+					align-items: flex-start;
+					& .tags {
+						margin-bottom: 15px;
+					}
+				}
+				& .heading h1 {
+					font-size: 2rem;
+				}
+			}
+		}
+	}
+</style>

src/components/ArticlePost/ArticlePost.astro

@@ -1,90 +0,0 @@
----
-import { Picture } from "@astrojs/image/components";
-import { Icon } from "astro-icon";
-import { createDateFormatter } from "@root/utils";
-import { isURL } from "@utils/string";
-import ArticleComments from "@components/ArticleComments";
-import TranslatedLink from "../TranslatedLink";
-import "./ArticlePost.scss";
-import { useTranslation } from "@root/i18n/utils";
-
-export type Props = {
-	data: ArticleType;
-	lang: string;
-};
-
-const { data, lang } = Astro.props as Props;
-const { slug, title, description, coverImage, tags, author, published_at } = data;
-const t = useTranslation(Astro);
----
-
-<article itemscope itemtype="http://schema.org/BlogPosting" class="article">
-	<header>
-		<div>
-			<div class="tags">
-				<ul itemprop="keywords">
-					{
-						tags.map((tag) => (
-							<li>
-								<TranslatedLink rel="tag" to={`/articles/?tags=${tag.toLocaleLowerCase()}`}>{`${tag}${
-									tags.at(-1) === tag ? "" : ","
-								}`}</TranslatedLink>
-							</li>
-						))
-					}
-				</ul>
-			</div>
-			<div class="views">
-				<Icon name="eye" width="21" height="21" />
-				<span><span id="views">---</span>&nbsp;{t("article.views")}</span>
-			</div>
-		</div>
-		<div class="heading">
-			<h1 itemprop="headline">{title}</h1>
-		</div>
-		<div class="published">
-			<time itemprop="datePublished" datetime={published_at}
-				>{createDateFormatter(lang).format(new Date(published_at))}
-			</time>
-			<span itemprop="author">{author}</span>
-		</div>
-		{
-			coverImage && (
-				<div class="cover">
-					<figure>
-						<Picture
-							itemprop="image"
-							src={isURL(coverImage) ? coverImage : `../../../content/assets/images/${coverImage}`}
-							sizes="(max-width: 450px) 450px, 700px"
-							widths={[450, 700]}
-							formats={["webp"]}
-							aspectRatio={"16:9"}
-							alt={title}
-						/>
-					</figure>
-				</div>
-			)
-		}
-		<div class="description">
-			<p>
-				{description}
-			</p>
-		</div>
-	</header>
-	<slot />
-	<ArticleComments />
-</article>
-
-<script define:vars={{ slug }}>
-	(async () => {
-		const response = await fetch(`/api/views?slug=${slug}`, { method: "POST" });
-
-		if (!response.ok) return;
-
-		const views = await response.text();
-		const $views = document.getElementById("views");
-
-		if (isNaN(parseInt(views, 10))) return;
-		if ($views) $views.textContent = views;
-	})();
-</script>

src/components/ArticlePost/ArticlePost.scss

@@ -1,92 +0,0 @@
-.article {
-	& header {
-		& div:nth-child(1) {
-			display: flex;
-			justify-content: space-between;
-			align-items: center;
-			& .views {
-				display: flex;
-				align-items: center;
-				& span {
-					margin-left: 3.5px;
-					font-size: var(--font-size-sm);
-					color: var(--font-color-grayer);
-				}
-			}
-		}
-		& .heading {
-			margin-top: 1.125rem;
-
-			& h1 {
-				font-weight: 600;
-				font-size: 2.125rem;
-			}
-
-			& p {
-				font-size: 1.125rem;
-				line-height: var(--line-height-base);
-			}
-		}
-
-		& .tags {
-			font-size: var(--font-size-sm);
-			text-transform: uppercase;
-			& ul {
-				display: flex;
-				flex-wrap: wrap;
-				column-gap: 7px;
-				row-gap: 7px;
-			}
-		}
-
-		& .published {
-			margin-bottom: 1.25em;
-			color: var(--font-color-gray);
-		}
-	}
-
-	& .cover {
-		margin: 20px 0;
-		& figure {
-			margin: 0;
-		}
-	}
-
-	& .description p {
-		line-height: var(--line-height-base);
-		font-size: var(--font-size-lg);
-	}
-
-	& footer {
-		margin-top: 5rem;
-	}
-
-	& img {
-		border-radius: var(--border-radius-lg);
-		display: block;
-		margin: 0 auto;
-		max-width: 100%;
-		height: auto;
-
-		&:not([src*=".svg"]) {
-			filter: var(--image-filter);
-		}
-	}
-}
-
-@media screen and (max-width: 560px) {
-	.article {
-		& header {
-			& div:nth-child(1) {
-				flex-direction: column;
-				align-items: flex-start;
-				& .tags {
-					margin-bottom: 15px;
-				}
-			}
-			& .heading h1 {
-				font-size: 2rem;
-			}
-		}
-	}
-}

src/components/ArticlePost/index.ts

@@ -1 +0,0 @@
-export { default } from "./ArticlePost.astro";

src/components/ArticlesList.astro

@@ -0,0 +1,14 @@
+---
+import { useTranslation, getLanguageFromURL } from "@i18n/utils";
+import * as utils from "@utils/article";
+import List from "@components/ArticlesList";
+import { getArticleList } from "@root/queries/article";
+
+const t = useTranslation(Astro);
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+const data = await getArticleList();
+const articles = utils.filterArticlesByPageLang(data, pageLang);
+const articleBlocks = utils.formatToArticleBlocks(articles);
+---
+
+<List client:load i18n={{ "articles.empty": t("articles.empty") }} articles={articleBlocks} pageLang={pageLang} />

src/components/ArticlesList/ArticlesList.scss

@@ -1,7 +1,4 @@
 .articles {
-	&-tags {
-		margin-bottom: 45px;
-	}
 	&-list {
 		&__wrapper {
 			margin-top: 40px;

src/components/ArticlesList/ArticlesList.tsx

@@ -1,97 +1,93 @@
 import type { Component } from "solid-js";
-
 import { createSignal, createEffect, For } from "solid-js";
-import { search, selectedTags } from "@stores/searchStore";
-import { findArticlesBySearch, findArticlesByTags, sortArtcilesByDate } from "@utils/articles";
-import { ArticleItem } from "@components/ArticleItem";
-import SearchInput from "@components/SearchInput";
-import TagsList from "@components/TagsList";
+import { search, selectedTags, setCount } from "@stores/searchStore";
+import ArticleItem from "@components/ArticleItem";
+import { ArticleQuery } from "@/src/graphql/graphql";
 import "./ArticlesList.scss";
 
-type UiStringsType = {
-	"input.search": string;
-	"articles.empty": string;
-};
+type UiStringsType = { "articles.empty": string };
+type Articles = ArticleQuery["article"][0]["translations"];
+type ArticlesBlockType = Record<string, Articles>;
 
 type ArticlesListProps = {
-	data: {
-		articles: ArticleBlockType;
-		tags: string[];
-	};
-	lang: string;
+	articles: ArticlesBlockType;
+	pageLang: string;
 	i18n: UiStringsType;
 };
 
 const ArticlesList: Component<ArticlesListProps> = (props) => {
-	// eslint-disable-next-line solid/reactivity
-	const [articles, setArticles] = createSignal<ArticleBlockType>(props.data.articles);
+	const [articles, setArticles] = createSignal<ArticlesBlockType>(props.articles);
 
-	/**
-	 * Sort articles by year in descending order
-	 */
-	const sortYears = (articles: ArticleBlockType) => {
+	const isEmpty = () => Object.keys(articles()).length === 0;
+
+	const sortByYears = (articles: ArticlesBlockType) => {
 		return Object.keys(articles)
 			.map(Number)
 			.sort((a, b) => b - a);
 	};
 
-	const isEmpty = () => Object.keys(articles()).length === 0;
-	const getLength = () => Object.values(articles()).flat().length;
+	const searchArticles = ({
+		params: { search, tags },
+	}: {
+		params: { search: string; tags?: string[] };
+	}): ArticlesBlockType => {
+		const filter = (cb: (articles: Articles) => Articles) => {
+			return Object.fromEntries(
+				Object.keys(props.articles)
+					.map((year) => [year, cb(props.articles[year])])
+					.filter((articles) => articles[1]?.length !== 0)
+			);
+		};
+
+		return filter((articles) => {
+			let filtered = articles?.filter(
+				(a) => a && a.title.toLocaleLowerCase().includes(search.trim().toLocaleLowerCase())
+			);
+			if (tags && tags.length > 0) {
+				filtered = filtered?.filter((a) =>
+					tags.some((t) => {
+						return a?.tags?.map((t) => t?.tag_id?.title).includes(t);
+					})
+				);
+			}
+			return filtered;
+		});
+	};
 
 	createEffect(() => {
-		let filtered = props.data.articles;
-
-		/**
-		 * Find articles by title
-		 */
-		if (search()) {
-			filtered = findArticlesBySearch(search().trim(), filtered);
+		const filtered = searchArticles({ params: { search: search(), tags: selectedTags() } });
 		setArticles(filtered);
-		}
-
-		/**
-		 * Find articles by selected tags
-		 */
-		if (selectedTags().length !== 0) {
-			filtered = findArticlesByTags(selectedTags(), filtered);
-			setArticles(filtered);
-
-			return;
-		}
-
-		/**
-		 * Set filtered variable as default value
-		 */
-		if (!search() && selectedTags().length === 0) {
-			filtered = props.data.articles;
-			setArticles(filtered);
-		}
+		setCount(Object.values(filtered).flat().length);
 	});
 
 	return (
 		<>
-			<SearchInput count={getLength()} placeholder={props.i18n["input.search"]} />
-			<TagsList data={props.data.tags} />
-			<div class="articles-list">
-				{isEmpty() ? (
+			<div itemscope itemtype="http://schema.org/Blog" class="articles-list">
+				{!isEmpty() ? (
+					<For each={sortByYears(articles())}>
+						{(year) => (
+							<div class="articles-list__wrapper">
+								<h2>{year}</h2>
+								<For each={articles()[year]}>
+									{(a) =>
+										a && (
+											<ArticleItem
+												slug={a.slug}
+												title={a.title}
+												languages_code={a.languages_code}
+												pub_date={a.pub_date}
+												pageLang={props.pageLang}
+											/>
+										)
+									}
+								</For>
+							</div>
+						)}
+					</For>
+				) : (
 					<div class="articles-list__empty">
 						<p>{props.i18n["articles.empty"]}</p>
 					</div>
-				) : (
-					<For
-						each={sortYears(articles())}
-						children={(year) => {
-							return (
-								<div class="articles-list__wrapper">
-									<h2>{year}</h2>
-									<For
-										each={sortArtcilesByDate(articles()[year])}
-										children={(article) => <ArticleItem lang={props.lang} data={article} />}
-									/>
-								</div>
-							);
-						}}
-					/>
 				)}
 			</div>
 		</>

src/components/ArticlesList/SearchInput/SearchInput.tsx

@@ -1,14 +1,11 @@
 import type { Component, JSX } from "solid-js";
-
 import { createEffect } from "solid-js";
-import { search, setSearch } from "@stores/searchStore";
+import { search, setSearch, count } from "@stores/searchStore";
 import * as utils from "@utils/history";
 import "./SearchInput.scss";
 
-type SearchInputProps = {
-	count: number;
-	placeholder?: string | undefined;
-};
+type UiStringsType = { "input.search": string };
+type SearchInputProps = { i18n: UiStringsType };
 
 const SearchInput: Component<SearchInputProps> = (props) => {
 	/**
@@ -16,7 +13,6 @@ const SearchInput: Component<SearchInputProps> = (props) => {
 	 */
 	const resetSearch = () => {
 		const url = utils.deleteParamFromUrl("search");
-
 		setSearch("");
 		history.replaceState(null, "", url);
 	};
@@ -33,7 +29,6 @@ const SearchInput: Component<SearchInputProps> = (props) => {
 		}
 
 		const url = utils.setParamToUrl("search", value.trim());
-
 		history.replaceState(null, "", `${location.pathname}?${url}`);
 		setSearch(value);
 	};
@@ -54,18 +49,25 @@ const SearchInput: Component<SearchInputProps> = (props) => {
 
 	return (
 		<div class="search-input">
-			<svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" data-filter="none">
+			<svg
+				width="25"
+				height="24"
+				viewBox="0 0 25 24"
+				xmlns="http://www.w3.org/2000/svg"
+				data-filter="none"
+			>
 				<path d="M10.6026 3.60001C11.8798 3.59993 13.1316 3.94283 14.2172 4.5901C15.3028 5.23736 16.179 6.16331 16.7472 7.26368C17.3154 8.36405 17.5531 9.59517 17.4334 10.8184C17.3137 12.0417 16.8415 13.2085 16.0699 14.1876L21.2427 19.164C21.4085 19.3248 21.5053 19.5399 21.5135 19.7662C21.5218 19.9926 21.4411 20.2137 21.2874 20.3853C21.1337 20.5569 20.9184 20.6665 20.6845 20.6921C20.4505 20.7178 20.2151 20.6576 20.0253 20.5236L19.9205 20.436L14.7476 15.4596C13.8802 16.0922 12.8687 16.5172 11.7968 16.6994C10.7248 16.8815 9.62324 16.8157 8.58298 16.5074C7.54272 16.199 6.59366 15.6569 5.81422 14.9259C5.03478 14.1949 4.44733 13.296 4.10042 12.3034C3.7535 11.3108 3.65708 10.2531 3.81911 9.21757C3.98114 8.18204 4.39698 7.19847 5.03226 6.34812C5.66755 5.49778 6.50404 4.80506 7.47263 4.32721C8.44122 3.84936 9.51411 3.60009 10.6026 3.60001V3.60001ZM10.6026 5.40001C9.27934 5.40001 8.01025 5.90572 7.07454 6.80589C6.13884 7.70607 5.61316 8.92697 5.61316 10.2C5.61316 11.473 6.13884 12.6939 7.07454 13.5941C8.01025 14.4943 9.27934 15 10.6026 15C11.9259 15 13.195 14.4943 14.1307 13.5941C15.0664 12.6939 15.5921 11.473 15.5921 10.2C15.5921 8.92697 15.0664 7.70607 14.1307 6.80589C13.195 5.90572 11.9259 5.40001 10.6026 5.40001Z" />
 			</svg>
 			<input
 				onInput={onSearch}
 				value={search()}
 				type="search"
-				placeholder={props.placeholder || "Search article by title or description..."}
+				name="search"
+				placeholder={props.i18n["input.search"] || "Search article by title..."}
 				autocapitalize="off"
 				autocomplete="off"
 			/>
-			<span>{props.count}</span>
+			<span>{count()}</span>
 		</div>
 	);
 };

src/components/ArticlesList/TagsList/TagsList.tsx

@@ -1,15 +1,12 @@
 import type { Component, JSX } from "solid-js";
-
 import { For, createEffect } from "solid-js";
 import { selectedTags, setSelectedTags } from "@stores/searchStore";
 import * as utils from "@utils/history";
 
-type TagsListProps = {
-	data: string[];
-};
+type TagsListProps = { tags: string[] };
 
 const TagsList: Component<TagsListProps> = (props) => {
-	const isTagSelected = (tag: string) => selectedTags().includes(tag.toLocaleLowerCase());
+	const isTagSelected = (tag: string) => selectedTags().includes(tag);
 
 	/**
 	 * Reset signal state and `tags` property in history state
@@ -21,9 +18,11 @@ const TagsList: Component<TagsListProps> = (props) => {
 		history.replaceState(null, "", url);
 	};
 
-	const onSelect: JSX.EventHandler<HTMLLIElement, PointerEvent> = (e) => {
+	const onSelect: JSX.EventHandler<HTMLLIElement, MouseEvent> = (e) => {
 		const tag = e.target.getAttribute("data-tag");
 
+		if (!tag) return;
+
 		/**
 		 * Delete tag from selected tags if already selected
 		 * and update param in url
@@ -53,14 +52,13 @@ const TagsList: Component<TagsListProps> = (props) => {
 	};
 
 	createEffect(() => {
-		let param: string | string[] = new URLSearchParams(location.search).get("tags");
+		let param: string | null | string[] = new URLSearchParams(location.search).get("tags");
 
 		if (!param) {
 			resetSelected();
 			return;
 		}
 
-		/* to array */
 		param = param.split(",");
 
 		if (param.length === 0) {
@@ -68,25 +66,15 @@ const TagsList: Component<TagsListProps> = (props) => {
 			return;
 		}
 
-		const tags: string[] = [];
-
-		for (const tag of props.data) {
-			const isTagExist = param.includes(tag.toLocaleLowerCase());
-
-			if (isTagExist) {
-				tags.push(tag.toLocaleLowerCase());
-			}
-		}
-
-		setSelectedTags(tags);
+		setSelectedTags(props.tags.filter((t) => param?.includes(t)));
 	});
 
 	return (
 		<ul class="list-links">
 			<For
-				each={props.data}
+				each={props.tags}
 				children={(tag) => (
-					<li onClick={onSelect} class="btn-link" data-tag={tag.toLocaleLowerCase()} data-active={isTagSelected(tag)}>
+					<li onClick={onSelect} class="btn-link" data-tag={tag} data-active={isTagSelected(tag)}>
 						{tag}
 					</li>
 				)}

src/components/AvailableOnLangs.astro

@@ -0,0 +1,43 @@
+---
+import { getLanguageFromURL, useTranslation } from "@root/i18n/utils";
+import { createRelativeArticleUrl } from "@root/utils";
+import { Article_TranslationsQuery } from "../graphql/graphql";
+
+export interface Props {
+	articles: Article_TranslationsQuery["article_translations"][0]["article_id"];
+}
+
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+const t = useTranslation(Astro);
+const { articles } = Astro.props;
+---
+
+{
+	articles && articles.translations && articles.translations?.length !== 1 && (
+		<div>
+			{t("article.availableOn")}:{" "}
+			{articles.translations
+				.filter((a) => a && a.languages_code?.code.split("-")[0] !== pageLang)
+				.map(
+					(a) =>
+						a && (
+							<a
+								href={`${createRelativeArticleUrl({ slug: a.slug, articleLang: `${a.languages_code?.code.split("-")[0]}`, pubDate: a.pub_date })}`}
+							>{`${a.languages_code?.name}`}</a>
+						)
+				)}
+		</div>
+	)
+}
+
+<style lang="scss">
+	div {
+		margin: 10px 0;
+		font-size: var(--font-size-lg);
+		& a {
+			&:not(:last-child)::after {
+				content: ",";
+			}
+		}
+	}
+</style>

src/components/BaseHead.astro

@@ -1,55 +1,69 @@
 ---
-import { SITE_METADATA } from "@root/config";
-import { useTranslation } from "@i18n/utils";
+import "@styles/global.scss";
+import { SITE_METADATA } from "@root/constants";
+import YaMetrika from "./Analytics/YaMetrika.astro";
+import { useTranslation } from "@root/i18n/utils";
 
 export interface Props {
-	title?: string | undefined;
-	description?: string | undefined;
-	canonicalUrl?: string | undefined;
+	title?: string;
+	description?: string;
+	image?: string;
 }
 
+const canonicalURL = new URL(Astro.url.pathname, Astro.site);
+const { title, description } = Astro.props;
+const isDev = import.meta.env.DEV;
 const t = useTranslation(Astro);
-const { title = SITE_METADATA.title, description, canonicalUrl } = Astro.props as Props;
 ---
 
 <head>
-	<link rel="preconnect" href="https://fonts.googleapis.com" />
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+	<!-- Fonts -->
+	<link rel='preconnect' href='https://fonts.googleapis.com' />
+	<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'"
+		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'`}
 	/>
-	{canonicalUrl && <link rel="canonical" href={canonicalUrl} />}
-	<meta charset="utf-8" />
-	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<title>{title}</title>
-	<meta name="title" content={title} />
-	<meta name="generator" content={Astro.generator} />
-	<meta name="description" content={description || t("site.description")} />
-	<meta name="theme-color" content={SITE_METADATA.themeColor} />
-	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+
+	<!-- Canonical URL -->
+	<link rel='canonical' href={canonicalURL.href} />
+
+	<!-- Base metadata -->
+	<meta charset='utf-8' />
+	<meta name='viewport' content='width=device-width, initial-scale=1' />
+	<title>{title || SITE_METADATA.title}</title>
+
+	<!-- Metadata -->
+	<meta name='title' content={title || SITE_METADATA.title} />
+	<meta name='generator' content={Astro.generator} />
+	<meta name='description' content={description || t("site.description")} />
+	<meta name='theme-color' content={SITE_METADATA.themeColor} />
+	<meta name='msapplication-TileColor' content='#da532c' />
+
+	<!-- Favicons -->
+	<link rel='apple-touch-icon' sizes='180x180' href='/apple-touch-icon.png' />
 	<link
-		rel="icon"
-		type="image/png"
-		sizes="32x32"
-		href="/favicon-light-32x32.png"
-		media="(prefers-color-scheme: light)"
+		rel='icon'
+		type='image/png'
+		sizes='32x32'
+		href='/favicon-light-32x32.png'
+		media='(prefers-color-scheme: light)'
 	/>
 	<link
-		rel="icon"
-		type="image/png"
-		sizes="16x16"
-		href="/favicon-light-16x16.png"
-		media="(prefers-color-scheme: light)"
+		rel='icon'
+		type='image/png'
+		sizes='16x16'
+		href='/favicon-light-16x16.png'
+		media='(prefers-color-scheme: light)'
 	/>
-	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-dark-32x32.png" media="(prefers-color-scheme: dark)" />
-	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-dark-16x16.png" media="(prefers-color-scheme: dark)" />
-	<link rel="manifest" href="/site.webmanifest" />
-	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-	<meta name="msapplication-TileColor" content="#da532c" />
+	<link rel='icon' type='image/png' sizes='32x32' href='/favicon-dark-32x32.png' media='(prefers-color-scheme: dark)' />
+	<link rel='icon' type='image/png' sizes='16x16' href='/favicon-dark-16x16.png' media='(prefers-color-scheme: dark)' />
+	<link rel='manifest' href='/site.webmanifest' />
+	<link rel='mask-icon' href='/safari-pinned-tab.svg' color='#5bbad5' />
+	<link rel='sitemap' href='/sitemap-index.xml' />
 	<slot />
-	<script is:inline src="/assets/js/detect-theme.js"></script>
-	<script src="../quicklink.js"></script>
+	<script is:inline src='/assets/js/detect-theme.js'></script>
+	{!isDev && <YaMetrika />}
 </head>

src/components/BaseLayout.astro

@@ -0,0 +1,22 @@
+---
+import { IS_SITE_UNDER_CONSTRUCTION } from "@root/constants";
+import Header from "@components/Header.astro";
+import Footer from "@components/Footer.astro";
+import SiteContent from "@components/SiteContent.astro";
+import UnderConstruction from "./UnderConstruction.astro";
+---
+
+<body>
+	{
+		IS_SITE_UNDER_CONSTRUCTION && (
+			<UnderConstruction>
+				&#128679;&nbsp; This web site is under development &nbsp;&#128679;
+			</UnderConstruction>
+		)
+	}
+	<Header />
+	<SiteContent>
+		<slot />
+	</SiteContent>
+	<Footer />
+</body>

src/components/BaseLayout/BaseLayout.astro

@@ -1,25 +0,0 @@
----
-import { IS_SITE_UNDER_CONSTRUCTION } from "@root/config";
-import Header from "@components/Header";
-import Footer from "@components/Footer";
-import SiteContent from "@components/SiteContent";
-import HeaderBanner from "@components/HeaderBanner";
-import UIString from "@components/UIString";
----
-
-<body data-is-site-under-construction={IS_SITE_UNDER_CONSTRUCTION && "true"}>
-	{
-		IS_SITE_UNDER_CONSTRUCTION && (
-			<HeaderBanner>
-				&#128679;&nbsp;
-				<UIString key={"site.underConstruction"} />
-				&nbsp;&#128679;
-			</HeaderBanner>
-		)
-	}
-	<Header />
-	<SiteContent>
-		<slot />
-	</SiteContent>
-	<Footer />
-</body>

src/components/BaseLayout/index.ts

@@ -1 +0,0 @@
-export { default } from "./BaseLayout.astro";

src/components/Button.astro

@@ -1,7 +1,6 @@
 ---
 export type Props = astroHTML.JSX.ButtonHTMLAttributes;
-
-const attrs = Astro.props as Props;
+const attrs = Astro.props;
 ---
 
 <button {...attrs}>
@@ -15,7 +14,6 @@ const attrs = Astro.props as Props;
 		font-family: var(--font-family-base);
 		font-weight: 500;
 		font-size: var(--font-size-sm);
-
 		&[disabled] {
 			opacity: 0.5;
 			cursor: not-allowed;

src/components/Button/index.ts

@@ -1 +0,0 @@
-export { default } from "./Button.astro";

src/components/ContactForm.astro

@@ -0,0 +1,74 @@
+---
+import Button from "@components/Button.astro";
+import UIString from "./UIString.astro";
+import { useTranslation } from "@i18n/utils";
+import { actions } from "astro:actions";
+
+const t = useTranslation(Astro);
+const formResult = Astro.getActionResult(actions.appeal);
+---
+
+<>
+	<form name="contact" action={actions.appeal} method="post">
+		<div class="flex">
+			<div>
+				<input name="name" placeholder={t("input.nameField")} type="text" maxlength="20" autocomplete="off" required />
+			</div>
+			<div>
+				<input name="email" placeholder="example@email.com" type="email" autocomplete="off" required />
+			</div>
+		</div>
+		<input name="subject" placeholder={t("input.subjectField")} type="text" autocomplete="off" required />
+		<textarea
+			name="message"
+			placeholder={t("input.messageField")}
+			id="message"
+			autocomplete="off"
+			cols={30}
+			rows={10}
+			required></textarea>
+		<div class="footer">
+			{
+				formResult?.error && (
+					<span>
+						<UIString key={formResult.error.status === 429 ? "submitted.limit" : "submitted.error"} />
+					</span>
+				)
+			}
+			<Button type={"submit"}>
+				<UIString key={"btn.submit"} />
+			</Button>
+		</div>
+	</form>
+</>
+
+<style lang="scss">
+	form {
+		display: flex;
+		flex-direction: column;
+		row-gap: 7px;
+		margin-bottom: 3.125rem;
+		& .flex {
+			column-gap: 10px;
+			& div {
+				width: 100%;
+			}
+		}
+		& input.error-input,
+		& textarea.error-input {
+			border: 1px solid var(--color-error);
+		}
+		& .footer {
+			display: flex;
+			align-items: center;
+			justify-content: flex-end;
+			gap: 12px;
+		}
+	}
+	@media screen and (max-width: 560px) {
+		form .flex {
+			flex-direction: column;
+			row-gap: 7px;
+		}
+	}
+</style>

src/components/ContactForm/ContactForm.astro

@@ -1,65 +0,0 @@
----
-import Button from "@components/Button";
-import { useTranslation } from "@i18n/utils";
-
-const t = useTranslation(Astro);
----
-
-<form name="contact" method="post" netlify-honeypot="bot-field" data-netlify="true">
-	<div hidden>
-		Don't fill this out if you're human
-		<input name="bot-field" />
-	</div>
-	<div class="flex">
-		<div>
-			<input name="name" placeholder={t("input.nameField")} type="text" maxlength="20" autocomplete="off" required />
-		</div>
-		<div>
-			<input name="email" placeholder="example@email.com" autocomplete="off" type="email" required />
-		</div>
-	</div>
-	<input name="subject" placeholder={t("input.subjectField")} type="text" autocomplete="off" required />
-	<textarea
-		name="message"
-		placeholder={t("input.messageField")}
-		id="message"
-		autocomplete="off"
-		cols={30}
-		rows={10}
-		required></textarea>
-	<div class="footer">
-		<Button type="submit">{t("btn.submit")}</Button>
-	</div>
-</form>
-
-<style lang="scss">
-	form {
-		display: flex;
-		flex-direction: column;
-		row-gap: 7px;
-		margin-bottom: 3.125rem;
-
-		& .flex {
-			column-gap: 10px;
-			& div {
-				width: 100%;
-			}
-		}
-
-		& input.error-input,
-		& textarea.error-input {
-			border: 1px solid var(--color-error);
-		}
-
-		& .footer {
-			text-align: center;
-		}
-	}
-
-	@media screen and (max-width: 560px) {
-		form .flex {
-			flex-direction: column;
-			row-gap: 7px;
-		}
-	}
-</style>

src/components/ContactForm/ContactForm.scss

@@ -1,46 +0,0 @@
-.contact-form {
-	display: flex;
-	flex-direction: column;
-	row-gap: 7px;
-	margin-bottom: 3.125rem;
-
-	& .form-footer {
-		text-align: center;
-		margin-top: 15px;
-	}
-
-	& .form-result {
-		font-style: italic;
-		color: var(--font-color-gray);
-	}
-
-	& .error-message {
-		margin: 2px 0 3px 0;
-		display: block;
-		color: var(--color-error);
-		font-size: var(--font-size-sm);
-		user-select: none;
-		&::before {
-			content: "*";
-		}
-	}
-
-	& .flex {
-		column-gap: 10px;
-		& div {
-			width: 100%;
-		}
-	}
-
-	& input.error-input,
-	& textarea.error-input {
-		border: 1px solid var(--color-error);
-	}
-}
-
-@media screen and (max-width: 560px) {
-	.contact-form .flex {
-		flex-direction: column;
-		row-gap: 7px;
-	}
-}

src/components/ContactForm/index.ts

@@ -1 +0,0 @@
-export { default } from "./ContactForm.astro";

src/components/ContactsList.astro

@@ -0,0 +1,45 @@
+---
+import { Icon } from "astro-icon/components";
+import { getContacts } from "../queries";
+
+const contacts = await getContacts();
+---
+
+<div>
+	{
+		contacts && (
+			<>
+				<a href={"mailto:" + contacts.email}>
+					Email
+					<Icon name='arrow-up-right' width='15' height='15' data-filter='none' />
+				</a>
+				<a href={contacts.github} target='_blank'>
+					Github
+					<Icon name='arrow-up-right' width='15' height='15' data-filter='none' />
+				</a>
+				<a href={contacts.telegram} target='_blank'>
+					Telegram
+					<Icon name='arrow-up-right' width='15' height='15' data-filter='none' />
+				</a>
+			</>
+		)
+	}
+</div>
+
+<style lang='scss'>
+	div {
+		display: flex;
+		flex-wrap: wrap;
+		column-gap: 40px;
+		row-gap: 30px;
+
+		& a {
+			display: flex;
+			column-gap: 5px;
+		}
+
+		& svg {
+			filter: none;
+		}
+	}
+</style>

src/components/ContactsList/ContactsList.astro

@@ -1,24 +0,0 @@
----
-import { SITE_METADATA } from "@root/config";
-import { Icon } from "astro-icon";
-import "./ContactsList.scss";
-
-const {
-	contacts: { email, githubUrl, telegramUrl },
-} = SITE_METADATA;
----
-
-<div class="contacts-list">
-	<a href={"mailto:" + email}
-		>Email
-		<Icon name="arrow-up-right" width="15" height="15" data-filter="none" />
-	</a>
-	<a href={githubUrl} target="_blank"
-		>Github
-		<Icon name="arrow-up-right" width="15" height="15" data-filter="none" />
-	</a>
-	<a href={telegramUrl} target="_blank"
-		>Telegram
-		<Icon name="arrow-up-right" width="15" height="15" data-filter="none" />
-	</a>
-</div>

src/components/ContactsList/ContactsList.scss

@@ -1,15 +0,0 @@
-.contacts-list {
-	display: flex;
-	flex-wrap: wrap;
-	column-gap: 40px;
-	row-gap: 30px;
-
-	& a {
-		display: flex;
-		column-gap: 5px;
-	}
-
-	& svg {
-		filter: none;
-	}
-}

src/components/ContactsList/index.ts

@@ -1 +0,0 @@
-export { default } from "./ContactsList.astro";

src/components/Counter/Counter.tsx

@@ -1,59 +0,0 @@
-import type { Component } from "solid-js";
-
-import { createSignal, createEffect } from "solid-js";
-
-const Counter: Component<{ tick?: number }> = (props) => {
-	const [isRunned, setIsRunned] = createSignal<boolean>(false);
-	const [count, setCount] = createSignal<number>(0);
-
-	const run = () => setIsRunned(true);
-	const stop = () => setIsRunned(false);
-	const inc = () => setCount(count() + 1);
-	const dec = () => setCount(count() - 1);
-
-	createEffect(() => {
-		setInterval(() => {
-			if (isRunned()) {
-				setCount(count() + 1);
-			}
-		}, props.tick || 200);
-	});
-
-	return (
-		<div
-			style={{
-				margin: "2rem 0",
-				display: "flex",
-				"flex-direction": "column",
-				"align-items": "center",
-				"row-gap": "15px",
-				border: "1px solid var(--border-color)",
-				"border-radius": "var(--border-radius-md)",
-				padding: "15px 5px",
-			}}
-		>
-			<span>{count()}</span>
-			<div
-				style={{
-					display: "flex",
-					"column-gap": "3px",
-				}}
-			>
-				<button class="btn" disabled={isRunned()} onClick={run}>
-					Run
-				</button>
-				<button class="btn" disabled={isRunned()} onClick={inc}>
-					+
-				</button>
-				<button class="btn" disabled={isRunned()} onClick={dec}>
-					-
-				</button>
-				<button class="btn" disabled={!isRunned()} onClick={stop}>
-					Stop
-				</button>
-			</div>
-		</div>
-	);
-};
-
-export default Counter;

src/components/Counter/index.ts

@@ -1 +0,0 @@
-export { default } from "./Counter";

src/components/EmptyList.astro

@@ -1,5 +1,5 @@
 ---
-import UIString from "@components/UIString";
+import UIString from "@components/UIString.astro";
 ---
 
 <div>

src/components/Footer.astro

@@ -0,0 +1,52 @@
+---
+import { Icon } from "astro-icon/components";
+import TranslatedLink from "./TranslatedLink.astro";
+import UIString from "./UIString.astro";
+import { getLanguageFromURL } from "../i18n/utils";
+
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+---
+
+<footer>
+	<div class="container">
+		<div>
+			<i>
+				<UIString key={"footer.developed"} />: <TranslatedLink to="/contacts/"> Sergey Yarkov </TranslatedLink>
+				&copy; {new Date().getFullYear()}
+			</i>
+		</div>
+		<div>
+			<a href=`/${pageLang}/rss.xml` target="_blank"><UIString key={"footer.rssFeed"} /></a>
+			<span>
+				<Icon name="rss" width="20" height="20" />
+			</span>
+		</div>
+	</div>
+</footer>
+
+<style lang="scss">
+	footer {
+		font-weight: 500;
+		margin-top: 5rem;
+		color: var(--color-gray-400);
+		font-size: var(--font-size-sm);
+		& .container {
+			padding-top: 15px;
+			padding-bottom: 15px;
+			border-top: 1px solid var(--border-color);
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			column-gap: 20px;
+			row-gap: 5px;
+			& div:last-child {
+				display: flex;
+				align-items: center;
+				& a {
+					margin-right: 0.25rem;
+				}
+			}
+		}
+	}
+</style>

src/components/Footer/Footer.astro

@@ -1,58 +0,0 @@
----
-import { Icon } from "astro-icon";
----
-
-<footer>
-	<div class="container">
-		<ul>
-			<li>
-				<a href="https://astro.build/" target="_blank">Astro</a>
-				<Icon name="astro" width="20" height="20" />
-			</li>
-			<li>
-				<a href="https://www.netlify.com/" target="_blank">Netlify</a>
-				<Icon name="netlify" width="20" height="20" />
-			</li>
-			<li>
-				<a href="/rss.xml" target="_blank">RSS</a>
-				<Icon name="rss" width="20" height="20" />
-			</li>
-		</ul>
-		<p>© Sergey Yarkov, 2022</p>
-	</div>
-</footer>
-
-<style lang="scss">
-	footer {
-		user-select: none;
-		text-align: center;
-		font-weight: 500;
-		margin-top: 5rem;
-		& .container {
-			padding: 25px 0 10px 0;
-			border-top: 1px solid var(--border-color);
-			display: flex;
-			flex-direction: column;
-			align-items: center;
-			row-gap: 15px;
-		}
-		& ul {
-			display: flex;
-			align-items: center;
-			column-gap: 25px;
-			& li {
-				display: flex;
-				align-items: center;
-				column-gap: 7px;
-				& a {
-					color: var(--font-color);
-					font-size: var(--font-size-sm);
-				}
-			}
-		}
-		& p {
-			text-align: center;
-			font-size: var(--font-size-xs);
-		}
-	}
-</style>

src/components/Footer/index.ts

@@ -1 +0,0 @@
-export { default } from "./Footer.astro";

src/components/Header.astro

@@ -1,32 +1,29 @@
 ---
-import { Icon } from "astro-icon";
-import { IS_SITE_UNDER_CONSTRUCTION, SITE_METADATA } from "@root/config";
-import { removeSlashes } from "@utils/string";
+import { IS_SITE_UNDER_CONSTRUCTION, SITE_METADATA } from "@root/constants";
 import ThemeSwitcher from "@components/ThemeSwticher";
-import UIString from "@components/UIString";
-import TranslatedLink from "@components/TranslatedLink";
-import LanguageSelect from "@components/LanguageSelect";
-import NavToggle from "./NavToggle";
-
-const { name, nav, contacts } = SITE_METADATA;
-const { pathname } = Astro.url;
+import LanguageSelect from "@components/LanguageSelect.astro";
+import NavToggle from "@components/NavToggle";
+import UIString from "@components/UIString.astro";
+import TranslatedLink from "@components/TranslatedLink.astro";
+import HeaderContacts from "./HeaderContacts.astro";
 ---
 
-<header {...(IS_SITE_UNDER_CONSTRUCTION ? { style: 'top: 45px;' } : {})}>
+<header {...IS_SITE_UNDER_CONSTRUCTION ? { style: "top: 45px;" } : {}}>
 	<div class="container">
 		<div class="logo">
-			<TranslatedLink to={"/"}>
-				{name}
+			<TranslatedLink to="/">
+				{SITE_METADATA.name}
 			</TranslatedLink>
 		</div>
-		<nav>
+		<nav itemscope itemtype="http://schema.org/SiteNavigationElement">
 			<ul>
 				{
-					nav.map((link) => (
+					SITE_METADATA.nav.map((link) => (
 						<li>
 							<TranslatedLink
-								class={pathname.includes(removeSlashes(link.url)) && pathname.split("/").length < 5 && "active"}
+								itemprop={"url"}
 								to={link.url}
+								class:list={[{ active: Astro.url.pathname.includes(link.url) }]}
 							>
 								<UIString key={link.key} />
 							</TranslatedLink>
@@ -34,20 +31,7 @@ const { pathname } = Astro.url;
 					))
 				}
 			</ul>
-			<div class="contacts">
-				<a href={"mailto:" + contacts.email}>
-					Email
-					<Icon name="email" width="18" height="18" />
-				</a>
-				<a href={contacts.githubUrl}>
-					Github
-					<Icon name="github_filled" width="18" height="18" />
-				</a>
-				<a href={contacts.telegramUrl}>
-					Telegram
-					<Icon name="telegram" width="18" height="18" />
-				</a>
-			</div>
+			<HeaderContacts />
 			<div class="flex settings">
 				<LanguageSelect />
 				<ThemeSwitcher client:visible />
@@ -69,17 +53,15 @@ const { pathname } = Astro.url;
 		z-index: 9999;
 		& .container {
 			display: flex;
-			align-items: center;
+			align-items: flex-start;
 			justify-content: space-between;
 		}
-
 		& .logo a {
 			text-decoration: none;
 			font-weight: 600;
 			font-size: var(--font-size-lg);
 			color: var(--font-color);
 		}
-
 		& a:hover,
 		a.active {
 			color: var(--color-blue-500);
@@ -87,7 +69,6 @@ const { pathname } = Astro.url;
 			text-decoration-thickness: 2px;
 			text-underline-offset: 4px;
 		}
-
 		& nav {
 			display: flex;
 			align-items: center;
@@ -106,25 +87,11 @@ const { pathname } = Astro.url;
 					text-transform: lowercase;
 				}
 			}
-			& .contacts {
-				display: flex;
-				align-items: center;
-				column-gap: 10px;
-				margin-right: 30px;
-				& a {
-					text-decoration: none;
-					font-size: 0;
-					&:hover {
-						opacity: var(--opacity-hover);
-					}
-				}
-			}
 			& .settings {
 				column-gap: 13.5px;
 			}
 		}
 	}
-
 	@media screen and (max-width: 768px) {
 		header {
 			padding: 10px 0;
@@ -132,7 +99,6 @@ const { pathname } = Astro.url;
 				display: none;
 			}
 		}
-
 		body[data-is-mobile-open="true"] {
 			overflow-y: hidden;
 			touch-action: none;
@@ -157,7 +123,7 @@ const { pathname } = Astro.url;
 					display: block;
 					& ul {
 						display: block;
-						text-align: center;
+						text-align: left;
 						margin: 0;
 						& li {
 							margin-bottom: 30px;
@@ -166,11 +132,6 @@ const { pathname } = Astro.url;
 							}
 						}
 					}
-					& .contacts {
-						margin-right: 0;
-						margin-top: 2rem;
-						justify-content: center;
-					}
 				}
 			}
 		}

src/components/Header/index.ts

@@ -1 +0,0 @@
-export { default } from "./Header.astro";

src/components/HeaderBanner/index.ts

@@ -1 +0,0 @@
-export { default } from "./HeaderBanner.astro";

src/components/HeaderContacts.astro

@@ -0,0 +1,54 @@
+---
+import { Icon } from "astro-icon/components";
+import { getContacts } from "../queries";
+
+const contacts = await getContacts();
+---
+
+{
+	contacts && (
+		<div class="contacts">
+			<a target="_blank" href={"mailto:" + contacts.email}>
+				Email
+				<Icon name="email" width="18" height="18" />
+			</a>
+			<a target="_blank" href={contacts.github}>
+				Github
+				<Icon name="github_filled" width="18" height="18" />
+			</a>
+			<a target="_blank" href={contacts.telegram}>
+				Telegram
+				<Icon name="telegram" width="18" height="18" />
+			</a>
+		</div>
+	)
+}
+
+<style lang="scss">
+	.contacts {
+		display: flex;
+		align-items: center;
+		column-gap: 10px;
+		margin-right: 30px;
+		& a {
+			text-decoration: none;
+			font-size: 0;
+			&:hover {
+				opacity: var(--opacity-hover);
+			}
+		}
+	}
+	@media screen and (max-width: 768px) {
+		.contacts {
+			margin-right: 0;
+			margin-top: 2.5rem;
+			& a {
+				margin-right: 0.2rem;
+			}
+			& svg {
+				width: 21px;
+				height: 21px;
+			}
+		}
+	}
+</style>

src/components/LanguageSelect.astro

@@ -1,8 +1,7 @@
 ---
-import { Icon } from "astro-icon";
-import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from "@root/config";
-import languages from "@i18n/languages";
-import { getLanguageFromURL } from "@root/utils";
+import { Icon } from "astro-icon/components";
+import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES, URL_BLOG_PREFIX } from "@root/constants";
+import { getLanguageFromURL } from "@i18n/utils";
 
 const lang = getLanguageFromURL(Astro.url.pathname);
 ---
@@ -12,7 +11,7 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 	<select id="languageSelect" value={lang} aria-label="Select language">
 		{
 			SUPPORTED_LANGUAGES.map((code) => (
-				<option value={code} selected={lang === code}>
+				<option value={code} selected={code === lang}>
 					<span>{code.toLocaleUpperCase()}</span>
 				</option>
 			))
@@ -20,6 +19,34 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 	</select>
 </div>
 
+<script is:inline define:vars={{ lang, DEFAULT_LANGUAGE, URL_BLOG_PREFIX }}>
+	const $select = document.getElementById("languageSelect");
+
+	const changeLanguageHandler = (e) => {
+		const newLang = e.target.value;
+		const pathname = window.location.pathname;
+		let url;
+
+		if (lang !== DEFAULT_LANGUAGE) {
+			url = pathname.split("/").slice(2).join("/");
+		} else {
+			url = pathname.slice(1);
+		}
+
+		if (newLang !== DEFAULT_LANGUAGE) url = `${newLang}/${url}`;
+
+		/* Move user to articles page with new language */
+		if (window.location.pathname.includes(`/${URL_BLOG_PREFIX}/`)) {
+			window.location.pathname = `${newLang === DEFAULT_LANGUAGE ? "" : newLang + "/"}` + "articles/";
+			return;
+		}
+
+		window.location.pathname = url;
+	};
+
+	$select.addEventListener("change", changeLanguageHandler);
+</script>
+
 <style lang="scss">
 	div {
 		position: relative;
@@ -64,31 +91,3 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 		}
 	}
 </style>
-
-<script define:vars={{ lang, DEFAULT_LANGUAGE }}>
-	const $select = document.getElementById("languageSelect");
-
-	const changeLanguageHandler = (e) => {
-		const newLang = e.target.value;
-		const pathname = window.location.pathname;
-		let url;
-
-		if (lang !== DEFAULT_LANGUAGE) {
-			url = pathname.split("/").slice(2).join("/");
-		} else {
-			url = pathname.slice(1);
-		}
-
-		if (newLang !== DEFAULT_LANGUAGE) url = `${newLang}/${url}`;
-
-		/* Move user to articles page with new language */
-		if (window.location.pathname.includes("/blog/")) {
-			window.location.pathname = `${newLang === DEFAULT_LANGUAGE ? "" : newLang + "/"}` + "articles/";
-			return;
-		}
-
-		window.location.pathname = url;
-	};
-
-	$select.addEventListener("change", changeLanguageHandler);
-</script>

src/components/LanguageSelect/index.ts

@@ -1 +0,0 @@
-export { default } from "./LanguageSelect.astro";

src/components/NavToggle/NavToggle.tsx

@@ -1,16 +1,27 @@
 import type { Component } from "solid-js";
-
 import { createSignal, createEffect } from "solid-js";
 import "./NavToggle.scss";
 
 const MenuIcon: Component = () => (
-	<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px">
+	<svg
+		fill="#000000"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 50 50"
+		width="24px"
+		height="24px"
+	>
 		<path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 Z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 Z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 Z" />
 	</svg>
 );
 
 const CloseIcon: Component = () => (
-	<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px">
+	<svg
+		fill="#000000"
+		xmlns="http://www.w3.org/2000/svg"
+		viewBox="0 0 50 50"
+		width="24px"
+		height="24px"
+	>
 		<path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z" />
 	</svg>
 );
@@ -32,7 +43,13 @@ const NavToggle: Component = () => {
 	});
 
 	return (
-		<button class="nav-toggle" onClick={toggleNav} type="button" aria-pressed={isNavShown()} aria-label="Menu">
+		<button
+			class="nav-toggle"
+			onClick={toggleNav}
+			type="button"
+			aria-pressed={isNavShown()}
+			aria-label="Menu"
+		>
 			{isNavShown() ? <CloseIcon /> : <MenuIcon />}
 		</button>
 	);

src/components/OpenGraph.astro

@@ -0,0 +1,33 @@
+---
+import mime from 'mime-types' 
+import { extname } from 'node:path'
+import { isURL } from "@utils/string";
+
+export interface Props {
+  title: string;
+  siteName: string;
+  description: string;
+  type: string;
+  url: string;
+  image?: {
+    path: string;
+    width: string;
+    height: string;
+    type: string;
+  }
+}
+
+const {title, siteName, description, url, image} = Astro.props as Props;
+---
+
+<meta property="og:title" content={title} />
+<meta property="og:site_name" content={siteName} />
+<meta property="og:description" content={description} />
+<meta property="og:type" content="article" />
+<meta property="og:url" content={url} />
+{image && (
+  <meta property="og:image" content={isURL(image.path) ? image.path : `${Astro.url.origin}${image.path}`} />
+  <meta property="og:image:width" content="700" />
+  <meta property="og:image:height" content="400" />
+  <meta property="og:image:type" content={`${mime.lookup(extname(image.path))}`} />
+)}

src/components/PageHeading.astro

@@ -3,7 +3,6 @@ export interface Props {
 	heading: string;
 	description?: string | undefined;
 }
-
 const { heading, description } = Astro.props as Props;
 ---
 
@@ -17,14 +16,13 @@ const { heading, description } = Astro.props as Props;
 <style lang="scss">
 	div {
 		margin-bottom: 2.5rem;
+		text-align: center;
 		& h1 {
 			font-size: var(--font-size-4xl);
-			text-align: center;
 			margin-bottom: 15px;
 		}
 		& p {
 			font-size: var(--font-size-lg);
-			text-align: center;
 			max-width: 650px;
 			margin: 0 auto;
 		}

src/components/PageHeading/index.ts

@@ -1 +0,0 @@
-export { default } from "./PageHeading.astro";

src/components/ProjectItem.astro

@@ -0,0 +1,89 @@
+---
+import { Icon } from "astro-icon/components";
+import UIString from "@components/UIString.astro";
+import { Project_TranslationsQuery } from "../graphql/graphql";
+import { DIRECTUS_URL } from "astro:env/server";
+
+export interface Props {
+	data: Project_TranslationsQuery["project_translations"][0];
+}
+
+const { data } = Astro.props as Props;
+const { icon, title, year, description, article_url, source_url, demo_url } = data;
+---
+
+<div class="project-item">
+	<div class="project-item__heading">
+		<h2>
+			{icon && <img data-icon src={`${DIRECTUS_URL}/assets/${icon.filename_disk}`} />}
+			{title}
+		</h2>
+		<span>{year}</span>
+	</div>
+	<div class="project-item__description">
+		<p>{description}</p>
+	</div>
+	<div class="project-item__links">
+		{
+			article_url && (
+				<a class="btn-link" href={article_url} target="_blank">
+					<UIString key={"btn.article"} />
+				</a>
+			)
+		}
+		{
+			source_url && (
+				<a class="btn-link" href={source_url} target="_blank">
+					<UIString key={"btn.sourceCode"} />
+					<Icon name="mdi:link-variant" width="15" height="15" />
+				</a>
+			)
+		}
+		{
+			demo_url && (
+				<a class="btn-link" href={demo_url} target="_blank">
+					<UIString key={"btn.demo"} />
+					<Icon name="mdi:link-variant" width="15" height="15" />
+				</a>
+			)
+		}
+	</div>
+</div>
+
+<style lang="scss">
+	.project-item {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--border-color);
+		border-radius: var(--border-radius-lg);
+		padding: 15px;
+
+		&__heading {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			margin-bottom: 10px;
+
+			& h2 {
+				display: flex;
+				align-items: center;
+				font-size: 1.2rem;
+				font-weight: 600;
+				column-gap: 10px;
+				margin: 0;
+				padding: 0;
+			}
+
+			& span {
+				font-size: var(--font-size-sm);
+				color: var(--font-color-gray);
+			}
+		}
+
+		&__links {
+			display: flex;
+			margin-top: auto;
+			column-gap: 5px;
+		}
+	}
+</style>

src/components/ProjectItem/ProjectItem.astro

@@ -1,53 +0,0 @@
----
-import { DEFAULT_LANGUAGE } from "@root/config";
-import { getLanguageFromURL } from "@root/utils";
-import { Icon } from "astro-icon";
-import UIString from "../UIString";
-import "./ProjectItem.scss";
-
-export interface Props {
-	data: ProjectType;
-}
-
-const { data } = Astro.props as Props;
-const lang = getLanguageFromURL(Astro.url.pathname);
-const { icon, name, year, description, articleUrl, sourceUrl, demoUrl } = data;
----
-
-<div class="project-item">
-	<div class="project-item__heading">
-		<h2>
-			<Icon name={icon} width="20" height="20" />
-			{name}
-		</h2>
-		<span>{year}</span>
-	</div>
-	<div class="project-item__description">
-		<p>{description[lang] || description[DEFAULT_LANGUAGE]}</p>
-	</div>
-	<div class="project-item__links">
-		{
-			articleUrl && (
-				<a class="btn-link" href={articleUrl} target="_blank">
-					<UIString key={"btn.article"} />
-				</a>
-			)
-		}
-		{
-			sourceUrl && (
-				<a class="btn-link" href={sourceUrl} target="_blank">
-					<UIString key={"btn.sourceCode"} />
-					<Icon name="link-out" width="15" height="15" />
-				</a>
-			)
-		}
-		{
-			demoUrl && (
-				<a class="btn-link" href={demoUrl} target="_blank">
-					<UIString key={"btn.demo"} />
-					<Icon name="link-out" width="15" height="15" />
-				</a>
-			)
-		}
-	</div>
-</div>

src/components/ProjectItem/ProjectItem.scss

@@ -1,35 +0,0 @@
-.project-item {
-	display: flex;
-	flex-direction: column;
-	border: 1px solid var(--border-color);
-	border-radius: var(--border-radius-lg);
-	padding: 15px;
-
-	&__heading {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 10px;
-
-		& h2 {
-			display: flex;
-			align-items: center;
-			font-size: 1.2rem;
-			font-weight: 600;
-			column-gap: 10px;
-			margin: 0;
-			padding: 0;
-		}
-
-		& span {
-			font-size: var(--font-size-sm);
-			color: var(--font-color-gray);
-		}
-	}
-
-	&__links {
-		display: flex;
-		margin-top: auto;
-		column-gap: 5px;
-	}
-}

src/components/ProjectItem/index.ts

@@ -1 +0,0 @@
-export { default } from "./ProjectItem.astro";

src/components/ProjectsList.astro

@@ -0,0 +1,20 @@
+---
+import ProjectItem from "@components/ProjectItem.astro";
+import { getLanguageFromURL } from "../i18n/utils";
+import { getProjectList } from "../queries";
+
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+const projects = await getProjectList(pageLang);
+---
+
+<div>
+	{projects.map((data) => <ProjectItem data={data} />)}
+</div>
+
+<style>
+	div {
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+		gap: 10px;
+	}
+</style>

src/components/ProjectsList/ProjectsList.astro

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

src/components/ProjectsList/ProjectsList.scss

@@ -1,5 +0,0 @@
-.projects-list {
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-	gap: 10px;
-}

src/components/ProjectsList/index.ts

@@ -1 +0,0 @@
-export { default } from "./ProjectsList.astro";

src/components/RecentArticles.astro

@@ -0,0 +1,68 @@
+---
+import { getLanguageFromURL } from "@i18n/utils";
+import * as utils from "@utils/index";
+import ArticleItem from "@components/ArticleItem";
+import EmptyList from "@components/EmptyList.astro";
+import UIString from "@components/UIString.astro";
+import TranslatedLink from "@components/TranslatedLink.astro";
+import { getRecentArticleList, getSiteSettings } from "../queries";
+
+const pageLang = getLanguageFromURL(Astro.url.pathname);
+const siteSettings = await getSiteSettings();
+const articles = await getRecentArticleList(siteSettings?.recent_articles_limit || 5);
+const filteredArticles = utils.filterArticlesByPageLang(articles, pageLang);
+const isEmpty = articles.length === 0;
+---
+
+<section>
+	<div>
+		<h2>
+			<UIString key={"recentArticles.heading"} />
+		</h2>
+		<TranslatedLink to="/articles/">
+			<UIString key={"recentArticles.all"} />
+		</TranslatedLink>
+	</div>
+	<div itemscope itemtype="http://schema.org/Blog">
+		{
+			!isEmpty && !!filteredArticles ? (
+				filteredArticles.map(
+					(a) =>
+						a && (
+							<ArticleItem
+								slug={a.slug}
+								title={a.title}
+								languages_code={a.languages_code}
+								pub_date={a.pub_date}
+								pageLang={pageLang}
+							/>
+						)
+				)
+			) : (
+				<EmptyList />
+			)
+		}
+	</div>
+</section>
+
+<style lang="scss">
+	section {
+		& > div:nth-child(1) {
+			display: flex;
+			align-items: center;
+			column-gap: 15px;
+			row-gap: 5px;
+			flex-wrap: wrap;
+			justify-content: space-between;
+			border-bottom: 1px solid var(--border-color);
+			padding-bottom: 10px;
+			& h2 {
+				margin: 0;
+			}
+		}
+		& > div:nth-child(2) {
+			margin-top: 10px;
+			max-width: calc(var(--content-width) + (var(--content-padding) * 2));
+		}
+	}
+</style>

src/components/RecentArticles/RecentArticles.astro

@@ -1,56 +0,0 @@
----
-import { ArticleItem } from "@components/ArticleItem";
-import UIString from "@components/UIString";
-import { getLanguageFromURL } from "@utils/url";
-import { sortArtcilesByDate } from "@utils/articles";
-import EmptyList from "./EmptyList.astro";
-import TranslatedLink from "@components/TranslatedLink";
-
-export interface Props {
-	articles: ArticleType[];
-	length?: number | undefined;
-}
-
-const { articles, length = 5 } = Astro.props as Props;
-
-const lang = getLanguageFromURL(Astro.url.pathname);
-const recent = sortArtcilesByDate(articles);
-const isEmpty = recent.length === 0;
----
-
-<section>
-	<div>
-		<h2><UIString key={"recentArticles.heading"} /></h2>
-		<TranslatedLink to="/articles/">
-			<UIString key={"recentArticles.all"} />
-		</TranslatedLink>
-	</div>
-
-	<div>
-		{!isEmpty ? recent.slice(0, length).map((article) => <ArticleItem lang={lang} data={article} />) : <EmptyList />}
-	</div>
-</section>
-
-<style lang="scss">
-	section {
-		& > div:nth-child(1) {
-			display: flex;
-			align-items: center;
-			column-gap: 15px;
-			row-gap: 5px;
-			flex-wrap: wrap;
-			justify-content: space-between;
-			border-bottom: 1px solid var(--border-color);
-			padding-bottom: 10px;
-
-			& h2 {
-				margin: 0;
-			}
-		}
-
-		& > div:nth-child(2) {
-			margin-top: 10px;
-			max-width: calc(var(--content-width) + (var(--content-padding) * 2));
-		}
-	}
-</style>

src/components/RecentArticles/index.ts

@@ -1 +0,0 @@
-export { default } from "./RecentArticles.astro";

src/components/SiteContent.astro

@@ -8,7 +8,6 @@
 		width: 100%;
 		margin-top: 5rem;
 	}
-
 	@media (max-width: 768px) {
 		main {
 			margin-top: 3rem;