profile-front/src/components/NewsSingle.astro

---
import { stripHtml } from '@/utils/htmlhelpers';
import Author from '@components/AuthorDisplay.astro';
import Subscribe from '@components/SubscribePost.astro';
import ShareButtons from '@components/ShareButtons.astro';

interface Props {
  post: any;
  pageInfo?: any;
}

const { post, pageInfo } = Astro.props;
---

{post ? (
  <div class="article-wrapper">
    <article class="news-single">
      <div class="article_info">
        <div class="publication__data">{post.date && <time>{new Date(post.date).toLocaleDateString('ru-RU')}</time>}</div>
        <span class="author"><Author post={post} separator=", " /></span>
      </div>
      <h1>{post.title}</h1>
      {post.secondaryTitle && <p class="secondary-title">{post.secondaryTitle}</p>}
      
      {post.featuredImage?.node?.sourceUrl && (
        <figure class="featured-image">
          <img
            src={post.featuredImage.node.sourceUrl}
            alt={post.featuredImage.node.altText || post.title}
            width={post.featuredImage.node.mediaDetails?.width || 1200}
            height={post.featuredImage.node.mediaDetails?.height || 675}
            loading="eager"
            class="post-image"
          />
          {(post.featuredImage.node.description || post.featuredImage.node.caption) && (
            <figcaption class="image-caption">
              {post.featuredImage.node.description && (
                <p>{stripHtml(post.featuredImage.node.description)}</p>
              )}
              {post.featuredImage.node.caption && (
                <span>©{stripHtml(post.featuredImage.node.caption)}</span>
              )}
            </figcaption>
          )}
        </figure>
      )}
      
      {post.content && <div set:html={post.content} />}
    </article>

    <ShareButtons url={post.uri} title={post.title} />

    <Subscribe />
  </div>
) : (
  <div>Новость не найдена</div>
)}

<style>
.article-wrapper {
  position: relative;
  max-width: 75%;
  padding-bottom: 2rem;
}

.news-single h1{
  font-size: 2.375rem;
  line-height: 1.2;
  margin: 0 0 0.625rem;
}

.secondary-title {
  font-size: 1.25rem;
  line-height: 1.4;
  color: #666;
  margin: 0.5rem 0 1rem;
  font-weight: 400;
}

.article_info{
  display: flex;
  gap: 8px;
}

.publication__data::after{ 
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    height: 12px;
    margin-top: -6px;
    border-left: 1px solid grey;
}

.featured-image {
  margin: 1.5rem 0;
  width: 100%;
}

.post-image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  object-fit: cover;
}

.image-caption {
  font-size: 0.875rem;
  color: #666;
  margin-top: 0.5rem;
  text-align: left;
}

.image-caption p {
  margin: 0 0 0.25rem 0;
}

.image-caption span {
  font-style: italic;
  white-space: nowrap;
}
</style>