Skip to content

USER_PROFILE.md

Latest commit

 

History

History
127 lines (94 loc) · 4.59 KB

USER_PROFILE.md

File metadata and controls

127 lines (94 loc) · 4.59 KB

Страница профиля пользователя

Приложение теперь включает полнофункциональную страницу профиля с возможностью загрузки аватарки.

Новые возможности

1. Страница профиля (/profile)

  • ✅ Просмотр информации о профиле
  • ✅ Редактирование отображаемого имени
  • ✅ Загрузка аватарки
  • ✅ Просмотр даты регистрации
  • ✅ Отображение настроек языка и темы
  • ✅ Выход из аккаунта

2. Загрузка аватарки

Технические детали:

  • Поддерживаемые форматы: JPG, PNG, GIF, WebP
  • Максимальный размер: 2MB
  • Рекомендуемый размер: 200x200px или больше (квадратные)
  • Хранение: в папке avatars/ репозитория
  • Доступ: через GitHub raw content URLs

Процесс загрузки:

  1. Пользователь выбирает изображение
  2. Валидация типа файла и размера
  3. Конвертация в base64
  4. Загрузка в GitHub с уникальным именем файла
  5. Обновление профиля пользователя
  6. Перезагрузка страницы для отображения аватарки

3. Обновленный интерфейс пользователя

Интерфейс User:

interface User {
  username: string;
  displayName: string;
  avatar?: string; // Новое поле
  joinedAt: string;
  lang: string;
  theme: string;
}

Отображение в шапке:

  • Аватарка вместо стандартной иконки
  • Ссылка на профиль при клике на имя пользователя
  • Сохранение существующего функционала выхода

4. Навигация

  • Добавлен маршрут /profile
  • Защищенная страница (требует авторизации)
  • Кнопка "Назад" для возврата на главную

Техническая реализация

GitHub API интеграция

Обновлена функция putFile() для поддержки бинарных файлов:

export async function putFile(
  path: string,
  content: string,
  message: string,
  isBase64: boolean = false, // Новый параметр
  sha?: string
)

Хранение аватарок

  • Папка: avatars/
  • Именование: avatar-{username}-{timestamp}.{extension}
  • URL: https://raw.githubusercontent.com/feekool/feekool.github.io/master/avatars/{filename}

Валидация

  • Тип файла: только изображения (image/*)
  • Размер файла: максимум 2MB
  • Обработка ошибок: пользовательские сообщения

Пользовательский опыт

Доступ к профилю

  1. Клик на имя пользователя в шапке
  2. Переход на страницу /profile
  3. Просмотр и редактирование профиля

Загрузка аватарки

  1. Клик на иконку камеры на аватарке
  2. Выбор файла изображения
  3. Автоматическая загрузка и обновление

Редактирование профиля

  1. Клик "Edit" рядом с именем
  2. Ввод нового отображаемого имени
  3. Сохранение изменений

Совместимость

  • ✅ Поддержка всех браузеров с File API
  • ✅ Мобильные устройства (iOS Safari, Android Chrome)
  • ✅ Темная и светлая темы
  • ✅ Многоязычность (EN/RU)

Безопасность

  • Валидация файлов на клиенте
  • Ограничение размера файлов
  • Безопасные имена файлов
  • Публичный доступ к аватаркам через GitHub

Будущие улучшения

Возможно добавить:

  • Обрезка изображений перед загрузкой
  • Несколько аватарок для выбора
  • Анимации загрузки
  • Предпросмотр перед сохранением
  • Удаление аватарки