core-maugli 1.0.2

package/src/components/TagsAndShare.astro

@@ -0,0 +1,379 @@
+---
+import { slugify } from '../utils/common-utils';
+import TagPill from './TagPill.astro';
+import CopyLinkButton from './CopyLinkButton.astro';
+import ShareLink from './ShareLink.astro';
+import ShareIcon from './ShareIcon.astro';
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+
+export interface Props {
+    tags?: string[];
+    shareUrl?: string;
+    title?: string;
+    basePath?: string;
+}
+
+const { tags = [], shareUrl = '', title = '', basePath = '/blog' } = Astro.props;
+
+// Определяем куда ведут теги
+const tagsBasePath = basePath === '/projects' ? '/projects/tags' : '/tags';
+
+const lang = typeof maugliConfig.defaultLang === 'string' ? maugliConfig.defaultLang : 'en';
+const languageObj = LANGUAGES.find((l) => l.code === lang) || LANGUAGES.find((l) => l.code === 'en');
+const fallbackDict = LANGUAGES.find((l) => l.code === 'en')?.dict || {};
+const dict = languageObj?.dict && Object.keys(languageObj.dict).length > 0 ? languageObj.dict : fallbackDict;
+const tagsSection = (dict as any).tagsSection || (fallbackDict as any).tagsSection || {};
+const buttons = (dict as any).buttons || (fallbackDict as any).buttons || {};
+
+const shareLinks = [
+    {
+        name: 'Twitter',
+        url: `https://twitter.com/intent/tweet?text=${encodeURIComponent(title)}&url=${encodeURIComponent(shareUrl)}`,
+        icon: 'twitter' as const
+    },
+    {
+        name: 'Telegram',
+        url: `https://t.me/share/url?url=${encodeURIComponent(shareUrl)}&text=${encodeURIComponent(title)}`,
+        icon: 'telegram' as const
+    },
+    {
+        name: 'LinkedIn',
+        url: `https://www.linkedin.com/shareArticle?mini=true&url=${encodeURIComponent(shareUrl)}&title=${encodeURIComponent(title)}`,
+        icon: 'linkedin' as const
+    },
+    {
+        name: 'WhatsApp',
+        url: `https://wa.me/?text=${encodeURIComponent(title + ' ' + shareUrl)}`,
+        icon: 'whatsapp' as const
+    },
+    {
+        name: 'Facebook',
+        url: `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}`,
+        icon: 'facebook' as const
+    }
+];
+---
+
+<div class="w-full mb-2 rounded-custom border border-[var(--border-main)] py-6 px-8 flex-col gap-3 card-blur tags-share-container hidden md:flex">
+    <!-- Теги -->
+    {
+        tags.length > 0 && (
+            <div class="flex flex-col gap-3">
+                <h3 class="font-serif font-bold text-[18px] leading-[100%] text-[var(--text-heading)] flex-none">{tagsSection.allTags || 'Tags:'}</h3>
+                <div class="flex flex-wrap gap-2">
+                    {tags.map((tag) => (
+                        <TagPill tag={tag} href={`${tagsBasePath}/${slugify(tag)}`} />
+                    ))}
+                </div>
+            </div>
+        )
+    }
+
+    <!-- Кнопки шаринга -->
+    <div class="flex flex-col gap-3">
+        <h3 class="font-serif font-bold text-[18px] leading-[100%] text-[var(--text-heading)] flex-none">{buttons.share || 'Share Article'}</h3>
+        <div class="flex flex-wrap gap-2 share-buttons">
+            <a
+                class="share-link share-button"
+                href={shareLinks[0].url}
+                target="_blank"
+                rel="noopener noreferrer external"
+                title={shareLinks[0].name}
+                aria-label={shareLinks[0].name}
+                tabindex="0"
+            >
+                <span class="share-icon" aria-label="Twitter">
+                    <svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M11.0207 8.96875L18.7675 19.0295H17.0129L9.26554 8.96875H11.0207Z" fill="currentColor" fill-opacity="0.8"></path>
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM7.61466 8.16667L12.5701 14.6021L7.58333 19.8333H8.70614L13.0709 15.2521L16.5982 19.8333H20.4167L15.1838 13.0367L19.8236 8.16667H18.7031L14.683 12.385L11.4354 8.16667H7.61466Z"
+                            fill="currentColor"
+                            fill-opacity="0.8"></path>
+                    </svg>
+                </span>
+            </a>
+            <a
+                class="share-link share-button"
+                href={shareLinks[1].url}
+                target="_blank"
+                rel="noopener noreferrer external"
+                title={shareLinks[1].name}
+                aria-label={shareLinks[1].name}
+                tabindex="0"
+            >
+                <span class="share-icon" aria-label="Telegram">
+                    <svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM19.209 8.16667C18.7423 8.17491 18.0258 8.4236 14.5799 9.85685C13.373 10.3589 10.9608 11.3981 7.34351 12.974C6.75617 13.2076 6.44818 13.4365 6.42008 13.6599C6.36633 14.0889 6.98397 14.2225 7.76107 14.4751C8.39458 14.681 9.24686 14.9218 9.68994 14.9314C10.0918 14.94 10.5409 14.7747 11.0361 14.4347C14.4155 12.1535 16.1602 11.0002 16.2701 10.9751C16.3473 10.9576 16.4545 10.9352 16.527 10.9996C16.5993 11.0639 16.5922 11.1858 16.5846 11.2189C16.5231 11.4808 13.3495 14.3679 13.1654 14.5588C12.4672 15.284 11.6731 15.7276 12.8983 16.535C13.9584 17.2336 14.5753 17.6796 15.6674 18.3955C16.3653 18.853 16.9127 19.3955 17.6333 19.3292C17.9648 19.2986 18.3076 18.9868 18.4815 18.0571C18.8926 15.8594 19.7007 11.0972 19.8875 9.13509C19.9037 8.96324 19.8829 8.7434 19.8664 8.64689C19.8498 8.55033 19.8153 8.41263 19.6898 8.31079C19.5412 8.19027 19.3117 8.16489 19.209 8.16667Z"
+                            fill="currentColor"
+                            fill-opacity="0.8"></path>
+                    </svg>
+                </span>
+            </a>
+            <a
+                class="share-link share-button"
+                href={shareLinks[2].url}
+                target="_blank"
+                rel="noopener noreferrer external"
+                title={shareLinks[2].name}
+                aria-label={shareLinks[2].name}
+                tabindex="0"
+            >
+                <span class="share-icon" aria-label="LinkedIn">
+                    <svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            d="M16.4889 12.0575C17.6633 12.0575 18.9321 12.7547 18.9321 14.7964L18.931 18.9321H16.8272V15.2795C16.8272 14.2022 16.369 13.8695 15.7779 13.8695C15.1538 13.8697 14.5417 14.3406 14.5417 15.3068V18.9321H12.4368V12.2449H14.4609V13.1717H14.4882C14.6914 12.7605 15.4029 12.0575 16.4889 12.0575Z"
+                            fill="currentColor"
+                            fill-opacity="0.8"></path>
+                        <path d="M11.1728 18.9264H9.06787V12.2403H11.1728V18.9264Z" fill="currentColor" fill-opacity="0.8"></path>
+                        <path
+                            d="M9.89274 8.91919C10.127 8.87322 10.3702 8.89802 10.5906 8.98983C10.8109 9.08163 10.9989 9.23671 11.1312 9.4353C11.2636 9.63401 11.3342 9.8676 11.334 10.1064C11.3362 10.2662 11.3066 10.4249 11.2463 10.5729C11.1859 10.7209 11.0959 10.855 10.9825 10.9677C10.8691 11.0803 10.7344 11.1692 10.586 11.2286C10.4376 11.288 10.2787 11.3168 10.1189 11.3135C9.88021 11.3121 9.64736 11.2403 9.44954 11.1067C9.25169 10.973 9.09731 10.7837 9.00692 10.5627C8.9166 10.3417 8.89395 10.0987 8.94141 9.86483C8.9889 9.6309 9.10476 9.41613 9.27409 9.24788C9.44338 9.07974 9.6586 8.96517 9.89274 8.91919Z"
+                            fill="currentColor"
+                            fill-opacity="0.8"></path>
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM8.03337 7C7.75931 7.00003 7.49628 7.1087 7.30249 7.30249C7.1087 7.49628 7.00003 7.75931 7 8.03337V19.9666C7.00003 20.2407 7.1087 20.5037 7.30249 20.6975C7.49628 20.8913 7.75931 21 8.03337 21H19.9666C20.2407 21 20.5037 20.8913 20.6975 20.6975C20.8913 20.5037 21 20.2407 21 19.9666V8.03337C21 7.75931 20.8913 7.49628 20.6975 7.30249C20.5037 7.1087 20.2407 7.00003 19.9666 7H8.03337Z"
+                            fill="currentColor"
+                            fill-opacity="0.8"></path>
+                    </svg>
+                </span>
+            </a>
+            <a
+                class="share-link share-button"
+                href={shareLinks[3].url}
+                target="_blank"
+                rel="noopener noreferrer external"
+                title={shareLinks[3].name}
+                aria-label={shareLinks[3].name}
+                tabindex="0"
+            >
+                <span class="share-icon" aria-label="WhatsApp">
+                    <svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M14.0302 8.17464C15.5779 8.17467 17.0352 8.7736 18.1283 9.86483C19.2214 10.9561 19.8231 12.4032 19.8231 13.9436C19.823 17.1241 17.2225 19.7091 14.0302 19.7091H14.0268C12.9871 19.7058 11.9674 19.4299 11.0782 18.9042L10.8674 18.7778L8.6748 19.3497L9.25985 17.2237L9.12256 17.0044C8.5409 16.0861 8.23673 15.0247 8.23673 13.9368C8.23675 10.7562 10.8377 8.17131 14.0302 8.17464ZM11.563 10.733C11.446 10.733 11.2586 10.7759 11.0981 10.9489C10.9377 11.1219 10.4897 11.5414 10.4897 12.3964C10.4898 13.248 11.1148 14.0731 11.2018 14.1897C11.2887 14.3061 12.4088 16.1125 14.1772 16.8079C15.648 17.3868 15.9491 17.2702 16.2667 17.2402C16.5844 17.2101 17.296 16.8211 17.443 16.4154C17.5867 16.0096 17.5867 15.6639 17.5433 15.5905C17.4998 15.5173 17.3827 15.4736 17.2089 15.3871C17.0345 15.3003 16.1793 14.8819 16.0189 14.822C15.8585 14.7655 15.7417 14.7353 15.6281 14.908C15.5111 15.081 15.1764 15.4706 15.0761 15.5871C14.9759 15.7033 14.8721 15.7168 14.6984 15.6304C14.5245 15.5439 13.9632 15.3605 13.2982 14.7685C12.7802 14.3095 12.429 13.7408 12.3286 13.5676C12.2283 13.3946 12.3186 13.3015 12.4055 13.215C12.4824 13.1385 12.5795 13.0118 12.6664 12.9119C12.7532 12.8122 12.7834 12.7389 12.8402 12.6226C12.8969 12.5062 12.8699 12.4065 12.8265 12.3201C12.783 12.2369 12.4419 11.3782 12.2882 11.0355C12.1579 10.7463 12.021 10.7397 11.8974 10.7364C11.7971 10.7331 11.68 10.733 11.563 10.733Z"
+                            fill="currentColor"
+                            fill-opacity="0.8"></path>
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM14.0302 7C10.1892 7 7.0604 10.1107 7.06038 13.9368C7.05704 15.1577 7.37783 16.352 7.9895 17.4066L7 21L10.6903 20.0316C11.7098 20.5839 12.8567 20.8769 14.0234 20.877H14.0268C17.871 20.8769 21 17.7662 21 13.9402C21.0033 12.087 20.2777 10.3434 18.9606 9.03255C17.6469 7.72189 15.8954 7.00003 14.0302 7Z"
+                            fill="currentColor"
+                            fill-opacity="0.8"></path>
+                    </svg>
+                </span>
+            </a>
+            <a
+                class="share-link share-button"
+                href={shareLinks[4].url}
+                target="_blank"
+                rel="noopener noreferrer external"
+                title={shareLinks[4].name}
+                aria-label={shareLinks[4].name}
+                tabindex="0"
+            >
+                <span class="share-icon" aria-label="Facebook">
+                    <svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path
+                            fill-rule="evenodd"
+                            clip-rule="evenodd"
+                            d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM15.6685 7.58333C13.7987 7.58333 12.5776 8.72769 12.5776 10.7985V12.6191H10.5V15.0083H12.5776V20.7835C12.9947 20.8497 13.4217 20.8832 13.8564 20.8832C14.2911 20.8832 14.7177 20.8497 15.1348 20.7835V15.0083H17.0414L17.4043 12.6191H15.1348V11.0697C15.1348 10.416 15.4514 9.77824 16.4678 9.77824H17.5V7.74455C17.4937 7.74346 16.5605 7.58334 15.6685 7.58333Z"
+                            fill="currentColor"
+                            fill-opacity="0.8"></path>
+                    </svg>
+                </span>
+            </a>
+            <CopyLinkButton url={shareUrl} />
+        </div>
+    </div>
+</div>
+
+<style>
+    .tags-share-container {
+        position: relative;
+        width: 100%;
+        border-radius: 8px 24px;
+        box-sizing: border-box;
+    }
+
+    .share-buttons {
+        display: flex;
+        flex-direction: row;
+        align-items: flex-start;
+        padding: 0px;
+        gap: 8px;
+        flex-wrap: wrap;
+    }
+
+    .share-link,
+    .share-button {
+        background: none;
+        color: var(--text-main);
+        border: none;
+        box-shadow: none;
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        transition: transform 0.2s ease;
+        text-decoration: none;
+        cursor: pointer;
+        padding: 0;
+    }
+    .share-icon {
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: transform 0.2s ease;
+        color: var(--text-main);
+        min-width: 28px;
+        min-height: 28px;
+    }
+    .share-icon svg {
+        color: inherit;
+        width: 100%;
+        height: 100%;
+        display: block;
+    }
+    .share-link:hover,
+    .share-button:hover {
+        transform: scale(1.1);
+        background: none;
+    }
+    @media (min-width: 1024px) {
+        .share-link,
+        .share-button {
+            width: 36px;
+            height: 36px;
+        }
+        .share-icon {
+            width: 36px;
+            height: 36px;
+            min-width: 36px;
+            min-height: 36px;
+        }
+    }
+    html[data-theme='dark'] .share-link,
+    html[data-theme='dark'] .share-button {
+        color: var(--text-main);
+        background: none;
+    }
+
+    /* Кнопка копирования — адаптация под тему */
+    .copy-link-button {
+        border: none;
+        background: none;
+        color: var(--text-main);
+        cursor: pointer;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: transform 0.2s ease;
+        text-decoration: none;
+        width: 28px;
+        height: 28px;
+        box-shadow: none;
+    }
+    .copy-link-button .copy-icon {
+        width: 28px;
+        height: 28px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .copy-link-button .copy-icon svg {
+        width: 100%;
+        height: 100%;
+        fill: currentColor;
+    }
+    .copy-link-button:hover {
+        transform: scale(1.1);
+        background: none;
+    }
+    @media (min-width: 1024px) {
+        .copy-link-button {
+            width: 36px;
+            height: 36px;
+        }
+        .copy-link-button .copy-icon {
+            width: 36px;
+            height: 36px;
+        }
+    }
+    /* Темная тема */
+    html[data-theme='dark'] .copy-link-button {
+        color: var(--text-main);
+        background: none;
+    }
+    /* Скрыть блок на мобиле */
+    @media (max-width: 767px) {
+        .tags-share-container {
+            display: none;
+        }
+    }
+</style>
+
+<script>
+    document.addEventListener('astro:page-load', () => {
+        // Обработчик для кнопки копирования ссылки в боковом блоке
+        const copyButtons = document.querySelectorAll('.tags-share-container .copy-link-btn');
+
+        copyButtons.forEach((button) => {
+            button.addEventListener('click', async (e) => {
+                e.preventDefault();
+                const url = button.getAttribute('data-url') || window.location.href;
+
+                try {
+                    await navigator.clipboard.writeText(url);
+
+                    // Системный звук копирования
+                    try {
+                        const audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();
+                        const oscillator = audioContext.createOscillator();
+                        const gainNode = audioContext.createGain();
+
+                        oscillator.connect(gainNode);
+                        gainNode.connect(audioContext.destination);
+
+                        oscillator.frequency.setValueAtTime(800, audioContext.currentTime);
+                        gainNode.gain.setValueAtTime(0.1, audioContext.currentTime);
+                        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);
+
+                        oscillator.start(audioContext.currentTime);
+                        oscillator.stop(audioContext.currentTime + 0.1);
+                    } catch (audioErr) {
+                        console.log('Audio context not available');
+                    }
+
+                    // Меняем иконку на галочку
+                    const shareIcon = button.querySelector('.share-icon');
+                    if (shareIcon) {
+                        const originalContent = shareIcon.innerHTML;
+                        shareIcon.innerHTML = `<svg width="100%" height="100%" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path fill-rule="evenodd" clip-rule="evenodd" d="M14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0ZM12.9307 16.8096L8 11.8789L5.87891 14L11.9395 20.0605C12.2322 20.3533 12.633 20.5119 13.0469 20.499C13.4607 20.4861 13.8511 20.3027 14.125 19.9922L22.6172 10.3672L20.3672 8.38281L12.9307 16.8096Z" fill="currentColor" fill-opacity="0.8"/>
+                        </svg>`;
+
+                        // Возвращаем исходную иконку через 5 секунд
+                        setTimeout(() => {
+                            shareIcon.innerHTML = originalContent;
+                        }, 5000);
+                    }
+                } catch (err) {
+                    console.error('Failed to copy URL:', err);
+                }
+            });
+        });
+    });
+</script>

