117 lines
3.5 KiB
Plaintext
117 lines
3.5 KiB
Plaintext
|
---
|
|||
|
|
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>
|