345 lines
8.4 KiB
Text
345 lines
8.4 KiB
Text
|
---
|
|||
|
|
import "@styles/global.css";
|
|||
|
|
import { SITE_TITLE_SUFFIX } from "@constants";
|
|||
|
|
|
|||
|
|
import Header from "@components/layout/header/Header.astro";
|
|||
|
|
import Footer from "@components/layout/footer/Footer.astro";
|
|||
|
|
import Breadcrumbs from "@components/base/Breadcrumbs.astro";
|
|||
|
|
import ConsultationModal from "@components/base/ConsultationModal.astro";
|
|||
|
|
import PostSocialShare from "@components/blog/PostSocialShare.astro";
|
|||
|
|
import PostReactionButtons from "@components/blog/PostReactionButtons.astro";
|
|||
|
|
|
|||
|
|
export interface Props {
|
|||
|
|
title: string;
|
|||
|
|
description: string;
|
|||
|
|
canonicalLink?: string;
|
|||
|
|
breadcrumbs?: Array<{ label: string; href?: string }>;
|
|||
|
|
heroImage: string;
|
|||
|
|
heroAlt: string;
|
|||
|
|
category: string;
|
|||
|
|
postTitle: string;
|
|||
|
|
date: string;
|
|||
|
|
author: string;
|
|||
|
|
readTime: string;
|
|||
|
|
postId: string;
|
|||
|
|
postUrl: string;
|
|||
|
|
initialLikes?: number;
|
|||
|
|
initialDislikes?: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const {
|
|||
|
|
title,
|
|||
|
|
description,
|
|||
|
|
canonicalLink,
|
|||
|
|
breadcrumbs,
|
|||
|
|
heroImage,
|
|||
|
|
heroAlt,
|
|||
|
|
category,
|
|||
|
|
postTitle,
|
|||
|
|
date,
|
|||
|
|
author,
|
|||
|
|
readTime,
|
|||
|
|
postId,
|
|||
|
|
postUrl,
|
|||
|
|
initialLikes = 0,
|
|||
|
|
initialDislikes = 0
|
|||
|
|
} = Astro.props;
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
<!doctype html>
|
|||
|
|
<html lang="ru">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8" />
|
|||
|
|
<meta name="viewport" content="width=device-width" />
|
|||
|
|
<link rel="icon" type="image/svg+xml" href="/favicons/favicon.svg" />
|
|||
|
|
<link rel="icon" href="/favicons/favicon.ico" />
|
|||
|
|
<title>{title} {SITE_TITLE_SUFFIX}</title>
|
|||
|
|
<meta name="description" content={description} />
|
|||
|
|
{canonicalLink && <link rel="canonical" href={canonicalLink} />}
|
|||
|
|
<meta name="yandex-verification" content="be3edfd138348e43" />
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<Header />
|
|||
|
|
<main class="main-content">
|
|||
|
|
{breadcrumbs && breadcrumbs.length > 0 && (
|
|||
|
|
<div class="breadcrumbs-wrapper">
|
|||
|
|
<Breadcrumbs items={breadcrumbs} />
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<!-- Hero с полноширинным изображением -->
|
|||
|
|
<section class="article-hero">
|
|||
|
|
<div class="article-hero-image">
|
|||
|
|
<img src={heroImage} alt={heroAlt} />
|
|||
|
|
<div class="article-hero-overlay"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="article-hero-content">
|
|||
|
|
<div class="site-container">
|
|||
|
|
<div class="article-hero-inner">
|
|||
|
|
<div class="article-hero-left">
|
|||
|
|
<span class="article-category-badge">{category}</span>
|
|||
|
|
<h1 class="article-title">{postTitle}</h1>
|
|||
|
|
|
|||
|
|
<div class="article-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>
|
|||
|
|
{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">
|
|||
|
|
<path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path>
|
|||
|
|
<circle cx="12" cy="7" r="4"></circle>
|
|||
|
|
</svg>
|
|||
|
|
<span class="meta-author">{author}</span>
|
|||
|
|
</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>
|
|||
|
|
|
|||
|
|
<div class="article-hero-right">
|
|||
|
|
<div class="article-actions">
|
|||
|
|
<PostReactionButtons
|
|||
|
|
postId={postId}
|
|||
|
|
initialLikes={initialLikes}
|
|||
|
|
initialDislikes={initialDislikes}
|
|||
|
|
/>
|
|||
|
|
<PostSocialShare
|
|||
|
|
title={postTitle}
|
|||
|
|
url={postUrl}
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Основной контент -->
|
|||
|
|
<div class="article-body">
|
|||
|
|
<div class="site-container">
|
|||
|
|
<div class="article-content-wrapper">
|
|||
|
|
<slot />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</main>
|
|||
|
|
<Footer />
|
|||
|
|
<ConsultationModal />
|
|||
|
|
</body>
|
|||
|
|
</html>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
.main-content {
|
|||
|
|
padding-top: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.breadcrumbs-wrapper {
|
|||
|
|
padding-top: 4.75rem;
|
|||
|
|
background: #f8fafc;
|
|||
|
|
border-bottom: 1px solid rgba(30, 48, 80, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Article Hero */
|
|||
|
|
.article-hero {
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
min-height: 500px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-image {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-image img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-overlay {
|
|||
|
|
position: absolute;
|
|||
|
|
inset: 0;
|
|||
|
|
background: linear-gradient(180deg, rgba(10, 37, 64, 0.3) 0%, rgba(10, 37, 64, 0.85) 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-content {
|
|||
|
|
position: relative;
|
|||
|
|
z-index: 2;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 3rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-inner {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
gap: 2rem;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-left {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-category-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
padding: 0.35rem 0.75rem;
|
|||
|
|
background: linear-gradient(135deg, #d4af37 0%, #eac26e 100%);
|
|||
|
|
color: #1e293b;
|
|||
|
|
font-size: 0.75rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
text-transform: uppercase;
|
|||
|
|
letter-spacing: 0.5px;
|
|||
|
|
border-radius: 0.5rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-title {
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: clamp(1.75rem, 4vw, 3rem);
|
|||
|
|
font-weight: 800;
|
|||
|
|
margin: 0 0 1.5rem;
|
|||
|
|
letter-spacing: -0.02em;
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-meta {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1.25rem;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.4rem;
|
|||
|
|
color: rgba(255, 255, 255, 0.8);
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-icon {
|
|||
|
|
width: 1rem;
|
|||
|
|
height: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.meta-author {
|
|||
|
|
color: #eac26e;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-right {
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
align-items: center;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Article Body */
|
|||
|
|
.article-body {
|
|||
|
|
padding: 3rem 0;
|
|||
|
|
background: #f8fafc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-content-wrapper {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 1.5rem;
|
|||
|
|
padding: 3rem;
|
|||
|
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-content-wrapper > :last-child {
|
|||
|
|
margin-bottom: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 1024px) {
|
|||
|
|
.article-hero-inner {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-right {
|
|||
|
|
align-self: flex-start;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.article-hero {
|
|||
|
|
min-height: 400px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-hero-content {
|
|||
|
|
padding: 2rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-title {
|
|||
|
|
font-size: 1.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-meta {
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-actions {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.article-content-wrapper {
|
|||
|
|
padding: 2rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Клиентский скрипт для открытия модального окна
|
|||
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|||
|
|
const btn = document.getElementById("consultation-btn");
|
|||
|
|
|
|||
|
|
btn?.addEventListener("click", () => {
|
|||
|
|
window.dispatchEvent(
|
|||
|
|
new CustomEvent("open-modal", {
|
|||
|
|
detail: "consultation-modal",
|
|||
|
|
}),
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Для Astro View Transitions
|
|||
|
|
document.addEventListener("astro:page-load", () => {
|
|||
|
|
const btn = document.getElementById("consultation-btn");
|
|||
|
|
|
|||
|
|
btn?.addEventListener("click", () => {
|
|||
|
|
window.dispatchEvent(
|
|||
|
|
new CustomEvent("open-modal", {
|
|||
|
|
detail: "consultation-modal",
|
|||
|
|
}),
|
|||
|
|
);
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|