core-maugli 1.2.20 → 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.20",
+    "version": "1.2.22",
     "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/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) => ({
@@ -109,7 +110,18 @@ const copyrightYears = yearStart === yearEnd ? `${yearStart}` : `${yearStart}–
         ]}
     >
         <div class="flex flex-row justify-between items-end w-full mt-2">
-            <img src="/footerlabel.svg" alt="Maugli Label" style="height:32px;width:auto;" loading="lazy" decoding="async" />
+            <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>
             {
                 Object.values(maugliConfig.links || {}).some(Boolean) && (
                     <div class="flex flex-row items-center gap-2 ml-4">

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