From f433bfc1fee7f9c3d0a1bc431ae2d1f2930396df Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Mon, 1 Aug 2022 22:12:53 +0300
Subject: [PATCH] some refactor

---
 src/components/BaseHead.astro               | 21 +++++++++----------
 src/components/ProjectItem/ProjectItem.scss |  7 +++----
 src/components/SearchInput/SearchInput.tsx  | 12 +++++++++--
 src/config.ts                               |  8 ++-----
 src/icons/book.svg                          |  3 +++
 src/styles/theme.scss                       |  2 +-
 src/types/main.d.ts                         | 23 +++++++++++++++++++++
 7 files changed, 52 insertions(+), 24 deletions(-)
 create mode 100644 src/icons/book.svg

diff --git a/src/components/BaseHead.astro b/src/components/BaseHead.astro
index 2a2565d..9d6975d 100644
--- a/src/components/BaseHead.astro
+++ b/src/components/BaseHead.astro
@@ -9,18 +9,17 @@ export interface Props {
 const { title = SITE_METADATA.title, description } = Astro.props as Props;
 ---
 
-<link rel='preconnect' href='https://fonts.googleapis.com' />
-<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />
-<link href='https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap' rel='stylesheet' />
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap" rel="stylesheet" />
 
-<meta charset='utf-8' />
-<meta name='viewport' content='width=device-width, initial-scale=1' />
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
 <title>
 	{title}
 </title>
-<meta name='title' content={title} />
-<meta name='description' content={description || SITE_METADATA.description} />
-<script is:inline src='/assets/js/detect-theme.js'>
-
-</script>
-<slot></slot>
+<meta name="title" content={title} />
+<meta name="description" content={description || SITE_METADATA.description} />
+<meta name="theme-color" content="#1e2327" />
+<script is:inline src="/assets/js/detect-theme.js" />
+<slot />
diff --git a/src/components/ProjectItem/ProjectItem.scss b/src/components/ProjectItem/ProjectItem.scss
index acdc63f..4669e2b 100644
--- a/src/components/ProjectItem/ProjectItem.scss
+++ b/src/components/ProjectItem/ProjectItem.scss
@@ -1,4 +1,6 @@
 .project-item {
+	display: flex;
+	flex-direction: column;
 	border: 1px solid var(--border-color);
 	border-radius: var(--border-radius-lg);
 	padding: 15px;
@@ -25,12 +27,9 @@
 		}
 	}
 
-	&__description {
-		margin-bottom: 15px;
-	}
-
 	&__links {
 		display: flex;
+		margin-top: auto;
 		column-gap: 5px;
 	}
 }
diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx
index 5430cd6..e2221d8 100644
--- a/src/components/SearchInput/SearchInput.tsx
+++ b/src/components/SearchInput/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { Component, JSX } from 'solid-js';
+import type { Component, JSX } from 'solid-js';
 
 import { createEffect } from 'solid-js';
 import { search, setSearch } from '@stores/searchStore';
@@ -58,7 +58,15 @@ const SearchInput: Component<SearchInputProps> = (props) => {
 			<svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" data-filter="none">
 				<path d="M10.6026 3.60001C11.8798 3.59993 13.1316 3.94283 14.2172 4.5901C15.3028 5.23736 16.179 6.16331 16.7472 7.26368C17.3154 8.36405 17.5531 9.59517 17.4334 10.8184C17.3137 12.0417 16.8415 13.2085 16.0699 14.1876L21.2427 19.164C21.4085 19.3248 21.5053 19.5399 21.5135 19.7662C21.5218 19.9926 21.4411 20.2137 21.2874 20.3853C21.1337 20.5569 20.9184 20.6665 20.6845 20.6921C20.4505 20.7178 20.2151 20.6576 20.0253 20.5236L19.9205 20.436L14.7476 15.4596C13.8802 16.0922 12.8687 16.5172 11.7968 16.6994C10.7248 16.8815 9.62324 16.8157 8.58298 16.5074C7.54272 16.199 6.59366 15.6569 5.81422 14.9259C5.03478 14.1949 4.44733 13.296 4.10042 12.3034C3.7535 11.3108 3.65708 10.2531 3.81911 9.21757C3.98114 8.18204 4.39698 7.19847 5.03226 6.34812C5.66755 5.49778 6.50404 4.80506 7.47263 4.32721C8.44122 3.84936 9.51411 3.60009 10.6026 3.60001V3.60001ZM10.6026 5.40001C9.27934 5.40001 8.01025 5.90572 7.07454 6.80589C6.13884 7.70607 5.61316 8.92697 5.61316 10.2C5.61316 11.473 6.13884 12.6939 7.07454 13.5941C8.01025 14.4943 9.27934 15 10.6026 15C11.9259 15 13.195 14.4943 14.1307 13.5941C15.0664 12.6939 15.5921 11.473 15.5921 10.2C15.5921 8.92697 15.0664 7.70607 14.1307 6.80589C13.195 5.90572 11.9259 5.40001 10.6026 5.40001Z" />
 			</svg>
-			<input onInput={onSearch} value={search()} type="text" placeholder={props.placeholder || 'Search article by title or description...'} />
+			<input
+				onInput={onSearch}
+				value={search()}
+				type="text"
+				role="search"
+				placeholder={props.placeholder || 'Search article by title or description...'}
+				autocapitalize="off"
+				autocomplete="off"
+			/>
 			<span>{props.count}</span>
 		</div>
 	);
