core-maugli 1.0.2

package/src/components/InfoCard.astro

@@ -0,0 +1,123 @@
+---
+
+/**
+ * @typedef InfoCardProps
+ * @property {string} [title]
+ * @property {string} [description]
+ * @property {{ src: string, alt?: string }} [image]
+ * @property {string} [class]
+ * @property {any} [jsonld]
+ */
+
+
+import { marked } from 'marked';
+/** @type {InfoCardProps} */
+const { title, description = '', class: className = '', jsonld } = Astro.props;
+let html = description ? marked.parse(description) : '';
+---
+
+{
+    description && (
+        <>
+        <div class={`w-full max-w-full rounded-custom px-8 py-8 mb-8 card-bg grid grid-cols-1 sm:grid-cols-16 items-start ${className}`}>
+            <div class="sm:col-span-5 flex items-start justify-start mb-4 sm:mb-0">
+                {title && (
+                    <h2 class="text-3xl sm:text-4xl sm:mt-3 ld:mt-8 font-serif font-extrabold leading-tight line-clamp-3" style="color: var(--text-heading);">
+                        {title}
+                    </h2>
+                )}
+            </div>
+            <div class="sm:col-span-11 mt-0 text-m sm:text-m info-card-content prose" style="color: var(--text-main); opacity: 0.8;">
+                <div set:html={html} />
+            </div>
+        </div>
+        {jsonld && (
+            <script type="application/ld+json">
+                {JSON.stringify(jsonld)}
+            </script>
+        )}
+        </>
+    )
+}
+
+<style>
+    .info-card-content :global(h3) {
+        font-family: var(--font-serif);
+        font-weight: var(--font-weight-extra-bold, 800);
+        font-size: 1.5rem;
+        margin-top: 1.5rem;
+        margin-bottom: 0.75rem;
+        color: var(--text-heading);
+        line-height: 1.05;
+    }
+    .info-card-content :global(p) {
+        font-family: var(--font-sans);
+        margin-bottom: 1rem;
+        font-size: 1rem;
+        line-height: 1.4;
+        color: var(--text-main);
+    }
+    .info-card-content :global(ul),
+    .info-card-content :global(ol) {
+        margin-left: 1.5rem;
+        margin-bottom: 1rem;
+        padding-left: 1.2rem;
+        line-height: 1.4;
+        color: var(--text-main);
+        list-style-position: inside;
+    }
+    .info-card-content :global(ul) {
+        list-style-type: disc;
+    }
+    .info-card-content :global(ol) {
+        list-style-type: decimal;
+    }
+    .info-card-content :global(ul ul),
+    .info-card-content :global(ol ul),
+    .info-card-content :global(ul ol),
+    .info-card-content :global(ol ol) {
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        margin-left: 1.2rem;
+        font-size: 0.95em;
+        opacity: 0.85;
+    }
+    .info-card-content :global(li) {
+        font-family: var(--font-sans);
+        margin-bottom: 0.5rem;
+        font-size: 1rem;
+        line-height: 1.4;
+        color: var(--text-main);
+        padding-left: 0.2em;
+    }
+    .info-card-content :global(blockquote) {
+        font-family: var(--font-serif);
+        background: var(--bg-muted);
+        border-radius: var(--card-radius);
+        border-left: 1px solid var(--text-heading);
+        font-size: 1.3em;
+        padding: 1.2em 1em 1.2em 2.5em;
+        margin: 1.2rem 0;
+        color: rgba(var(--text-main));
+        box-shadow: none;
+        font-style: normal;
+        line-height: 1.2;
+    }
+    .info-card-content :global(a) {
+        color: var(--color-brand);
+        text-decoration: none;
+        transition: color 0.2s;
+    }
+    .info-card-content :global(a):hover {
+        color: var(--color-brand-60);
+        text-decoration: underline;
+    }
+    .info-card-content :global(code) {
+        background: var(--bg-muted);
+        padding: 0.2em 0.4em;
+        border-radius: var(--code-radius, 4px);
+        font-size: 0.95em;
+        font-family: var(--font-mono, 'Fira Mono', 'Consolas', monospace);
+        color: var(--text-main);
+    }
+</style>

