added open graph meta tag for article

package-lock.json

@@ -25,6 +25,7 @@
 				"hast-util-to-string": "^2.0.0",
 				"hastscript": "^7.0.2",
 				"html-escaper": "^3.0.3",
+				"mime-types": "^2.1.35",
 				"prettier": "^2.7.1",
 				"prettier-plugin-astro": "^0.5.0",
 				"rehype-autolink-headings": "^6.1.1",
@@ -6317,6 +6318,27 @@
 				"node": ">=10.0.0"
 			}
 		},
+		"node_modules/mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"dev": true,
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
+		"node_modules/mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dev": true,
+			"dependencies": {
+				"mime-db": "1.52.0"
+			},
+			"engines": {
+				"node": ">= 0.6"
+			}
+		},
 		"node_modules/mimic-fn": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -13782,6 +13804,21 @@
 			"integrity": "sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==",
 			"dev": true
 		},
+		"mime-db": {
+			"version": "1.52.0",
+			"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+			"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+			"dev": true
+		},
+		"mime-types": {
+			"version": "2.1.35",
+			"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+			"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+			"dev": true,
+			"requires": {
+				"mime-db": "1.52.0"
+			}
+		},
 		"mimic-fn": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",

package.json

@@ -35,6 +35,7 @@
 		"hast-util-to-string": "^2.0.0",
 		"hastscript": "^7.0.2",
 		"html-escaper": "^3.0.3",
+		"mime-types": "^2.1.35",
 		"prettier": "^2.7.1",
 		"prettier-plugin-astro": "^0.5.0",
 		"rehype-autolink-headings": "^6.1.1",

src/layouts/article.astro

@@ -1,11 +1,15 @@
 ---
 import type { Props as BaseHeadProps } from "@root/components/BaseHead.astro";
+import { extname } from "node:path";
+import mime from "mime-types";
 
 import BaseHead from "@components/BaseHead.astro";
 import BaseLayout from "@components/BaseLayout";
 import ArticleContent from "@components/ArticleContent";
+import * as utils from "@utils/string";
 import ArticlePost from "@components/ArticlePost";
 import "@styles/global.scss";
+import { SITE_METADATA } from "@root/config";
 
 export interface Props extends BaseHeadProps {
 	lang?: string | undefined;
@@ -18,8 +22,23 @@ const { lang = "ru", content, canonicalUrl } = Astro.props as Props;
 
 <html lang={lang}>
 	<BaseHead title={content.title} description={content.description} canonicalUrl={canonicalUrl}>
-		<script is:inline defer src="/assets/js/load-code-highlight.js"></script>
+		<meta property="og:title" content={content.title} />
+		<meta property="og:site_name" content={SITE_METADATA.name} />
+		<meta property="og:description" content={content.description} />
+		<meta property="og:type" content="article" />
+		<meta property="og:url" content={canonicalUrl} />
+		{
+		content.coverImage && (
+				<meta property="og:image" content={`${Astro.url.origin}${content.coverImage}`} />
+				<meta property="og:image:width" content="700" />
+				<meta property="og:image:height" content="400" />
+				<meta property="og:image:type" content={`${mime.lookup(extname(content.coverImage))}`} />
+		)
+		}
 	</BaseHead>
+	
+	<script is:inline defer src="/assets/js/load-code-highlight.js"></script>
+
 	<BaseLayout>
 		<div class="container">
 			<ArticlePost lang={lang} data={content}>

src/utils/string.ts

@@ -13,5 +13,6 @@ export function isURL(url: string): boolean {
 export function normalizeLangTag(tag: string) {
 	if (!tag.includes("-")) return tag.toLowerCase();
 	const [lang, region] = tag.split("-");
+
 	return lang.toLowerCase() + "-" + region.toUpperCase();
 }