diff --git a/src/config.ts b/src/config.ts
index 232e695..d959cd5 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,8 +1,4 @@
-export const SITE_SETTINGS = {
-	defaultTheme: 'dark',
-};
-
-export const SITE_METADATA = {
+export const SITE_METADATA: SiteMetadataType = {
 	title: 'Sergey Yarkov',
 	name: 'yarkov.tech',
 	author: 'Sergey Yarkov',
@@ -21,7 +17,7 @@ export const SITE_METADATA = {
 	],
 	projects: [
 		{
-			icon: 'nodejs',
+			icon: 'book',
 			name: 'yarkov.tech',
 			year: '2022',
 			description: 'Мой персональный веб-сайт где находятся информация обо мне и список различных статей, туториалов...',
diff --git a/src/icons/book.svg b/src/icons/book.svg
new file mode 100644
index 0000000..05fd249
--- /dev/null
+++ b/src/icons/book.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.5002 3.61666C17.3752 3.51736 17.2288 3.44838 17.0727 3.41512C16.9165 3.38187 16.7548 3.38525 16.6002 3.425L10.8335 4.90833V16.8L17.1335 15.1833C17.3588 15.1257 17.5584 14.9942 17.7004 14.81C17.8423 14.6257 17.9185 14.3993 17.9168 14.1667V4.43333C17.9143 4.27444 17.8754 4.11824 17.8032 3.97669C17.731 3.83514 17.6273 3.71199 17.5002 3.61666ZM9.16684 4.90833L3.38351 3.425C3.23125 3.38974 3.07308 3.38864 2.92035 3.42178C2.76762 3.45492 2.62413 3.52148 2.50018 3.61666C2.37387 3.71541 2.27206 3.84199 2.20268 3.98653C2.1333 4.13107 2.09822 4.28968 2.10018 4.45V14.1667C2.10035 14.3978 2.17742 14.6224 2.31923 14.8049C2.46105 14.9875 2.65956 15.1177 2.88351 15.175L9.16684 16.8V4.90833Z" fill="black"/>
+</svg>
diff --git a/src/styles/theme.scss b/src/styles/theme.scss
index 727a519..dfe9dcc 100644
--- a/src/styles/theme.scss
+++ b/src/styles/theme.scss
@@ -80,7 +80,7 @@
 	--border-radius-lg: 5px;
 
 	/* Sizes */
-	--content-width: 820px;
+	--content-width: 750px;
 	--content-padding: 24px;
 
 	--opacity-hover: 0.7;
diff --git a/src/types/main.d.ts b/src/types/main.d.ts
index 6a1a5ad..182e73b 100644
--- a/src/types/main.d.ts
+++ b/src/types/main.d.ts
@@ -10,6 +10,29 @@ declare global {
 		onthemetoggled: CustomEvent<ThemeModeType>;
 	}
 
+	type SiteMetadataType = {
+		title: string;
+		name: string;
+		author: string;
+		description: string;
+		contacts: {
+			email: string;
+			githubUrl: string;
+			telegramUrl: string;
+		};
+		nav: Array<{ name: string; url: string }>;
+		projects: Array<{
+			icon: string;
+			name: string;
+			year: string;
+			description: string;
+			sourceUrl?: string | undefined;
+			demoUrl?: string | undefined;
+			articleUrl?: string | undefined;
+		}>;
+		skills: Array<{ title: string; list: Array<{ icon: string; name: string }> }>;
+	};
+
 	type ArticleType = {
 		slug: string;
 		title: string;