feat: added header banner

astro.config.mjs

@@ -1,11 +1,12 @@
+import solid from "@astrojs/solid-js";
+import image from "@astrojs/image";
+import mdx from "@astrojs/mdx";
+import sitemap from "@astrojs/sitemap";
+// import compress from "astro-compress";
 import { defineConfig } from "astro/config";
 import { h } from "hastscript";
 import { toString } from "hast-util-to-string";
 import { escape } from "html-escaper";
-import solid from "@astrojs/solid-js";
-import image from "@astrojs/image";
-// import compress from "astro-compress";
-import mdx from "@astrojs/mdx";
 import remarkGfm from "remark-gfm";
 import remarkSmartypants from "remark-smartypants";
 import rehypeSlug from "rehype-slug";
@@ -23,6 +24,15 @@ export default defineConfig({
 	integrations: [
 		solid(),
 		image(),
+		sitemap({
+			i18n: {
+				defaultLocale: "ru",
+				locales: {
+					ru: "ru-RU",
+					en: "en-US",
+				},
+			},
+		}),
 		mdx({
 			remarkPlugins: [remarkGfm, remarkSmartypants],
 			rehypePlugins: [

package-lock.json

@@ -8,12 +8,11 @@
 			"name": "yarkov.tech",
 			"version": "0.0.1",
 			"license": "MIT",
-			"dependencies": {
-				"@astrojs/rss": "^1.0.0"
-			},
 			"devDependencies": {
 				"@astrojs/image": "^0.3.4",
 				"@astrojs/mdx": "^0.10.0",
+				"@astrojs/rss": "^1.0.0",
+				"@astrojs/sitemap": "^1.0.0",
 				"@astrojs/solid-js": "^1.0.0",
 				"@types/mdx": "^2.0.2",
 				"@typescript-eslint/eslint-plugin": "^5.33.1",
@@ -190,10 +189,21 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@astrojs/rss/-/rss-1.0.0.tgz",
 			"integrity": "sha512-vOPocf/SC0TfHsCwQXupvLGm0y3oIwpRCnnF2igDP3gFSxQEOk4nmsuVTEU2N87hYyX1/5uxbjJhixuSV/L8Cw==",
+			"dev": true,
 			"dependencies": {
 				"fast-xml-parser": "^4.0.8"
 			}
 		},
+		"node_modules/@astrojs/sitemap": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-1.0.0.tgz",
+			"integrity": "sha512-42GxuF5FP7RaKXZrwGLBLOX3hPv+Wl7ExJC43O0J5e34ojJkLeKf7QfwN1UwrJlqH0Ywi0Fm4/xGe482G09+wg==",
+			"dev": true,
+			"dependencies": {
+				"sitemap": "^7.1.1",
+				"zod": "^3.17.3"
+			}
+		},
 		"node_modules/@astrojs/solid-js": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@astrojs/solid-js/-/solid-js-1.0.0.tgz",
@@ -1037,6 +1047,12 @@
 				"@types/unist": "*"
 			}
 		},
+		"node_modules/@types/node": {
+			"version": "17.0.45",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+			"integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
+			"dev": true
+		},
 		"node_modules/@types/parse5": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
@@ -1049,6 +1065,15 @@
 			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
 			"dev": true
 		},
+		"node_modules/@types/sax": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.4.tgz",
+			"integrity": "sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "*"
+			}
+		},
 		"node_modules/@types/unist": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -1413,6 +1438,12 @@
 				"node": ">= 8"
 			}
 		},
+		"node_modules/arg": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+			"dev": true
+		},
 		"node_modules/argparse": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -3573,6 +3604,7 @@
 			"version": "4.0.9",
 			"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.0.9.tgz",
 			"integrity": "sha512-4G8EzDg2Nb1Qurs3f7BpFV4+jpMVsdgLVuG1Uv8O2OHJfVCg7gcA53obuKbmVqzd4Y7YXVBK05oJG7hzGIdyzg==",
+			"dev": true,
 			"dependencies": {
 				"strnum": "^1.0.5"
 			},
@@ -7751,6 +7783,12 @@
 				"suf-log": "^2.5.3"
 			}
 		},
+		"node_modules/sax": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+			"dev": true
+		},
 		"node_modules/section-matter": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -7943,6 +7981,25 @@
 			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
 			"dev": true
 		},
+		"node_modules/sitemap": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
+			"integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
+			"dev": true,
+			"dependencies": {
+				"@types/node": "^17.0.5",
+				"@types/sax": "^1.2.1",
+				"arg": "^5.0.0",
+				"sax": "^1.2.4"
+			},
+			"bin": {
+				"sitemap": "dist/cli.js"
+			},
+			"engines": {
+				"node": ">=12.0.0",
+				"npm": ">=5.6.0"
+			}
+		},
 		"node_modules/slash": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
@@ -8175,7 +8232,8 @@
 		"node_modules/strnum": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
