Chore: New Article type - AI

src/components/ArticleSection/ArticleSection.module.scss

@@ -8,7 +8,7 @@
     flex-wrap: wrap;
     gap: 28px;
     align-items: center;
-    justify-content: center;
+    justify-content: flex-start;
   }
 
   .showMoreButtonWrapper {

src/components/ArticlesHero/ArticlesHero.tsx

@@ -14,6 +14,7 @@ type ArticlesHeroProps = {
   isDarkTheme?: boolean;
   locale?: string;
   hasThoughtsArticles?: boolean;
+  hasAIArticles?: boolean;
 };
 const ArticlesHero: FC<ArticlesHeroProps> = ({
   title,
@@ -22,10 +23,13 @@ const ArticlesHero: FC<ArticlesHeroProps> = ({
   isDarkTheme,
   locale,
   hasThoughtsArticles,
+  hasAIArticles,
 }) => {
-  const visibleCategories = hasThoughtsArticles
-    ? categories
-    : categories.filter(category => category.tagId !== 'Thoughts');
+  const visibleCategories = categories.filter(category => {
+    if (category.tagId === 'Thoughts') return hasThoughtsArticles;
+    if (category.tagId === 'AI') return hasAIArticles;
+    return true;
+  });
 
   return (
     <section

src/data/articlesBlog/en.ts

@@ -1,8 +1,10 @@
 const en = {
   uxcore: 'UX Core',
+  ai: 'Artificial Intelligence & Vibecoding',
   thoughts: 'Thoughts',
   pm: 'Project Management',
   uxcoreId: 'UX Core',
+  aiId: 'AI',
   thoughtsId: 'Thoughts',
   pmId: 'Project Management',
 };

src/data/articlesBlog/ru.ts

@@ -1,8 +1,10 @@
 const ru = {
   uxcore: 'UX Core',
+  ai: 'Искусственный Интеллект и Вайбкодинг',
   thoughts: 'Разное',
   pm: 'Управление проектами',
   uxcoreId: 'UX Core',
+  aiId: 'AI',
   thoughtsId: 'Thoughts',
   pmId: 'Project Management',
 };

src/layouts/ArticlesLayout/ArticlesLayout.tsx

@@ -18,6 +18,7 @@ type ArticlesProps = {
   locale: string;
   isDarkTheme?: boolean;
   hasThoughtsArticles?: boolean;
+  hasAIArticles?: boolean;
 };
 
 const ArticlesLayout: FC<ArticlesProps> = ({
@@ -29,6 +30,7 @@ const ArticlesLayout: FC<ArticlesProps> = ({
   locale,
   isDarkTheme,
   hasThoughtsArticles,
+  hasAIArticles,
 }) => {
   const articleRef = useRef<HTMLElement>(null);
 
@@ -51,6 +53,7 @@ const ArticlesLayout: FC<ArticlesProps> = ({
         isDarkTheme={isDarkTheme}
         locale={locale}
         hasThoughtsArticles={hasThoughtsArticles}
+        hasAIArticles={hasAIArticles}
       />
       <div
         className={cn(styles.mainContent, {

src/pages/articles.tsx

@@ -74,14 +74,15 @@ type ArticleProps = {
 };
 const Articles: FC<ArticleProps> = ({ articleBlog }) => {
   const uxCoreRef = useRef<HTMLElement>(null);
+  const aiRef = useRef<HTMLElement>(null);
   const thoughtsRef = useRef<HTMLElement>(null);
   const pmRef = useRef<HTMLElement>(null);
   const router = useRouter();
   const { locale } = router as TRouter;
   const chosenLocale = locale === 'ru' ? 'ru' : 'en';
   const [{}, { isDarkTheme }] = useGlobals();
 
-  const { uxcore, thoughts, pm, thoughtsId, uxcoreId, pmId } =
+  const { uxcore, ai, thoughts, pm, thoughtsId, uxcoreId, aiId, pmId } =
     articlesBlog[chosenLocale];
   const { title, description } = articleBlog.attributes;
   const { pageTitle, keywords, seoDescription, seoTitle } =
@@ -98,8 +99,9 @@ const Articles: FC<ArticleProps> = ({ articleBlog }) => {
   const allArticles = articleBlog.articles;
   const categories = [
     { id: 1, name: uxcore, scrollToRef: uxCoreRef, tagId: uxcoreId },
-    { id: 2, name: thoughts, scrollToRef: thoughtsRef, tagId: thoughtsId },
-    { id: 3, name: pm, scrollToRef: pmRef, tagId: pmId },
+    { id: 2, name: ai, scrollToRef: aiRef, tagId: aiId },
+    { id: 3, name: thoughts, scrollToRef: thoughtsRef, tagId: thoughtsId },
+    { id: 4, name: pm, scrollToRef: pmRef, tagId: pmId },
   ];
 
   const groupedArticles = categories.map(category => ({
@@ -109,12 +111,16 @@ const Articles: FC<ArticleProps> = ({ articleBlog }) => {
     tagId: category.tagId,
   }));
 
-  const hasThoughtsArticles = groupedArticles.some(
-    category =>
-      category.tagId === 'Thoughts' &&
-      Array.isArray(category.articles) &&
-      category.articles.length > 0,
-  );
+  const hasArticlesForTag = (tagId: string) =>
+    groupedArticles.some(
+      category =>
+        category.tagId === tagId &&
+        Array.isArray(category.articles) &&
+        category.articles.length > 0,
+    );
+
+  const hasThoughtsArticles = hasArticlesForTag('Thoughts');
+  const hasAIArticles = hasArticlesForTag('AI');
 
   return (
     <>
@@ -133,6 +139,7 @@ const Articles: FC<ArticleProps> = ({ articleBlog }) => {
       <ArticlesLayout
         title={title}
         hasThoughtsArticles={hasThoughtsArticles}
+        hasAIArticles={hasAIArticles}
         categories={categories}
         description={description}
         groupedArticles={groupedArticles}