Превью скриншота в стиле «окна браузера» для кейса СибАНАНДА

Длинный скриншот лендинга заменён на компактное прокручиваемое
превью 4:3 с панелью-светофором сверху (разный цвет в светлой и
тёмной теме) и тонким scrollbar. Включается флагом screenshotFramed
в данных статьи — только для sibananda-retrit, остальные кейсы без
изменений.

Author: baslie

src/components/SimpleArticle.astro

@@ -88,7 +88,18 @@ const articleJsonLd = {
         )}
 
         {article.screenshotUrl && article.siteUrl && (
-            <a href={article.siteUrl} rel="nofollow noopener noreferrer" target="_blank"><img src={article.screenshotUrl} alt={localized.screenshotAlt} loading="lazy"></a>
+            article.screenshotFramed ? (
+                <figure class="screenshot-browser">
+                    <div class="screenshot-browser__bar" aria-hidden="true">
+                        <span></span><span></span><span></span>
+                    </div>
+                    <a class="screenshot-browser__scroll" href={article.siteUrl} rel="nofollow noopener noreferrer" target="_blank">
+                        <img src={article.screenshotUrl} alt={localized.screenshotAlt} loading="lazy">
+                    </a>
+                </figure>
+            ) : (
+                <a href={article.siteUrl} rel="nofollow noopener noreferrer" target="_blank"><img src={article.screenshotUrl} alt={localized.screenshotAlt} loading="lazy"></a>
+            )
         )}
     </div>
 </Article>

src/data/articles/_types.ts

@@ -24,6 +24,7 @@ export interface Article {
   siteUrl?: string;
   siteDisplay?: string;
   screenshotUrl?: string;
+  screenshotFramed?: boolean; // показывать скриншот в прокручиваемом «окне браузера»
   ru: ArticleI18n;
   en: ArticleI18n;
 }

src/data/articles/sibananda-retrit.ts

@@ -13,6 +13,7 @@ export const sibanandaRetrit: Article = {
   siteUrl: 'https://retrit.sibananda.ru',
   siteDisplay: 'retrit.sibananda.ru',
   screenshotUrl: '/images/articles/sibananda-retrit/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'СибАНАНДА — лендинг ретрита по Крия-йоге под Томском — Роман Пуртов',
     ogTitle: 'СибАНАНДА — лендинг ретрита по Крия-йоге под Томском',

src/styles/input.css

@@ -1362,6 +1362,79 @@ html.lenis {
     margin: var(--article-spacing-lg) 0;
 }
 
+/* Превью длинного скриншота в стиле «окна браузера» (article.screenshotFramed) */
+.article-body .screenshot-browser {
+    margin: var(--article-spacing-lg) 0;
+    border: 1px solid rgba(0, 0, 0, 0.12);
+    border-radius: var(--radius);
+    overflow: hidden;
+    background: var(--card-bg);
+}
+
+.dark .article-body .screenshot-browser {
+    border-color: rgba(255, 255, 255, 0.12);
+    background: var(--card-bg-dark);
+}
+
+.article-body .screenshot-browser__bar {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    height: 36px;
+    padding: 0 14px;
+    background: #e8eaed;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
+}
+
+.dark .article-body .screenshot-browser__bar {
+    background: #2a2a2e;
+    border-bottom-color: rgba(255, 255, 255, 0.08);
+}
+
+.article-body .screenshot-browser__bar span {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.article-body .screenshot-browser__bar span:nth-child(1) { background: #ff5f57; }
+.article-body .screenshot-browser__bar span:nth-child(2) { background: #febc2e; }
+.article-body .screenshot-browser__bar span:nth-child(3) { background: #28c840; }
+
+.article-body .screenshot-browser__scroll {
+    display: block;
+    aspect-ratio: 4 / 3;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin;
+    scrollbar-color: rgba(120, 120, 128, 0.55) transparent;
+}
+
+.article-body .screenshot-browser__scroll::-webkit-scrollbar {
+    width: 8px;
+}
+
+.article-body .screenshot-browser__scroll::-webkit-scrollbar-track {
+    background: transparent;
+    margin: 4px 0;
+}
+
+.article-body .screenshot-browser__scroll::-webkit-scrollbar-thumb {
+    background: rgba(120, 120, 128, 0.55);
+    border-radius: 999px;
+}
+
+.article-body .screenshot-browser__scroll::-webkit-scrollbar-thumb:hover {
+    background: rgba(120, 120, 128, 0.8);
+}
+
+.article-body .screenshot-browser__scroll img {
+    width: 100%;
+    display: block;
+    margin: 0;
+    border-radius: 0;
+}
+
 .article-body .img-caption {
     font-size: 0.875rem;
     color: var(--color-text-muted);