fix

astro.config.mjs

@@ -33,9 +33,7 @@ export default defineConfig({
 			},
 		}),
 		// image(),
-		compress({
-			html: false,
-		}),
+		compress(),
 		mdx({
 			remarkPlugins: [remarkGfm, remarkSmartypants],
 			rehypePlugins: [

src/components/BaseLayout/BaseLayout.astro

@@ -2,9 +2,9 @@
 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";
-import "./BaseLayout.scss";
 ---
 
 <body>
@@ -18,8 +18,8 @@ import "./BaseLayout.scss";
 		)
 	}
 	<Header />
-	<main class="site-content">
+	<SiteContent>
 		<slot />
-	</main>
+	</SiteContent>
 	<Footer />
 </body>

src/components/BaseLayout/BaseLayout.scss

@@ -1,11 +0,0 @@
-.site-content {
-	flex: 1 0 auto;
-	width: 100%;
-	margin-top: 5rem;
-}
-
-@media screen and (max-width: 768px) {
-	.site-content {
-		margin-top: 3rem;
-	}
-}

src/components/Footer/Footer.astro

@@ -1,5 +1,4 @@
 ---
-import "./Footer.scss";
 import { Icon } from "astro-icon";
 ---
 
@@ -22,3 +21,38 @@ import { Icon } from "astro-icon";
 		<p class="footer__copy">© 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/Footer.scss

@@ -1,34 +0,0 @@
-.footer {
-	& .container {
-		margin-top: 5rem;
-		padding: 25px 0 10px 0;
-		font-weight: 500;
-		border-top: 1px solid var(--border-color);
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		row-gap: 15px;
-		user-select: none;
-	}
-	&__links {
-		display: flex;
-		align-items: center;
-		column-gap: 25px;
-		list-style: none;
-		margin: 0;
-		padding: 0;
-		& li {
-			display: flex;
-			align-items: center;
-			column-gap: 7px;
-			& a {
-				color: var(--font-color);
-				font-size: var(--font-size-sm);
-			}
-		}
-	}
-	&__copy {
-		text-align: center;
-		font-size: var(--font-size-xs);
-	}
-}

src/components/SiteContent/SiteContent.astro

@@ -0,0 +1,17 @@
+<main>
+	<slot />
+</main>
+
+<style>
+	main {
+		flex: 1 0 auto;
+		width: 100%;
+		margin-top: 5rem;
+	}
+
+	@media (max-width: 768px) {
+		main {
+			margin-top: 3rem;
+		}
+	}
+</style>

src/components/SiteContent/index.ts

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

src/layouts/article.astro

@@ -6,10 +6,9 @@ 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";
+import "@styles/global.scss";
 
 export interface Props extends BaseHeadProps {
 	lang?: string | undefined;
@@ -27,17 +26,15 @@ const { lang = "ru", content, canonicalUrl } = Astro.props as Props;
 		<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))}`} />
-		)
-		}
+		{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))}`} />
+		)}
+		<script is:inline defer src="/assets/js/load-code-highlight.js"></script>
 	</BaseHead>
 	
-	<script is:inline defer src="/assets/js/load-code-highlight.js"></script>
 
 	<BaseLayout>
 		<div class="container">