-			"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
+			"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==",
+			"dev": true
 		},
 		"node_modules/style-to-object": {
 			"version": "0.3.0",
@@ -9370,10 +9428,21 @@
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@astrojs/rss/-/rss-1.0.0.tgz",
 			"integrity": "sha512-vOPocf/SC0TfHsCwQXupvLGm0y3oIwpRCnnF2igDP3gFSxQEOk4nmsuVTEU2N87hYyX1/5uxbjJhixuSV/L8Cw==",
+			"dev": true,
 			"requires": {
 				"fast-xml-parser": "^4.0.8"
 			}
 		},
+		"@astrojs/sitemap": {
+			"version": "1.0.0",
+			"resolved": "https://registry.npmjs.org/@astrojs/sitemap/-/sitemap-1.0.0.tgz",
+			"integrity": "sha512-42GxuF5FP7RaKXZrwGLBLOX3hPv+Wl7ExJC43O0J5e34ojJkLeKf7QfwN1UwrJlqH0Ywi0Fm4/xGe482G09+wg==",
+			"dev": true,
+			"requires": {
+				"sitemap": "^7.1.1",
+				"zod": "^3.17.3"
+			}
+		},
 		"@astrojs/solid-js": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@astrojs/solid-js/-/solid-js-1.0.0.tgz",
@@ -10044,6 +10113,12 @@
 				"@types/unist": "*"
 			}
 		},
+		"@types/node": {
+			"version": "17.0.45",
+			"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.45.tgz",
+			"integrity": "sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==",
+			"dev": true
+		},
 		"@types/parse5": {
 			"version": "6.0.3",
 			"resolved": "https://registry.npmjs.org/@types/parse5/-/parse5-6.0.3.tgz",
@@ -10056,6 +10131,15 @@
 			"integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==",
 			"dev": true
 		},
+		"@types/sax": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/@types/sax/-/sax-1.2.4.tgz",
+			"integrity": "sha512-pSAff4IAxJjfAXUG6tFkO7dsSbTmf8CtUpfhhZ5VhkRpC4628tJhh3+V6H1E+/Gs9piSzYKT5yzHO5M4GG9jkw==",
+			"dev": true,
+			"requires": {
+				"@types/node": "*"
+			}
+		},
 		"@types/unist": {
 			"version": "2.0.6",
 			"resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.6.tgz",
@@ -10294,6 +10378,12 @@
 				"picomatch": "^2.0.4"
 			}
 		},
+		"arg": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+			"integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+			"dev": true
+		},
 		"argparse": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
@@ -11804,6 +11894,7 @@
 			"version": "4.0.9",
 			"resolved": "https://registry.npmjs.org/fast-xml-parser/-/fast-xml-parser-4.0.9.tgz",
 			"integrity": "sha512-4G8EzDg2Nb1Qurs3f7BpFV4+jpMVsdgLVuG1Uv8O2OHJfVCg7gcA53obuKbmVqzd4Y7YXVBK05oJG7hzGIdyzg==",
+			"dev": true,
 			"requires": {
 				"strnum": "^1.0.5"
 			}
@@ -14730,6 +14821,12 @@
 				"suf-log": "^2.5.3"
 			}
 		},
+		"sax": {
+			"version": "1.2.4",
+			"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+			"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
+			"dev": true
+		},
 		"section-matter": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/section-matter/-/section-matter-1.0.0.tgz",
@@ -14867,6 +14964,18 @@
 			"integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==",
 			"dev": true
 		},
+		"sitemap": {
+			"version": "7.1.1",
+			"resolved": "https://registry.npmjs.org/sitemap/-/sitemap-7.1.1.tgz",
+			"integrity": "sha512-mK3aFtjz4VdJN0igpIJrinf3EO8U8mxOPsTBzSsy06UtjZQJ3YY3o3Xa7zSc5nMqcMrRwlChHZ18Kxg0caiPBg==",
+			"dev": true,
+			"requires": {
+				"@types/node": "^17.0.5",
+				"@types/sax": "^1.2.1",
+				"arg": "^5.0.0",
+				"sax": "^1.2.4"
+			}
+		},
 		"slash": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz",
@@ -15029,7 +15138,8 @@
 		"strnum": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/strnum/-/strnum-1.0.5.tgz",
