feat: add articles masonry grid, new article cards and external link support

- Add autotagmate and voice-to-text articles with vc.ru covers and i18n
- Switch articles layout to CSS columns masonry grid with heading
- Add external link icon and target=_blank for external article URLs
- Sort articles by dateISO descending, add dateISO field
- Update marketer link to internal /articles/berloga
- Remove line-clamp from article card title and description
- Add placeholder cards for layout testing

Author: baslie

public/images/articles/autotagmate/cover.png

@@ -120,7 +120,7 @@ const translations = {
         title: 'Роман Пуртов. Agentic Engineer\u00A0&\u00A0маркетолог\u00A0&\u00A0дизайнер.',
         metaDescription: 'Agentic Engineer\u00A0&\u00A0маркетолог\u00A0&\u00A0UX-UI дизайнер из\u00A0тайги (Томск, МСК+4). Делаю сайты и\u00A0пишу к\u00A0ним код\u00A0🌲',
         name: 'Роман Пуртов',
-        mainDescription1: `<a href="https://github.com/baslie" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">Agentic Engineer</a>\u00A0&\u00A0<a href="https://telegra.ph/Kak-zapuskalas-Berloga-i-kak-zarabatyvalis-milliony-04-12" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">маркетолог</a>\u00A0&\u00A0UX-UI дизайнер из\u00A0тайги (Томск,\u00A0МСК+4).`,
+        mainDescription1: `<a href="https://github.com/baslie" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">Agentic Engineer</a>\u00A0&\u00A0<a href="/articles/berloga" class="inline-link">маркетолог</a>\u00A0&\u00A0UX-UI дизайнер из\u00A0тайги (Томск,\u00A0МСК+4).`,
         mainDescription2: `${timeStringRu} делаю <a href="https://experts.tilda.cc/roman-purtow" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">сайты</a><br>и\u00A0пишу к\u00A0ним <a href="https://github.com/baslie/code-snippets" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">код</a>\u00A0🌲`,
         portfolio_title: 'Портфолио',
         portfolio_description: 'Сайты на Тильде',
@@ -149,13 +149,14 @@ const translations = {
         vc_description: 'Личный блог на vc.ru',
         tomsk_walk_title: 'Томская Прогулка',
         tomsk_walk_description: 'Гуляем с\u00A0друзьями и\u00A0не\u00A0только',
-        article_back: 'На главную'
+        article_back: 'На главную',
+        articles_heading: 'Статьи и кейсы'
     },
     en: {
         title: 'Roman Purtov. Agentic Engineer\u00A0&\u00A0Marketer\u00A0&\u00A0Designer.',
         metaDescription: 'Agentic Engineer\u00A0&\u00A0Marketer\u00A0&\u00A0UX-UI Designer from Siberian taiga (Tomsk, UTC+7). Building websites and writing code\u00A0🌲',
         name: 'Roman Purtov',
-        mainDescription1: `<a href="https://github.com/baslie" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">Agentic Engineer</a>\u00A0&\u00A0<a href="https://telegra.ph/Kak-zapuskalas-Berloga-i-kak-zarabatyvalis-milliony-04-12" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">Marketer</a>\u00A0&\u00A0UX-UI Designer from Siberian taiga (Tomsk,\u00A0UTC+7).`,
+        mainDescription1: `<a href="https://github.com/baslie" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">Agentic Engineer</a>\u00A0&\u00A0<a href="/articles/berloga" class="inline-link">Marketer</a>\u00A0&\u00A0UX-UI Designer from Siberian taiga (Tomsk,\u00A0UTC+7).`,
         mainDescription2: `Building <a href="https://experts.tilda.cc/roman-purtow" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">websites</a> and writing <a href="https://github.com/baslie/code-snippets" target="_blank" rel="nofollow noopener noreferrer" class="inline-link">code</a> for them for ${timeStringEn}\u00A0🌲`,
         portfolio_title: 'Portfolio',
         portfolio_description: 'Tilda websites',
@@ -184,7 +185,8 @@ const translations = {
         vc_description: 'Personal blog on vc.ru',
         tomsk_walk_title: 'Tomsk Walk',
         tomsk_walk_description: 'Walking with friends and\u00A0more',
-        article_back: 'Back to home'
+        article_back: 'Back to home',
+        articles_heading: 'Articles & Case Studies'
     }
 };
 

public/images/articles/voice-to-text/cover.jpg

@@ -1,4 +1,32 @@
 window.articleTranslations = {
+  autotagmate: {
+    ru: {
+      title: 'Расширение для Chrome для структурирования промптов',
+      description: 'Опубликовал AutoTagMate — бесплатное расширение для Chrome для автозакрытия тегов. Удобно использовать в том же ChatGPT, Claude AI и проч., чтобы выделять части промпта отдельными «тегами».',
+      date: '2 марта 2025',
+      readingTime: '2 мин'
+    },
+    en: {
+      title: 'Chrome Extension for Structuring Prompts',
+      description: 'Published AutoTagMate — a free Chrome extension for auto-closing tags. Handy for ChatGPT, Claude AI, etc., to wrap parts of your prompt in separate "tags".',
+      date: 'March 2, 2025',
+      readingTime: '2 min'
+    }
+  },
+  'voice-to-text': {
+    ru: {
+      title: '— Говорите, говорите, я\u00A0вас внематочно слухаю!',
+      description: 'В коммуникации удобство собеседника важно — факт 100%-й. Поэтому, если мои голосовые в Телеге длятся больше минуты, то перед отправкой собеседнику прогоняю их через нейросеть.',
+      date: '2 марта 2025',
+      readingTime: '2 мин'
+    },
+    en: {
+      title: 'Speak, Speak, I\u2019m Listening!',
+      description: 'Convenience matters in communication — 100% fact. So when my voice messages on Telegram go over a minute, I run them through AI before sending. Here\u2019s how.',
+      date: 'March 2, 2025',
+      readingTime: '2 min'
+    }
+  },
   berloga: {
     ru: {
       title: 'Как запускалась «Берлога» и\u00A0как зарабатывались миллионы?',

public/images/vc-icon.svg

@@ -8,7 +8,11 @@ interface Props {
 const { article } = Astro.props;
 ---
 
-<a href={article.href} class="article-card">
+<a
+  href={article.href}
+  class="article-card"
+  {...(article.href.startsWith('http') ? { target: '_blank', rel: 'noopener noreferrer' } : {})}
+>
   <img
     src={article.image}
     alt={article.title}
@@ -24,5 +28,10 @@ const { article } = Astro.props;
       <span>&middot;</span>
       <span data-i18n={`article_${article.id}_date`}>{article.date}</span>
     </div>
+    {article.href.startsWith('http') && (
+      <svg class="article-card-external" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+        <path fill-rule="evenodd" d="M5.22 14.78a.75.75 0 001.06 0l7.22-7.22v5.69a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75h-7.5a.75.75 0 000 1.5h5.69l-7.22 7.22a.75.75 0 000 1.06z" clip-rule="evenodd" />
+      </svg>
+    )}
   </div>
 </a>

public/js/app.js

@@ -5,21 +5,131 @@ export interface ArticleData {
   href: string;
   image: string;
   date: string;
+  dateISO: string;
   readingTime: string;
   sourceIcon: string;
   sourceName: string;
 }
 
 export const articles: ArticleData[] = [
+  {
+    id: 'autotagmate',
+    title: 'Расширение для Chrome для структурирования промптов',
+    description: 'Опубликовал AutoTagMate — бесплатное расширение для Chrome для автозакрытия тегов. Удобно использовать в том же ChatGPT, Claude AI и проч., чтобы выделять части промпта отдельными «тегами».',
+    href: 'https://vc.ru/chatgpt/1841565-rasshirenie-dlya-chrome-dlya-strukturirovaniya-promptov',
+    image: '/images/articles/autotagmate/cover.png',
+    date: '2 марта 2025',
+    dateISO: '2025-03-02',
+    readingTime: '2 мин',
+    sourceIcon: '/images/vc-icon.svg',
+    sourceName: 'vc.ru',
+  },
+  {
+    id: 'voice-to-text',
+    title: '— Говорите, говорите, я вас внематочно слухаю!',
+    description: 'В коммуникации удобство собеседника важно — факт 100%-й. Поэтому, если мои голосовые в Телеге длятся больше минуты, то перед отправкой собеседнику прогоняю их через нейросеть. Вот как я это делаю.',
+    href: 'https://vc.ru/life/1822431-govorite-govorite-ya-vas-vnematochno-sluhayu',
+    image: '/images/articles/voice-to-text/cover.jpg',
+    date: '2 марта 2025',
+    dateISO: '2025-03-02',
+    readingTime: '2 мин',
+    sourceIcon: '/images/vc-icon.svg',
+    sourceName: 'vc.ru',
+  },
   {
     id: 'berloga',
     title: 'Как запускалась «Берлога» и как зарабатывались миллионы?',
     description: 'Речь пойдёт о проекте, идея которого закралась мне в голову несколько лет назад. Сейчас это уже компания с 30 людьми в штате, оборотом 7-12 млн в месяц, выстроенным клиентским сервисом и довольно неплохим ассортиментом премиальных эко-продуктов.',
     href: '/articles/berloga',
     image: '/images/articles/berloga/berloga-store.png',
     date: '12 апреля 2022',
+    dateISO: '2022-04-12',
     readingTime: '3 мин',
     sourceIcon: '/images/favicon.svg',
     sourceName: 'roman-purtow.ru',
   },
+  {
+    id: 'placeholder-1',
+    title: 'Тестовая статья номер один',
+    description: 'Это placeholder-карточка для проверки лейаута на мобильных устройствах. Будет удалена после тестирования.',
+    href: '#',
+    image: '/images/articles/berloga/berloga-store.png',
+    date: '1 января 2025',
+    dateISO: '2025-01-01',
+    readingTime: '1 мин',
+    sourceIcon: '/images/favicon.svg',
+    sourceName: 'placeholder',
+  },
+  {
+    id: 'placeholder-2',
+    title: 'Вторая тестовая карточка',
+    description: 'Краткое описание для второй placeholder-карточки.',
+    href: '#',
+    image: '/images/articles/berloga/berloga-store.png',
+    date: '15 января 2025',
+    dateISO: '2025-01-15',
+    readingTime: '3 мин',
+    sourceIcon: '/images/favicon.svg',
+    sourceName: 'placeholder',
+  },
+  {
+    id: 'placeholder-3',
+    title: 'Третья карточка с длинным заголовком для проверки переноса текста',
+    description: 'Описание средней длины, чтобы проверить как карточка выглядит с разным количеством текста в описании.',
+    href: '#',
+    image: '/images/articles/berloga/berloga-store.png',
+    date: '1 февраля 2025',
+    dateISO: '2025-02-01',
+    readingTime: '5 мин',
+    sourceIcon: '/images/favicon.svg',
+    sourceName: 'placeholder',
+  },
+  {
+    id: 'placeholder-4',
+    title: 'Четвёртая карточка',
+    description: 'Короткое описание.',
+    href: '#',
+    image: '/images/articles/berloga/berloga-store.png',
+    date: '10 февраля 2025',
+    dateISO: '2025-02-10',
+    readingTime: '2 мин',
+    sourceIcon: '/images/favicon.svg',
+    sourceName: 'placeholder',
+  },
+  {
+    id: 'placeholder-5',
+    title: 'Пятая тестовая статья',
+    description: 'Ещё одна placeholder-карточка для тестирования сетки на разных экранах.',
+    href: '#',
+    image: '/images/articles/berloga/berloga-store.png',
+    date: '20 февраля 2025',
+    dateISO: '2025-02-20',
+    readingTime: '4 мин',
+    sourceIcon: '/images/favicon.svg',
+    sourceName: 'placeholder',
+  },
+  {
+    id: 'placeholder-6',
+    title: 'Шестая карточка',
+    description: 'Проверяем поведение лейаута при большом количестве карточек в списке статей.',
+    href: '#',
+    image: '/images/articles/berloga/berloga-store.png',
+    date: '25 февраля 2025',
+    dateISO: '2025-02-25',
+    readingTime: '6 мин',
+    sourceIcon: '/images/favicon.svg',
+    sourceName: 'placeholder',
+  },
+  {
+    id: 'placeholder-7',
+    title: 'Седьмая и последняя тестовая карточка',
+    description: 'Финальная placeholder-карточка. После проверки все семь будут удалены.',
+    href: '#',
+    image: '/images/articles/berloga/berloga-store.png',
+    date: '28 февраля 2025',
+    dateISO: '2025-02-28',
+    readingTime: '1 мин',
+    sourceIcon: '/images/favicon.svg',
+    sourceName: 'placeholder',
+  },
 ];

public/js/i18n-articles.js

@@ -204,6 +204,10 @@ import Article from '../../layouts/Article.astro';
         color: var(--color-text-light);
     }
 
+    .article-body blockquote p:last-child {
+        margin-bottom: 0;
+    }
+
     .article-body ol {
         list-style: none;
         counter-reset: article-list;

src/components/ArticleCard.astro

@@ -7,6 +7,8 @@ import CategoryBadge from '../components/CategoryBadge.astro';
 import { pairedCards, cards } from '../data/cards';
 import ArticleCard from '../components/ArticleCard.astro';
 import { articles } from '../data/articles';
+
+const sortedArticles = [...articles].sort((a, b) => b.dateISO.localeCompare(a.dateISO));
 ---
 
 <Base
@@ -45,11 +47,11 @@ import { articles } from '../data/articles';
 
     <!-- Articles -->
     <section class="articles-section mt-3 md:mt-4 xl:mt-5 2xl:mt-6 lg:flex lg:justify-center lg:px-12 xl:px-16 2xl:px-20">
-      <div class="articles-grid grid grid-cols-1 gap-3 px-3 pb-3
-                  md:grid-cols-2 md:gap-4 md:px-4 md:pb-4
-                  lg:grid-cols-3 lg:p-0 lg:w-full lg:max-w-[90rem]
-                  xl:gap-5 2xl:gap-6">
-        {articles.map(article => <ArticleCard article={article} />)}
+      <div class="px-3 pb-3 md:px-4 md:pb-4 lg:p-0 lg:w-full lg:max-w-[90rem]">
+        <h2 class="articles-heading" data-i18n="articles_heading">Статьи и кейсы</h2>
+        <div class="articles-grid">
+          {sortedArticles.map(article => <ArticleCard article={article} />)}
+        </div>
       </div>
     </section>
 </Base>

src/data/articles.ts

@@ -844,6 +844,67 @@ html.lenis {
     }
 }
 
+/* Articles heading */
+.articles-heading {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-text-light);
+    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+    margin-bottom: 0.75rem;
+}
+
+@media (min-width: 768px) {
+    .articles-heading {
+        font-size: 1.75rem;
+        margin-bottom: 1rem;
+    }
+}
+
+/* Articles masonry grid */
+.articles-grid {
+    columns: 1;
+    column-gap: 0.75rem;
+}
+
+.articles-grid > * {
+    break-inside: avoid;
+    margin-bottom: 0.75rem;
+}
+
+@media (min-width: 768px) {
+    .articles-grid {
+        columns: 2;
+        column-gap: 1rem;
+    }
+    .articles-grid > * {
+        margin-bottom: 1rem;
+    }
+}
+
+@media (min-width: 1024px) {
+    .articles-grid {
+        columns: 3;
+    }
+}
+
+@media (min-width: 1280px) {
+    .articles-grid {
+        column-gap: 1.25rem;
+    }
+    .articles-grid > * {
+        margin-bottom: 1.25rem;
+    }
+}
+
+@media (min-width: 1536px) {
+    .articles-grid {
+        column-gap: 1.5rem;
+    }
+    .articles-grid > * {
+        margin-bottom: 1.5rem;
+    }
+}
+
 .article-card {
     position: relative;
     border-radius: var(--radius);
@@ -881,17 +942,28 @@ html.lenis {
 }
 
 .article-card-body {
+    position: relative;
     padding: 1.25rem;
 }
 
+.article-card-external {
+    position: absolute;
+    bottom: 1.25rem;
+    right: 1.25rem;
+    width: 14px;
+    height: 14px;
+    color: var(--color-text-muted);
+    opacity: 0.5;
+}
+
+.dark .article-card-external {
+    color: rgba(255, 255, 255, 0.4);
+}
+
 .article-card-title {
     font-weight: 600;
     font-size: 1.0625rem;
     color: var(--color-text);
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
     margin-bottom: 0.5rem;
 }
 
@@ -902,10 +974,6 @@ html.lenis {
 .article-card-desc {
     font-size: 0.875rem;
     color: var(--color-text-muted);
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
     margin-bottom: 0.75rem;
     line-height: 1.5;
 }