add shared buttons in post

src/components/NewsSingle.astro

@@ -1,4 +1,8 @@
 ---
+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;
@@ -6,18 +10,114 @@ interface Props {
 }
 
 const { post, pageInfo } = Astro.props;
-
 ---
 
 {post ? (
-  <article class="news-single">
-    <h1>{post.title}</h1>
-    <div class="meta">
-      {post.date && <time>{new Date(post.date).toLocaleDateString('ru-RU')}</time>}
-    </div>
-    {post.content && <div set:html={post.content} />}
-  </article>
+  <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>