core-maugli 1.2.21 → 1.2.23

package/package.json

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

package/src/components/BaseHead.astro

@@ -99,8 +99,8 @@ let defaultAuthorName = defaultAuthor.data.name;
         --bg-main: #ffffff;
         --bg-muted: rgba(237, 241, 247, 0.621);
         --border-main: rgba(17, 28, 44, 0.13);
-        --font-sans: 'Inter Variable', sans-serif;
-        --font-serif: 'Geologica Variable', sans-serif;
+        --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        --font-serif: 'Geologica', Georgia, 'Times New Roman', serif;
     }
     html.dark {
         --brand-color-rgb: 13, 211, 18;
@@ -124,12 +124,34 @@ let defaultAuthorName = defaultAuthor.data.name;
     }
 </style>
 
-<!-- Font Preloading for Performance -->
-<link rel="preload" href="/_astro/inter-wght.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
-<link rel="preload" href="/_astro/geologica-wght.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
+<!-- Critical Resource Preloading for Performance -->
+<link rel="preload" href="/favicon.svg" as="image" type="image/svg+xml" />
+<link rel="preload" href="/footerlabel.svg" as="image" type="image/svg+xml" />
+<link rel="dns-prefetch" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+
+<!-- Image Optimization Hints -->
+<meta name="format-detection" content="telephone=no" />
+<meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover" />
+<meta http-equiv="x-ua-compatible" content="ie=edge" />
+
+<!-- Font Loading Strategy - Non-blocking -->
+<link 
+    rel="preload" 
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" 
+    as="style" 
+    onload="this.onload=null;this.rel='stylesheet'" 
+/>
+<link 
+    rel="preload" 
+    href="https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600&display=swap" 
+    as="style" 
+    onload="this.onload=null;this.rel='stylesheet'" 
+/>
 <noscript>
-    <link rel="stylesheet" href="/_astro/inter-wght.css" />
-    <link rel="stylesheet" href="/_astro/geologica-wght.css" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geologica:wght@400;500;600&display=swap" />
 </noscript>
 
 <!-- SEO -->

package/src/components/Card.astro

@@ -1,9 +1,7 @@
 ---
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
 import { maugliConfig } from '../config/maugli.config';
 import FormattedDate from './FormattedDate.astro';
+import ResponsiveImage from './ResponsiveImage.astro';
 
 type Props = {
     href: string;
@@ -16,7 +14,7 @@ type Props = {
     headingLevel?: 'h2' | 'h3';
     isFeatured?: boolean;
     class?: string;
-    type?: string; // добавлен тип
+    type?: string;
 };
 
 const { href, title, image, seo, publishDate, excerpt, description, headingLevel = 'h2', isFeatured = false, class: className, type } = Astro.props;
@@ -35,62 +33,8 @@ const baseImage =
             ? maugliConfig.defaultProductImage
             : maugliConfig.seo.defaultImage);
 
-// Генерируем адаптивные версии изображений
-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: srcsetItems.join(', '),
-        sizes: '(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 400px'
-    };
-}
-
-const cardImage = getResponsiveImages(baseImage);
 const cardImageAlt = seo?.image?.alt || image?.alt || title || 'Изображение';
 
