From 50d032ce62a1d7a8739d06623a159c620c9c0605 Mon Sep 17 00:00:00 2001 From: Anton Vakhrushev Date: Sat, 7 Mar 2026 11:08:32 +0300 Subject: [PATCH] Add astro layouts --- src/components/ArticleList.astro | 34 ++++++++++++++++++++++++++ src/components/Navigation.astro | 9 +++++++ src/components/YandexMetrika.astro | 29 ++++++++++++++++++++++ src/layouts/ArticleLayout.astro | 25 +++++++++++++++++++ src/layouts/BaseLayout.astro | 39 ++++++++++++++++++++++++++++++ src/layouts/InternalLayout.astro | 20 +++++++++++++++ src/pages/index.astro | 34 +++++++++++++++++--------- src/styles/global.css | 28 ++++++++++++++++++++- 8 files changed, 206 insertions(+), 12 deletions(-) create mode 100644 src/components/ArticleList.astro create mode 100644 src/components/Navigation.astro create mode 100644 src/components/YandexMetrika.astro create mode 100644 src/layouts/ArticleLayout.astro create mode 100644 src/layouts/BaseLayout.astro create mode 100644 src/layouts/InternalLayout.astro diff --git a/src/components/ArticleList.astro b/src/components/ArticleList.astro new file mode 100644 index 0000000..37b0a9a --- /dev/null +++ b/src/components/ArticleList.astro @@ -0,0 +1,34 @@ +--- +interface Article { + slug: string; + date: Date; + title: string; +} + +interface Props { + articles: Article[]; +} + +const { articles } = Astro.props; + +const sorted = [...articles].sort((a, b) => b.date.getTime() - a.date.getTime()); + +const byYear = new Map(); +for (const article of sorted) { + const year = article.date.getFullYear(); + if (!byYear.has(year)) { + byYear.set(year, []); + } + byYear.get(year)!.push(article); +} +--- +{[...byYear.entries()].map(([year, items]) => ( +
+

{year}

+ {items.map((article) => ( +

+ {article.title} +

+ ))} +
+))} diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro new file mode 100644 index 0000000..ca912db --- /dev/null +++ b/src/components/Navigation.astro @@ -0,0 +1,9 @@ +--- +--- + diff --git a/src/components/YandexMetrika.astro b/src/components/YandexMetrika.astro new file mode 100644 index 0000000..34a7549 --- /dev/null +++ b/src/components/YandexMetrika.astro @@ -0,0 +1,29 @@ +--- +--- + + diff --git a/src/layouts/ArticleLayout.astro b/src/layouts/ArticleLayout.astro new file mode 100644 index 0000000..4fb2534 --- /dev/null +++ b/src/layouts/ArticleLayout.astro @@ -0,0 +1,25 @@ +--- +import InternalLayout from './InternalLayout.astro'; + +interface Props { + title: string; + description?: string; + keywords?: string[]; + date: Date; +} + +const { title, description, keywords, date } = Astro.props; + +const formattedDate = date.toLocaleDateString('ru-RU', { + day: '2-digit', + month: '2-digit', + year: 'numeric', +}); +--- + +

{title}

+ +
+

{formattedDate}, anton@vakhrushev.me

+
+ diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro new file mode 100644 index 0000000..6cadd18 --- /dev/null +++ b/src/layouts/BaseLayout.astro @@ -0,0 +1,39 @@ +--- +import '../styles/global.css'; +import YandexMetrika from '../components/YandexMetrika.astro'; + +interface Props { + title?: string; + description?: string; + keywords?: string[]; +} + +const siteTitle = 'Антон Вахрушев'; +const siteUrl = Astro.site?.origin ?? 'https://vakhrushev.me'; + +const { title, description, keywords } = Astro.props; +const pageTitle = title ? `${title} - ${siteTitle}` : siteTitle; +const pageDescription = description ?? title ?? ''; +const pageUrl = `${siteUrl}${Astro.url.pathname}`; +--- + + + + + + {pageTitle} + {pageDescription && } + {keywords && keywords.length > 0 && } + + + + + + + + + + + + + diff --git a/src/layouts/InternalLayout.astro b/src/layouts/InternalLayout.astro new file mode 100644 index 0000000..1f13115 --- /dev/null +++ b/src/layouts/InternalLayout.astro @@ -0,0 +1,20 @@ +--- +import BaseLayout from './BaseLayout.astro'; +import Navigation from '../components/Navigation.astro'; + +interface Props { + title?: string; + description?: string; + keywords?: string[]; +} + +const { title, description, keywords } = Astro.props; +--- + +
+ +
+ +
+
+ diff --git a/src/pages/index.astro b/src/pages/index.astro index fda9a1a..7c5db96 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,13 +1,25 @@ --- +import BaseLayout from '../layouts/BaseLayout.astro'; --- - - - - Антон Вахрушев - - - -

Антон Вахрушев

-

Сайт в процессе обновления.

- - + +
+

Антон Вахрушев

+

+ Я веб-программист. + Работаю в Playkot. + Пишу на PHP. + Разбираюсь в back-end, экспериментирую с front-end, интересуюсь функциональным программированием. +

+ +
+ + +
+ diff --git a/src/styles/global.css b/src/styles/global.css index e753846..400d44d 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -8,5 +8,31 @@ --color-link: #0366d6; --color-rule: #e6e6e6; - --breakpoint-content: 740px; + --width-content: 740px; +} + +@layer base { + html { + font-size: 20px; + + @media (max-width: theme(--width-content)) { + font-size: 18px; + } + } + + body { + @apply font-serif text-text; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: normal; + } + + a { + @apply text-link no-underline; + } + + a:hover, a:focus, a:active { + @apply underline; + } }