mirror of
https://github.com/valentineus/popov.link.git
synced 2025-07-03 08:00:26 +03:00
feat: enhance accessibility and language support across components
- Updated various components to include `lang` attributes for improved accessibility and SEO. - Introduced a new `env.d.ts` file to define environment variables for better type safety. - Adjusted the print width in `.prettierrc.mjs` for improved code formatting. - Streamlined the `Header`, `PostElement`, and `SocialLinks` components for better structure and clarity. - Added language support to blog posts and updated the layout to reflect these changes.
This commit is contained in:
@ -30,7 +30,7 @@ export default {
|
||||
},
|
||||
],
|
||||
plugins: ["prettier-plugin-astro"],
|
||||
printWidth: 180,
|
||||
printWidth: 256,
|
||||
proseWrap: "never",
|
||||
quoteProps: "consistent",
|
||||
requirePragma: false,
|
||||
|
@ -1,2 +1,2 @@
|
||||
<!-- AppMetrix -->
|
||||
<script is:inline src="https://appmetrix.com/pixel/T5X0z12SoASBV8Dv"></script>
|
||||
<script is:inline defer src="https://appmetrix.com/pixel/T5X0z12SoASBV8Dv"></script>
|
||||
|
@ -15,6 +15,7 @@ const theme = "transparent_dark";
|
||||
|
||||
<script
|
||||
is:inline
|
||||
defer
|
||||
src="https://giscus.app/client.js"
|
||||
data-category-id={categoryId}
|
||||
data-category={category}
|
||||
|
@ -10,6 +10,6 @@
|
||||
</style>
|
||||
|
||||
<header>
|
||||
<a href="/">Home</a>
|
||||
<a href="/blog/">Blog</a>
|
||||
<a href="/" lang="en" aria-label="Home">Home</a>
|
||||
<a href="/blog/" lang="en" aria-label="Blog">Blog</a>
|
||||
</header>
|
||||
|
@ -25,10 +25,10 @@ const formattedDate = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY"
|
||||
</style>
|
||||
|
||||
<li>
|
||||
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
|
||||
<a href={`/blog/${post.slug}`} lang={post.data.lang}>{post.data.title}</a>
|
||||
<div>
|
||||
<small>
|
||||
<time datetime={post.data.pubDate.toISOString()}>{formattedDate}</time>
|
||||
<time datetime={post.data.pubDate.toISOString()} lang="en">{formattedDate}</time>
|
||||
<span>•</span>
|
||||
<span>{remarkPluginFrontmatter.minutesRead}</span>
|
||||
</small>
|
||||
|
@ -26,7 +26,9 @@ const latestPosts = posts.slice(0, 5);
|
||||
{
|
||||
latestPosts.map((post) => (
|
||||
<li>
|
||||
<a href={`/blog/${post.slug}`}>{post.data.title}</a>
|
||||
<a href={`/blog/${post.slug}`} lang={post.data.lang}>
|
||||
{post.data.title}
|
||||
</a>
|
||||
<small>{dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY")}</small>
|
||||
</li>
|
||||
))
|
||||
|
@ -19,7 +19,7 @@
|
||||
<section>
|
||||
<div>
|
||||
<a href="https://github.com/valentineus" title="GitHub" target="_blank">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="GitHub">
|
||||
<path
|
||||
d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
|
||||
>
|
||||
@ -27,13 +27,13 @@
|
||||
</svg>
|
||||
</a>
|
||||
<a href="mailto:valentin@popov.link" title="E-Mail" target="_blank">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="E-Mail">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||||
<polyline points="22,6 12,13 2,6"></polyline>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/feed.xml" title="RSS" target="_blank">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-label="RSS">
|
||||
<path d="M4 11a9 9 0 0 1 9 9"></path>
|
||||
<path d="M4 4a16 16 0 0 1 16 16"></path>
|
||||
<circle cx="5" cy="19" r="1"></circle>
|
||||
|
@ -1,10 +1,7 @@
|
||||
<section>
|
||||
<div>
|
||||
<h1>Hi, I'm Valentin Popov 👋</h1>
|
||||
<p>
|
||||
I'm a professional software developer currently working as a project manager and team lead. On my personal website, I share thoughts on tech, leadership, and digital
|
||||
life.
|
||||
</p>
|
||||
<p>I'm a professional software developer currently working as a project manager and team lead. On my personal website, I share thoughts on tech, leadership, and digital life.</p>
|
||||
<p>Welcome, and feel free to explore!</p>
|
||||
</div>
|
||||
</section>
|
||||
|
@ -3,6 +3,7 @@ title: 'Create ".lib" file from ".dll" (archive)'
|
||||
author: "Adrian Henke"
|
||||
pubDate: "2023-05-04"
|
||||
description: "Learn how to generate a *.lib file from a *.dll with this comprehensive guide. Using the Visual Studio Command Prompt and Microsoft's recommended tools, this article walks you through the steps for a seamless process. Perfect for developers working with 3rd party win dll's."
|
||||
lang: "en"
|
||||
---
|
||||
|
||||
> This's a copy of a non-my post. The original article [is here](https://adrianhenke.wordpress.com/2008/12/05/create-lib-file-from-dll/) ([archive](https://web.archive.org/web/20161118122539/https://adrianhenke.wordpress.com/2008/12/05/create-lib-file-from-dll/)).
|
||||
|
@ -3,6 +3,7 @@ title: "Горячая перезагрузка ElectronJS приложения"
|
||||
author: "Valentin Popov"
|
||||
pubDate: "2019-08-15"
|
||||
description: "Руководство по автоматической перезагрузке приложений на Electron с помощью пакетов electron-reload и electron-webpack. Обход проблем с совместимостью и использование HMR для renderer процесса."
|
||||
lang: "ru"
|
||||
---
|
||||
|
||||
## Main процесс
|
||||
|
@ -3,6 +3,7 @@ title: "Example Content"
|
||||
author: "Example User"
|
||||
pubDate: "2018-01-01"
|
||||
description: "Howdy! This is an example blog post that shows several types of HTML content supported in this theme."
|
||||
lang: "en"
|
||||
draft: true
|
||||
---
|
||||
|
||||
|
@ -3,6 +3,7 @@ title: 'Получение исходного кода "Chromium Projects"'
|
||||
author: "Valentin Popov"
|
||||
pubDate: "2012-01-30"
|
||||
description: "Изучение исходных кодов Chromium: подготовка системы и установка необходимых программных компонентов. Руководство для начинающих разработчиков. Получите инструкции по установке Microsoft Visual Studio, Cygwin, Python и других инструментов. Действительно на январь-февраль 2012 года."
|
||||
lang: "ru"
|
||||
---
|
||||
|
||||
> Перенос [оригинальной статьи](https://adeptus-mechanicus.blogspot.com/2012/01/chromium-projects.html) 2012 года из моего [старого блога](https://adeptus-mechanicus.blogspot.com/) ([зеркало](https://web.archive.org/web/20160217052148/http://adeptus-mechanicus.blogspot.com/)).
|
||||
|
@ -3,6 +3,7 @@ title: "Установка Moodle в Fedora"
|
||||
author: "Valentin Popov"
|
||||
pubDate: "2018-07-23"
|
||||
description: "Решение проблем установки Moodle из-за SELinux: как настроить правила доступа для устранения ошибок в веб-интерфейсе и при работе с cURL. Практические советы и команды."
|
||||
lang: "ru"
|
||||
---
|
||||
|
||||
Во время установки Moodle, сталкиваешься со следующими проблемами:
|
||||
|
@ -3,6 +3,7 @@ title: "Компиляция Rust на TL-MR3020"
|
||||
author: "Valentin Popov"
|
||||
pubDate: "2023-05-01"
|
||||
description: 'Как настроить и оптимизировать проект Rust для кросс-компиляции на TP-Link TL-MR3020 с использованием Fedora Linux 38 и OpenWrt 22.03.4. Шаг за шагом от базового "Hello, World!" до асинхронного TCP сервера.'
|
||||
lang: "ru"
|
||||
---
|
||||
|
||||
Информация в статье актуальна для дистрибутива [Fedora Linux 38](https://docs.fedoraproject.org/en-US/releases/f38/), прошивки [OpenWrt 22.03.4](https://openwrt.org/releases/22.03/notes-22.03.4) и устройства [TP-Link TL-MR3020](https://www.tp-link.com/en/home-networking/3g-4g-router/tl-mr3020/) ревизии v3.20.
|
||||
|
@ -8,6 +8,7 @@ const blog = defineCollection({
|
||||
draft: z.optional(z.boolean()),
|
||||
pubDate: z.coerce.date(),
|
||||
title: z.string(),
|
||||
lang: z.string(),
|
||||
}),
|
||||
});
|
||||
|
||||
|
9
src/env.d.ts
vendored
Normal file
9
src/env.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
/// <reference path="../.astro/types.d.ts" />
|
||||
interface ImportMetaEnv {
|
||||
readonly DEFAULT_TITLE: string;
|
||||
readonly DEFAULT_DESCRIPTION: string;
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv;
|
||||
}
|
@ -7,12 +7,13 @@ import "../scss/global.scss";
|
||||
type Props = {
|
||||
readonly description: string;
|
||||
readonly title: string;
|
||||
readonly lang: string;
|
||||
};
|
||||
|
||||
const { title, description } = Astro.props;
|
||||
const { title, description, lang } = Astro.props;
|
||||
---
|
||||
|
||||
<html lang="ru">
|
||||
<html lang={lang}>
|
||||
<Head title={title} description={description} />
|
||||
|
||||
<body>
|
||||
|
@ -3,9 +3,10 @@ import Layout from "../layouts/BaseLayout.astro";
|
||||
|
||||
const title = "404 — Page Not Found | Valentin Popov";
|
||||
const description = "The page you're looking for doesn't exist!";
|
||||
const lang = "en";
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<Layout title={title} description={description} lang={lang}>
|
||||
<div style="text-align:center;">
|
||||
<h1>404</h1>
|
||||
<p><strong>Page not found</strong></p>
|
||||
|
@ -24,6 +24,7 @@ const { Content, remarkPluginFrontmatter } = await post.render();
|
||||
const date = dayjs(post.data.pubDate.toString()).format("MMMM DD, YYYY");
|
||||
const title = `${post.data.title} | Valentin Popov`;
|
||||
const description = post.data.description;
|
||||
const lang = post.data.lang;
|
||||
---
|
||||
|
||||
<style lang="scss">
|
||||
@ -34,7 +35,7 @@ const description = post.data.description;
|
||||
}
|
||||
</style>
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<Layout title={title} description={description} lang={lang}>
|
||||
<article>
|
||||
<section>
|
||||
<h1>{post.data.title}</h1>
|
||||
@ -44,7 +45,7 @@ const description = post.data.description;
|
||||
<p>
|
||||
<small>
|
||||
Posted
|
||||
<time datetime={post.data.pubDate.toISOString()}>{date}</time>
|
||||
<time datetime={post.data.pubDate.toISOString()} lang="en">{date}</time>
|
||||
by {post.data.author}
|
||||
<span> • </span>
|
||||
<span>{remarkPluginFrontmatter.minutesRead}</span>
|
||||
|
@ -4,8 +4,9 @@ import { getCollection } from "astro:content";
|
||||
import Layout from "../../layouts/BaseLayout.astro";
|
||||
import PostElement from "../../components/PostElement.astro";
|
||||
|
||||
const title = "Blog | Valentin Popov";
|
||||
const description = "A collection of articles on software development, tech leadership and open-source experiments.";
|
||||
const title = "Valentin Popov's Blog | Software Development, Leadership & Open-Source";
|
||||
const description = "Explore Valentin Popov's blog on software development, tech leadership, and open-source experiments. Stay updated with in-depth tutorials and expert insights.";
|
||||
const lang = "en";
|
||||
|
||||
const posts = await getCollection("blog", ({ data }) => {
|
||||
return data.draft !== true;
|
||||
@ -25,12 +26,16 @@ const postsByYear = posts.reduce<Record<string, CollectionEntry<"blog">[]>>((acc
|
||||
const years = Object.keys(postsByYear).sort((a, b) => Number(b) - Number(a));
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<Layout title={title} description={description} lang={lang}>
|
||||
<section>
|
||||
<h1>Blog posts</h1>
|
||||
</section>
|
||||
|
||||
<section style={{ "margin-top": "3rem" }}>
|
||||
{
|
||||
years.map((year) => (
|
||||
<div>
|
||||
<div style={{ "margin-bottom": "1rem" }}>{year}</div>
|
||||
<h2>{year}</h2>
|
||||
<ul>
|
||||
{postsByYear[year].map((post) => (
|
||||
<PostElement post={post} />
|
||||
|
@ -10,7 +10,7 @@ export async function GET(context) {
|
||||
});
|
||||
|
||||
return rss({
|
||||
customData: `<language>ru-ru</language>`,
|
||||
customData: `<language>en</language>`,
|
||||
description: description,
|
||||
items: posts.map((post) => ({
|
||||
customData: post.data.customData,
|
||||
|
@ -4,11 +4,12 @@ import LatestPostsSection from "../components/Sections/LatestPosts.astro";
|
||||
import SocialLinksSection from "../components/Sections/SocialLinks.astro";
|
||||
import WelcomeSection from "../components/Sections/Welcome.astro";
|
||||
|
||||
const title = "Valentin Popov";
|
||||
const description = "A personal website of Valentin Popov, a software developer and team lead.";
|
||||
const title = "Valentin Popov – Software Developer & Team Lead | Tech Insights";
|
||||
const description = "Valentin Popov is an experienced project manager and team lead sharing expert insights on software development, leadership, and digital innovation.";
|
||||
const lang = "en";
|
||||
---
|
||||
|
||||
<Layout title={title} description={description}>
|
||||
<Layout title={title} description={description} lang={lang}>
|
||||
<WelcomeSection />
|
||||
<SocialLinksSection />
|
||||
<LatestPostsSection />
|
||||
|
Reference in New Issue
Block a user