add files

src/components/ContentGrid.astro

@@ -0,0 +1,117 @@
+---
+export interface Props {
+  items: any[];
+  showCount?: boolean;
+}
+
+const {
+  items = [],
+  showCount =  false,
+} = Astro.props;
+---
+
+<section class="posts-section" id="posts-section">
+  <h2>
+    {showCount && items.length > 0 && (
+      <span id="posts-count"> ({items.length})</span>
+    )}
+  </h2>
+  
+  <div id="posts-grid" class="posts-grid">
+    {items.map((item, index) => {
+      const postUrl = item.uri || `/blog/${item.databaseId}`;
+      const postDate = new Date(item.date);
+      
+      // Логика для больших плиток на десктопе
+      let isLarge = false;
+      let largePosition = '';
+      
+      const rowNumber = Math.floor(index / 4) + 1;
+      const positionInRow = index % 4;
+      
+      if (index >= 8) {
+        const largeRowStart = (rowNumber - 3) % 3 === 0 && rowNumber >= 3;
+        
+        if (largeRowStart && positionInRow === 0) {
+          isLarge = true;
+          largePosition = 'first';
+        }
+      }
+      
+      return (
+        <article 
+          class={`post-card ${isLarge ? 'post-card-large' : ''}`}
+          data-large-position={isLarge ? largePosition : ''}
+          data-index={index}
+          itemscope 
+          itemtype="https://schema.org/BlogPosting"
+        >
+          <a href={postUrl} class="post-card-link">
+            <div class="post-image-container">
+              {item.featuredImage?.node?.sourceUrl ? (
+                <img loading="lazy"
+                  src={item.featuredImage.node.sourceUrl} 
+                  alt={item.featuredImage.node.altText || item.title}
+                  width="400"
+                  height="400"
+                  loading="lazy"
+                  class="post-image"
+                  itemprop="image"
+                />
+              ) : (
+                <div class="post-image-placeholder"></div>
+              )}
+              
+              {/* Рубрика в верхнем правом углу */}
+              {item.categories?.nodes?.[0]?.name && (
+                <div class="post-category-badge">
+                  {item.categories.nodes[0].name}
+                </div>
+              )}
+              
+              {/* Оверлей с контентом */}
+              <div class="post-content-overlay">
+                <div class="post-meta-overlay">
+                  <time 
+                    datetime={item.date} 
+                    class="post-date-overlay"
+                    itemprop="datePublished"
+                  >
+                    {postDate.toLocaleDateString('ru-RU', {
+                      day: 'numeric',
+                      month: 'short',
+                      year: 'numeric'
+                    }).replace(' г.', '')}
+                  </time>
+                </div>
+                
+                <h3 class="post-title-overlay" itemprop="headline">
+                  {item.title}
+                </h3>
+
+                {item.author?.node?.name && (
+                  <div class="author-name" itemprop="author">
+                    {item.author.node.name}
+                  </div>
+                )}
+              </div>
+            </div>
+          </a>
+          
+          {/* Скринридеру и SEO */}
+          <div class="sr-only">
+            <h3 itemprop="headline">
+              <a href={postUrl} itemprop="url">{item.title}</a>
+            </h3>
+            <time 
+              datetime={item.date} 
+              itemprop="datePublished"
+            >
+              {postDate.toLocaleDateString('ru-RU')}
+            </time>
+          </div>
+        </article>
+      );
+    })}
+  </div>
+</section>