core-maugli 1.2.25 → 1.2.26

package/package.json

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

package/src/components/BaseHead.astro

@@ -1,9 +1,7 @@
 ---
-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';
+import siteConfig from '../data/site-config.ts';
+import '../styles/global.css';
 // Определи тип выше:
 export type ImageMimeType = 'image/jpeg' | 'image/png' | 'image/webp';
 
@@ -88,72 +86,6 @@ 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} />
@@ -176,8 +108,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.toString()} />}
-{typeof resolvedImage?.height !== 'undefined' && <meta property="og:image:height" content={resolvedImage.height.toString()} />}
+{typeof resolvedImage?.width !== 'undefined' && <meta property="og:image:width" content={resolvedImage.width} />}
+{typeof resolvedImage?.height !== 'undefined' && <meta property="og:image:height" content={resolvedImage.height} />}
 {resolvedImage?.type && <meta property="og:image:type" content={resolvedImage.type} />}
 
 <!-- X/Twitter -->

package/src/components/Card.astro

@@ -1,4 +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';
 
@@ -13,27 +16,17 @@ 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;
 
 const TitleTag = headingLevel;
 
-// Отладка: проверяем, что именно приходит в image
-console.log('Card.astro DEBUG:', {
-    type: typeof image,
-    value: image,
-    src: image?.src,
-    isObject: typeof image === 'object',
-    isString: typeof image === 'string'
-});
-
 // Определяем базовое изображение для карточки
-// Убеждаемся, что получаем только строку пути, а не объект asset
-let baseImage =
+const baseImage =
     seo?.image?.src ||
-    (image && typeof image === 'object' && image.src ? image.src : image && typeof image === 'string' ? image : undefined) ||
+    (image && typeof image.src === 'string' && image.src.length > 0 ? image.src : undefined) ||
     (type === 'blog'
         ? maugliConfig.defaultBlogImage
         : type === 'project'
@@ -42,19 +35,61 @@ let baseImage =
             ? maugliConfig.defaultProductImage
             : maugliConfig.seo.defaultImage);
 
-// Убеждаемся, что baseImage - это строка, а не asset объект
-if (baseImage && typeof baseImage === 'object' && baseImage.src) {
-    baseImage = baseImage.src;
-}
+// Генерируем адаптивные версии изображений
+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`);
 
-// Убираем ведущий слэш, чтобы избежать обработки через asset pipeline
-if (baseImage && baseImage.startsWith('/')) {
-    baseImage = baseImage.substring(1);
+    return {
+        src: imagePath,
+        srcset: srcsetItems.join(', '),
+        sizes: '(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 400px'
+    };
 }
 
-console.log('Card.astro baseImage:', baseImage);
+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 cardImageAlt = seo?.image?.alt || (image && typeof image === 'object' ? image.alt : undefined) || title || 'Изображение';
+const finalImage = previewImage || cardImage.src;
 
 // Определяем контент для отображения
 const content = excerpt || description;
@@ -71,7 +106,9 @@ const content = excerpt || description;
         <!-- Изображение -->
         <div class="w-full aspect-[1200/630] bg-[var(--bg-muted)] overflow-hidden relative">
             <img
-                src={baseImage}
+                src={finalImage}
+                srcset={cardImage.srcset}
+                sizes={cardImage.sizes}
                 alt={cardImageAlt}
                 loading="lazy"
                 width="1200"

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.defaultLang || 'en';
+const lang = maugliConfig.lang || maugliConfig.defaultLang || 'en';
 const dict = dicts[lang] || dicts['en'] || {};
 
 const navLinks = (maugliConfig.navLinks || []).map((link) => ({
@@ -109,18 +109,7 @@ const copyrightYears = yearStart === yearEnd ? `${yearStart}` : `${yearStart}–
         ]}
     >
         <div class="flex flex-row justify-between items-end w-full mt-2">
-            <div class="flex flex-col items-start gap-1">
-                <img src="/footerlabel.svg" alt="Maugli Label" style="height:32px;width:auto;" loading="lazy" decoding="async" />
-                <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);"
-                >
-                    npm package
-                </a>
-            </div>
+            <img src="/footerlabel.svg" alt="Maugli Label" style="height:32px;width:auto;" loading="lazy" decoding="async" />
             {
                 Object.values(maugliConfig.links || {}).some(Boolean) && (
                     <div class="flex flex-row items-center gap-2 ml-4">

package/src/components/OptimizedImage.astro

@@ -1,51 +0,0 @@
----
-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

@@ -1,46 +0,0 @@
----
-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} />