add main and colomn items

2026-01-29 01:30:06 +03:00
parent 3ca3811a5f
commit 49a4638c75
4 changed files with 406 additions and 0 deletions
--- a/src/components/MainPostWidget.astro
+++ b/src/components/MainPostWidget.astro
@@ -0,0 +1,95 @@
+---
+// src/components/MainPostWidget.astro
+import { getLatestMainPost } from '@lib/api/main-posts';
+
+const mainPost = await getLatestMainPost();
+
+const postDate = mainPost ? new Date(mainPost.date) : null;
+const imageUrl = mainPost?.featuredImage?.node?.sourceUrl;
+const imageAlt = mainPost?.featuredImage?.node?.altText || mainPost?.title || '';
+
+const category = mainPost?.categories?.nodes?.[0];
+const categoryName = category?.name || '';
+const categoryColor = category?.color || '#2271b1'; // цвет по умолчанию
+
+let authorName = '';
+if (mainPost?.coauthors && mainPost.coauthors.length > 0) {
+  authorName = mainPost.coauthors.map(author => {
+    if (author.firstName && author.lastName) {
+      return `${author.firstName} ${author.lastName}`;
+    }
+    return author.name;
+  }).join(', ');
+} else if (mainPost?.author) {
+  const author = mainPost.author.node;
+  authorName = author.firstName && author.lastName 
+    ? `${author.firstName} ${author.lastName}`
+    : author.name;
+}
+---
+
+{mainPost && (
+  <article class="main-post-card" itemscope itemtype="https://schema.org/Article">
+    <a href={mainPost.uri} class="post-card-link">
+      <div class="post-image-container">
+        {imageUrl ? (
+          <img 
+            src={imageUrl} 
+            alt={imageAlt} 
+            width="400" 
+            height="400" 
+            loading="lazy" 
+            class="post-image" 
+            itemprop="image" 
+          />
+        ) : (
+          <div class="post-image-placeholder"></div>
+        )}
+        
+        {categoryName && (
+          <div 
+            class="post-category-badge"
+            style={`background-color: ${categoryColor}; color: white;`}
+          >
+            {categoryName}
+          </div>
+        )}
+        
+        <div class="post-content-overlay">
+          <div class="post-meta-overlay">
+            <time 
+              datetime={mainPost.date} 
+              class="post-date-overlay" 
+              itemprop="datePublished"
+            >
+              {postDate && postDate.toLocaleDateString('ru-RU', {
+                day: 'numeric',
+                month: 'short',
+                year: 'numeric'
+              }).replace(' г.', '')}
+            </time>
+          </div>
+          
+          <h3 class="post-title-overlay" itemprop="headline">
+            {mainPost.title}
+          </h3>
+
+          {authorName && (
+            <div class="author-name" itemprop="author">
+              {authorName}
+            </div>
+          )}
+        </div>
+      </div>
+    </a>
+    
+    <div class="sr-only">
+      <h3 itemprop="headline">
+        <a href={mainPost.uri} itemprop="url">{mainPost.title}</a>
+      </h3>
+      <time datetime={mainPost.date} itemprop="datePublished">
+        {postDate && postDate.toLocaleDateString('ru-RU')}
+      </time>
+    </div>
+  </article>
+)}