-// Используем уменьшенное превью, если оно существует
-let previewImage;
-if (cardImage.src) {
-    previewImage = cardImage.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 || cardImage.src;
-
 // Определяем контент для отображения
 const content = excerpt || description;
 ---
@@ -105,15 +49,16 @@ const content = excerpt || description;
     <a href={href} class="block w-full h-full">
         <!-- Изображение -->
         <div class="w-full aspect-[1200/630] bg-[var(--bg-muted)] overflow-hidden relative">
-            <img
-                src={finalImage}
-                srcset={cardImage.srcset}
-                sizes={cardImage.sizes}
+            <ResponsiveImage
+                src={baseImage}
                 alt={cardImageAlt}
+                width={1200}
+                height={630}
                 loading="lazy"
-                width="1200"
-                height="630"
                 class="w-full h-full object-cover rounded-custom transition-transform duration-300 group-hover:scale-105"
+                sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 400px"
+                quality={75}
+                format="webp"
             />
 
             <!-- Звездочка featured в правом верхнем углу -->

package/src/components/Footer.astro

@@ -2,6 +2,7 @@
 import { maugliConfig } from '../config/maugli.config';
 import { LANGUAGES } from '../i18n/languages';
 import AuthorLinksGroup from './AuthorLinksGroup.astro';
+import OptimizedImage from './OptimizedImage.astro';
 // Универсальный импорт словарей по доступным языкам
 const dicts: Record<string, any> = {};
 for (const lang of LANGUAGES) {
@@ -9,7 +10,7 @@ for (const lang of LANGUAGES) {
         dicts[lang.code] = await import(`../i18n/${lang.code}.json`).then((m) => m.default);
     } catch {}
 }
-const lang = maugliConfig.lang || maugliConfig.defaultLang || 'en';
+const lang = maugliConfig.defaultLang || 'en';
 const dict = dicts[lang] || dicts['en'] || {};
 
 const navLinks = (maugliConfig.navLinks || []).map((link) => ({

package/src/components/OptimizedImage.astro

@@ -0,0 +1,67 @@
+---
+export interface Props {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    class?: string;
+    loading?: 'lazy' | 'eager';
+    decoding?: 'async' | 'sync' | 'auto';
+    sizes?: string;
+    priority?: boolean;
+    quality?: number;
+}
+
+const {
+    src,
+    alt,
+    width,
+    height,
+    class: className = '',
+    loading = 'lazy',
+    decoding = 'async',
+    sizes,
+    priority = false,
+    quality = 75,
+    ...rest
+} = Astro.props;
+
+// Generate responsive image variations with quality optimization
+const generateSrcSet = (baseSrc: string) => {
+    const baseUrl = baseSrc.replace(/\.[^.]+$/, '');
+    const ext = 'webp'; // Always use WebP for better compression
+    
+    const variations = [
+        { width: 400, suffix: '-400' },
+        { width: 800, suffix: '-800' },
+        { width: 1200, suffix: '-1200' }
+    ];
+    
+    return variations
+        .map(({ width, suffix }) => `${baseUrl}${suffix}.${ext} ${width}w`)
+        .join(', ');
+};
+
+const srcSet = generateSrcSet(src);
+const defaultSizes = sizes || '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw';
+
+// For priority images, we'll preload them
+const shouldPreload = priority && loading === 'eager';
+---
+
+<img
+    src={src}
+    srcset={srcSet}
+    sizes={defaultSizes}
+    alt={alt}
+    width={width}
+    height={height}
+    class={className}
+    loading={priority ? 'eager' : loading}
+    decoding={decoding}
+    {...rest}
+/>
+
+{priority && (
+    <link rel="preload" as="image" href={src} type="image/webp" />
+)}

package/src/components/ResponsiveImage.astro

@@ -0,0 +1,84 @@
+---
+export interface Props {
+    src: string;
+    alt: string;
+    width?: number;
+    height?: number;
+    class?: string;
+    loading?: 'lazy' | 'eager';
+    decoding?: 'async' | 'sync' | 'auto';
+    sizes?: string;
+    quality?: number;
+    format?: 'webp' | 'avif' | 'jpeg' | 'png';
+}
+
+const {
+    src,
+    alt,
+    width = 1200,
+    height = 630,
+    class: className = '',
+    loading = 'lazy',
+    decoding = 'async',
+    sizes = '(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 400px',
+    quality = 75,
+    format = 'webp',
+    ...rest
+} = Astro.props;
+
+// Генерируем оптимизированные URL для разных размеров
+const generateImageURL = (baseSrc: string, width: number, quality: number, format: string) => {
+    // Если это внешний URL, возвращаем как есть
+    if (baseSrc.startsWith('http')) {
+        return baseSrc;
+    }
+    
+    // Для карточек проверяем наличие preview версии
+    const previewSrc = baseSrc.replace(/\/([^\/]+)$/, '/previews/$1');
+    
+    // Возвращаем базовое изображение (preview будет проверен в build time)
+    return baseSrc;
+};
+
+const optimizedSrc = generateImageURL(src, width, quality, format);
+
+// Генерируем srcset для адаптивности (используем готовые варианты)
+const generateSrcSet = (baseSrc: string) => {
+    if (baseSrc.startsWith('http')) {
+        return baseSrc;
+    }
+    
+    const baseUrl = baseSrc.replace(/\.[^.]+$/, '');
+    const ext = '.webp';
+    
+    // Используем существующие responsive варианты
+    const variants = [
+        { width: 400, suffix: '-400' },
+        { width: 800, suffix: '-800' },
+        { width: 1200, suffix: '-1200' }
+    ];
+    
+    const srcsetItems = variants
+        .map(({ width, suffix }) => `${baseUrl}${suffix}${ext} ${width}w`);
+    
+    // Добавляем оригинал как fallback
+    srcsetItems.push(`${baseSrc} 1200w`);
+    
+    return srcsetItems.join(', ');
+};
+
+const srcSet = generateSrcSet(src);
+---
+
+<img
+    src={optimizedSrc}
+    srcset={srcSet}
+    alt={alt}
+    width={width}
+    height={height}
+    class={className}
+    loading={loading}
+    decoding={decoding}
+    sizes={sizes}
+    {...rest}
+/>