fix: disabled astro images

astro.config.mjs

@@ -23,7 +23,6 @@ export default defineConfig({
 	site: "https://yarkov.tech",
 	integrations: [
 		solid(),
-		image(),
 		sitemap({
 			i18n: {
 				defaultLocale: "ru",
@@ -33,6 +32,7 @@ export default defineConfig({
 				},
 			},
 		}),
+		image(),
 		mdx({
 			remarkPlugins: [remarkGfm, remarkSmartypants],
 			rehypePlugins: [

public/robots.txt

@@ -0,0 +1,6 @@
+# Disallow all at the time of development
+
+User-agent: *
+Disallow: /
+
+Sitemap: https://yarkov.tech/sitemap-index.xml

src/components/ArticleContent/ArticleContent.scss

@@ -193,6 +193,10 @@
 			}
 		}
 	}
+	& .languages-available {
+		margin: 25px 0;
+		font-size: var(--font-size-lg);
+	}
 }
 
 @media screen and (max-width: 800px) {

src/components/ArticlePost/ArticlePost.astro

@@ -1,6 +1,7 @@
 ---
+// import { Image } from "@astrojs/image/components";
+// import * as utils from "@utils/string";
 import { createDateFormatter } from "@root/utils";
-import { Image } from "@astrojs/image/components";
 import ArticleComments from "@components/ArticleComments";
 import "./ArticlePost.scss";
 import TranslatedLink from "../TranslatedLink";
@@ -11,7 +12,7 @@ export type Props = {
 };
 
 const { data, lang } = Astro.props as Props;
-const { title, tags, author, published_at } = data;
+const { title, coverImage, tags, author, published_at } = data;
 ---
 
 <article itemscope itemtype="http://schema.org/BlogPosting" class="article">
@@ -35,10 +36,16 @@ const { title, tags, author, published_at } = data;
 			<span itemprop="author">{author}</span>
 		</div>
 		{
-			data.coverImage && (
+			coverImage && (
 				<div>
 					<figure>
-						<Image itemprop="image" src={data.coverImage} width={700} height={400} aspectRatio={"16:9"} format={"webp"} alt={data.title} />
+						{coverImage && <img src={coverImage} width='700' height='400' alt={title} />}
+						{/* Render remote or local image */}
+						{/* utils.isURL(coverImage) ? (
+							<Image itemprop="image" src={coverImage} width={700} height={400} aspectRatio={"16:9"} format={"webp"} alt={data.title} />
+						) : (
+							<Image itemprop="image" src={cover.default.src} width={700} height={400} aspectRatio={"16:9"} format={"webp"} alt={data.title} />
+						)*/}
 					</figure>
 				</div>
 			)

src/components/BaseHead.astro

@@ -11,24 +11,28 @@ const t = useTranslation(Astro);
 const { title = SITE_METADATA.title, description } = Astro.props as Props;
 ---
 
-<link rel="preconnect" href="https://fonts.googleapis.com" />
+<head>
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+	<link rel="preconnect" href="https://fonts.googleapis.com" />
-<link href="https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,400;0,500;0,600;0,700;1,400&family=IBM+Plex+Mono&display=swap" rel="stylesheet"
+	<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&family=IBM+Plex+Mono&display=swap"
+		rel="preload" as="style" onload="this.rel='stylesheet'"
+	/>
 
-<meta charset="utf-8" />
+	<meta charset="utf-8" />
-<meta name="viewport" content="width=device-width, initial-scale=1" />
+	<meta name="viewport" content="width=device-width, initial-scale=1" />
-<title>{title}</title>
+	<title>{title}</title>
-<meta name="title" content={title} />
+	<meta name="title" content={title} />
-<meta name="description" content={description || t("site.description")} />
+	<meta name="description" content={description || t("site.description")} />
-<meta name="theme-color" content={SITE_METADATA.themeColor} />
+	<meta name="theme-color" content={SITE_METADATA.themeColor} />
-<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+	<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-light-32x32.png" media="(prefers-color-scheme: light)" />
+	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-light-32x32.png" media="(prefers-color-scheme: light)" />
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-light-16x16.png" media="(prefers-color-scheme: light)" />
+	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-light-16x16.png" media="(prefers-color-scheme: light)" />
-<link rel="icon" type="image/png" sizes="32x32" href="/favicon-dark-32x32.png" media="(prefers-color-scheme: dark)" />
+	<link rel="icon" type="image/png" sizes="32x32" href="/favicon-dark-32x32.png" media="(prefers-color-scheme: dark)" />
-<link rel="icon" type="image/png" sizes="16x16" href="/favicon-dark-16x16.png" media="(prefers-color-scheme: dark)" />
+	<link rel="icon" type="image/png" sizes="16x16" href="/favicon-dark-16x16.png" media="(prefers-color-scheme: dark)" />
-<link rel="manifest" href="/site.webmanifest" />
+	<link rel="manifest" href="/site.webmanifest" />
-<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
+	<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5" />
-<meta name="msapplication-TileColor" content="#da532c" />
+	<meta name="msapplication-TileColor" content="#da532c" />
-<script is:inline src="/assets/js/detect-theme.js"></script>
+	<slot />
-<slot />
+	<script is:inline src="/assets/js/detect-theme.js"></script>
+</head>

src/components/Counter/Counter.scss

@@ -0,0 +1,14 @@
+.counter {
+	margin: 2rem 0;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	row-gap: 15px;
+	border: 1px solid var(--border-color);
+	border-radius: var(--border-radius-md);
+	padding: 15px 5px;
+	& div {
+		display: flex;
+		column-gap: 3px;
+	}
+}

src/components/Counter/Counter.tsx

@@ -0,0 +1,45 @@
+import type { Component } from "solid-js";
+
+import { createSignal, createEffect } from "solid-js";
+import Button from "../Button";
+import "./Counter.scss";
+
+const Counter: Component<{ tick?: number }> = (props) => {
+	const [isRunned, setIsRunned] = createSignal<boolean>(false);
+	const [count, setCount] = createSignal<number>(0);
+
+	const run = () => setIsRunned(true);
+	const stop = () => setIsRunned(false);
+	const inc = () => setCount(count() + 1);
+	const dec = () => setCount(count() - 1);
+
+	createEffect(() => {
+		setInterval(() => {
+			if (isRunned()) {
+				setCount(count() + 1);
+			}
+		}, props.tick || 200);
+	});
+
+	return (
+		<div class="counter">
+			<span>{count()}</span>
+			<div>
+				<Button disabled={isRunned()} onClick={run}>
+					Run
+				</Button>
+				<Button disabled={isRunned()} onClick={inc}>
+					+
+				</Button>
+				<Button disabled={isRunned()} onClick={dec}>
+					-
+				</Button>
+				<Button disabled={!isRunned()} onClick={stop}>
+					Stop
+				</Button>
+			</div>
+		</div>
+	);
+};
+
+export default Counter;

src/components/Counter/index.ts

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

src/components/SearchInput/SearchInput.tsx

@@ -61,8 +61,7 @@ const SearchInput: Component<SearchInputProps> = (props) => {
 			<input
 				onInput={onSearch}
 				value={search()}
-				type="text"
+				type="search"
-				role="search"
 				placeholder={props.placeholder || "Search article by title or description..."}
 				autocapitalize="off"
 				autocomplete="off"

src/layouts/article.astro

@@ -16,12 +16,9 @@ const { lang = "ru", content } = Astro.props as Props;
 ---
 
 <html lang={lang}>
-	<head>
+	<BaseHead title={content.title} description={content.description}>
-		<BaseHead title={content.title} description={content.description}>
+		<script is:inline defer src="/assets/js/load-code-highlight.js"></script>
-			<script is:inline defer src="/assets/js/load-code-highlight.js"></script>
+	</BaseHead>
-		</BaseHead>
-	</head>
-
 	<BaseLayout>
 		<div class="container">
 			<ArticlePost lang={lang} data={content}>

src/layouts/default.astro

@@ -10,16 +10,16 @@ import "@styles/global.scss";
 export interface Props extends BaseHeadProps {
 	lang?: string | undefined;
 	showPageHeading?: boolean | undefined;
+	noIndex?: boolean;
 }
 
-const { title, description, lang = "ru", showPageHeading = true } = Astro.props as Props;
+const { title, description, lang = "ru", showPageHeading = true, noIndex = false } = Astro.props as Props;
 ---
 
 <html lang={lang}>
-	<head>
+	<BaseHead title={title ? `${title} | ${SITE_METADATA.title}` : SITE_METADATA.title} description={description}>
-		<BaseHead title={title ? `${title} | ${SITE_METADATA.title}` : SITE_METADATA.title} description={description} />
+		{noIndex && <meta name="robots" content="noindex" />}
-	</head>
+	</BaseHead>
-
 	<BaseLayout>
 		<div class="container">
 			{showPageHeading && <PageHeading heading={title} description={description} />}

src/templates/About.astro

@@ -14,7 +14,7 @@ const { Content } = await import(`../../content/about/${lang}/index.mdx`);
 const { skills } = SITE_METADATA;
 ---
 
-<PageLayout lang={lang} title={t("pageTitle.about")}>
+<PageLayout noIndex lang={lang} title={t("pageTitle.about")}>
 	<section>
 		<ArticleContent>
 			<Content />

src/templates/Contacts.astro

@@ -9,7 +9,7 @@ const t = useTranslation(Astro);
 const lang = getLanguageFromURL(Astro.url.pathname);
 ---
 
-<PageLayout lang={lang} title={t("pageTitle.contacts")} description={t("pageDescription.contacts")}>
+<PageLayout noIndex lang={lang} title={t("pageTitle.contacts")} description={t("pageDescription.contacts")}>
 	<section>
 		<ContactForm
 			i18n={{

src/templates/Home.astro

@@ -27,5 +27,5 @@ const articles = utils.transformArticles(data);
 			<Link icon="email_filled" href="/contacts/"><UIString key={"splash.contact"} /></Link>
 		</SplashLinks>
 	</Splash>
-	<RecentArticles articles={articles} length={10} />
+	<RecentArticles articles={articles} length={5} />
 </PageLayout>

src/templates/Projects.astro

@@ -11,7 +11,7 @@ const lang = getLanguageFromURL(Astro.url.pathname);
 const { projects } = SITE_METADATA;
 ---
 
-<PageLayout lang={lang} title={t("pageTitle.projects")} description={t("pageDescription.projects")}>
+<PageLayout noIndex lang={lang} title={t("pageTitle.projects")} description={t("pageDescription.projects")}>
 	<section>
 		<ProjectsList>
 			{projects.map((project) => <ProjectItem data={project} />)}

src/utils/string.ts

@@ -6,6 +6,10 @@ export function isEmail(email: string): boolean {
 	return new RegExp(/[a-z0-9]+@[a-z]+\.[a-z]{2,3}/).test(email);
 }
 
+export function isURL(url: string): boolean {
+	return new RegExp(/(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\\/~+#-]*[\w@?^=%&\\/~+#-])/).test(url);
+}
+
 export function normalizeLangTag(tag: string) {
 	if (!tag.includes("-")) return tag.toLowerCase();
 	const [lang, region] = tag.split("-");

tsconfig.json

@@ -18,7 +18,8 @@
 			"@utils/*": ["./src/utils/*"],
 			"@stores/*": ["./src/stores/*"],
 			"@hooks/*": ["./src/hooks/*"],
-			"@i18n/*": ["./src/i18n/*"]
+			"@i18n/*": ["./src/i18n/*"],
+			"@images/*": ["./src/images/*"]
 		},
 		"outDir": "./dist",
 		"typeRoots": ["./node_modules/@types", "./src/types"]