Окно-браузер превью с drag-to-scroll для 9 кейсов

baslie · baslie · commit 6e2f538043e1 · 2026-06-03T12:54:04.000+07:00
Превью-скриншот в стиле «окна браузера» (флаг screenshotFramed) для
aloemero, derevyannie-gryadki, ehomestroy, korea-motors, nutrilegal,
retroznak, sandwich-ehomestroy, truedogage; для mike-vinogradov — два окна.

- Высота окна адаптивная (max-height вместо жёсткого 4:3): короткие
  скриншоты целиком без пустот, длинные прокручиваются
- Скриншоты подняты в начало кейса (над текстом), включая sibananda-retrit
- Скрипт drag-to-scroll перенесён в layout Article.astro (работает и для
  ComplexArticle), курсор-«ручка» только при наличии прокрутки
diff --git a/src/components/SimpleArticle.astro b/src/components/SimpleArticle.astro
@@ -74,19 +74,6 @@ const articleJsonLd = {
     </header>
 
     <div class="article-body">
-        <p set:html={localized.body} />
-
-        {article.tech && (
-            <p><strong>{t('tech.label')}:</strong> {article.tech}</p>
-        )}
-
-        {article.siteUrl && article.siteDisplay && (
-            <a class="article-site-link" href={article.siteUrl} rel="nofollow noopener noreferrer" target="_blank">
-                <ExternalLinkIcon />
-                {article.siteDisplay}
-            </a>
-        )}
-
         {article.screenshotUrl && article.siteUrl && (
             article.screenshotFramed ? (
                 <figure class="screenshot-browser">
@@ -101,59 +88,18 @@ const articleJsonLd = {
                 <a href={article.siteUrl} rel="nofollow noopener noreferrer" target="_blank"><img src={article.screenshotUrl} alt={localized.screenshotAlt} loading="lazy"></a>
             )
         )}
-    </div>
-</Article>
-
-<script>
-    // Drag-to-scroll для превью-скриншота в «окне браузера»:
-    // тянем мышью вверх-вниз прямо по картинке (колёсико и скроллбар тоже работают).
-    function initDragScroll() {
-        const containers = document.querySelectorAll<HTMLElement>('[data-drag-scroll]');
-        containers.forEach((el) => {
-            if (el.dataset.dragScrollReady === '1') return;
-            el.dataset.dragScrollReady = '1';
 
-            let isDown = false;
-            let startY = 0;
-            let startScroll = 0;
-            let moved = false;
-
-            const onPointerDown = (e: PointerEvent) => {
-                if (e.button !== 0) return; // только ЛКМ
-                isDown = true;
-                moved = false;
-                startY = e.clientY;
-                startScroll = el.scrollTop;
-                el.classList.add('is-grabbing');
-                el.setPointerCapture(e.pointerId);
-            };
-
-            const onPointerMove = (e: PointerEvent) => {
-                if (!isDown) return;
-                const delta = e.clientY - startY;
-                if (Math.abs(delta) > 2) moved = true;
-                el.scrollTop = startScroll - delta;
-                e.preventDefault();
-            };
-
-            const endDrag = (e: PointerEvent) => {
-                if (!isDown) return;
-                isDown = false;
-                el.classList.remove('is-grabbing');
-                try {
-                    el.releasePointerCapture(e.pointerId);
-                } catch {}
-            };
+        <p set:html={localized.body} />
 
-            el.addEventListener('pointerdown', onPointerDown);
-            el.addEventListener('pointermove', onPointerMove);
-            el.addEventListener('pointerup', endDrag);
-            el.addEventListener('pointercancel', endDrag);
-            // не даём «улетать» выделению/перетаскиванию картинки
-            el.addEventListener('dragstart', (e) => e.preventDefault());
-        });
-    }
+        {article.tech && (
+            <p><strong>{t('tech.label')}:</strong> {article.tech}</p>
+        )}
 
-    initDragScroll();
-    document.addEventListener('astro:after-swap', initDragScroll);
-</script>
+        {article.siteUrl && article.siteDisplay && (
+            <a class="article-site-link" href={article.siteUrl} rel="nofollow noopener noreferrer" target="_blank">
+                <ExternalLinkIcon />
+                {article.siteDisplay}
+            </a>
+        )}
+    </div>
+</Article>
diff --git a/src/data/articles/aloemero.ts b/src/data/articles/aloemero.ts
@@ -13,6 +13,7 @@ export const aloemero: Article = {
   siteUrl: 'https://roman-purtow.ru/aloemero/',
   siteDisplay: 'roman-purtow.ru/aloemero',
   screenshotUrl: '/images/articles/aloemero/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'ALOEMERO — лендинг скульптурной мастерской из Томска — Роман Пуртов',
     ogTitle: 'ALOEMERO — лендинг скульптурной мастерской из Томска',
diff --git a/src/data/articles/derevyannie-gryadki.ts b/src/data/articles/derevyannie-gryadki.ts
@@ -13,6 +13,7 @@ export const derevyannieGryadki: Article = {
   siteUrl: 'https://derevyannie-gryadki.ru',
   siteDisplay: 'derevyannie-gryadki.ru',
   screenshotUrl: '/images/articles/derevyannie-gryadki/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'Деревянные грядки — лендинг производителя мини-теплиц «ДекорДом» — Роман Пуртов',
     ogTitle: 'Деревянные грядки — лендинг производителя мини-теплиц «ДекорДом»',
diff --git a/src/data/articles/ehomestroy.ts b/src/data/articles/ehomestroy.ts
@@ -13,6 +13,7 @@ export const ehomestroy: Article = {
   siteUrl: 'https://e-homestroy.ru',
   siteDisplay: 'e-homestroy.ru',
   screenshotUrl: '/images/articles/ehomestroy/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'ЭкоHomeСтрой 2.0 — редизайн сайта строительной компании — Роман Пуртов',
     ogTitle: 'ЭкоHomeСтрой 2.0 — редизайн сайта строительной компании',
diff --git a/src/data/articles/korea-motors.ts b/src/data/articles/korea-motors.ts
@@ -13,6 +13,7 @@ export const koreaMotors: Article = {
   siteUrl: 'https://exportautorus.ru',
   siteDisplay: 'exportautorus.ru',
   screenshotUrl: '/images/articles/korea-motors/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'Korea Motors — лендинг по заказу авто из Южной Кореи — Роман Пуртов',
     ogTitle: 'Korea Motors — лендинг по заказу авто из Южной Кореи',
diff --git a/src/data/articles/mike-vinogradov.ts b/src/data/articles/mike-vinogradov.ts
@@ -18,17 +18,27 @@ export const mikeVinogradov: Article = {
       'Портфолио для travel-фотографа и видеографа: бенто-грид с галереями, лайтбокс, scroll-анимации, двуязычный интерфейс на Astro и Tailwind CSS v4.',
     h1: 'Михаил Виноградов — портфолио фотографа и&nbsp;видеографа',
     metaLine: 'Пуртов Роман &middot; 7 марта 2026',
-    body: `<p>Портфолио для travel-фотографа и&nbsp;видеографа Михаила Виноградова. Бенто-грид с&nbsp;фото и&nbsp;видео-галереями, лайтбоксом и&nbsp;scroll-анимациями, двуязычный интерфейс (RU/EN), self-hosted шрифты и&nbsp;деплой на&nbsp;GitHub Pages.</p>
+    body: `<figure class="screenshot-browser">
+    <div class="screenshot-browser__bar" aria-hidden="true"><span></span><span></span><span></span></div>
+    <div class="screenshot-browser__scroll" data-drag-scroll>
+        <img src="/images/articles/mike-vinogradov/screenshot-1.jpg" alt="Скриншот портфолио Михаила Виноградова" loading="lazy" draggable="false">
+    </div>
+</figure>
+<figure class="screenshot-browser">
+    <div class="screenshot-browser__bar" aria-hidden="true"><span></span><span></span><span></span></div>
+    <div class="screenshot-browser__scroll" data-drag-scroll>
+        <img src="/images/articles/mike-vinogradov/screenshot-2.jpg" alt="Скриншот портфолио Михаила Виноградова" loading="lazy" draggable="false">
+    </div>
+</figure>
+
+<p>Портфолио для travel-фотографа и&nbsp;видеографа Михаила Виноградова. Бенто-грид с&nbsp;фото и&nbsp;видео-галереями, лайтбоксом и&nbsp;scroll-анимациями, двуязычный интерфейс (RU/EN), self-hosted шрифты и&nbsp;деплой на&nbsp;GitHub Pages.</p>
 
 <p><strong>Технологии:</strong> Astro, TypeScript, Tailwind CSS v4, self-hosted fonts</p>
 
 <a class="article-site-link" href="https://roman-purtow.ru/mike-vinogradov/" rel="nofollow noopener noreferrer" target="_blank">
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>
     roman-purtow.ru/mike-vinogradov
-</a>
-
-<a href="https://roman-purtow.ru/mike-vinogradov/" rel="nofollow noopener noreferrer" target="_blank"><img src="/images/articles/mike-vinogradov/screenshot-1.jpg" alt="Скриншот портфолио Михаила Виноградова" loading="lazy"></a>
-<a href="https://roman-purtow.ru/mike-vinogradov/" rel="nofollow noopener noreferrer" target="_blank"><img src="/images/articles/mike-vinogradov/screenshot-2.jpg" alt="Скриншот портфолио Михаила Виноградова" loading="lazy"></a>`,
+</a>`,
     screenshotAlt: 'Скриншот портфолио Михаила Виноградова',
     dateLabel: '7 марта 2026',
   },
@@ -41,17 +51,27 @@ export const mikeVinogradov: Article = {
       'Portfolio for a travel photographer and videographer. Bento grid with galleries, lightbox and scroll animations, bilingual interface (RU/EN), self-hosted fonts and GitHub Pages deployment.',
     h1: 'Mike Vinogradov — Photographer & Videographer Portfolio',
     metaLine: 'Roman Purtov &middot; March 7, 2026',
-    body: `<p>Portfolio for travel photographer and videographer Mike Vinogradov. Bento grid with photo and video galleries, lightbox and scroll animations, bilingual interface (RU/EN), self-hosted fonts and GitHub Pages deployment.</p>
+    body: `<figure class="screenshot-browser">
+    <div class="screenshot-browser__bar" aria-hidden="true"><span></span><span></span><span></span></div>
+    <div class="screenshot-browser__scroll" data-drag-scroll>
+        <img src="/images/articles/mike-vinogradov/screenshot-1.jpg" alt="Mike Vinogradov portfolio screenshot" loading="lazy" draggable="false">
+    </div>
+</figure>
+<figure class="screenshot-browser">
+    <div class="screenshot-browser__bar" aria-hidden="true"><span></span><span></span><span></span></div>
+    <div class="screenshot-browser__scroll" data-drag-scroll>
+        <img src="/images/articles/mike-vinogradov/screenshot-2.jpg" alt="Mike Vinogradov portfolio screenshot" loading="lazy" draggable="false">
+    </div>
+</figure>
+
+<p>Portfolio for travel photographer and videographer Mike Vinogradov. Bento grid with photo and video galleries, lightbox and scroll animations, bilingual interface (RU/EN), self-hosted fonts and GitHub Pages deployment.</p>
 
 <p><strong>Technologies:</strong> Astro, TypeScript, Tailwind CSS v4, self-hosted fonts</p>
 
 <a class="article-site-link" href="https://roman-purtow.ru/mike-vinogradov/" rel="nofollow noopener noreferrer" target="_blank">
     <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" x2="21" y1="14" y2="3"/></svg>
     roman-purtow.ru/mike-vinogradov
-</a>
-
-<a href="https://roman-purtow.ru/mike-vinogradov/" rel="nofollow noopener noreferrer" target="_blank"><img src="/images/articles/mike-vinogradov/screenshot-1.jpg" alt="Mike Vinogradov portfolio screenshot" loading="lazy"></a>
-<a href="https://roman-purtow.ru/mike-vinogradov/" rel="nofollow noopener noreferrer" target="_blank"><img src="/images/articles/mike-vinogradov/screenshot-2.jpg" alt="Mike Vinogradov portfolio screenshot" loading="lazy"></a>`,
+</a>`,
     screenshotAlt: 'Mike Vinogradov portfolio screenshot',
     dateLabel: 'March 7, 2026',
   },
diff --git a/src/data/articles/nutrilegal.ts b/src/data/articles/nutrilegal.ts
@@ -13,6 +13,7 @@ export const nutrilegal: Article = {
   siteUrl: 'https://nutrilegal.ru',
   siteDisplay: 'nutrilegal.ru',
   screenshotUrl: '/images/articles/nutrilegal/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'Нутрилигал — сайт по регистрации БАД и СГР — Роман Пуртов',
     ogTitle: 'Нутрилигал — сайт консалтинговой компании по регистрации продукции',
diff --git a/src/data/articles/retroznak.ts b/src/data/articles/retroznak.ts
@@ -13,6 +13,7 @@ export const retroznak: Article = {
   siteUrl: 'https://roman-purtow.ru/land.retroznak.ru',
   siteDisplay: 'roman-purtow.ru/land.retroznak.ru',
   screenshotUrl: '/images/articles/retroznak/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'Ретрознак — лендинг производителя адресных табличек — Роман Пуртов',
     ogTitle: 'Ретрознак — лендинг производителя адресных табличек',
diff --git a/src/data/articles/sandwich-ehomestroy.ts b/src/data/articles/sandwich-ehomestroy.ts
@@ -13,6 +13,7 @@ export const sandwichEhomestroy: Article = {
   siteUrl: 'https://sandwich.e-homestroy.ru',
   siteDisplay: 'sandwich.e-homestroy.ru',
   screenshotUrl: '/images/articles/sandwich-ehomestroy/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'ЭкоHomeСтрой — лендинг строительной компании — Роман Пуртов',
     ogTitle: 'ЭкоHomeСтрой — лендинг строительной компании',
diff --git a/src/data/articles/truedogage.ts b/src/data/articles/truedogage.ts
@@ -13,6 +13,7 @@ export const truedogage: Article = {
   siteUrl: 'https://truedogage.com',
   siteDisplay: 'truedogage.com',
   screenshotUrl: '/images/articles/truedogage/screenshot.jpg',
+  screenshotFramed: true,
   ru: {
     title: 'TrueDogAge — калькулятор возраста собаки по научной формуле — Роман Пуртов',
     ogTitle: 'TrueDogAge — калькулятор возраста собаки по научной формуле',
diff --git a/src/layouts/Article.astro b/src/layouts/Article.astro
@@ -66,6 +66,71 @@ const currentPath = Astro.url.pathname;
   </article>
 </Base>
 
+<script>
+    // Drag-to-scroll для превью-скриншота в «окне браузера»:
+    // тянем мышью вверх-вниз прямо по картинке (колёсико и скроллбар тоже работают).
+    function initDragScroll() {
+        const containers = document.querySelectorAll<HTMLElement>('[data-drag-scroll]');
+        containers.forEach((el) => {
+            // курсор-«ручка» только когда есть что прокручивать
+            const refreshScrollable = () => {
+                el.classList.toggle('is-scrollable', el.scrollHeight > el.clientHeight + 1);
+            };
+            refreshScrollable();
+
+            if (el.dataset.dragScrollReady === '1') return;
+            el.dataset.dragScrollReady = '1';
+
+            let isDown = false;
+            let startY = 0;
+            let startScroll = 0;
+            let moved = false;
+
+            const onPointerDown = (e: PointerEvent) => {
+                if (e.button !== 0) return; // только ЛКМ
+                if (el.scrollHeight <= el.clientHeight + 1) return; // нечего прокручивать
+                isDown = true;
+                moved = false;
+                startY = e.clientY;
+                startScroll = el.scrollTop;
+                el.classList.add('is-grabbing');
+                el.setPointerCapture(e.pointerId);
+            };
+
+            const onPointerMove = (e: PointerEvent) => {
+                if (!isDown) return;
+                const delta = e.clientY - startY;
+                if (Math.abs(delta) > 2) moved = true;
+                el.scrollTop = startScroll - delta;
+                e.preventDefault();
+            };
+
+            const endDrag = (e: PointerEvent) => {
+                if (!isDown) return;
+                isDown = false;
+                el.classList.remove('is-grabbing');
+                try {
+                    el.releasePointerCapture(e.pointerId);
+                } catch {}
+            };
+
+            el.addEventListener('pointerdown', onPointerDown);
+            el.addEventListener('pointermove', onPointerMove);
+            el.addEventListener('pointerup', endDrag);
+            el.addEventListener('pointercancel', endDrag);
+            // не даём «улетать» выделению/перетаскиванию картинки
+            el.addEventListener('dragstart', (e) => e.preventDefault());
+            // пересчёт прокручиваемости при ресайзе/догрузке картинки
+            window.addEventListener('resize', refreshScrollable);
+            const img = el.querySelector('img');
+            if (img && !img.complete) img.addEventListener('load', refreshScrollable);
+        });
+    }
+
+    initDragScroll();
+    document.addEventListener('astro:after-swap', initDragScroll);
+</script>
+
 <style>
     body {
         min-height: 100vh;
diff --git a/src/styles/input.css b/src/styles/input.css
@@ -1403,18 +1403,24 @@ html.lenis {
 
 .article-body .screenshot-browser__scroll {
     display: block;
-    aspect-ratio: 4 / 3;
+    /* короткий скриншот — по высоте картинки (без пустот), длинный — упирается в потолок и прокручивается */
+    max-height: min(70vh, 30rem);
     overflow-y: auto;
     overflow-x: hidden;
     scrollbar-width: thin;
     scrollbar-color: rgba(120, 120, 128, 0.55) transparent;
-    cursor: grab;
+    cursor: default;
     /* перетаскивание мышью по вертикали; на тач — нативный скролл */
     touch-action: pan-y;
     -webkit-user-select: none;
     user-select: none;
 }
 
+/* курсор-«ручка» только когда есть что прокручивать (класс ставит JS) */
+.article-body .screenshot-browser__scroll.is-scrollable {
+    cursor: grab;
+}
+
 .article-body .screenshot-browser__scroll.is-grabbing {
     cursor: grabbing;
 }
