Merge branch 'release/1.0.4' into main

.github/dependabot.yml

@@ -6,3 +6,4 @@ updates:
       interval: "weekly"
       day: "friday"
     target-branch: "develop"
+    open-pull-requests-limit: 10

astro.config.ts

@@ -5,7 +5,6 @@ import solid from "@astrojs/solid-js";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
 import image from "@astrojs/image";
-import compress from "astro-compress";
 
 /**
  * Remark plugins
@@ -46,9 +45,8 @@ export default defineConfig({
 				locales: Object.fromEntries(Object.keys(languages).map((key) => [key, key])),
 			},
 		}),
-		image(),
-		compress({
-			img: false,
+		image({
+			serviceEntryPoint: "@astrojs/image/sharp",
 		}),
 		mdx({
 			remarkPlugins: [remarkGfm, remarkSmartypants],

content

@@ -1 +1 @@
-Subproject commit f6935ce7cb7e7926ebd39375b1ce7383bd08442b
+Subproject commit 174135ce8e96c4fc14b0f4df1d549fd8f463ce6d

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "yarkov.tech",
-	"version": "1.0.3",
+	"version": "1.0.4",
 	"private": true,
 	"description": "Personal website created with Astro.",
 	"author": {
@@ -19,32 +19,34 @@
 		"lint": "eslint '**/*.{js,mjs,ts,tsx}'"
 	},
 	"devDependencies": {
-		"@astrojs/image": "^0.7.1",
-		"@astrojs/mdx": "^0.11.1",
-		"@astrojs/rss": "^1.0.1",
+		"@astrojs/image": "^0.11.1",
+		"@astrojs/mdx": "^0.11.5",
+		"@astrojs/rss": "^1.0.3",
 		"@astrojs/sitemap": "^1.0.0",
-		"@astrojs/solid-js": "^1.1.0",
+		"@astrojs/solid-js": "^1.2.2",
 		"@types/html-escaper": "^3.0.0",
-		"@types/mdx": "^2.0.2",
-		"@typescript-eslint/eslint-plugin": "^5.38.0",
-		"@typescript-eslint/parser": "^5.38.0",
-		"astro": "^1.3.0",
-		"astro-compress": "^1.0.8",
-		"astro-icon": "^0.7.3",
-		"eslint": "^8.23.1",
-		"eslint-plugin-solid": "^0.7.3",
+		"@types/mdx": "^2.0.3",
+		"@typescript-eslint/eslint-plugin": "^5.42.0",
+		"@typescript-eslint/parser": "^5.42.0",
+		"astro": "^1.6.3",
+		"astro-icon": "^0.8.0",
+		"eslint": "^8.26.0",
+		"eslint-plugin-solid": "^0.8.0",
 		"hast-util-to-string": "^2.0.0",
-		"hastscript": "^7.0.2",
+		"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.5.4",
+		"prettier-plugin-astro": "^0.7.0",
 		"rehype-autolink-headings": "^6.1.1",
-		"rehype-slug": "^5.0.1",
+		"rehype-slug": "^5.1.0",
 		"remark-gfm": "^3.0.1",
 		"remark-smartypants": "^2.0.0",
-		"sass": "^1.55.0",
-		"solid-js": "^1.5.5"
+		"sass": "^1.56.0",
+		"solid-js": "^1.6.1"
+	},
+	"dependencies": {
+		"sharp": "^0.31.2"
 	}
 }

src/components/ArticleContent/ArticleContent.scss

@@ -1,11 +1,4 @@
 .article-content {
-	& p,
-	& em,
-	& q {
-		line-height: var(--line-height-base);
-		font-size: var(--font-size-lg);
-	}
-
 	& h1,
 	h2,
 	h3,
@@ -17,11 +10,11 @@
 		padding-bottom: 5px;
 	}
 
-	& ul {
+	& ul,
+	ol {
 		padding-left: 1.5rem;
 		line-height: var(--line-height-base);
-		margin-bottom: 1.5rem;
-		margin-top: 0;
+		margin: 1.5rem 0;
 		& li {
 			font-size: var(--font-size-lg);
 			line-height: var(--line-height-base);
@@ -50,6 +43,9 @@
 
 	& figure {
 		margin: 0 0 1em;
+		& figcaption {
+			color: var(--color-gray-400);
+		}
 	}
 
 	& hr {

src/components/ArticlePost/ArticlePost.astro

@@ -12,7 +12,7 @@ export type Props = {
 };
 
 const { data, lang } = Astro.props as Props;
-const { title, coverImage, tags, author, published_at } = data;
+const { title, description, coverImage, tags, author, published_at } = data;
 ---
 
 <article itemscope itemtype="http://schema.org/BlogPosting" class="article">
@@ -41,13 +41,13 @@ const { title, coverImage, tags, author, published_at } = data;
 		</div>
 		{
 			coverImage && (
-				<div>
+				<div class="cover">
 					<figure>
 						<Picture
 							itemprop="image"
 							src={isURL(coverImage) ? coverImage : `../../../content/assets/images/${coverImage}`}
-							sizes="(max-width: 500px) 500px, 700px"
-							widths={[500, 700]}
+							sizes="(max-width: 450px) 450px, 700px"
+							widths={[450, 700]}
 							formats={["webp"]}
 							aspectRatio={"16:9"}
 							alt={title}
@@ -56,6 +56,11 @@ const { title, coverImage, tags, author, published_at } = data;
 				</div>
 			)
 		}
+		<div class="description">
+			<p>
+				{description}
+			</p>
+		</div>
 	</header>
 	<slot />
 	<ArticleComments />

src/components/ArticlePost/ArticlePost.scss

@@ -31,21 +31,28 @@
 		}
 	}
 
-	& img {
-		border-radius: var(--border-radius-md);
-		display: block;
-		margin: 0 auto;
-		max-width: 100%;
-		height: auto;
-	}
-
-	& figure {
-		margin: 0;
+	& .cover {
+		margin: 20px 0;
+		& figure {
+			margin: 0;
+		}
 	}
 
 	& 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) {

src/components/ContactForm/ContactForm.astro

@@ -57,7 +57,7 @@ const t = useTranslation(Astro);
 	}
 
 	@media screen and (max-width: 560px) {
-		.contact-form .flex {
+		form .flex {
 			flex-direction: column;
 			row-gap: 7px;
 		}

src/styles/global.scss

@@ -35,6 +35,13 @@ body {
 	background: var(--background-body-color);
 }
 
+p,
+em,
+q {
+	line-height: var(--line-height-base);
+	font-size: var(--font-size-lg);
+}
+
 .container {
 	max-width: var(--content-width);
 	margin: 0 auto;
@@ -80,11 +87,6 @@ body {
 	}
 }
 
-p {
-	margin-top: 0;
-	margin-bottom: 1.5rem;
-}
-
 ul {
 	list-style: none;
 	padding: 0;

src/styles/theme.scss

@@ -25,7 +25,7 @@
 	--line-height-none: 1;
 	--line-height-shorter: 1.25;
 	--line-height-short: 1.375;
-	--line-height-base: 1.5;
+	--line-height-base: 1.525;
 	--line-height-tall: 1.625;
 
 	/* Colors */
@@ -138,6 +138,8 @@
 	--icon-secondary: var(--color-gray-100);
 	--icon-filter: invert(100%);
 
+	--image-filter: grayscale(50%);
+
 	& body > header svg,
 	& body > main svg:not([data-filter="none"]) {
 		filter: var(--icon-filter);