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

88
frontend/linktree-frontend/src/app/[username]/page.tsx
View File

@@ -5,6 +5,7 @@ import { notFound } from 'next/navigation'
import Image from 'next/image'
import Link from 'next/link'
import { useEffect, useState, Fragment } from 'react'
import FontLoader from '../components/FontLoader'
interface LinkItem {
id: number
@@ -337,11 +338,12 @@ export default function UserPage({
</div>
)
// Карточки (большие карточки с описанием)
const renderCardsLayout = () => (
<div>
<div className="d-flex justify-content-between align-items-center mb-4">
<h5 className="mb-0">Группы ссылок</h5>
{(designSettings.show_groups_title !== false) && (
<h5 className="mb-0">Группы ссылок</h5>
)}
</div>
<div className="row g-4">
{data!.groups.map((group) => (
@@ -375,15 +377,32 @@ export default function UserPage({
</div>
</div>
</div>
<div className="card-body"
<div
className="card-body position-relative"
style={{
backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
backgroundSize: 'cover',
backgroundPosition: 'center'
}}
>
{designSettings.group_overlay_enabled && (
<div
className="position-absolute top-0 start-0 w-100 h-100"
style={{
backgroundColor: designSettings.group_overlay_color || '#000000',
opacity: designSettings.group_overlay_opacity || 0.3,
zIndex: 1
}}
></div>
)}
<div className="position-relative" style={{ zIndex: 2 }}>
{group.description && (
<p className="text-muted mb-3">{group.description}</p>
<p
className="mb-3"
style={{ color: designSettings.group_description_text_color || '#666666' }}
>
{group.description}
</p>
)}
<div className="row g-3">
{group.links.map((link) => (
@@ -422,6 +441,7 @@ export default function UserPage({
</div>
))}
</div>
</div>
</div>
</div>
</div>
@@ -677,7 +697,9 @@ export default function UserPage({
const renderTimelineLayout = () => (
<div>
<div className="d-flex justify-content-between align-items-center mb-4">
<h5 className="mb-0">Группы ссылок</h5>
{(designSettings.show_groups_title !== false) && (
<h5 className="mb-0">Группы ссылок</h5>
)}
</div>
<div className="timeline">
{data!.groups.map((group, index) => (
@@ -706,15 +728,32 @@ export default function UserPage({
</div>
</div>
</div>
<div className="card-body"
<div
className="card-body position-relative"
style={{
backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
backgroundSize: 'cover',
backgroundPosition: 'center'
}}
>
{designSettings.group_overlay_enabled && (
<div
className="position-absolute top-0 start-0 w-100 h-100"
style={{
backgroundColor: designSettings.group_overlay_color || '#000000',
opacity: designSettings.group_overlay_opacity || 0.3,
zIndex: 1
}}
></div>
)}
<div className="position-relative" style={{ zIndex: 2 }}>
{group.description && (
<p className="text-muted mb-3">{group.description}</p>
<p
className="mb-3"
style={{ color: designSettings.group_description_text_color || '#666666' }}
>
{group.description}
</p>
)}
{group.links.slice(0, 5).map(link => (
<Link
@@ -743,6 +782,7 @@ export default function UserPage({
{group.links.length > 5 && (
<small className="text-muted">+{group.links.length - 5} еще...</small>
)}
</div>
</div>
<div className="card-footer">
{/* footer intentionally left empty for public page, mirrors dashboard structure */}
@@ -759,7 +799,9 @@ export default function UserPage({
const renderMagazineLayout = () => (
<div>
<div className="d-flex justify-content-between align-items-center mb-4">
<h5 className="mb-0">Группы ссылок</h5>
{(designSettings.show_groups_title !== false) && (
<h5 className="mb-0">Группы ссылок</h5>
)}
</div>
<div className="magazine-layout">
{data!.groups.map((group, index) => (
@@ -767,7 +809,8 @@ export default function UserPage({
<div className="card">
<div className="row g-0">
<div className={`${index === 0 ? 'col-md-6' : 'col-md-4'}`}>
<div className="magazine-image d-flex align-items-center justify-content-center bg-light position-relative"
<div
className="magazine-image d-flex align-items-center justify-content-center bg-light position-relative"
style={{
minHeight: index === 0 ? '300px' : '200px',
backgroundImage: group.background_image ? `url(${group.background_image})` : 'none',
@@ -775,6 +818,17 @@ export default function UserPage({
backgroundPosition: 'center'
}}
>
{designSettings.group_overlay_enabled && group.background_image && (
<div
className="position-absolute top-0 start-0 w-100 h-100"
style={{
backgroundColor: designSettings.group_overlay_color || '#000000',
opacity: designSettings.group_overlay_opacity || 0.3,
zIndex: 1
}}
></div>
)}
<div className="position-relative" style={{ zIndex: 2 }}>
{!group.background_image && (
group.icon_url && designSettings.show_group_icons ? (
<img
@@ -792,6 +846,7 @@ export default function UserPage({
<i className="bi bi-star-fill text-warning"></i>
</div>
)}
</div>
</div>
</div>
<div className={`${index === 0 ? 'col-md-6' : 'col-md-8'}`}>
@@ -799,7 +854,10 @@ export default function UserPage({
<h5 className="card-title" style={{ color: designSettings.group_text_color || designSettings.theme_color }}>
{group.name}
</h5>
<p className="card-text text-muted">
<p
className="card-text"
style={{ color: designSettings.group_description_text_color || '#666666' }}
>
{group.description || `${group.links.length} ссылок в этой группе`}
</p>
<div className="links-preview">
@@ -902,7 +960,14 @@ export default function UserPage({
}
return (
<main style={containerStyle}>
<>
{/* Динамическая загрузка шрифтов */}
<FontLoader
fontFamily={designSettings.font_family}
headingFontFamily={designSettings.heading_font_family}
bodyFontFamily={designSettings.body_font_family}
/>
<main style={containerStyle}>
<div className="container-fluid px-0">
{/* Обложка пользователя - растягиваем на всю ширину экрана */}
{data.cover && (
@@ -1053,5 +1118,6 @@ export default function UserPage({
</div>
</div>
</main>
</>
)
}

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>

78
frontend/linktree-frontend/src/app/components/FontLoader.tsx Normal file
View 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