package/src/components/TagsSection.astro

@@ -0,0 +1,203 @@
+---
+import { maugliConfig } from '../config/maugli.config';
+import { LANGUAGES } from '../i18n/languages';
+export interface Props {
+    tags: Array<{
+        id: string;
+        name: string;
+        count: number;
+        isRubric?: boolean;
+    }>;
+    totalCount: number;
+    activeTagId?: string;
+    basePath?: string;
+    class?: string;
+    rubricImage?: string;
+    rubricDescription?: string;
+    rubricName?: string;
+}
+
+const { tags, totalCount, activeTagId, basePath = '/blog', class: className = '', rubricImage, rubricDescription = '', rubricName = '' } = Astro.props;
+const isAllActive = !activeTagId; // "Все" активен, если нет активного тега
+
+// Определяем куда ведет кнопка "Все" и куда ведут теги
+const allHref = basePath === '/projects' ? '/projects' : '/blog';
+const tagsBasePath = basePath === '/projects' ? '/projects/tags' : '/tags';
+const lang = typeof maugliConfig.defaultLang === 'string' ? maugliConfig.defaultLang : 'en';
+const languageObj = LANGUAGES.find((l) => l.code === lang) || LANGUAGES.find((l) => l.code === 'en');
+const fallbackDict = LANGUAGES.find((l) => l.code === 'en')?.dict || {};
+const dict = languageObj?.dict && Object.keys(languageObj.dict).length > 0 ? languageObj.dict : fallbackDict;
+const tagsSection = (dict as any).tagsSection || (fallbackDict as any).tagsSection || {};
+const allLabel = basePath === '/projects' ? tagsSection.allCases : tagsSection.allArticles;
+const allTagsLabel = tagsSection.allTags;
+
+// Fallback для изображения рубрики
+const rubricImageFinal = rubricImage && rubricImage.length > 0 ? rubricImage : maugliConfig.defaultRubricImage;
+---
+
+{
+    (rubricName || rubricDescription) && (
+        <div class="flex flex-col sm:flex-row items-center sm:items-start gap-4 mb-6">
+            <img
+                src={rubricImageFinal}
+                alt={rubricName || tagsSection.rubricAlt}
+                class="w-20 h-20 sm:w-40 sm:h-40 object-cover rounded-[16px_48px_16px_48px] border border-[var(--border-main)]"
+                style="flex-shrink:0;"
+            />
+            <div class="flex flex-col items-center sm:items-start text-center sm:text-left">
+                {rubricName && <h2 class="text-xl sm:text-2xl font-bold mb-2">{rubricName}</h2>}
+                {rubricDescription && <div class="text-base sm:text-lg text-[var(--text-muted)]">{rubricDescription}</div>}
+            </div>
+        </div>
+    )
+}
+
+<div class:list={['flex flex-wrap items-center gap-2 py-4 mb-6', className]}>
+    <!-- Десктопная версия -->
+    <div class="hidden sm:flex flex-wrap items-center gap-2">
+        <a
+            href={allHref}
+            aria-label={allLabel + ` (${totalCount})`}
+            class:list={[
+                'inline-flex items-center justify-center px-4 py-1.5 text-lg leading-[22px] font-inter font-normal whitespace-nowrap no-underline transition-all duration-200 ease-in-out hover:-translate-y-px rounded-3xl',
+                isAllActive
+                    ? 'bg-[var(--brand-color-20)] border border-[var(--brand-color)] text-[var(--brand-color)] hover:bg-[var(--brand-color-60)]'
+                    : 'border border-[var(--border-main)] text-[var(--text-heading)] hover:bg-[var(--bg-muted)]'
+            ]}
+        >
+            {allLabel} ({totalCount})
+        </a>
+        {
+            tags.map((tag) => {
+                const isActive = activeTagId === tag.id;
+                const isRubric = tag.isRubric;
+                const ariaLabel = tagsSection.tagAriaLabel
+                    ? tagsSection.tagAriaLabel.replace('{name}', tag.name).replace('{count}', tag.count)
+                    : `Tag: ${tag.name} (${tag.count})`;
+                return (
+                    <a
+                        href={`${tagsBasePath}/${tag.id}`}
+                        aria-label={ariaLabel}
+                        class:list={[
+                            'inline-flex items-center justify-center px-4 py-1.5 text-lg leading-[22px] font-inter font-normal whitespace-nowrap no-underline transition-all duration-200 ease-in-out hover:-translate-y-px rounded-3xl',
+                            isActive
+                                ? 'bg-[var(--brand-color-20)] border border-[var(--brand-color)] text-[var(--brand-color)] hover:bg-[var(--brand-color-60)]'
+                                : isRubric
+                                  ? 'bg-[var(--bg-muted)] border border-[var(--border-main)] text-[var(--text-heading)] hover:bg-[var(--brand-color-20)]'
+                                  : 'border border-[var(--border-main)] text-[var(--text-muted)] opacity-75 hover:bg-[var(--bg-muted)]'
+                        ]}
+                    >
+                        {tag.name}
+                        <span style="color: inherit; opacity: 0.6;"> ({tag.count})</span>
+                    </a>
+                );
+            })
+        }
+    </div>
+    <!-- Мобильная версия -->
+    <div class="block sm:hidden w-full">
+        <input type="checkbox" id="tags-toggle" class="hidden peer" />
+        <div class="flex items-center justify-between w-full px-2">
+            {
+                isAllActive ? (
+                    <a
+                        href={allHref}
+                        aria-label={allLabel + ` (${totalCount})`}
+                        class="inline-flex items-center justify-center px-4 py-1.5 text-lg leading-[22px] font-inter font-normal whitespace-nowrap no-underline rounded-3xl bg-[var(--brand-color-20)] border border-[var(--brand-color)] text-[var(--brand-color)]"
+                    >
+                        {allLabel} ({totalCount})
+                    </a>
+                ) : (
+                    tags
+                        .filter((tag) => activeTagId === tag.id)
+                        .map((tag) => {
+                            const ariaLabel = tagsSection.tagAriaLabel
+                                ? tagsSection.tagAriaLabel.replace('{name}', tag.name).replace('{count}', tag.count)
+                                : `Tag: ${tag.name} (${tag.count})`;
+                            return (
+                                <a
+                                    href={`${tagsBasePath}/${tag.id}`}
+                                    aria-label={ariaLabel}
+                                    class="inline-flex items-center justify-center px-4 py-1.5 text-lg leading-[22px] font-inter font-normal whitespace-nowrap no-underline rounded-3xl bg-[var(--brand-color-20)] border border-[var(--brand-color)] text-[var(--brand-color)]"
+                                >
+                                    {tag.name}
+                                    <span style="color: inherit; opacity: 0.6;"> ({tag.count})</span>
+                                </a>
+                            );
+                        })
+                )
+            }
+            <label for="tags-toggle" class="flex items-center gap-1 px-2 py-1 cursor-pointer" style="color: var(--text-muted); opacity: 0.6;">
+                <span>{allTagsLabel}</span>
+                <span class="arrow-wrap" style="display:inline-flex;align-items:center;">
+                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" style="color:inherit;" class="arrow-svg">
+                        <g clip-path="url(#clip0_3691_7173)">
+                            <path
+                                d="M6.68112 2.28658L11.7136 7.31908C12.0951 7.70054 12.0951 8.319 11.7136 8.70045L11.6997 8.7144C11.3182 9.09586 10.6997 9.09586 10.3183 8.7144L5.28579 3.68191C4.90434 3.30045 4.90434 2.68199 5.28579 2.30054L5.29975 2.28658C5.6812 1.90513 6.29966 1.90513 6.68112 2.28658Z"
+                                fill="currentColor"></path>
+                            <path
+                                d="M11.6997 7.28755L11.7136 7.3015C12.0951 7.68296 12.0951 8.30142 11.7136 8.68287L6.68112 13.7154C6.29966 14.0968 5.6812 14.0968 5.29975 13.7154L5.28579 13.7014C4.90434 13.32 4.90434 12.7015 5.28579 12.32L10.3183 7.28755C10.6997 6.90609 11.3182 6.90609 11.6997 7.28755Z"
+                                fill="currentColor"></path>
+                        </g>
+                        <defs>
+                            <clipPath id="clip0_3691_7173">
+                                <rect width="7" height="12" fill="white" transform="matrix(-1 0 0 1 12 2)"></rect>
+                            </clipPath>
+                        </defs>
+                    </svg>
+                </span>
+            </label>
+            <style>
+                .arrow-wrap .arrow-svg {
+                    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                }
+                #tags-toggle:checked + div label .arrow-wrap .arrow-svg {
+                    transform: rotate(90deg);
+                }
+                .tags-mobile-list {
+                    max-height: 0;
+                    opacity: 0;
+                    overflow: hidden;
+                    transition:
+                        max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
+                        opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+                }
+                #tags-toggle:checked ~ .tags-mobile-list {
+                    max-height: 500px;
+                    opacity: 1;
+                }
+            </style>
+        </div>
+        <div class="tags-mobile-list flex-wrap gap-2 py-4 mb-6" style="margin-top: 8px;">
+            <a
+                href={allHref}
+                class:list={[
+                    'inline-flex items-center justify-center px-4 py-1.5 text-lg leading-[22px] font-inter font-normal whitespace-nowrap no-underline rounded-3xl',
+                    isAllActive
+                        ? 'bg-[var(--brand-color-20)] border border-[var(--brand-color)] text-[var(--brand-color)] hover:bg-[var(--brand-color-60)]'
+                        : 'border border-[var(--border-main)] text-[var(--text-heading)] hover:bg-[var(--bg-muted)]'
+                ]}
+            >
+                {allLabel} ({totalCount})
+            </a>
+            {
+                tags.map((tag) => (
+                    <a
+                        href={`${tagsBasePath}/${tag.id}`}
+                        class:list={[
+                            'inline-flex items-center justify-center px-4 py-1.5 text-lg leading-[22px] font-inter font-normal whitespace-nowrap no-underline rounded-3xl',
+                            activeTagId === tag.id
+                                ? 'bg-[var(--brand-color-20)] border border-[var(--brand-color)] text-[var(--brand-color)] hover:bg-[var(--brand-color-60)]'
+                                : tag.isRubric
+                                  ? 'bg-[var(--bg-muted)] border border-[var(--border-main)] text-[var(--text-heading)] hover:bg-[var(--brand-color-20)]'
+                                  : 'border border-[var(--border-main)] text-[var(--text-muted)] opacity-75 hover:bg-[var(--bg-muted)]'
+                        ]}
+                    >
+                        {tag.name}
+                        <span style="color: inherit; opacity: 0.6;"> ({tag.count})</span>
+                    </a>
+                ))
+            }
+        </div>
+    </div>
+</div>

