Создан компонент поста
This commit is contained in:
Web-serfer
parent
674ef7fe04
commit
d0f41672d1
32 changed files with 2082 additions and 289 deletions
344
frontend/src/layouts/ArticleLayout.astro
Normal file
344
frontend/src/layouts/ArticleLayout.astro
Normal file
|
|
@ -0,0 +1,344 @@
|
|||
---
|
||||
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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue