core-maugli 1.2.27 → 1.2.29

package/package.json

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

package/src/components/BaseHead.astro

@@ -1,7 +1,9 @@
 ---
-import { getFilteredCollection } from '../utils/content-loader';
-import siteConfig from '../data/site-config.ts';
+import type { CollectionEntry } from 'astro:content';
 import '../styles/global.css';
+import { getFilteredCollection } from '../utils/content-loader';
+import siteConfig from '../data/site-config';
+import { getAbsoluteLocaleUrl, getRelativeLocaleUrl } from 'astro:i18n';
 // Определи тип выше:
 export type ImageMimeType = 'image/jpeg' | 'image/png' | 'image/webp';
 
@@ -86,6 +88,72 @@ let defaultAuthorName = defaultAuthor.data.name;
 <meta name="robots" content="index, follow" />
 <meta name="generator" content={Astro.generator} />
 
+<!-- Critical CSS Inline for Performance -->
+<style>
+    :root {
+        --brand-color-rgb: 12, 191, 17;
+        --brand-color: rgb(var(--brand-color-rgb));
+        --text-main: #111c2d;
+        --text-heading: #3b5174;
+        --text-muted: #6b7280;
+        --bg-main: #ffffff;
+        --bg-muted: rgba(237, 241, 247, 0.621);
+        --border-main: rgba(17, 28, 44, 0.13);
+        --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;
+        --brand-color: rgb(var(--brand-color-rgb));
+        --text-main: #ffffff;
+        --text-heading: rgba(202, 252, 254, 0.7);
+        --text-muted: #9ca3af;
+        --bg-main: #0b131e;
+        --bg-muted: #131d2cde;
+        --border-main: rgba(51, 66, 66, 0.6);
+    }
+    body {
+        font-family: var(--font-sans);
+        color: var(--text-main);
+        background-color: var(--bg-main);
+        margin: 0;
+        line-height: 1.5;
+    }
+    * {
+        box-sizing: border-box;
+    }
+</style>
+
+<!-- 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="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 -->
 <meta name="description" content={seoDescription} />
 <meta name="keywords" content={seoKeywords} />
@@ -108,8 +176,8 @@ let defaultAuthorName = defaultAuthor.data.name;
 <meta property="og:description" content={seoDescription} />
 {resolvedImage?.src && <meta property="og:image" content={resolvedImage.src} />}
 {resolvedImage?.alt && <meta property="og:image:alt" content={resolvedImage.alt} />}
-{typeof resolvedImage?.width !== 'undefined' && <meta property="og:image:width" content={resolvedImage.width} />}
-{typeof resolvedImage?.height !== 'undefined' && <meta property="og:image:height" content={resolvedImage.height} />}
+{typeof resolvedImage?.width !== 'undefined' && <meta property="og:image:width" content={resolvedImage.width.toString()} />}
+{typeof resolvedImage?.height !== 'undefined' && <meta property="og:image:height" content={resolvedImage.height.toString()} />}
 {resolvedImage?.type && <meta property="og:image:type" content={resolvedImage.type} />}
 
 <!-- X/Twitter -->

package/src/components/Card.astro

@@ -1,7 +1,4 @@
 ---
-import fs from 'fs';
-import path from 'path';
-import { fileURLToPath } from 'url';
 import { maugliConfig } from '../config/maugli.config';
 import FormattedDate from './FormattedDate.astro';
 
@@ -16,7 +13,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 +32,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;
 ---
@@ -106,11 +49,9 @@ const content = excerpt || description;
         <!-- Изображение -->
         <div class="w-full aspect-[1200/630] bg-[var(--bg-muted)] overflow-hidden relative">
             <img
-                src={finalImage}
-                srcset={cardImage.srcset}
-                sizes={cardImage.sizes}
+                src={baseImage}
                 alt={cardImageAlt}
-                loading="lazy"
+                loading="eager"
                 width="1200"
                 height="630"
                 class="w-full h-full object-cover rounded-custom transition-transform duration-300 group-hover:scale-105"

package/src/components/Footer.astro

