add correct news templates

2026-03-08 19:09:23 +03:00
parent 572ffd07e6
commit c9ed7c8fcc
8 changed files with 218 additions and 82 deletions
--- a/src/components/CategoryBadge.astro
+++ b/src/components/CategoryBadge.astro
@@ -2,10 +2,18 @@
 export interface Props {
  name?: string;
  color?: string;
+  href?: string;
+  isNews?: boolean;
  class?: string;
 }

-const { name, color = '', class: className = '' } = Astro.props;
+const { 
+  name, 
+  color = '', 
+  href,
+  isNews = false,
+  class: className = '' 
+} = Astro.props;

 function extractColorClass(colorString: string): string {
  if (!colorString) return 'bg-blue';
@@ -32,10 +40,100 @@ function extractColorClass(colorString: string): string {
 }

 const bgClass = extractColorClass(color);
+const Tag = href ? 'a' : 'span';
 ---

-{name && (
-  <div class={`post-category-badge ${bgClass}${className ? ` ${className}` : ''}`}>
-    {name}
-  </div>
-)}
+<span class={`sticker-group${className ? ` ${className}` : ''}`}>
+  {/* Плашка новости, если isNews = true */}
+  {isNews && (
+    <span class="category-badge bg-white text-black">
+      <a href="/news">новости</a>
+    </span>
+  )}
+  
+  {/* Плашка рубрики  */}
+  {name && (
+    <Tag
+      href={href}
+      class={`category-badge ${bgClass} text-white`}
+      onClick={(e) => e.stopPropagation()}
+    >
+      {name}
+    </Tag>
+  )}
+</span>
+
+<style is:global>
+  /* Группа плашек */
+  .sticker-group {
+    position: absolute;
+    top: 15px;
+    right: 18px;
+    z-index: 2;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    max-width: 90%;
+  }
+
+  .category-badge a:hover {
+    transition: opacity 0.2s ease;
+  }
+
+  /* Базовые стили для всех плашек */
+  .category-badge {
+    display: inline-block;
+    padding: 6px 12px; 
+    font-size: .6rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    white-space: nowrap;
+    overflow: hidden;
+    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+    line-height: 1;
+    text-decoration: none;
+    max-width: 150px;
+  }
+
+  /* Цветовые классы */
+  .bg-white { background-color: #ffffff; }
+  .bg-black { background-color: #000000; }
+  .bg-yellow { background-color: #fbbf24; }
+  .bg-blue { background-color: #2563eb; }
+  .bg-green { background-color: #16a34a; }
+  .bg-red { background-color: #dc2626; }
+  .bg-orange { background-color: #ea580c; }
+  .bg-gray { background-color: #6b7280; }
+  
+  .text-black { color: #000000; }
+  .text-white { color: #ffffff; }
+
+  @media (max-width: 767px) {
+    .sticker-group {
+      top: 12px;
+      right: 12px;
+    }
+    
+    .category-badge {
+      padding: 4px 8px;
+      font-size: 10px;
+      max-width: 120px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .sticker-group {
+      top: 10px;
+      right: 10px;
+      gap: 4px;
+    }
+    
+    .category-badge {
+      padding: 3px 6px;
+      font-size: 9px;
+      max-width: 100px;
+    }
+  }
+</style>
--- a/src/components/ContentGrid.astro
+++ b/src/components/ContentGrid.astro
@@ -85,18 +85,15 @@ function shouldBeLarge(index: number): boolean {
              <div class="post-image-placeholder"></div>
            )}

-            {item.categories?.nodes?.[0] && (
-              <a 
-                href={`/${item.categories.nodes[0].slug}`}
-                class="category-badge-link"
-                onClick={(e) => e.stopPropagation()}
-              >
-                <CategoryBadge
-                  name={item.categories.nodes[0].name}
-                  color={item.categories.nodes[0].color}
-                />
-              </a>
-            )}
+
+          {item.categories?.nodes?.[0] && (
+            <CategoryBadge
+              name={item.categories.nodes[0].name}
+              color={item.categories.nodes[0].color}
+              href={`/${item.categories.nodes[0].slug}`}
+              isNews={item.__typename === "ANew"}
+            />
+          )}
            
            <div class="post-content-overlay">
              <div class="post-meta-overlay">
--- a/src/components/Header/Header.astro
+++ b/src/components/Header/Header.astro
@@ -1,56 +1,82 @@
 ---
+const { category, contentType } = Astro.props;

-    const { category } = Astro.props;
-
-    import Stores from './LazyStores.astro';
-    import MainMenu from '@components/MainMenu.astro';
-
-    const MENU_ID = 3340; // 103246 (бургер 1).  103247 (бургер 2 )
-    let menuItems = [];
+import Stores from './LazyStores.astro';
+import MainMenu from '@components/MainMenu.astro';

+const MENU_ID = 3340; // 103246 (бургер 1).  103247 (бургер 2 )
+let menuItems = [];
 ---

 <header class="header" itemscope itemtype="https://schema.org/WPHeader">
+  <div class="top-bar">
+    <a href="/"><img alt="Профиль" width="249" height="55" src="https://cdn.profile.ru/wp-content/themes/profile/assets/img/profile-logo-delovoy.svg"></a>
    
-<div class="top-bar">
-    <img alt="Профиль" width="249" height="55" src="https://cdn.profile.ru/wp-content/themes/profile/assets/img/profile-logo-delovoy.svg">
    {category && (
-        <div class="header__subtitle">
-          <a href={`/${category.slug}`}>{category.name}</a>
-        </div>
-      )}    
+      <div class="header__subtitle">
+        {contentType === 'news' && (
+          <span class="header__news-badge"><a href="/news">Новости</a></span>
+        )}   
+        <a href={`/${category.slug}`}>{category.name}</a>
+      </div>
+    )}    
+    
    <Stores />
-</div>
-
-<MainMenu menuId={MENU_ID} />
+  </div>

+  <MainMenu menuId={MENU_ID} />
 </header>

-
 <style>
+  .top-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center; 
+  }

-    .top-bar{
-        display: flex;
-        justify-content: space-between;
-        align-items: center; 
-    }
+  .header__subtitle {
+    font-size: 22px;
+    font-weight: bold;
+    margin-left: 42px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }

-    .header__subtitle{
-        font-size: 22px;
-        font-weight: bold;
-        margin-left: 42px;
-        position: relative;
-    }
+  .header__subtitle::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: -15px;
+    width: 3px;
+    height: 80%;
+    border-left: 3px solid;
+    transform: translate(0, -40%);
+  }

-    .header__subtitle::before{
-        content: '';
-        position: absolute;
-        top: 50%;
-        left: -15px;
-        width: 3px;
-        height: 80%;
-        border-left: 3px solid;
-        transform: translate(0, -40%);
-    }    
+  .header__news-badge {
+    color: inherit;
+    font-weight: inherit;
+    position: relative;
+    padding-right: 10px;
+  }

+  .header__news-badge::after {
+    content: '|';
+    position: absolute;
+    right: -2px;
+    color: inherit;
+    font-weight: inherit;
+  }
+
+  .header__subtitle a {
+    text-decoration: none;
+    color: inherit;
+    font-weight: inherit;
+  }
+
+  .header__subtitle a:hover {
+    text-decoration: underline;
+  }
 </style>
--- a/src/layouts/MainLayout.astro
+++ b/src/layouts/MainLayout.astro
@@ -1,6 +1,6 @@
 ---

-const { title, description, category } = Astro.props;
+const { title, description, category, contentType } = Astro.props;

 import Header from '../components/Header/Header.astro';
 import Header_lite from '../components/Header/Header_lite.astro';
@@ -28,7 +28,8 @@ import '../styles/global.css';
 			</div>
 		</div>	
 		<div class="container">
-			<Header category={category} />
+			<Header category={category} 
+			contentType={contentType}/>
 			<main>
 				<slot></slot>
 			</main>
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -19,7 +19,6 @@ import MainLine from '@components/MainLine.astro';
 import HomeNews from "@components/HomeNews.astro";


-
 //ISR
 export const prerender = false;
 ---
--- a/src/pages/news/[...slug].astro
+++ b/src/pages/news/[...slug].astro
@@ -3,6 +3,7 @@ import MainLayout from '@layouts/MainLayout.astro';
 import NewsSingle from '@components/NewsSingle.astro';

 import { detectPageType } from '@lib/detect-page-type';
+import { wpInfo } from '@lib/wpInfo';
 import { getAnewById } from '@lib/api/posts';

 export const prerender = false;
@@ -10,6 +11,14 @@ export const prerender = false;
 const pathname = Astro.url.pathname;
 const pageInfo = detectPageType(pathname);

+
+// Определяем категорию
+if (!wpInfo.isLoaded()) {
+    await wpInfo.fetchAllCategories();
+}
+
+const category = wpInfo.getCategoryBySlug(pageInfo.categorySlug);
+
 const fullUrl = Astro.url.href;
 const fullPath = Astro.url.origin + Astro.url.pathname;

@@ -39,7 +48,11 @@ if (import.meta.env.DEV) {
 }
 ---

-<MainLayout>
+<MainLayout
+  description="Информационное агентство Деловой журнал Профиль"
+  category={category}
+  contentType="news"
+>

  {pageInfo.type === 'single' && post ? (
    <NewsSingle post={post} pageInfo={pageInfo} />
--- a/src/pages/news/index.astro
+++ b/src/pages/news/index.astro
@@ -0,0 +1,12 @@
+---
+
+import MainLayout from '@layouts/MainLayout.astro';
+
+---
+
+<MainLayout 
+  title=Новости
+  description=Новости
+>
+<h1>Все новости</h1>
+</MainLayout>
--- a/src/styles/components/ContentGrid.css
+++ b/src/styles/components/ContentGrid.css
@@ -97,26 +97,7 @@
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }

-/* Бейдж категории */
-.post-category-badge {
-  position: absolute;
-  top: 15px;
-  right: 15px;
-  background: #2563eb;
-  color: white;
-  padding: 5px 10px;
-  border-radius: 4px;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  z-index: 2;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
-  max-width: 80%;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
+

 /* Оверлей с контентом */
 .post-content-overlay {
@@ -137,6 +118,10 @@
  gap: 8px;
 }

+
+
+
+
 .post-meta-overlay {
  margin-bottom: 3px;
 }
@@ -160,6 +145,11 @@
  text-overflow: ellipsis;
 }

+.category-badge-white{
+  background-color: white;
+  color: black;
+}
+
 .author-name {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);