-			"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA=="
+			"integrity": "sha512-J8bbNyKKXl5qYcR36TIO8W3mVGVHrmmxsd5PAItGkmyzwJvybiw2IVq5nqd0i4LSNSkB/sx9VHllbfFdr9k1JA==",
+			"dev": true
 		},
 		"style-to-object": {
 			"version": "0.3.0",

package.json

@@ -22,6 +22,7 @@
 		"@astrojs/image": "^0.3.4",
 		"@astrojs/mdx": "^0.10.0",
 		"@astrojs/rss": "^1.0.0",
+		"@astrojs/sitemap": "^1.0.0",
 		"@astrojs/solid-js": "^1.0.0",
 		"@types/mdx": "^2.0.2",
 		"@typescript-eslint/eslint-plugin": "^5.33.1",

src/components/BaseLayout/BaseLayout.astro

@@ -1,13 +1,25 @@
 ---
-import './BaseLayout.scss';
+import { IS_SITE_UNDER_CONSTRUCTION } from "@root/config";
-import Header from '@components/Header';
+import Header from "@components/Header";
-import Footer from '@components/Footer';
+import Footer from "@components/Footer";
+import HeaderBanner from "@components/HeaderBanner";
+import UIString from "@components/UIString";
+import "./BaseLayout.scss";
 ---
 
 <body>
+	{
+		IS_SITE_UNDER_CONSTRUCTION && (
+			<HeaderBanner>
+				&#128679;&nbsp;
+				<UIString key={"site.underConstruction"} />
+				&nbsp;&#128679;
+			</HeaderBanner>
+		)
+	}
 	<Header />
-	<main class='site-content'>
+	<main class="site-content">
-		<slot></slot>
+		<slot />
 	</main>
 	<Footer />
 </body>

src/components/Header/Header.astro

@@ -1,18 +1,18 @@
 ---
 import { Icon } from "astro-icon";
-import { SITE_METADATA } from "@root/config";
+import { IS_SITE_UNDER_CONSTRUCTION, SITE_METADATA } from "@root/config";
 import ThemeSwitcher from "@components/ThemeSwticher";
 import UIString from "@components/UIString";
-import NavToggle from "./NavToggle";
-import "./Header.scss";
 import TranslatedLink from "@components/TranslatedLink";
 import LanguageSelect from "@components/LanguageSelect";
+import NavToggle from "./NavToggle";
+import "./Header.scss";
 
 const { name, nav, contacts } = SITE_METADATA;
 const { pathname } = Astro.url;
 ---
 
-<header class="header">
+<header class={`header${IS_SITE_UNDER_CONSTRUCTION ? " header-banner" : ""}`}>
 	<div class="container">
 		<div class="header__logo">
 			<TranslatedLink to={"/"}>

src/components/HeaderBanner/HeaderBanner.astro

@@ -0,0 +1,34 @@
+<div class="banner-wrapper">
+	<span><slot /></span>
+</div>
+
+<style lang="scss" is:global>
+	.header.header-banner {
+		top: 45px;
+	}
+
+	.banner-wrapper {
+		padding: 12px 0;
+		min-height: 45px;
+		text-align: center;
+		background: var(--color-black);
+		color: var(--color-white);
+		position: sticky;
+		top: 0;
+		z-index: 99999;
+	}
+
+	@media screen and (max-width: 768px) {
+		body[data-is-mobile-open="true"] {
+			& .header.header-banner {
+				margin-top: 45px;
+				& .language-select {
+					bottom: 145px;
+				}
+				& .theme-switcher {
+					bottom: 80px;
+				}
+			}
+		}
+	}
+</style>

src/components/HeaderBanner/index.ts

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

src/config.ts

@@ -1,5 +1,8 @@
 export const DEFAULT_LANGUAGE: LanguageKeys = "ru";
 
+/* Show banner about website development */
+export const IS_SITE_UNDER_CONSTRUCTION = true;
+
 export const UTTERANCES_CONFIG: UtterancesConfigType = {
 	repo: "sergeyyarkov/comments",
 	issueTerm: "title",

src/i18n/en/ui.ts

@@ -2,6 +2,7 @@ export default {
 	"site.title": "yarkov.tech",
 	"site.description":
 		"Here I publish articles and tutorials on various IT topics, as well as talk about my projects that I have done over the past few years.",
+	"site.underConstruction": "This web-site is under development...",
 	"articles.empty": "No articles found...",
 	"articlePost.comments": "Comments",
 	"recentArticles.empty": "There is nothing here yet...",

src/i18n/ru/ui.ts

@@ -2,6 +2,7 @@ export default {
 	"site.title": "yarkov.tech",
 	"site.description":
 		"Здесь я публикую статьи и туториалы на различные IT темы, а также рассказываю о своих проектах которые я сделал за последние несколько лет.",
+	"site.underConstruction": "Этот веб-сайт находится в разработке...",
 	"articles.empty": "Не найдено ни одной статьи...",
 	"articlePost.comments": "Комментарии",
 	"recentArticles.empty": "Пока что здесь ничего нет...",

src/utils/string.ts

@@ -5,3 +5,9 @@ export function removeSlashes(string: string): string {
 export function isEmail(email: string): boolean {
 	return new RegExp(/[a-z0-9]+@[a-z]+\.[a-z]{2,3}/).test(email);
 }
+
+export function normalizeLangTag(tag: string) {
+	if (!tag.includes("-")) return tag.toLowerCase();
+	const [lang, region] = tag.split("-");
+	return lang.toLowerCase() + "-" + region.toUpperCase();
+}