core-maugli 1.2.2 → 1.2.4

package/README.md

@@ -87,6 +87,19 @@ Your blog will be available at `http://localhost:4321/`
  npm run build
 ```
 
+## Component Updates & Customization
+
+**Important**: Maugli Blog is designed for centralized component updates. All components (`src/components/`, `src/layouts/`, `src/pages/`, etc.) are automatically updated to the latest version when you update the package with `npm install --save core-maugli@latest`. This ensures you always receive the latest features, bug fixes, and improvements.
+
+This centralized update approach **does not affect**:
+
+- Your content (`src/content/`)
+- Your Maugli configuration (`src/config/maugli.config.ts`)
+- Your custom styles (`src/styles/global.css` - preserved if customized)
+- Your project settings (`package.json`, `astro.config.mjs`, etc.)
+
+Only the core blog components are updated, while your customizations and settings remain intact.
+
 `npm run build` runs [`scripts/verify-assets.js`](scripts/verify-assets.js)
 before the Astro build. This script checks the SHA-256 hashes of the
 floating label component and footer badge to ensure they haven't been
@@ -193,18 +206,18 @@ npx core-maugli init .
 
 ### Useful npm scripts
 
-| Script                           | Description                                 |
-| -------------------------------- | ------------------------------------------- |
-| `npm run dev`                    | Start local dev server                      |
-| `npm start`                      | Alias for `npm run dev`                     |
+| Script                           | Description                                                 |
+| -------------------------------- | ----------------------------------------------------------- |
+| `npm run dev`                    | Start local dev server                                      |
+| `npm start`                      | Alias for `npm run dev`                                     |
 | `npm run build`                  | Format content, verify assets, then create production build |
-| `npm run typograf`               | Run typograf on all posts                   |
-| `npm run astro`                  | Access the Astro CLI                        |
-| `npm run featured:add <slug>`    | Mark a post as featured                     |
-| `npm run featured:remove <slug>` | Remove featured mark from a post            |
-| `npm run featured:list`          | List all featured posts                     |
-| `npm run upgrade`                | Manually update `maugli.config.ts`          |
-| `npm run backup-update`          | Backup key files then run `npm update`      |
+| `npm run typograf`               | Run typograf on all posts                                   |
+| `npm run astro`                  | Access the Astro CLI                                        |
+| `npm run featured:add <slug>`    | Mark a post as featured                                     |
+| `npm run featured:remove <slug>` | Remove featured mark from a post                            |
+| `npm run featured:list`          | List all featured posts                                     |
+| `npm run upgrade`                | Manually update `maugli.config.ts`                          |
+| `npm run backup-update`          | Backup key files then run `npm update`                      |
 
 ## Checking installed version
 
@@ -214,14 +227,16 @@ See which version of the theme is installed:
 npm list core-maugli
 ```
 
-## Updating
+## Updating the theme
 
-Upgrade to the latest release:
+To update to the latest version of core-maugli, use:
 
 ```bash
-npm update
+npm install core-maugli@latest --save
 ```
 
