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 datetime={new Date(post.date).toISOString()}>
        {new Date(post.date).toLocaleDateString('ru-RU')}
      </time>
    )}
  </div>
  <span class="divider" aria-hidden="true"></span>
  <div class="publication__author">
    <Author post={post} separator=", " />
  </div>
</div>


      <h1>{post.title}</h1>
      {post.secondaryTitle && <h2 class="secondary-title">{post.secondaryTitle}</h2>}
      
      {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} />}

       <Subscribe />
    </article>

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

   
  </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;
}

.news-single h2{
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 2.0625rem 0 .375rem;
}  

.news-single :global(p a) {
  color: #0d6efd;
}


.article_info {
  display: flex;
  align-items: center;
  gap: .475rem; /* одинаковое расстояние с обеих сторон от черты */
  margin-top: 1.9375rem;
  margin-bottom: .9375rem;
  font-size: 0.875rem;
  color: #666;
}

.divider {
  display: block;
  width: 1px;
  height: 12px;
  background-color: #999;
  flex-shrink: 0;
}

.publication__author :global(a){
  text-decoration: underline;
}




.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>