@@ -9,7 +9,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) => ({
@@ -110,7 +110,16 @@ const copyrightYears = yearStart === yearEnd ? `${yearStart}` : `${yearStart}–
     >
         <div class="flex flex-row justify-between items-end w-full mt-2">
             <a href="https://www.npmjs.com/package/core-maugli" target="_blank" rel="noopener" aria-label="Core Maugli на NPM">
-                <img src="/footerlabel.svg" alt="Maugli Label" style="height:32px;width:auto;" loading="lazy" decoding="async" />
+                <img src="/footerlabel.svg" alt="Maugli Label" style="height:32px;width:auto;" loading="lazy" decoding="async" width="184" height="68" />
+            </a>
+            <a
+                href="https://www.npmjs.com/package/core-maugli"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="footer-link text-xs opacity-60 hover:opacity-100"
+                style="color:var(--text-muted);font-family:var(--font-sans);margin-left:8px;"
+            >
+                npm package
             </a>
             {
                 Object.values(maugliConfig.links || {}).some(Boolean) && (

package/src/components/Nav.astro

@@ -9,6 +9,7 @@ import { LANGUAGES } from '../i18n/languages';
 const lang = typeof maugliConfig.defaultLang === 'string' ? maugliConfig.defaultLang : 'en';
 const languageObj = LANGUAGES.find((l) => l.code === lang) || LANGUAGES.find((l) => l.code === 'en');
 const dict = languageObj?.dict && Object.keys(languageObj.dict).length > 0 ? languageObj.dict : LANGUAGES.find((l) => l.code === 'en')?.dict || {};
+const langLabel = languageObj?.label || lang;
 
 const navLinks = (maugliConfig.navLinks || []).map((link) => {
     const d = dict as any;
@@ -17,6 +18,9 @@ const navLinks = (maugliConfig.navLinks || []).map((link) => {
         label: d?.nav?.[link.key] || link.label
     };
 });
+
+const openMenuLabel = dict.nav?.openMenu || 'Open menu';
+const closeMenuLabel = dict.nav?.closeMenu || 'Close menu';
 ---
 
 <nav class="fixed top-0 left-0 w-full z-50 bg-[var(--bg-main)] opacity-95 backdrop-blur-lg flex items-center justify-between pt-4 pb-4">
@@ -24,15 +28,7 @@ const navLinks = (maugliConfig.navLinks || []).map((link) => {
         <a href={maugliConfig.brand.logoHref && maugliConfig.brand.logoHref.trim() ? maugliConfig.brand.logoHref : '/'} class="ml-6 flex-shrink-0 card-blur">
             <picture>
                 <source srcset={maugliConfig.brand.logoDark} media="(prefers-color-scheme: dark)" />
-                <img
-                    src={maugliConfig.brand.logoLight}
-                    alt="Логотип"
-                    width="48"
-                    height="48"
-                    class="w-12 h-12"
-                    loading="eager"
-                    decoding="async"
-                />
+                <img src={maugliConfig.brand.logoLight} alt="Логотип" width="48" height="48" class="w-12 h-12" loading="eager" decoding="async" />
             </picture>
         </a>
         <ul
@@ -57,6 +53,7 @@ const navLinks = (maugliConfig.navLinks || []).map((link) => {
             class="menu-toggle cursor-pointer w-8 h-8 flex items-center justify-center relative z-30 md:hidden ml-auto text-[var(--text-heading)] order-3"
             aria-expanded="false"
             aria-controls="menu-items"
+            aria-label={openMenuLabel}
         >
             <span class="menu-toggle-icon w-6 h-px relative bg-current"></span>
         </button>
@@ -121,6 +118,9 @@ const navLinks = (maugliConfig.navLinks || []).map((link) => {
 </style>
 
 <script>
+    const openLabel = '{openMenuLabel}';
+    const closeLabel = '{closeMenuLabel}';
+
     function menuToggle() {
         const menu = document.querySelector('.menu');
         const menuToggleBtn = document.querySelector('.menu-toggle');
@@ -129,6 +129,7 @@ const navLinks = (maugliConfig.navLinks || []).map((link) => {
             const isMenuExpanded = menuToggleBtn.getAttribute('aria-expanded') === 'true';
             menuToggleBtn.classList.toggle('is-active');
             menuToggleBtn.setAttribute('aria-expanded', isMenuExpanded ? 'false' : 'true');
+            menuToggleBtn.setAttribute('aria-label', isMenuExpanded ? openLabel : closeLabel);
             menu.classList.toggle('is-visible');
         });
         // Закрытие при клике вне меню
@@ -136,6 +137,7 @@ const navLinks = (maugliConfig.navLinks || []).map((link) => {
             if (!menuToggleBtn.contains(e.target as Node) && !menu.contains(e.target as Node)) {
                 menuToggleBtn.classList.remove('is-active');
                 menuToggleBtn.setAttribute('aria-expanded', 'false');
+                menuToggleBtn.setAttribute('aria-label', openLabel);
                 menu.classList.remove('is-visible');
             }
         });
@@ -143,6 +145,7 @@ const navLinks = (maugliConfig.navLinks || []).map((link) => {
         window.addEventListener('scroll', () => {
             menuToggleBtn.classList.remove('is-active');
             menuToggleBtn.setAttribute('aria-expanded', 'false');
+            menuToggleBtn.setAttribute('aria-label', openLabel);
             menu.classList.remove('is-visible');
         });
         // Закрытие при выборе пункта меню
@@ -150,6 +153,7 @@ const navLinks = (maugliConfig.navLinks || []).map((link) => {
             item.addEventListener('click', () => {
                 menuToggleBtn.classList.remove('is-active');
                 menuToggleBtn.setAttribute('aria-expanded', 'false');
+                menuToggleBtn.setAttribute('aria-label', openLabel);
                 menu.classList.remove('is-visible');
             });
         });

package/src/components/OptimizedImage.astro

@@ -0,0 +1,51 @@
+---
+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/ProductBannerCard.astro

@@ -28,7 +28,7 @@ const buttons = (dict as any).buttons || (fallbackDict as any).buttons || {};
         src={bannerImage}
         alt={seo?.image?.alt || image?.alt || title || 'Product'}
         class="absolute inset-0 w-full h-full object-cover rounded-custom z-0"
-        loading="lazy"
+        loading="eager"
         decoding="async"
     />
     {

package/src/components/ResponsiveImage.astro

@@ -0,0 +1,46 @@
+---
+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;
+
+// Простая стратегия - используем базовое изображение и не генерируем srcset для несуществующих файлов
+const optimizedSrc = src;
+
+// Генерируем srcset только если есть базовое изображение
+const generateSrcSet = (baseSrc: string) => {
+    if (baseSrc.startsWith('http')) {
+        return baseSrc;
+    }
+
+    // Возвращаем только базовое изображение без попыток создания srcset
+    // Responsive варианты будут обработаны build процессом
+    return baseSrc;
+};
+
+const srcSet = generateSrcSet(src);
+---
+
+<img src={optimizedSrc} alt={alt} width={width} height={height} class={className} loading={loading} decoding={decoding} sizes={sizes} {...rest} />

package/src/components/RubricCard.astro

@@ -236,7 +236,7 @@ if (import.meta.env.DEV) {
                 sizes={rubricImage.sizes}
                 alt={title}
                 class="w-[105px] h-[107px] object-cover rounded-custom"
-                loading="lazy"
+                loading="eager"
                 width="105"
                 height="107"
             />

package/src/content/products/maugli-freeblog.md

@@ -56,7 +56,7 @@ jsonld:
     '@type': 'Offer'
     'priceCurrency': 'USD'
     'price': '0'
-    'url': 'https://www.npmjs.com/package/core-maugli'
+    'url': 'https://freeblog.maugli.ru'
 
 isExample: true
 ---
@@ -157,6 +157,6 @@ Maugli Free Blog спроектирован для лёгкой развертк
 
 ## **Где взять?**
 
-- **NPM:** [core-maugli](https://www.npmjs.com/package/core-maugli)
+- **GitHub:** [ссылка].
 
 **Maugli Free Blog — это платформа, созданная для автоматизации, SEO и AI-интеграций.**