Enhanced customization features with full layout support
✨ New Features: - Add group overlay to ALL layouts (Grid, Cards, Timeline, Magazine) - Expand font selection with beautiful Cyrillic fonts - Dynamic font loading optimization with FontLoader component - Group title visibility control across all layouts - Group description color theming throughout 🎨 Font improvements: - Added premium Cyrillic fonts: PT Sans, PT Serif, Fira Sans, Ubuntu, Yandex Sans Text - Added decorative fonts: Russo One, Comfortaa, Philosopher, Marck Script - Only load fonts that are actually used on the page via Google Fonts API 🔧 Technical enhancements: - FontLoader component with smart Google Fonts integration - Consistent overlay implementation across all layout modes - Better color theming for group descriptions - Improved font fallbacks and loading performance
This commit is contained in:
@@ -673,15 +673,20 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
|
||||
value={settings.font_family}
|
||||
onChange={(e) => handleChange('font_family', e.target.value)}
|
||||
>
|
||||
<option value="sans-serif">Sans Serif</option>
|
||||
<option value="serif">Serif</option>
|
||||
<option value="sans-serif">Системный Sans Serif</option>
|
||||
<option value="serif">Системный Serif</option>
|
||||
<option value="monospace">Monospace</option>
|
||||
<option value="Inter, sans-serif">Inter</option>
|
||||
<option value="Roboto, sans-serif">Roboto</option>
|
||||
<option value="Open Sans, sans-serif">Open Sans</option>
|
||||
<option value="Source Sans Pro, sans-serif">Source Sans Pro</option>
|
||||
<option value="Lato, sans-serif">Lato</option>
|
||||
<option value="Nunito, sans-serif">Nunito</option>
|
||||
<option value="'PT Sans', sans-serif">PT Sans</option>
|
||||
<option value="'PT Serif', serif">PT Serif</option>
|
||||
<option value="'Roboto', sans-serif">Roboto</option>
|
||||
<option value="'Open Sans', sans-serif">Open Sans</option>
|
||||
<option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
|
||||
<option value="'Fira Sans', sans-serif">Fira Sans</option>
|
||||
<option value="'Ubuntu', sans-serif">Ubuntu</option>
|
||||
<option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
|
||||
<option value="'Inter', sans-serif">Inter</option>
|
||||
<option value="'Manrope', sans-serif">Manrope</option>
|
||||
<option value="'Nunito Sans', sans-serif">Nunito Sans</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
@@ -692,19 +697,25 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
|
||||
onChange={(e) => handleChange('heading_font_family', e.target.value)}
|
||||
>
|
||||
<option value="">Как основной</option>
|
||||
<option value="sans-serif">Sans Serif</option>
|
||||
<option value="serif">Serif</option>
|
||||
<option value="monospace">Monospace</option>
|
||||
<option value="Inter, sans-serif">Inter</option>
|
||||
<option value="Roboto, sans-serif">Roboto</option>
|
||||
<option value="Open Sans, sans-serif">Open Sans</option>
|
||||
<option value="Source Sans Pro, sans-serif">Source Sans Pro</option>
|
||||
<option value="Lato, sans-serif">Lato</option>
|
||||
<option value="Nunito, sans-serif">Nunito</option>
|
||||
<option value="Playfair Display, serif">Playfair Display</option>
|
||||
<option value="Merriweather, serif">Merriweather</option>
|
||||
<option value="Oswald, sans-serif">Oswald</option>
|
||||
<option value="Montserrat, sans-serif">Montserrat</option>
|
||||
<option value="'PT Sans', sans-serif">PT Sans</option>
|
||||
<option value="'PT Serif', serif">PT Serif</option>
|
||||
<option value="'Roboto', sans-serif">Roboto</option>
|
||||
<option value="'Open Sans', sans-serif">Open Sans</option>
|
||||
<option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
|
||||
<option value="'Fira Sans', sans-serif">Fira Sans</option>
|
||||
<option value="'Ubuntu', sans-serif">Ubuntu</option>
|
||||
<option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
|
||||
<option value="'Inter', sans-serif">Inter</option>
|
||||
<option value="'Manrope', sans-serif">Manrope</option>
|
||||
<option value="'Montserrat', sans-serif">Montserrat</option>
|
||||
<option value="'Playfair Display', serif">Playfair Display</option>
|
||||
<option value="'Merriweather', serif">Merriweather</option>
|
||||
<option value="'Oswald', sans-serif">Oswald</option>
|
||||
<option value="'Russo One', sans-serif">Russo One</option>
|
||||
<option value="'Comfortaa', cursive">Comfortaa</option>
|
||||
<option value="'Philosopher', sans-serif">Philosopher</option>
|
||||
<option value="'Cormorant Garamond', serif">Cormorant Garamond</option>
|
||||
<option value="'Marck Script', cursive">Marck Script</option>
|
||||
</select>
|
||||
</div>
|
||||
<div className="col-md-6 mb-3">
|
||||
@@ -715,9 +726,20 @@ export function CustomizationPanel({ isOpen, onClose, onSettingsUpdate }: Custom
|
||||
onChange={(e) => handleChange('body_font_family', e.target.value)}
|
||||
>
|
||||
<option value="">Как основной</option>
|
||||
<option value="sans-serif">Sans Serif</option>
|
||||
<option value="serif">Serif</option>
|
||||
<option value="monospace">Monospace</option>
|
||||
<option value="'PT Sans', sans-serif">PT Sans</option>
|
||||
<option value="'PT Serif', serif">PT Serif</option>
|
||||
<option value="'Roboto', sans-serif">Roboto</option>
|
||||
<option value="'Open Sans', sans-serif">Open Sans</option>
|
||||
<option value="'Source Sans Pro', sans-serif">Source Sans Pro</option>
|
||||
<option value="'Fira Sans', sans-serif">Fira Sans</option>
|
||||
<option value="'Ubuntu', sans-serif">Ubuntu</option>
|
||||
<option value="'Yandex Sans Text', sans-serif">Yandex Sans Text</option>
|
||||
<option value="'Inter', sans-serif">Inter</option>
|
||||
<option value="'Manrope', sans-serif">Manrope</option>
|
||||
<option value="'Nunito Sans', sans-serif">Nunito Sans</option>
|
||||
<option value="'Lato', sans-serif">Lato</option>
|
||||
<option value="'Source Serif Pro', serif">Source Serif Pro</option>
|
||||
<option value="'Crimson Text', serif">Crimson Text</option>
|
||||
<option value="Inter, sans-serif">Inter</option>
|
||||
<option value="Roboto, sans-serif">Roboto</option>
|
||||
<option value="Open Sans, sans-serif">Open Sans</option>
|
||||
|
||||
78
frontend/linktree-frontend/src/app/components/FontLoader.tsx
Normal file
78
frontend/linktree-frontend/src/app/components/FontLoader.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect } from 'react'
|
||||
|
||||
interface FontLoaderProps {
|
||||
fontFamily?: string
|
||||
headingFontFamily?: string
|
||||
bodyFontFamily?: string
|
||||
}
|
||||
|
||||
const FontLoader = ({ fontFamily, headingFontFamily, bodyFontFamily }: FontLoaderProps) => {
|
||||
useEffect(() => {
|
||||
// Собираем уникальные шрифты для загрузки
|
||||
const fontsToLoad = new Set<string>()
|
||||
|
||||
// Функция для извлечения названия шрифта из CSS font-family
|
||||
const extractFontName = (fontFamilyString: string) => {
|
||||
if (!fontFamilyString || fontFamilyString === 'sans-serif' || fontFamilyString === 'serif' || fontFamilyString === 'monospace') {
|
||||
return null
|
||||
}
|
||||
|
||||
// Извлекаем первый шрифт из строки, убираем кавычки
|
||||
const firstFont = fontFamilyString.split(',')[0].trim().replace(/['"]/g, '')
|
||||
|
||||
// Проверяем, что это не системный шрифт
|
||||
if (firstFont === 'sans-serif' || firstFont === 'serif' || firstFont === 'monospace') {
|
||||
return null
|
||||
}
|
||||
|
||||
return firstFont
|
||||
}
|
||||
|
||||
// Добавляем шрифты в список загрузки
|
||||
if (fontFamily) {
|
||||
const font = extractFontName(fontFamily)
|
||||
if (font) fontsToLoad.add(font)
|
||||
}
|
||||
|
||||
if (headingFontFamily) {
|
||||
const font = extractFontName(headingFontFamily)
|
||||
if (font) fontsToLoad.add(font)
|
||||
}
|
||||
|
||||
if (bodyFontFamily) {
|
||||
const font = extractFontName(bodyFontFamily)
|
||||
if (font) fontsToLoad.add(font)
|
||||
}
|
||||
|
||||
// Загружаем шрифты через Google Fonts
|
||||
if (fontsToLoad.size > 0) {
|
||||
const fontNames = Array.from(fontsToLoad)
|
||||
|
||||
// Проверяем, не загружен ли уже этот набор шрифтов
|
||||
const fontId = `font-loader-${fontNames.join('-').toLowerCase().replace(/\s+/g, '-')}`
|
||||
|
||||
if (!document.getElementById(fontId)) {
|
||||
const fontUrl = `https://fonts.googleapis.com/css2?${fontNames.map(font =>
|
||||
`family=${encodeURIComponent(font)}:wght@300;400;500;600;700`
|
||||
).join('&')}&display=swap&subset=latin,cyrillic`
|
||||
|
||||
const link = document.createElement('link')
|
||||
link.id = fontId
|
||||
link.rel = 'stylesheet'
|
||||
link.href = fontUrl
|
||||
document.head.appendChild(link)
|
||||
}
|
||||
}
|
||||
|
||||
// Cleanup function - удаляем неиспользуемые шрифты
|
||||
return () => {
|
||||
// В продакшене можно добавить логику очистки неиспользуемых шрифтов
|
||||
}
|
||||
}, [fontFamily, headingFontFamily, bodyFontFamily])
|
||||
|
||||
return null // Этот компонент не рендерит ничего видимого
|
||||
}
|
||||
|
||||
export default FontLoader
|
||||
Reference in New Issue
Block a user