diff --git a/src/components/ArticleComments/ArticleComments.astro b/src/components/ArticleComments/ArticleComments.astro new file mode 100644 index 0000000..58752e9 --- /dev/null +++ b/src/components/ArticleComments/ArticleComments.astro @@ -0,0 +1,7 @@ +--- +import UIString from "../UIString"; +--- + + diff --git a/src/components/ArticleComments/index.ts b/src/components/ArticleComments/index.ts new file mode 100644 index 0000000..afced07 --- /dev/null +++ b/src/components/ArticleComments/index.ts @@ -0,0 +1 @@ +export { default } from "./ArticleComments.astro"; diff --git a/src/components/ArticleContent/ArticleContent.scss b/src/components/ArticleContent/ArticleContent.scss index bb8bb5a..42db060 100644 --- a/src/components/ArticleContent/ArticleContent.scss +++ b/src/components/ArticleContent/ArticleContent.scss @@ -74,6 +74,7 @@ border-radius: var(--border-radius-lg); font-size: 1rem; font-weight: 500; + font-family: "IBM Plex Mono", monospace; padding: 0.2rem 0.3rem; } diff --git a/src/components/ArticlePost/ArticlePost.astro b/src/components/ArticlePost/ArticlePost.astro index 6e5d083..1b9da09 100644 --- a/src/components/ArticlePost/ArticlePost.astro +++ b/src/components/ArticlePost/ArticlePost.astro @@ -1,17 +1,16 @@ --- -import { createDateFormatter, getLanguageFromURL } from "@root/utils"; +import { createDateFormatter } from "@root/utils"; import { Image } from "@astrojs/image/components"; +import ArticleComments from "@components/ArticleComments"; import "./ArticlePost.scss"; export type Props = { data: ArticleType; + lang: string; }; -const { data } = Astro.props as Props; +const { data, lang } = Astro.props as Props; const { title, tags, author, published_at } = data; -// const lang = getLanguageFromURL(Astro.url.pathname); -// console.log(lang); - const DateFormatter = createDateFormatter("ru"); --- @@ -46,7 +45,5 @@ const DateFormatter = createDateFormatter("ru"); } - + diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index d11d738..89165de 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -6,6 +6,7 @@ import UIString from "@components/UIString"; import NavToggle from "./NavToggle"; import "./Header.scss"; import TranslatedLink from "@components/TranslatedLink"; +import LanguageSelect from "@components/LanguageSelect"; const { name, nav, contacts } = SITE_METADATA; const { pathname } = Astro.url; @@ -45,7 +46,7 @@ const { pathname } = Astro.url;
- +
diff --git a/src/components/Header/Header.scss b/src/components/Header/Header.scss index ee890a0..0378aef 100644 --- a/src/components/Header/Header.scss +++ b/src/components/Header/Header.scss @@ -77,6 +77,8 @@ } body[data-is-mobile-open="true"] { + overflow-y: hidden; + touch-action: none; & .header { padding: 15px 0; background-color: var(--background-header-color); @@ -121,12 +123,22 @@ display: block; position: absolute; bottom: 45px; - right: 2.5rem; + right: 2.2rem; & svg { width: 36px; height: 36px; } } + & .language-select { + position: absolute; + bottom: 115px; + right: 2.2rem; + & svg, + & select { + height: 36px; + width: 36px; + } + } } } } diff --git a/src/components/LanguageSelect/LanguageSelect.astro b/src/components/LanguageSelect/LanguageSelect.astro new file mode 100644 index 0000000..1169939 --- /dev/null +++ b/src/components/LanguageSelect/LanguageSelect.astro @@ -0,0 +1,59 @@ +--- +import { Icon } from "astro-icon"; +import { DEFAULT_LANGUAGE } from "@root/config"; +import languages from "@i18n/languages"; +import { getLanguageFromURL } from "@root/utils"; + +const lang = getLanguageFromURL(Astro.url.pathname); +--- + +
+ + +
+ + + + diff --git a/src/components/LanguageSelect/index.ts b/src/components/LanguageSelect/index.ts new file mode 100644 index 0000000..9d165f9 --- /dev/null +++ b/src/components/LanguageSelect/index.ts @@ -0,0 +1 @@ +export { default } from "./LanguageSelect.astro"; diff --git a/src/components/ProjectItem/ProjectItem.astro b/src/components/ProjectItem/ProjectItem.astro index 02773e0..e8735df 100644 --- a/src/components/ProjectItem/ProjectItem.astro +++ b/src/components/ProjectItem/ProjectItem.astro @@ -1,5 +1,5 @@ --- -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import { getLanguageFromURL } from "@root/utils"; import { Icon } from "astro-icon"; import UIString from "../UIString"; @@ -23,7 +23,7 @@ const { icon, name, year, description, articleUrl, sourceUrl, demoUrl } = data; {year}
-

