core-maugli 1.2.21 → 1.2.22

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.22",
     "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/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" />
+)}