trevor/links
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhanced customization features with full layout support

Browse Source 
✨ 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:
Andrey K. Choi
2025-11-09 10:36:56 +09:00
parent 5ea8b79e48
commit 5ddc30fe0e
3 changed files with 201 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/linktree-frontend/src/app/components/CustomizationPanel.tsx
View File

@@ -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>