Создание страницы блога
This commit is contained in:
Web-serfer
parent
f84c24e91f
commit
ed93c5646a
10 changed files with 1058 additions and 34 deletions
225
frontend/src/components/blog/BlogCard.astro
Normal file
225
frontend/src/components/blog/BlogCard.astro
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
---
|
||||
export interface Props {
|
||||
title: string;
|
||||
description: string;
|
||||
category: string;
|
||||
categoryColor?: string;
|
||||
date: string;
|
||||
readTime: string;
|
||||
imageUrl?: string;
|
||||
slug?: string;
|
||||
}
|
||||
|
||||
const {
|
||||
title,
|
||||
description,
|
||||
category,
|
||||
categoryColor = 'bg-gold',
|
||||
date,
|
||||
readTime,
|
||||
imageUrl = '/images/blog/default.avif',
|
||||
slug = '#'
|
||||
} = Astro.props;
|
||||
|
||||
// Форматируем дату
|
||||
const formatDate = (dateStr: string) => {
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString('ru-RU', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric'
|
||||
});
|
||||
};
|
||||
---
|
||||
|
||||
<article class="blog-card animate-on-scroll" data-animation="fade-up">
|
||||
<a href={slug} class="card-link">
|
||||
<!-- Изображение -->
|
||||
<div class="card-image">
|
||||
<img src={imageUrl} alt={title} loading="lazy" />
|
||||
<span class={`category-badge ${categoryColor}`}>{category}</span>
|
||||
</div>
|
||||
|
||||
<!-- Контент -->
|
||||
<div class="card-content">
|
||||
<h3 class="card-title">{title}</h3>
|
||||
<p class="card-description">{description}</p>
|
||||
|
||||
<div class="card-meta">
|
||||
<span class="meta-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="meta-icon">
|
||||
<rect width="18" height="18" x="3" y="4" rx="2" ry="2"></rect>
|
||||
<line x1="16" x2="16" y1="2" y2="6"></line>
|
||||
<line x1="8" x2="8" y1="2" y2="6"></line>
|
||||
<line x1="3" x2="21" y1="10" y2="10"></line>
|
||||
</svg>
|
||||
{formatDate(date)}
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="meta-icon">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
<polyline points="12 6 12 12 16 14"></polyline>
|
||||
</svg>
|
||||
{readTime}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</article>
|
||||
|
||||
<style>
|
||||
.blog-card {
|
||||
background: #ffffff;
|
||||
border-radius: 1rem;
|
||||
overflow: hidden;
|
||||
border: 2px solid transparent;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.blog-card:hover {
|
||||
border-color: #d4af37;
|
||||
box-shadow: 0 12px 30px rgba(212, 175, 55, 0.12);
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
.card-link {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Изображение */
|
||||
.card-image {
|
||||
position: relative;
|
||||
height: 200px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-image img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.blog-card:hover .card-image img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
|
||||
.category-badge {
|
||||
position: absolute;
|
||||
top: 1rem;
|
||||
left: 1rem;
|
||||
padding: 0.35rem 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.category-badge.bg-gold {
|
||||
background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
|
||||
color: #1e293b;
|
||||
}
|
||||
|
||||
.category-badge.bg-blue {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.category-badge.bg-red {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.category-badge.bg-green {
|
||||
background: linear-gradient(135deg, #22c55e 0%, #4ade80 100%);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* Контент */
|
||||
.card-content {
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
color: #1e293b;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
letter-spacing: -0.01em;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.blog-card:hover .card-title {
|
||||
color: #d4af37;
|
||||
}
|
||||
|
||||
.card-description {
|
||||
color: #64748b;
|
||||
font-size: 0.9rem;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1.25rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #f1f5f9;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
color: #94a3b8;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
}
|
||||
|
||||
/* Анимации */
|
||||
.animate-on-scroll {
|
||||
opacity: 0;
|
||||
will-change: opacity, transform;
|
||||
}
|
||||
|
||||
[data-animation="fade-up"] {
|
||||
transform: translateY(30px);
|
||||
transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
|
||||
transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.animate-on-scroll.is-visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-on-scroll {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue