From fe8e960b870ca5d71d7f9074cf3885a0b895ecb7 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sun, 28 Aug 2022 13:56:48 +0300 Subject: [PATCH] format --- .eslintrc.json | 6 ++++- .prettierrc.json | 2 +- public/assets/js/detect-theme.js | 12 ++++++---- public/assets/js/load-code-highlight.js | 8 ++++--- src/components/ArticleItem/ArticleItem.tsx | 10 ++++++-- src/components/ArticlesList/ArticlesList.tsx | 5 +++- src/components/Header/NavToggle/NavToggle.tsx | 24 ++++++++++++++++--- src/components/SearchInput/SearchInput.tsx | 8 ++++++- src/components/TagsList/TagsList.tsx | 7 +++++- .../ThemeSwticher/ThemeSwitcher.tsx | 10 ++++---- src/config.ts | 3 ++- src/i18n/en/ui.ts | 6 +++-- src/i18n/ru/ui.ts | 9 ++++--- src/i18n/utils.ts | 20 ++++++++++++---- src/pages/[...slug].astro | 23 ++++++++++++++---- src/pages/rss.xml.ts | 8 +++++-- src/services/ArticleService.ts | 4 +++- src/types/main.d.ts | 5 +++- src/utils/articles.ts | 14 ++++++++--- src/utils/string.ts | 4 +++- 20 files changed, 143 insertions(+), 45 deletions(-) diff --git a/.eslintrc.json b/.eslintrc.json index d261713..0b65a70 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -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", diff --git a/.prettierrc.json b/.prettierrc.json index e7407ec..071de61 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1,5 +1,5 @@ { - "printWidth": 150, + "printWidth": 100, "semi": true, "singleQuote": false, "tabWidth": 2, diff --git a/public/assets/js/detect-theme.js b/public/assets/js/detect-theme.js index d34ae2c..9d29c22 100644 --- a/public/assets/js/detect-theme.js +++ b/public/assets/js/detect-theme.js @@ -15,8 +15,10 @@ window.theme = (() => { document.documentElement.setAttribute("data-theme", window.theme); /* Sync with OS theme */ -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); -}); +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); + }); diff --git a/public/assets/js/load-code-highlight.js b/public/assets/js/load-code-highlight.js index 9451820..6abed24 100644 --- a/public/assets/js/load-code-highlight.js +++ b/public/assets/js/load-code-highlight.js @@ -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 }) => { - return isDark ? toggleMedia("dark") : toggleMedia("light"); - }); + window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", ({ matches: isDark }) => { + return isDark ? toggleMedia("dark") : toggleMedia("light"); + }); } diff --git a/src/components/ArticleItem/ArticleItem.tsx b/src/components/ArticleItem/ArticleItem.tsx index 4ba2e3c..a64d1b9 100644 --- a/src/components/ArticleItem/ArticleItem.tsx +++ b/src/components/ArticleItem/ArticleItem.tsx @@ -14,13 +14,19 @@ export const ArticleItem: Component = (props) => { const hrefLangPrefix = props.data.lang && props.data.lang !== DEFAULT_LANGUAGE ? "/en" : ""; return ( diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx index b059d0c..9b7356c 100644 --- a/src/components/ArticlesList/ArticlesList.tsx +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -84,7 +84,10 @@ const ArticlesList: Component = (props) => { return (

{year}

- } /> + } + />
); }} diff --git a/src/components/Header/NavToggle/NavToggle.tsx b/src/components/Header/NavToggle/NavToggle.tsx index 712149c..f12ca34 100644 --- a/src/components/Header/NavToggle/NavToggle.tsx +++ b/src/components/Header/NavToggle/NavToggle.tsx @@ -4,13 +4,25 @@ import { createSignal, createEffect } from "solid-js"; import "./NavToggle.scss"; const MenuIcon: Component = () => ( - + ); const CloseIcon: Component = () => ( - + ); @@ -32,7 +44,13 @@ const NavToggle: Component = () => { }); return ( -
- +
  • +
  • {tag}
    • )} diff --git a/src/components/ThemeSwticher/ThemeSwitcher.tsx b/src/components/ThemeSwticher/ThemeSwitcher.tsx index a28c970..d6dd099 100644 --- a/src/components/ThemeSwticher/ThemeSwitcher.tsx +++ b/src/components/ThemeSwticher/ThemeSwitcher.tsx @@ -43,10 +43,12 @@ 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 }) => { - const theme = isDark ? "dark" : "light"; - setTheme(theme); - }); + window + .matchMedia("(prefers-color-scheme: dark)") + .addEventListener("change", ({ matches: isDark }) => { + const theme = isDark ? "dark" : "light"; + setTheme(theme); + }); } }); diff --git a/src/config.ts b/src/config.ts index 153c297..1c0c6a8 100644 --- a/src/config.ts +++ b/src/config.ts @@ -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", diff --git a/src/i18n/en/ui.ts b/src/i18n/en/ui.ts index 28b5028..49e47f0 100644 --- a/src/i18n/en/ui.ts +++ b/src/i18n/en/ui.ts @@ -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", diff --git a/src/i18n/ru/ui.ts b/src/i18n/ru/ui.ts index e71f55e..8485f4e 100644 --- a/src/i18n/ru/ui.ts +++ b/src/i18n/ru/ui.ts @@ -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": "Проекты", diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts index 0273a25..f238ce0 100644 --- a/src/i18n/utils.ts +++ b/src/i18n/utils.ts @@ -3,9 +3,14 @@ import * as utils from "@utils/url"; import { DEFAULT_LANGUAGE } from "@root/config"; import languages from "./languages"; -type TranslatedArticlesType = Record> | Record>; +type TranslatedArticlesType = Record< + string, + Record> | Record +>; -export function formatArticlesByLangs(data: Record>): TranslatedArticlesType { +export function formatArticlesByLangs( + data: Record> +): TranslatedArticlesType { const modules: TranslatedArticlesType = {}; for (const module of Object.values(data)) { @@ -33,15 +38,20 @@ function transformExports(modules: Record) { return translations; } -const translations = transformExports(import.meta.glob("./*/ui.ts", { eager: true })); +const translations = transformExports( + 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): (key: UIDictionaryKeys) => string | undefined { +export function useTranslation( + Astro: Readonly +): (key: UIDictionaryKeys) => string | undefined { const lang: LanguageKeys = utils.getLanguageFromURL(Astro.url.pathname) as LanguageKeys; return (key: UIDictionaryKeys) => translate(key, lang); } diff --git a/src/pages/[...slug].astro b/src/pages/[...slug].astro index 723a907..201e62a 100644 --- a/src/pages/[...slug].astro +++ b/src/pages/[...slug].astro @@ -17,7 +17,9 @@ export interface Props { } export async function getStaticPaths() { - const modules = import.meta.glob>("../../content/articles/**/*.mdx", { eager: true }); + const modules = import.meta.glob>("../../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) => ( - {languages[lang]} + + {languages[lang]} + )) .reduce((prev, curr) => [prev, ", ", curr])}
    diff --git a/src/pages/rss.xml.ts b/src/pages/rss.xml.ts index 3052a0e..925c54a 100644 --- a/src/pages/rss.xml.ts +++ b/src/pages/rss.xml.ts @@ -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>("../../content/articles/**/*.mdx", { eager: true }); +const data = import.meta.glob>("../../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 ? `${title}` : ""}`, + description: `${description}${ + coverImage !== undefined ? `${title}` : "" + }`, pubDate: published_at, customData: `${lang}`, }); diff --git a/src/services/ArticleService.ts b/src/services/ArticleService.ts index c6fedbd..886530a 100644 --- a/src/services/ArticleService.ts +++ b/src/services/ArticleService.ts @@ -4,7 +4,9 @@ import { getLanguageFromURL } from "@utils/url"; class ArticleService { public getTranslatedArticles(Astro: Readonly): MDXInstance[] { - const data = import.meta.glob>("../../content/articles/**/*.mdx", { eager: true }); + const data = import.meta.glob>("../../content/articles/**/*.mdx", { + eager: true, + }); const modules = formatArticlesByLangs(data); const siteLang = getLanguageFromURL(Astro.url.pathname); const articles: MDXInstance[] = []; diff --git a/src/types/main.d.ts b/src/types/main.d.ts index a0fcc75..eee38fa 100644 --- a/src/types/main.d.ts +++ b/src/types/main.d.ts @@ -5,7 +5,10 @@ export {}; declare global { interface Window { theme?: ThemeModeType | undefined; - addEventListener(type: K, listener: (this: Window, ev: CustomEventMap[K]) => void): void; + addEventListener( + type: K, + listener: (this: Window, ev: CustomEventMap[K]) => void + ): void; } interface CustomEventMap { diff --git a/src/utils/articles.ts b/src/utils/articles.ts index 7ea06ce..5bf867b 100644 --- a/src/utils/articles.ts +++ b/src/utils/articles.ts @@ -12,7 +12,9 @@ export const transformArticles = (articles: MDXInstance[]): 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 = []; 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 = []; for (const year in articles) { diff --git a/src/utils/string.ts b/src/utils/string.ts index 085aa38..4d0df9f 100644 --- a/src/utils/string.ts +++ b/src/utils/string.ts @@ -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); }