+If you just run `npm install core-maugli`, it will install the version specified in your package.json. Only with `--save` (или вручную обновив package.json) вы получите самую свежую версию.
+
 To back up key files and then update, run:
 
 ```bash
@@ -244,4 +259,3 @@ commercial license.
 
 Contact <licensing@maugli.cfd> or visit
 <https://maugli.cfd/licensing> for more information.
-

package/package.json

@@ -2,7 +2,7 @@
     "name": "core-maugli",
     "description": "Astro & Tailwind CSS blog theme for Maugli.",
     "type": "module",
-    "version": "1.2.2",
+    "version": "1.2.4",
     "license": "GPL-3.0-or-later OR Commercial",
     "repository": {
         "type": "git",
@@ -21,15 +21,17 @@
         "typograf": "node typograf-batch.js",
         "dev": "astro dev",
         "start": "astro dev",
-        "build": "node typograf-batch.js && node scripts/verify-assets.js && astro build",
+        "build": "node typograf-batch.js && node scripts/generate-previews.js && node scripts/verify-assets.js && astro build",
         "test": "node tests/examplesFilter.test.ts",
         "astro": "astro",
         "featured:add": "node scripts/featured.js add",
         "featured:remove": "node scripts/featured.js remove",
         "featured:list": "node scripts/featured.js list",
         "upgrade": "node scripts/upgrade-config.js",
+        "update-components": "node scripts/update-components.js",
         "backup-update": "node scripts/update-with-backup.js",
-        "postinstall": "node scripts/upgrade-config.js"
+        "postinstall": "node scripts/upgrade-config.js",
+        "generate-previews": "node scripts/generate-previews.js"
     },
     "dependencies": {
         "@astrojs/mdx": "^4.3.0",
@@ -61,17 +63,8 @@
     "files": [
         "src",
         "public",
-        "scripts",
-        "typograf-batch.js",
-        "resize-all.cjs",
-        "bin",
-        "astro.config.mjs",
-        "tsconfig.json",
-        "vite.config.js",
-        "LICENSE",
-        "README.md"
+        "scripts"
     ],
-    "main": "bin/index.js",
     "bin": {
         "core-maugli": "bin/index.js"
     }

package/scripts/generate-previews.js

@@ -0,0 +1,175 @@
+import fs from 'fs';
+import path from 'path';
+import sharp from 'sharp';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Универсальное определение корня проекта
+const rootDir = __dirname.includes('node_modules')
+  ? path.join(__dirname, '../../..')
+  : path.join(__dirname, '..');
+
+const previewWidth = 400;
+const previewHeight = 210;
+
+// Функция для извлечения путей изображений из markdown файлов
+function extractImagePaths() {
+  const imagePaths = new Set();
+  const contentDir = path.join(rootDir, 'src/content');
+  
+  function scanDirectory(dir) {
+    if (!fs.existsSync(dir)) return;
+    
+    const items = fs.readdirSync(dir);
+    
+    for (const item of items) {
+      const itemPath = path.join(dir, item);
+      const stat = fs.statSync(itemPath);
+      
+      if (stat.isDirectory()) {
+        scanDirectory(itemPath);
+      } else if (item.endsWith('.md') || item.endsWith('.mdx')) {
+        const content = fs.readFileSync(itemPath, 'utf-8');
+        
+        // Извлекаем изображения из frontmatter (image: путь)
+        const frontmatterMatch = content.match(/^---\n([\s\S]*?)\n---/);
+        if (frontmatterMatch) {
+          const frontmatter = frontmatterMatch[1];
+          // Улучшенные регулярки для frontmatter
+          const imageMatches = frontmatter.match(/(?:^|\n)\s*(?:image|src):\s*['"]*([^'">\s\n]+)['"]*(?:\s|$)/g);
+          if (imageMatches) {
+            imageMatches.forEach(match => {
+              const imagePath = match.replace(/.*?(?:image|src):\s*['"]*/, '').replace(/['"]*\s*$/, '');
+              if (imagePath && !imagePath.startsWith('http') && imagePath.includes('/') && !imagePath.includes('authors/')) {
+                imagePaths.add(imagePath);
+              }
+            });
+          }
+        }
+        
+        // Извлекаем изображения из содержимого markdown (![](путь) и <img src="путь">)
+        const imgMatches = content.match(/!\[.*?\]\(([^)]+)\)|<img[^>]+src\s*=\s*['"]*([^'">\s]+)['"]*[^>]*>/g);
+        if (imgMatches) {
+          imgMatches.forEach(match => {
+            let imagePath;
+            if (match.startsWith('![')) {
+              imagePath = match.match(/!\[.*?\]\(([^)]+)\)/)?.[1];
+            } else {
+              imagePath = match.match(/src\s*=\s*['"]*([^'">\s]+)['"]*/)?.[1];
+            }
+            if (imagePath && !imagePath.startsWith('http') && imagePath.includes('/') && !imagePath.includes('authors/')) {
+              imagePaths.add(imagePath);
+            }
+          });
+        }
+      }
+    }
+  }
+  
+  scanDirectory(contentDir);
+  
+  // Также добавляем изображения из public/img/examples/ кроме авторов
+  const examplesDir = path.join(rootDir, 'public/img/examples');
+  if (fs.existsSync(examplesDir)) {
+    function addExampleImages(dir, relativePath = '') {
+      // Пропускаем папку authors - аватары не нужно обрабатывать
+      if (relativePath.includes('authors/')) return;
+      
+      const items = fs.readdirSync(dir);
+      for (const item of items) {
+        const itemPath = path.join(dir, item);
+        const stat = fs.statSync(itemPath);
+        
+        if (stat.isDirectory()) {
+          // Пропускаем папку authors
+          if (item === 'authors') continue;
+          addExampleImages(itemPath, `${relativePath}${item}/`);
+        } else if (item.match(/\.(webp|jpg|jpeg|png)$/i) && !dir.includes('previews')) {
+          imagePaths.add(`/img/examples/${relativePath}${item}`);
+        }
+      }
+    }
+    addExampleImages(examplesDir);
+  }
+  
+  return Array.from(imagePaths);
+}
+
+// Функция для очистки всех существующих превьюшек
+function cleanupExistingPreviews() {
+  const publicDir = path.join(rootDir, 'public');
+  
+  function removePreviewDirs(dir) {
+    if (!fs.existsSync(dir)) return;
+    
+    const items = fs.readdirSync(dir);
+    
+    for (const item of items) {
+      const itemPath = path.join(dir, item);
+      const stat = fs.statSync(itemPath);
+      
+      if (stat.isDirectory()) {
+        if (item === 'previews') {
+          console.log(`Removing existing preview directory: ${itemPath}`);
+          fs.rmSync(itemPath, { recursive: true, force: true });
+        } else {
+          removePreviewDirs(itemPath);
+        }
+      }
+    }
+  }
+  
+  removePreviewDirs(publicDir);
+}
+
+// Функция для создания превьюшки
+async function createPreview(imagePath) {
+  const fullImagePath = path.join(rootDir, 'public', imagePath.replace(/^\//, ''));
+  
+  if (!fs.existsSync(fullImagePath)) {
+    console.warn(`Image not found: ${fullImagePath}`);
+    return;
+  }
+  
+  const dir = path.dirname(fullImagePath);
+  const ext = path.extname(fullImagePath);
+  const name = path.basename(fullImagePath, ext);
+  const previewPath = path.join(dir, 'previews', `${name}${ext}`);
+  
+  // Создаем папку previews если её нет
+  const previewDir = path.dirname(previewPath);
+  if (!fs.existsSync(previewDir)) {
+    fs.mkdirSync(previewDir, { recursive: true });
+  }
+  
+  try {
+    await sharp(fullImagePath)
+      .resize(previewWidth, previewHeight, { fit: 'cover' })
+      .toFile(previewPath);
+    
+    console.log(`Preview created: ${previewPath}`);
+  } catch (error) {
+    console.error(`Error processing ${fullImagePath}:`, error.message);
+  }
+}
+
+// Основная функция
+async function generatePreviews() {
+  console.log('Cleaning up existing previews...');
+  cleanupExistingPreviews();
+  
+  console.log('Scanning content for images...');
+  const imagePaths = extractImagePaths();
+  
+  console.log(`Found ${imagePaths.length} images to process`);
+  
+  for (const imagePath of imagePaths) {
+    await createPreview(imagePath);
+  }
+  
+  console.log('Preview generation completed!');
+}
+
+generatePreviews().catch(console.error);

package/scripts/update-components.js

@@ -0,0 +1,166 @@
+#!/usr/bin/env node
+
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath, pathToFileURL } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Определяем корневые папки
+const packageRoot = __dirname.includes('node_modules') 
+  ? path.join(__dirname, '../../..', 'node_modules', 'core-maugli') // из node_modules
+  : path.join(__dirname, '..'); // из исходников (для разработки)
+
+const userRoot = __dirname.includes('node_modules')
+  ? path.join(__dirname, '../../..') // корень пользовательского проекта
+  : process.env.INIT_CWD || process.cwd(); // для разработки
+
+// Список папок и файлов для полного обновления (перезаписи)
+const FORCE_UPDATE_PATHS = [
+  'src/components',
+  'src/layouts', 
+  'src/pages',
+  'src/utils',
+  'src/scripts',
+  'src/icons',
+  'src/i18n',
+  'public/flags',
+  'public/img/default'
+  // Исключили src/styles - может содержать пользовательские стили
+];
+
+// Список файлов, которые НЕ должны перезаписываться (пользовательские)
+const PRESERVE_PATHS = [
+  'src/content',
+  'src/config/maugli.config.ts', // обновляется через upgrade-config.js
+  'src/styles/global.css', // может быть кастомизирован пользователем
+  'package.json',
+  'astro.config.mjs',
+  'tailwind.config.js',
+  'tsconfig.json'
+];
+
+async function copyDirectory(src, dest) {
+  try {
+    await fs.mkdir(dest, { recursive: true });
+    
+    const entries = await fs.readdir(src, { withFileTypes: true });
+    
+    for (const entry of entries) {
+      const srcPath = path.join(src, entry.name);
+      const destPath = path.join(dest, entry.name);
+      
+      if (entry.isDirectory()) {
+        await copyDirectory(srcPath, destPath);
+      } else {
+        await fs.copyFile(srcPath, destPath);
+        console.log(`Updated: ${path.relative(userRoot, destPath)}`);
+      }
+    }
+  } catch (error) {
+    console.warn(`Warning: Could not copy ${src} to ${dest}:`, error.message);
+  }
+}
+
+async function updateStyles() {
+  const srcStylesPath = path.join(packageRoot, 'src/styles');
+  const destStylesPath = path.join(userRoot, 'src/styles');
+  
+  try {
+    // Проверяем, существует ли папка styles в пакете
+    await fs.stat(srcStylesPath);
+    
+    // Проверяем, есть ли уже пользовательские стили
+    try {
+      const userGlobalCss = path.join(destStylesPath, 'global.css');
+      await fs.stat(userGlobalCss);
+      console.log('📝 Preserving user styles (global.css exists)');
+      
+      // Копируем только новые файлы стилей, не трогая global.css
+      const entries = await fs.readdir(srcStylesPath, { withFileTypes: true });
+      await fs.mkdir(destStylesPath, { recursive: true });
+      
+      for (const entry of entries) {
+        if (entry.name !== 'global.css') {
+          const srcFile = path.join(srcStylesPath, entry.name);
+          const destFile = path.join(destStylesPath, entry.name);
+          await fs.copyFile(srcFile, destFile);
+          console.log(`Updated style: ${entry.name}`);
+        }
+      }
+    } catch {
+      // Пользовательских стилей нет, копируем все
+      await copyDirectory(srcStylesPath, destStylesPath);
+      console.log('📝 Copied default styles');
+    }
+  } catch (error) {
+    console.warn('Warning: Could not update styles:', error.message);
+  }
+}
+
+async function updateComponents() {
+  console.log('🔄 Updating Maugli components and assets...');
+  
+  // Проверяем, что мы не в том же проекте (чтобы не удалить исходники)
+  if (packageRoot === userRoot) {
+    console.log('⚠️  Skipping component update (running in source project)');
+    return;
+  }
+  
+  let updatedCount = 0;
+  
+  for (const updatePath of FORCE_UPDATE_PATHS) {
+    const srcPath = path.join(packageRoot, updatePath);
+    const destPath = path.join(userRoot, updatePath);
+    
+    try {
+      // Проверяем, существует ли исходная папка/файл
+      const stats = await fs.stat(srcPath);
+      
+      if (stats.isDirectory()) {
+        // Удаляем существующую папку и копируем новую
+        try {
+          await fs.rm(destPath, { recursive: true, force: true });
+        } catch (e) {
+          // Папки может не быть - это нормально
+        }
+        
+        await copyDirectory(srcPath, destPath);
+        updatedCount++;
+      } else if (stats.isFile()) {
+        // Копируем отдельный файл
+        await fs.mkdir(path.dirname(destPath), { recursive: true });
+        await fs.copyFile(srcPath, destPath);
+        console.log(`Updated: ${path.relative(userRoot, destPath)}`);
+        updatedCount++;
+      }
+    } catch (error) {
+      if (error.code !== 'ENOENT') {
+        console.warn(`Warning: Could not update ${updatePath}:`, error.message);
+      }
+    }
+  }
+  
+  // Обрабатываем стили отдельно
+  await updateStyles();
+  
+  console.log(`✅ Updated ${updatedCount} component directories/files`);
+}
+
+async function main() {
+  try {
+    await updateComponents();
+    console.log('🎉 Component update completed successfully!');
+  } catch (error) {
+    console.error('❌ Component update failed:', error);
+    process.exit(1);
+  }
+}
+
+// Запускаем только если вызывается напрямую
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  main();
+}
+
+export { updateComponents };

package/scripts/upgrade-config.js

@@ -1,14 +1,25 @@
 #!/usr/bin/env node
 
 import fs from 'fs/promises';
-import path from 'path';
 import os from 'os';
-import { fileURLToPath, pathToFileURL } from 'url';
+import path from 'path';
 import ts from 'typescript';
+import { fileURLToPath, pathToFileURL } from 'url';
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// Импортируем функцию обновления компонентов
+async function importUpdateComponents() {
+  try {
+    const { updateComponents } = await import('./update-components.js');
+    return updateComponents;
+  } catch (error) {
+    console.warn('Could not load update-components.js:', error.message);
+    return null;
+  }
+}
+
 const defaultConfigPath = path.join(__dirname, '../src/config/maugli.config.ts');
 const userRoot = process.env.INIT_CWD || process.cwd();
 const userConfigPath = path.join(userRoot, 'src/config/maugli.config.ts');
@@ -43,6 +54,15 @@ function mergeMissing(target, source) {
 }
 
 async function main() {
+    console.log('🔄 Starting Maugli upgrade process...');
+    
+    // Сначала обновляем компоненты
+    const updateComponents = await importUpdateComponents();
+    if (updateComponents) {
+        await updateComponents();
+    }
+    
+    // Затем обновляем конфиг
     const pkg = await loadTsModule(defaultConfigPath);
     const defCfg = pkg.maugliConfig;
     const newVersion = pkg.MAUGLI_CONFIG_VERSION || defCfg.configVersion;
@@ -50,7 +70,7 @@ async function main() {
     try {
         await fs.access(userConfigPath);
     } catch {
-        console.warn(`User config not found at ${userConfigPath}, skipping upgrade`);
+        console.warn(`User config not found at ${userConfigPath}, skipping config upgrade`);
         return;
     }
 

package/src/components/LanguageSwitcher.astro

@@ -24,15 +24,7 @@ const current = availableLanguages.find((l) => l.code === currentLang) || availa
                     class="flag-box flex items-center justify-center w-7 h-7 rounded-[var(--radius-main)] shadow-[var(--shadow-main)]"
                     style="min-width:28px; min-height:28px; max-width:28px; max-height:28px;"
                 >
-                    {current && (
-                        <img
-                            src={current.icon.replace(/^\/public\/|^\/|^flags\//, '/src/icons/flags/')}
-                            alt={current.code.toUpperCase()}
-                            width="28"
-                            height="28"
-                            style="pointer-events:none;"
-                        />
-                    )}
+                    {current && <img src={current.icon} alt={current.code.toUpperCase()} width="28" height="28" style="pointer-events:none;" />}
                 </span>
                 <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
                     <path
@@ -65,13 +57,7 @@ const current = availableLanguages.find((l) => l.code === currentLang) || availa
                                 class="flag-box flex items-center justify-center w-7 h-7 rounded-[var(--radius-main)] shadow-[var(--shadow-main)]"
                                 style="min-width:28px; min-height:28px; max-width:28px; max-height:28px;"
                             >
-                                <img
-                                    src={lang.icon.replace(/^\/public\/|^\/|^flags\//, '/src/icons/flags/')}
-                                    alt={lang.code.toUpperCase()}
-                                    width="28"
-                                    height="28"
-                                    style="pointer-events:none;"
-                                />
+                                <img src={lang.icon} alt={lang.code.toUpperCase()} width="28" height="28" style="pointer-events:none;" />
                             </span>
                             <span class="text-heading">{lang.label}</span>
                         </a>