package/src/components/ThemeToggle.astro

@@ -0,0 +1,58 @@
+---
+import { LANGUAGES } from '../i18n/languages';
+import { maugliConfig } from '../config/maugli.config';
+
+// Универсальный импорт словарей по доступным языкам
+const dicts: Record<string, any> = {};
+for (const lang of LANGUAGES) {
+    try {
+        dicts[lang.code] = await import(`../i18n/${lang.code}.json`).then((m) => m.default);
+    } catch {}
+}
+const lang: string = maugliConfig.defaultLang || 'en';
+const dict = dicts[lang] || dicts['en'] || {};
+const ariaLabel = dict.themeToggle?.ariaLabel || dicts['en']?.themeToggle?.ariaLabel;
+---
+
+<button
+    id="theme-toggle"
+    class="w-8 h-8 mr-4 flex items-center justify-center cursor-pointer transition-transform duration-200 hover:scale-110"
+    aria-label={ariaLabel}
+>
+    <!-- Sun icon for dark mode (shows when dark theme is active) -->
+    <svg id="sun-icon" class="w-6 h-6 hidden dark:block" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            d="M5 12C5 11.7348 4.89464 11.4804 4.70711 11.2929C4.51957 11.1054 4.26522 11 4 11H3C2.73478 11 2.48043 11.1054 2.29289 11.2929C2.10536 11.4804 2 11.7348 2 12C2 12.2652 2.10536 12.5196 2.29289 12.7071C2.48043 12.8946 2.73478 13 3 13H4C4.26522 13 4.51957 12.8946 4.70711 12.7071C4.89464 12.5196 5 12.2652 5 12ZM5.64 17L4.93 17.71C4.74375 17.8974 4.63921 18.1508 4.63921 18.415C4.63921 18.6792 4.74375 18.9326 4.93 19.12C5.11736 19.3063 5.37081 19.4108 5.635 19.4108C5.89919 19.4108 6.15264 19.3063 6.34 19.12L7.05 18.41C7.21383 18.2187 7.29943 17.9726 7.28971 17.7209C7.27999 17.4693 7.17566 17.2305 6.99756 17.0524C6.81947 16.8743 6.58073 16.77 6.32905 16.7603C6.07738 16.7506 5.8313 16.8362 5.64 17ZM12 5C12.2652 5 12.5196 4.89464 12.7071 4.70711C12.8946 4.51957 13 4.26522 13 4V3C13 2.73478 12.8946 2.48043 12.7071 2.29289C12.5196 2.10536 12.2652 2 12 2C11.7348 2 11.4804 2.10536 11.2929 2.29289C11.1054 2.48043 11 2.73478 11 3V4C11 4.26522 11.1054 4.51957 11.2929 4.70711C11.4804 4.89464 11.7348 5 12 5ZM17.66 7.34C17.9223 7.3389 18.1737 7.23474 18.36 7.05L19.07 6.34C19.1747 6.25035 19.2597 6.14003 19.3197 6.01597C19.3797 5.89191 19.4135 5.75677 19.4188 5.61905C19.4241 5.48133 19.4009 5.344 19.3506 5.21568C19.3004 5.08735 19.2241 4.9708 19.1266 4.87335C19.0292 4.77589 18.9126 4.69964 18.7843 4.64936C18.656 4.59909 18.5187 4.57588 18.3809 4.5812C18.2432 4.58652 18.1081 4.62025 17.984 4.68027C17.86 4.7403 17.7496 4.82532 17.66 4.93L17 5.64C16.8137 5.82736 16.7092 6.08081 16.7092 6.345C16.7092 6.60919 16.8137 6.86264 17 7.05C17.1763 7.22536 17.4116 7.32875 17.66 7.34ZM5.66 7.05C5.84626 7.23474 6.09766 7.3389 6.36 7.34C6.49161 7.34076 6.62207 7.31554 6.74391 7.26577C6.86574 7.21601 6.97656 7.14268 7.07 7.05C7.25625 6.86264 7.36079 6.60919 7.36079 6.345C7.36079 6.08081 7.25625 5.82736 7.07 5.64L6.36 4.93C6.26742 4.8361 6.15725 4.76136 6.03578 4.71005C5.91432 4.65873 5.78393 4.63184 5.65207 4.63091C5.52021 4.62998 5.38946 4.65503 5.26728 4.70463C5.14511 4.75424 5.0339 4.82742 4.94 4.92C4.8461 5.01258 4.77136 5.12275 4.72005 5.24422C4.66873 5.36568 4.64184 5.49607 4.64091 5.62793C4.63903 5.89423 4.74302 6.15037 4.93 6.34L5.66 7.05ZM21 11H20C19.7348 11 19.4804 11.1054 19.2929 11.2929C19.1054 11.4804 19 11.7348 19 12C19 12.2652 19.1054 12.5196 19.2929 12.7071C19.4804 12.8946 19.7348 13 20 13H21C21.2652 13 21.5196 12.8946 21.7071 12.7071C21.8946 12.5196 22 12.2652 22 12C22 11.7348 21.8946 11.4804 21.7071 11.2929C21.5196 11.1054 21.2652 11 21 11ZM18.36 17C18.17 16.8943 17.9508 16.8534 17.7355 16.8835C17.5202 16.9136 17.3205 17.0131 17.1668 17.1668C17.0131 17.3205 16.9136 17.5202 16.8835 17.7355C16.8534 17.9508 16.8943 18.17 17 18.36L17.71 19.07C17.8974 19.2563 18.1508 19.3608 18.415 19.3608C18.6792 19.3608 18.9326 19.2563 19.12 19.07C19.3063 18.8826 19.4108 18.6292 19.4108 18.365C19.4108 18.1008 19.3063 17.8474 19.12 17.66L18.36 17ZM12 6.5C10.9122 6.5 9.84883 6.82257 8.94436 7.42692C8.03989 8.03126 7.33494 8.89025 6.91866 9.89524C6.50238 10.9002 6.39346 12.0061 6.60568 13.073C6.8179 14.1399 7.34172 15.1199 8.11091 15.8891C8.8801 16.6583 9.86011 17.1821 10.927 17.3943C11.9939 17.6065 13.0998 17.4976 14.1048 17.0813C15.1098 16.6651 15.9687 15.9601 16.5731 15.0556C17.1774 14.1512 17.5 13.0878 17.5 12C17.4974 10.5421 16.917 9.14471 15.8862 8.11383C14.8553 7.08295 13.4579 6.50264 12 6.5ZM12 15.5C11.3078 15.5 10.6311 15.2947 10.0555 14.9101C9.47993 14.5256 9.03133 13.9789 8.76642 13.3394C8.50151 12.6999 8.4322 11.9961 8.56725 11.3172C8.7023 10.6382 9.03564 10.0146 9.52513 9.52513C10.0146 9.03564 10.6382 8.7023 11.3172 8.56725C11.9961 8.4322 12.6999 8.50151 13.3394 8.76642C13.9789 9.03133 14.5256 9.47993 14.9101 10.0555C15.2947 10.6311 15.5 11.3078 15.5 12C15.5 12.9283 15.1313 13.8185 14.4749 14.4749C13.8185 15.1313 12.9283 15.5 12 15.5ZM12 19C11.7348 19 11.4804 19.1054 11.2929 19.2929C11.1054 19.4804 11 19.7348 11 20V21C11 21.2652 11.1054 21.5196 11.2929 21.7071C11.4804 21.8946 11.7348 22 12 22C12.2652 22 12.5196 21.8946 12.7071 21.7071C12.8946 21.5196 13 21.2652 13 21V20C13 19.7348 12.8946 19.4804 12.7071 19.2929C12.5196 19.1054 12.2652 19 12 19Z"
+            fill="var(--text-heading)"></path>
+    </svg>
+
+    <!-- Moon icon for light mode (shows when light theme is active) -->
+    <svg id="moon-icon" class="w-6 h-6 block dark:hidden" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M12.1981 18.3607C13.3886 18.3595 14.5563 18.0344 15.5762 17.4204C16.5961 16.8064 17.4298 15.9266 17.988 14.8751C12.9147 15.3054 8.69375 11.0983 9.12403 6.01188C8.07276 6.57027 7.19313 7.40404 6.5793 8.42393C5.96547 9.44382 5.64054 10.6114 5.6393 11.8018C5.6393 15.4183 8.58168 18.3607 12.1981 18.3607ZM9.54096 4.05236C10.3584 3.77139 10.9876 4.67308 10.8223 5.52148C9.96102 9.94161 14.0407 14.0553 18.4792 13.1802C19.3272 13.013 20.2286 13.6415 19.9476 14.4589C18.8495 17.6543 15.8222 20 12.1981 20C7.67042 20 4 16.3295 4 11.8018C4 8.176 6.34692 5.15023 9.54096 4.05236Z"
+            fill="var(--text-main)"></path>
+    </svg>
+</button>
+
+<script>
+    document.addEventListener('astro:page-load', () => {
+        const themeToggle = document.getElementById('theme-toggle');
+
+        function toggleTheme() {
+            const html = document.documentElement;
+            const currentTheme = localStorage.getItem('theme');
+
+            if (currentTheme === 'dark') {
+                html.classList.remove('dark');
+                localStorage.setItem('theme', 'light');
+            } else {
+                html.classList.add('dark');
+                localStorage.setItem('theme', 'dark');
+            }
+        }
+
+        themeToggle?.addEventListener('click', toggleTheme);
+    });
+</script>