{description[lang] || description[FALLBACK_LANGUAGE]}

+

{description[lang] || description[DEFAULT_LANGUAGE]}

{ diff --git a/src/components/SkillsBlock/SkillsBlock.astro b/src/components/SkillsBlock/SkillsBlock.astro index c3468d3..1bddeb0 100644 --- a/src/components/SkillsBlock/SkillsBlock.astro +++ b/src/components/SkillsBlock/SkillsBlock.astro @@ -1,5 +1,5 @@ --- -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import { getLanguageFromURL } from "@root/utils"; import { Icon } from "astro-icon"; import "./SkillsBlock.scss"; @@ -16,7 +16,7 @@ const {
-

{title[lang] || title[FALLBACK_LANGUAGE]}

+

{title[lang] || title[DEFAULT_LANGUAGE]}

    diff --git a/src/components/TranslatedLink/TranslatedLink.astro b/src/components/TranslatedLink/TranslatedLink.astro index 5f17c43..152bb16 100644 --- a/src/components/TranslatedLink/TranslatedLink.astro +++ b/src/components/TranslatedLink/TranslatedLink.astro @@ -1,5 +1,5 @@ --- -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import { getLanguageFromURL } from "@root/utils"; export interface Props extends astroHTML.JSX.AnchorHTMLAttributes { @@ -8,7 +8,7 @@ export interface Props extends astroHTML.JSX.AnchorHTMLAttributes { const lang = getLanguageFromURL(Astro.url.pathname); const { to, ...attrs } = Astro.props as Props; -const href = lang === FALLBACK_LANGUAGE ? to : `/${lang}${to}`; +const href = lang === DEFAULT_LANGUAGE ? to : `/${lang}${to}`; --- diff --git a/src/config.ts b/src/config.ts index 3f1d014..f144370 100644 --- a/src/config.ts +++ b/src/config.ts @@ -1,4 +1,4 @@ -export const FALLBACK_LANGUAGE = "ru"; +export const DEFAULT_LANGUAGE: LanguageKeys = "ru"; export const SITE_METADATA: SiteMetadataType = { title: "Sergey Yarkov", diff --git a/src/i18n/en/ui.ts b/src/i18n/en/ui.ts index ebaa855..97b75e1 100644 --- a/src/i18n/en/ui.ts +++ b/src/i18n/en/ui.ts @@ -3,6 +3,7 @@ export default { "site.description": "Here I publish articles and tutorials on various IT topics, as well as talk about my projects that I have done over the past few years.", "articles.empty": "No articles found...", + "articlePost.comments": "Comments", "recentArticles.empty": "There is nothing here yet...", /* Page titles */ "pageTitle.about": "About me", diff --git a/src/i18n/ru/ui.ts b/src/i18n/ru/ui.ts index 6746ed9..7437df0 100644 --- a/src/i18n/ru/ui.ts +++ b/src/i18n/ru/ui.ts @@ -3,6 +3,7 @@ export default { "site.description": "Здесь я публикую статьи и туториалы на различные IT темы, а также рассказываю о своих проектах которые я сделал за последние несколько лет.", "articles.empty": "Не найдено ни одной статьи...", + "articlePost.comments": "Комментарии", "recentArticles.empty": "Пока что здесь ничего нет...", /* Page titles */ "pageTitle.about": "Обо мне", diff --git a/src/i18n/utils.ts b/src/i18n/utils.ts index f714546..482a25f 100644 --- a/src/i18n/utils.ts +++ b/src/i18n/utils.ts @@ -1,6 +1,6 @@ import type { AstroGlobal } from "astro"; import * as utils from "@utils/url"; -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import languages from "./languages"; export function getLanguageKeys(): Array { @@ -21,8 +21,8 @@ const translations = transformExports(import.meta.glob("./*/ui export function useTranslation(Astro: Readonly): (key: UIDictionaryKeys) => string | undefined { const lang = utils.getLanguageFromURL(Astro.url.pathname); return function translate(key: UIDictionaryKeys): string | undefined { - const string: string | undefined = translations[lang]?.[key] || translations[FALLBACK_LANGUAGE][key]; - if (string === undefined) console.error(`Cannot find any string for translation key "${key}" on "${Astro.url.pathname}" page.`); + const string: string | undefined = translations[lang]?.[key] || translations[DEFAULT_LANGUAGE][key]; + if (string === undefined) console.log(`Cannot find any string for translation key "${key}" on "${Astro.url.pathname}" page.`); return string; }; } diff --git a/src/layouts/article.astro b/src/layouts/article.astro index e82f86b..34ad016 100644 --- a/src/layouts/article.astro +++ b/src/layouts/article.astro @@ -1,32 +1,32 @@ --- -import type { Props as BaseHeadProps } from '@root/components/BaseHead.astro'; +import type { Props as BaseHeadProps } from "@root/components/BaseHead.astro"; -import BaseHead from '@components/BaseHead.astro'; -import BaseLayout from '@components/BaseLayout'; -import ArticleContent from '@components/ArticleContent'; -import ArticlePost from '@components/ArticlePost'; -import '@styles/global.scss'; +import BaseHead from "@components/BaseHead.astro"; +import BaseLayout from "@components/BaseLayout"; +import ArticleContent from "@components/ArticleContent"; +import ArticlePost from "@components/ArticlePost"; +import "@styles/global.scss"; export interface Props extends BaseHeadProps { lang?: string | undefined; content: ArticleType; } -const { lang = 'ru', content } = Astro.props as Props; +const { lang = "ru", content } = Astro.props as Props; --- - + - -
    - +
    + - +
    diff --git a/src/layouts/default.astro b/src/layouts/default.astro index 304a553..7a89a15 100644 --- a/src/layouts/default.astro +++ b/src/layouts/default.astro @@ -1,29 +1,29 @@ --- -import type { Props as BaseHeadProps } from '@components/BaseHead.astro'; +import type { Props as BaseHeadProps } from "@components/BaseHead.astro"; -import { SITE_METADATA } from '@root/config'; -import BaseHead from '@components/BaseHead.astro'; -import BaseLayout from '@components/BaseLayout'; -import PageHeading from '@components/PageHeading'; -import '@styles/global.scss'; +import { SITE_METADATA } from "@root/config"; +import BaseHead from "@components/BaseHead.astro"; +import BaseLayout from "@components/BaseLayout"; +import PageHeading from "@components/PageHeading"; +import "@styles/global.scss"; export interface Props extends BaseHeadProps { lang?: string | undefined; showPageHeading?: boolean | undefined; } -const { title, description, lang = 'ru', showPageHeading = true } = Astro.props as Props; +const { title, description, lang = "ru", showPageHeading = true } = Astro.props as Props; --- - + -
    +
    {showPageHeading && } - +
    diff --git a/src/pages/[lang]/about.astro b/src/pages/[lang]/about.astro index b1b24e1..db94f85 100644 --- a/src/pages/[lang]/about.astro +++ b/src/pages/[lang]/about.astro @@ -1,11 +1,11 @@ --- import { getLanguageKeys } from "@i18n/utils"; -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import About from "@templates/About.astro"; export function getStaticPaths() { return getLanguageKeys() - .filter((lang) => lang !== FALLBACK_LANGUAGE) + .filter((lang) => lang !== DEFAULT_LANGUAGE) .map((lang) => ({ params: { lang } })); } --- diff --git a/src/pages/[lang]/articles.astro b/src/pages/[lang]/articles.astro index 6f75712..f7a0d2f 100644 --- a/src/pages/[lang]/articles.astro +++ b/src/pages/[lang]/articles.astro @@ -1,11 +1,11 @@ --- import { getLanguageKeys } from "@i18n/utils"; -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import Articles from "@templates/Articles.astro"; export function getStaticPaths() { return getLanguageKeys() - .filter((lang) => lang !== FALLBACK_LANGUAGE) + .filter((lang) => lang !== DEFAULT_LANGUAGE) .map((lang) => ({ params: { lang } })); } --- diff --git a/src/pages/[lang]/contacts.astro b/src/pages/[lang]/contacts.astro index 109d30f..d9cb2ed 100644 --- a/src/pages/[lang]/contacts.astro +++ b/src/pages/[lang]/contacts.astro @@ -1,11 +1,11 @@ --- import { getLanguageKeys } from "@i18n/utils"; -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import Contacts from "@templates/Contacts.astro"; export function getStaticPaths() { return getLanguageKeys() - .filter((lang) => lang !== FALLBACK_LANGUAGE) + .filter((lang) => lang !== DEFAULT_LANGUAGE) .map((lang) => ({ params: { lang } })); } --- diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro index 8d0b5d2..0b706e1 100644 --- a/src/pages/[lang]/index.astro +++ b/src/pages/[lang]/index.astro @@ -1,11 +1,11 @@ --- import { getLanguageKeys } from "@i18n/utils"; -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import Home from "@templates/Home.astro"; export function getStaticPaths() { return getLanguageKeys() - .filter((lang) => lang !== FALLBACK_LANGUAGE) + .filter((lang) => lang !== DEFAULT_LANGUAGE) .map((lang) => ({ params: { lang } })); } --- diff --git a/src/pages/[lang]/projects.astro b/src/pages/[lang]/projects.astro index 68dd1c9..b745d2f 100644 --- a/src/pages/[lang]/projects.astro +++ b/src/pages/[lang]/projects.astro @@ -1,11 +1,11 @@ --- import { getLanguageKeys } from "@i18n/utils"; -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; import Projects from "@templates/Projects.astro"; export function getStaticPaths() { return getLanguageKeys() - .filter((lang) => lang !== FALLBACK_LANGUAGE) + .filter((lang) => lang !== DEFAULT_LANGUAGE) .map((lang) => ({ params: { lang } })); } --- diff --git a/src/pages/blog/[...slug].astro b/src/pages/blog/[...slug].astro index 128eee4..83925fc 100644 --- a/src/pages/blog/[...slug].astro +++ b/src/pages/blog/[...slug].astro @@ -2,8 +2,10 @@ import type { MDXInstance } from "astro"; import ArticleLayout from "@layouts/article.astro"; +import { getLanguageFromURL } from "@root/utils"; + +const lang = getLanguageFromURL(Astro.url.pathname); -// TODO: generate pages based on user language export async function getStaticPaths() { const data = await Astro.glob("../../../content/articles/**/*.mdx"); return data.map((article) => { @@ -16,6 +18,6 @@ export async function getStaticPaths() { const { Content, frontmatter } = Astro.props as MDXInstance; --- - + diff --git a/src/styles/global.scss b/src/styles/global.scss index 619ac9c..2fc2d7e 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -13,10 +13,6 @@ body { min-height: 100vh; } -body[data-is-mobile-open="true"] { - overflow-y: hidden; -} - *, *:before, *:after { diff --git a/src/utils/url.ts b/src/utils/url.ts index aa781c6..f294648 100644 --- a/src/utils/url.ts +++ b/src/utils/url.ts @@ -1,4 +1,4 @@ -import { FALLBACK_LANGUAGE } from "@root/config"; +import { DEFAULT_LANGUAGE } from "@root/config"; export const encode = (data: object) => { return Object.keys(data) @@ -8,5 +8,5 @@ export const encode = (data: object) => { export const getLanguageFromURL = (pathname: string) => { const langCodeMatch = pathname.match(/\/([a-z]{1}-?[a-z]{1})\//); - return langCodeMatch ? langCodeMatch[1] : FALLBACK_LANGUAGE; + return langCodeMatch ? langCodeMatch[1] : DEFAULT_LANGUAGE; };