core-maugli 1.2.17 → 1.2.19

package/package.json

@@ -2,7 +2,7 @@
     "name": "core-maugli",
     "description": "Astro & Tailwind CSS blog theme for Maugli.",
     "type": "module",
-    "version": "1.2.17",
+    "version": "1.2.19",
     "license": "GPL-3.0-or-later OR Commercial",
     "repository": {
         "type": "git",

package/src/components/Card.astro

@@ -40,9 +40,34 @@ function getResponsiveImages(imagePath: string) {
     const basePath = imagePath.replace(/\.(webp|jpg|jpeg|png)$/i, '');
     const extension = imagePath.match(/\.(webp|jpg|jpeg|png)$/i)?.[0] || '.webp';
 
+    // Проверяем существование адаптивных версий
+    const __filename = fileURLToPath(import.meta.url);
+    const projectRoot = path.resolve(path.dirname(__filename), '../..');
+    
+    const variants = [
+        { suffix: '-400', width: '400w' },
+        { suffix: '-800', width: '800w' },
+        { suffix: '-1200', width: '1200w' }
+    ];
+    
+    const srcsetItems = [];
+    
+    // Добавляем адаптивные версии, если они существуют
+    for (const variant of variants) {
+        const variantPath = `${basePath}${variant.suffix}${extension}`;
+        const filePath = path.join(projectRoot, 'public', variantPath.replace(/^\//, ''));
+        
+        if (fs.existsSync(filePath)) {
+            srcsetItems.push(`${variantPath} ${variant.width}`);
+        }
+    }
+    
+    // Всегда добавляем оригинальное изображение
+    srcsetItems.push(`${imagePath} 1200w`);
+
     return {
         src: imagePath,
-        srcset: [`${basePath}-400${extension} 400w`, `${basePath}-800${extension} 800w`, `${basePath}-1200${extension} 1200w`, `${imagePath} 1200w`].join(', '),
+        srcset: srcsetItems.join(', '),
         sizes: '(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 400px'
     };
 }
@@ -81,7 +106,7 @@ const content = excerpt || description;
         <!-- Изображение -->
         <div class="w-full aspect-[1200/630] bg-[var(--bg-muted)] overflow-hidden relative">
             <img
-                src={cardImage.src}
+                src={finalImage}
                 srcset={cardImage.srcset}
                 sizes={cardImage.sizes}
                 alt={cardImageAlt}

package/src/components/HeroImage.astro

@@ -1,5 +1,9 @@
 ---
 // src/components/HeroImage.astro
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
 export interface Props {
     src: string;
     alt?: string;
@@ -9,20 +13,46 @@ export interface Props {
     className?: string;
     srcset?: string;
 }
-const defaultWidth = 800;
-const { src, alt = '', caption, width = defaultWidth, height, className = '', srcset = '' } = Astro.props;
+const defaultWidth = 1200;
+const defaultHeight = 630;
+const { src, alt = '', caption, width = defaultWidth, height = defaultHeight, className = '', srcset = '' } = Astro.props;
 
-// Вариант aspect-ratio: если есть оба размера, рассчитываем; иначе не пишем!
-const aspectRatio = width && height ? `${width} / ${height}` : undefined;
+// Фиксированные пропорции 1200:630
+const aspectRatio = '1200 / 630';
 
 // Генерируем адаптивные версии изображений
 function getResponsiveImages(imagePath: string) {
     const basePath = imagePath.replace(/\.(webp|jpg|jpeg|png)$/i, '');
     const extension = imagePath.match(/\.(webp|jpg|jpeg|png)$/i)?.[0] || '.webp';
 
+    // Проверяем существование адаптивных версий
+    const __filename = fileURLToPath(import.meta.url);
+    const projectRoot = path.resolve(path.dirname(__filename), '../..');
+    
+    const variants = [
+        { suffix: '-400', width: '400w' },
+        { suffix: '-800', width: '800w' },
+        { suffix: '-1200', width: '1200w' }
+    ];
+    
+    const srcsetItems = [];
+    
+    // Добавляем адаптивные версии, если они существуют
+    for (const variant of variants) {
+        const variantPath = `${basePath}${variant.suffix}${extension}`;
+        const filePath = path.join(projectRoot, 'public', variantPath.replace(/^\//, ''));
+        
+        if (fs.existsSync(filePath)) {
+            srcsetItems.push(`${variantPath} ${variant.width}`);
+        }
+    }
+    
+    // Всегда добавляем оригинальное изображение
+    srcsetItems.push(`${imagePath} 1200w`);
+
     return {
         src: imagePath,
-        srcset: [`${basePath}-400${extension} 400w`, `${basePath}-800${extension} 800w`, `${basePath}-1200${extension} 1200w`, `${imagePath} 1200w`].join(', '),
+        srcset: srcsetItems.join(', '),
         sizes: '(max-width: 768px) 100vw, (max-width: 1024px) 80vw, 1200px'
     };
 }
@@ -39,17 +69,33 @@ if (srcset) {
     // Генерируем адаптивные изображения
     imageData = getResponsiveImages(src);
 }
+
+// Используем уменьшенное превью, если оно существует
+let previewImage;
+if (imageData.src) {
+    previewImage = imageData.src.replace(/\/([^\/]+)$/, '/previews/$1');
+
+    const __filename = fileURLToPath(import.meta.url);
+    const projectRoot = path.resolve(path.dirname(__filename), '../..');
+    const previewFilePath = path.join(projectRoot, 'public', previewImage.replace(/^\//, ''));
+
+    if (!fs.existsSync(previewFilePath)) {
+        previewImage = undefined;
+    }
+}
+
+const finalImage = previewImage || imageData.src;
 ---
 
 <figure class={`w-full max-w-[${width}px] mx-auto rounded-custom overflow-hidden bg-[var(--bg-muted)] ${className}`}>
     <img
-        src={imageData.src}
+        src={finalImage}
         srcset={imageData.srcset}
         sizes={imageData.sizes}
         alt={alt}
         width={width}
         height={height}
-        style={aspectRatio ? `aspect-ratio: ${aspectRatio}; width: 100%; height: auto;` : 'width: 100%; height: auto;'}
+        style={`aspect-ratio: ${aspectRatio}; width: 100%; height: auto;`}
         class="block rounded-custom object-cover"
         loading="eager"
         decoding="async"