bubble/yarkov.tech
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/yarkov.tech.git synced 2026-10-11 18:39:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

format

Browse Source
This commit is contained in:
Sergey Yarkov 2022-08-28 13:56:48 +03:00
parent f072df8345
commit fe8e960b87
20 changed files with 143 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.eslintrc.json
View File

@ -3,7 +3,11 @@
"browser": true,
"es2021": true
},
"extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:solid/typescript"],
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"plugin:solid/typescript"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaVersion": "latest",

2
.prettierrc.json
View File

@ -1,5 +1,5 @@
{
"printWidth": 150,
"printWidth": 100,
"semi": true,
"singleQuote": false,
"tabWidth": 2,

4
public/assets/js/detect-theme.js
View File

@ -15,7 +15,9 @@ window.theme = (() => {
document.documentElement.setAttribute("data-theme", window.theme);
/* Sync with OS theme */
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: isDark }) => {
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", ({ matches: isDark }) => {
window.theme = isDark ? "dark" : "light";
localStorage.setItem("theme", window.theme);
document.documentElement.setAttribute("data-theme", window.theme);

4
public/assets/js/load-code-highlight.js
View File

@ -42,7 +42,9 @@ if (window.theme) {
$head.appendChild($dark);
window.addEventListener("onthemetoggled", ({ detail: newTheme }) => toggleMedia(newTheme));
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: isDark }) => {
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", ({ matches: isDark }) => {
return isDark ? toggleMedia("dark") : toggleMedia("light");
});
}

10
src/components/ArticleItem/ArticleItem.tsx
View File

@ -14,13 +14,19 @@ export const ArticleItem: Component<ArticleItemProps> = (props) => {
const hrefLangPrefix = props.data.lang && props.data.lang !== DEFAULT_LANGUAGE ? "/en" : "";
return (
<article class="article-item">
<a href={`${hrefLangPrefix}/blog/${new Date(props.data.published_at).toLocaleDateString("en-CA")}/${props.data.slug}/`}>
<a
href={`${hrefLangPrefix}/blog/${new Date(props.data.published_at).toLocaleDateString(
"en-CA"
)}/${props.data.slug}/`}
>
<div class="flex">
<h3>{props.data.title}</h3>
{isNonDefaultLanguage && <sup>{props.data.lang.toLocaleUpperCase()}</sup>}
</div>
<p>
<time datetime={props.data.published_at.toString()}>{createDateFormatter(props.lang).format(new Date(props.data.published_at))}</time>
<time datetime={props.data.published_at.toString()}>
{createDateFormatter(props.lang).format(new Date(props.data.published_at))}
</time>
</p>
</a>
</article>

5
src/components/ArticlesList/ArticlesList.tsx
View File

@ -84,7 +84,10 @@ const ArticlesList: Component<ArticlesListProps> = (props) => {
return (
<div class="articles-list__wrapper">
<h2>{year}</h2>
<For each={sortArtcilesByDate(articles()[year])} children={(article) => <ArticleItem lang={props.lang} data={article} />} />
<For
each={sortArtcilesByDate(articles()[year])}
children={(article) => <ArticleItem lang={props.lang} data={article} />}
/>
</div>
);
}}

24
src/components/Header/NavToggle/NavToggle.tsx
View File

@ -4,13 +4,25 @@ import { createSignal, createEffect } from "solid-js";
import "./NavToggle.scss";
const MenuIcon: Component = () => (
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px">
<svg
fill="#000000"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
width="24px"
height="24px"
>
<path d="M 0 7.5 L 0 12.5 L 50 12.5 L 50 7.5 Z M 0 22.5 L 0 27.5 L 50 27.5 L 50 22.5 Z M 0 37.5 L 0 42.5 L 50 42.5 L 50 37.5 Z" />
</svg>
);
const CloseIcon: Component = () => (
<svg fill="#000000" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="24px" height="24px">
<svg
fill="#000000"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 50 50"
width="24px"
height="24px"
>
<path d="M 9.15625 6.3125 L 6.3125 9.15625 L 22.15625 25 L 6.21875 40.96875 L 9.03125 43.78125 L 25 27.84375 L 40.9375 43.78125 L 43.78125 40.9375 L 27.84375 25 L 43.6875 9.15625 L 40.84375 6.3125 L 25 22.15625 Z" />
</svg>
);
@ -32,7 +44,13 @@ const NavToggle: Component = () => {
});
return (
<button class="nav-toggle" onClick={toggleNav} type="button" aria-pressed={isNavShown()} aria-label="Menu">
<button
class="nav-toggle"
onClick={toggleNav}
type="button"
aria-pressed={isNavShown()}
aria-label="Menu"
>
{isNavShown() ? <CloseIcon /> : <MenuIcon />}
</button>
);