package/src/components/LanguageSwitcher.astro

@@ -0,0 +1,122 @@
+---
+import { LANGUAGES } from '../i18n/languages';
+import { maugliConfig } from '../config/maugli.config';
+
+const langLinks = maugliConfig.langLinks || {};
+// Универсальный список языков: только те, что есть в langLinks и в LANGUAGES
+const availableLanguages = LANGUAGES.filter((l) => langLinks[l.code]);
+const currentLang = maugliConfig.defaultLang;
+const showLangSwitcher = maugliConfig.showLangSwitcher !== false && availableLanguages.length > 1;
+const current = availableLanguages.find((l) => l.code === currentLang) || availableLanguages[0];
+---
+
+{
+    showLangSwitcher && (
+        <div class="relative inline-block text-left">
+            <button
+                id="lang-switcher"
+                class="flex items-center gap-2 px-4 py-2 rounded-[var(--radius-main)] bg-[var(--bg-main)] text-[var(--text-heading)] border-none cursor-pointer"
+                aria-haspopup="listbox"
+                aria-expanded="false"
+                style="width: auto; white-space: nowrap; height:48px; min-height:48px;"
+            >
+                <span
+                    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;"
+                        />
+                    )}
+                </span>
+                <svg class="w-4 h-4" viewBox="0 0 20 20" fill="currentColor">
+                    <path
+                        fill-rule="evenodd"
+                        d="M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.71a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z"
+                        clip-rule="evenodd"
+                    />
+                </svg>
+            </button>
+            <ul
+                id="lang-list"
+                class="absolute right-0 mt-2 px-3 py-4 rounded-[var(--rounded-custom)] bg-[var(--bg-muted)] shadow-[var(--shadow-main)] z-50 hidden"
+                role="listbox"
+                style="width: auto; min-width: max-content; white-space: nowrap;"
+            >
+                {availableLanguages.map((lang) => (
+                    <li
+                        class={`flex items-center rounded-[var(--radius-main)] gap-3 px-2 py-1 cursor-pointer hover:bg-[var(--bg-accent)] h-12 min-h-[48px] max-h-[48px] ${lang.code === currentLang ? 'font-bold text-[var(--brand-color)]' : ''}`}
+                        data-lang={lang.code}
+                        role="option"
+                        aria-selected={lang.code === currentLang}
+                    >
+                        <a
+                            href={langLinks[lang.code]}
+                            target="_self"
+                            class="flex items-center gap-2 w-full h-full"
+                            style="text-decoration:none; color:inherit;"
+                        >
+                            <span
+                                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;"
+                                />
+                            </span>
+                            <span class="text-heading">{lang.label}</span>
+                        </a>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    )
+}
+
+<script>
+    document.addEventListener('astro:page-load', () => {
+        const btn = document.getElementById('lang-switcher');
+        const list = document.getElementById('lang-list');
+        if (!btn || !list) return;
+        btn.addEventListener('click', () => {
+            const expanded = btn.getAttribute('aria-expanded') === 'true';
+            btn.setAttribute('aria-expanded', !expanded);
+            list.classList.toggle('hidden');
+        });
+        // Удаляем обработчики смены языка, теперь переход по ссылке
+        document.addEventListener('click', (e) => {
+            if (!btn.contains(e.target) && !list.contains(e.target)) {
+                btn.setAttribute('aria-expanded', false);
+                list.classList.add('hidden');
+            }
+        });
+        window.addEventListener('scroll', () => {
+            btn.setAttribute('aria-expanded', false);
+            list.classList.add('hidden');
+        });
+    });
+</script>
+
+<style>
+    #lang-list li[aria-selected='true'] {
+        background: transparent;
+        color: var(--brand-color);
+        border-radius: var(--rounded-custom);
+        font-weight: bold;
+    }
+    #lang-list li:hover {
+        background: var(--background-color-main);
+        border-radius: var(--rounded-custom);
+        color: var(--text-main);
+        font-weight: normal;
+    }
+</style>