refactored header

astro.config.mjs

@@ -21,7 +21,7 @@ import { h } from "hastscript";
 import { toString } from "hast-util-to-string";
 import { escape } from "html-escaper";
 import languages from "./src/i18n/languages";
-import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES, SITE_METADATA } from "./src/constants";
+import { DEFAULT_LANGUAGE, SUPPORTED_LANGUAGES } from "./src/constants";
 
 const createAnchorLabel = (heading) => {
 	const node = h("span.anchor-label", escape(heading));
@@ -339,6 +339,32 @@ export default defineConfig({
 											},
 										],
 									},
+									{
+										label: "Контакты",
+										name: "contacts",
+										widget: "object",
+										required: false,
+										fields: [
+											{
+												label: "Telegram",
+												name: "telegram",
+												widget: "string",
+												required: false,
+											},
+											{
+												label: "Почта",
+												name: "email",
+												widget: "string",
+												required: false,
+											},
+											{
+												label: "Github",
+												name: "github",
+												widget: "string",
+												required: false,
+											},
+										],
+									},
 								],
 							},
 						],

siteconfig.json

@@ -3,5 +3,10 @@
   "articles": {
     "recentLimit": 5
   },
-  "isSiteUnderConstruction": false
+  "isSiteUnderConstruction": false,
+  "contacts": {
+    "email": "serzh.yarkov@gmail.com",
+    "telegram": "https://t.me/sergeyyarkov",
+    "github": "https://github.com/sergeyyarkov"
+  }
 }

src/components/Header/Header.astro

@@ -1,10 +1,10 @@
 ---
 import { Icon } from "astro-icon";
 import { IS_SITE_UNDER_CONSTRUCTION, SITE_METADATA } from "@root/constants";
-import HeaderLink from "./HeaderLink.astro";
 import ThemeSwitcher from "@components/ThemeSwticher";
 import LanguageSelect from "@components/LanguageSelect.astro";
 import NavToggle from "@components/NavToggle";
+import HeaderLink from "./HeaderLink.astro";
 ---
 
 <header {...(IS_SITE_UNDER_CONSTRUCTION ? { style: 'top: 45px;' } : {})}>
@@ -39,20 +39,20 @@ import NavToggle from "@components/NavToggle";
 					)
 				}
 			</ul>
-			<div class="contacts">
-				<a href={"mailto:" + "serzh.yarkov@gmail.com"}>
+			{SITE_METADATA.contacts && <div class="contacts">
+				<a target="_blank" href={"mailto:" + SITE_METADATA.contacts.email}>
 					Email
 					<Icon name="email" width="18" height="18" />
 				</a>
-				<a href={"https://github.com/sergeyyarkov"}>
+				<a target="_blank" href={SITE_METADATA.contacts.github}>
 					Github
 					<Icon name="github_filled" width="18" height="18" />
 				</a>
-				<a href={"https://t.me/sergeyyarkov"}>
+				<a target="_blank" href={SITE_METADATA.contacts.telegram}>
 					Telegram
 					<Icon name="telegram" width="18" height="18" />
 				</a>
-			</div>
+			</div>}
 			<div class="flex settings">
 				<LanguageSelect />
 				<ThemeSwitcher client:visible />

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/ThemeSwticher/ThemeSwitcher.tsx

@@ -1,6 +1,5 @@
-import { IS_SITE_UNDER_CONSTRUCTION } from "@root/constants";
 import type { Component, JSX } from "solid-js";
-
+import { IS_SITE_UNDER_CONSTRUCTION } from "@root/constants";
 import { createSignal, onMount, Switch, Match } from "solid-js";
 import "./ThemeSwitcher.scss";
 
@@ -43,10 +42,12 @@ const ThemeSwitcher: Component = () => {
 		if (window.theme) {
 			setTheme(window.theme);
 			/* Update theme state on changing OS theme */
-			window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: isDark }) => {
-				const theme = isDark ? "dark" : "light";
-				setTheme(theme);
-			});
+			window
+				.matchMedia("(prefers-color-scheme: dark)")
+				.addEventListener("change", ({ matches: isDark }) => {
+					const theme = isDark ? "dark" : "light";
+					setTheme(theme);
+				});
 		}
 	});
 

src/constants.ts

@@ -8,4 +8,5 @@ export const SITE_METADATA: SiteMetadataType = {
 	name: "yarkov.tech",
 	author: "Sergey Yarkov",
 	themeColor: "#1e2327",
+	contacts: siteconfig.contacts,
 };

src/types/main.d.ts

@@ -26,5 +26,10 @@ declare global {
 		name: string;
 		author: string;
 		themeColor: string;
+		contacts?: {
+			email?: string;
+			telegram?: string;
+			github?: string;
+		};
 	};
 }