8
src/components/SearchInput/SearchInput.tsx
View File

@ -54,7 +54,13 @@ const SearchInput: Component<SearchInputProps> = (props) => {
return (
<div class="search-input">
<svg width="25" height="24" viewBox="0 0 25 24" xmlns="http://www.w3.org/2000/svg" data-filter="none">
<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

7
src/components/TagsList/TagsList.tsx
View File

@ -86,7 +86,12 @@ const TagsList: Component<TagsListProps> = (props) => {
<For
each={props.data}
children={(tag) => (
<li onClick={onSelect} class="btn-link" data-tag={tag.toLocaleLowerCase()} data-active={isTagSelected(tag)}>
<li
onClick={onSelect}
class="btn-link"
data-tag={tag.toLocaleLowerCase()}
data-active={isTagSelected(tag)}
>
{tag}
</li>
)}

4
src/components/ThemeSwticher/ThemeSwitcher.tsx
View File

@ -43,7 +43,9 @@ const ThemeSwitcher: Component = () => {
if (window.theme) {
setTheme(window.theme);
/* Update theme state on changing OS theme */
window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", ({ matches: isDark }) => {
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", ({ matches: isDark }) => {
const theme = isDark ? "dark" : "light";
setTheme(theme);
});

3
src/config.ts
View File

@ -1,7 +1,8 @@
export const DEFAULT_LANGUAGE: LanguageKeys = "ru";
/* Show banner about website development */
export const IS_SITE_UNDER_CONSTRUCTION = import.meta.env.IS_SITE_UNDER_CONSTRUCTION === "true" ? true : false;
export const IS_SITE_UNDER_CONSTRUCTION =
import.meta.env.IS_SITE_UNDER_CONSTRUCTION === "true" ? true : false;
export const SITE_METADATA: SiteMetadataType = {
title: "Sergey Yarkov",

6
src/i18n/en/ui.ts
View File

@ -13,8 +13,10 @@ export default {
"pageTitle.projects": "Projects",
"pageTitle.contacts": "Contacts",
/* Page descriptions */
"pageDescription.articles": "Technical articles, tutorials and various reference materials related to IT topics can be found here.",
"pageDescription.projects": "A few of my main projects that have been developed and published in open access.",
"pageDescription.articles":
"Technical articles, tutorials and various reference materials related to IT topics can be found here.",
"pageDescription.projects":
"A few of my main projects that have been developed and published in open access.",
"pageDescription.contacts": "Use the feedback form or write to me on social networks.",
/* Navigation */
"navigation.articles": "Articles",

9
src/i18n/ru/ui.ts
View File

@ -13,9 +13,12 @@ export default {
"pageTitle.projects": "Проекты",
"pageTitle.contacts": "Контакты",
/* Page descriptions */
"pageDescription.articles": "Технические статьи, туториалы и различные справочные материалы которые связаны с IT тематикой находятся здесь.",
"pageDescription.projects": "Несколько моих основных проектов которые были разработаны и выложены в открытый доступ.",
"pageDescription.contacts": "Воспользуйтесь формой обратной связи или напишите мне в социальные сети.",
"pageDescription.articles":
"Технические статьи, туториалы и различные справочные материалы которые связаны с IT тематикой находятся здесь.",
"pageDescription.projects":
"Несколько моих основных проектов которые были разработаны и выложены в открытый доступ.",
"pageDescription.contacts":
"Воспользуйтесь формой обратной связи или напишите мне в социальные сети.",
/* Navigation */
"navigation.articles": "Статьи",
"navigation.projects": "Проекты",

20
src/i18n/utils.ts
View File

@ -3,9 +3,14 @@ import * as utils from "@utils/url";
import { DEFAULT_LANGUAGE } from "@root/config";
import languages from "./languages";
type TranslatedArticlesType = Record<string, Record<LanguageKeys, MDXInstance<ArticleType>> | Record<string, never>>;
type TranslatedArticlesType = Record<
string,
Record<LanguageKeys, MDXInstance<ArticleType>> | Record<string, never>
>;
export function formatArticlesByLangs(data: Record<string, MDXInstance<ArticleType>>): TranslatedArticlesType {
export function formatArticlesByLangs(
data: Record<string, MDXInstance<ArticleType>>
): TranslatedArticlesType {
const modules: TranslatedArticlesType = {};
for (const module of Object.values(data)) {
@ -33,15 +38,20 @@ function transformExports<T>(modules: Record<string, { default: T }>) {
return translations;
}
const translations = transformExports<UIDictionaryKeys>(import.meta.glob("./*/ui.ts", { eager: true }));
const translations = transformExports<UIDictionaryKeys>(
import.meta.glob("./*/ui.ts", { eager: true })
);
export function translate(key: UIDictionaryKeys, lang: LanguageKeys): string | undefined {
const string: string | undefined = translations[lang]?.[key] || translations[DEFAULT_LANGUAGE][key];
const string: string | undefined =
translations[lang]?.[key] || translations[DEFAULT_LANGUAGE][key];
if (string === undefined) console.log(`Cannot find any string for translation key "${key}".`);
return string;
}
export function useTranslation(Astro: Readonly<AstroGlobal>): (key: UIDictionaryKeys) => string | undefined {
export function useTranslation(
Astro: Readonly<AstroGlobal>
): (key: UIDictionaryKeys) => string | undefined {
const lang: LanguageKeys = utils.getLanguageFromURL(Astro.url.pathname) as LanguageKeys;
return (key: UIDictionaryKeys) => translate(key, lang);
}

23
src/pages/[...slug].astro
View File

@ -17,7 +17,9 @@ export interface Props {
}
export async function getStaticPaths() {
const modules = import.meta.glob<MDXInstance<ArticleType>>("../../content/articles/**/*.mdx", { eager: true });
const modules = import.meta.glob<MDXInstance<ArticleType>>("../../content/articles/**/*.mdx", {
eager: true,
});
const entries = Object.keys(modules).map((key) => [key, key.split("/").slice(6)[0]]);
const formatted = formatArticlesByLangs(modules);
@ -26,9 +28,14 @@ export async function getStaticPaths() {
const article = modules[key];
const dirName = key.split("/").at(-3);
const published_at = new Date(article.frontmatter.published_at).toLocaleDateString("en-CA");
const slug = `${lang !== DEFAULT_LANGUAGE ? `${lang}/` : ""}blog/${published_at}/${article.frontmatter.slug}`;
const slug = `${lang !== DEFAULT_LANGUAGE ? `${lang}/` : ""}blog/${published_at}/${
article.frontmatter.slug
}`;
return { params: { slug }, props: { article, alternateLangs: Object.keys(formatted[dirName]) } };
return {
params: { slug },
props: { article, alternateLangs: Object.keys(formatted[dirName]) },
};
})
.filter(({ props: { article } }) => !article.frontmatter.draft);
}
@ -49,7 +56,15 @@ const { pathname } = Astro.url;
{alternateLangs
.filter((lang) => lang !== siteLang)
.map((lang) => (
<a href={DEFAULT_LANGUAGE === lang ? `/${pathname.split("/").slice(2).join("/")}` : `/${lang}${pathname}`}>{languages[lang]}</a>
<a
href={
DEFAULT_LANGUAGE === lang
? `/${pathname.split("/").slice(2).join("/")}`
: `/${lang}${pathname}`
}
>
{languages[lang]}
</a>
))
.reduce((prev, curr) => [prev, ", ", curr])}
</div>

8
src/pages/rss.xml.ts
View File

@ -4,7 +4,9 @@ import rss from "@astrojs/rss";
import { DEFAULT_LANGUAGE, SITE_METADATA } from "@root/config";
import * as utils from "@i18n/utils";
const data = import.meta.glob<MDXInstance<ArticleType>>("../../content/articles/**/*.mdx", { eager: true });
const data = import.meta.glob<MDXInstance<ArticleType>>("../../content/articles/**/*.mdx", {
eager: true,
});
const articles = Object.values(utils.formatArticlesByLangs(data));
const items = [];
@ -20,7 +22,9 @@ for (const key of Object.keys(articles)) {
new Date(published_at).toLocaleDateString("en-CA") +
`/${slug}/`,
title,
description: `${description}${coverImage !== undefined ? `<img src="${coverImage}" alt="${title}">` : ""}`,
description: `${description}${
coverImage !== undefined ? `<img src="${coverImage}" alt="${title}">` : ""
}`,
pubDate: published_at,
customData: `<language>${lang}</language>`,
});

4
src/services/ArticleService.ts
View File

@ -4,7 +4,9 @@ import { getLanguageFromURL } from "@utils/url";
class ArticleService {
public getTranslatedArticles(Astro: Readonly<AstroGlobal>): MDXInstance<ArticleType>[] {
const data = import.meta.glob<MDXInstance<ArticleType>>("../../content/articles/**/*.mdx", { eager: true });
const data = import.meta.glob<MDXInstance<ArticleType>>("../../content/articles/**/*.mdx", {
eager: true,
});
const modules = formatArticlesByLangs(data);
const siteLang = getLanguageFromURL(Astro.url.pathname);
const articles: MDXInstance<ArticleType>[] = [];

5
src/types/main.d.ts vendored
View File

@ -5,7 +5,10 @@ export {};
declare global {
interface Window {
theme?: ThemeModeType | undefined;
addEventListener<K extends keyof CustomEventMap>(type: K, listener: (this: Window, ev: CustomEventMap[K]) => void): void;
addEventListener<K extends keyof CustomEventMap>(
type: K,
listener: (this: Window, ev: CustomEventMap[K]) => void
): void;
}
interface CustomEventMap {

14
src/utils/articles.ts
View File

@ -12,7 +12,9 @@ export const transformArticles = (articles: MDXInstance<ArticleType>[]): Article
}));
export const sortArtcilesByDate = (articles: ArticleType[]): ArticleType[] => {
return articles.sort((a, b) => new Date(b.published_at).valueOf() - new Date(a.published_at).valueOf());
return articles.sort(
(a, b) => new Date(b.published_at).valueOf() - new Date(a.published_at).valueOf()
);
};
/**
@ -31,7 +33,10 @@ export const formatToArticleBlocks = (articles: ArticleType[]): ArticleBlockType
return blocks;
};
export const findArticlesBySearch = (search: string, articles: ArticleBlockType): ArticleBlockType => {
export const findArticlesBySearch = (
search: string,
articles: ArticleBlockType
): ArticleBlockType => {
const matched: Array<ArticleType> = [];
search = search.toLocaleLowerCase();
@ -49,7 +54,10 @@ export const findArticlesBySearch = (search: string, articles: ArticleBlockType)
return formatToArticleBlocks(matched);
};
export const findArticlesByTags = (tags: string[], articles: ArticleBlockType): ArticleBlockType => {
export const findArticlesByTags = (
tags: string[],
articles: ArticleBlockType
): ArticleBlockType => {
const matched: Array<ArticleType> = [];
for (const year in articles) {

4
src/utils/string.ts
View File

@ -7,5 +7,7 @@ export function isEmail(email: string): boolean {
}
export function isURL(url: string): boolean {
return new RegExp(/(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\\/~+#-]*[\w@?^=%&\\/~+#-])/).test(url);
return new RegExp(
/(http|ftp|https):\/\/([\w_-]+(?:(?:\.[\w_-]+)+))([\w.,@?^=%&:\\/~+#-]*[\w@?^=%&\\/~+#-])/
).test(url);
}