Veyra

Современная стартовая страница браузера с модульной архитектурой и кастомизируемыми виджетами.

Описание проекта

Veyra - это расширение для браузера, которое заменяет стандартную новую вкладку на персонализированную страницу с набором полезных виджетов. Проект создан с использованием современных веб-технологий и следует принципам модульной архитектуры, позволяя пользователям настраивать интерфейс под свои потребности.

Основные особенности

• Модульная архитектура - система виджетов с возможностью включения/отключения
• Кастомизируемые фоны - градиенты, сплошные цвета с анимацией
• Мультиязычность - поддержка интернационализации через Vue I18n
• Адаптивный дизайн - корректное отображение на разных разрешениях
• Локальное хранение - настройки сохраняются в localStorage браузера

Технологии

• Vue.js 3 - современный фреймворк с Composition API
• WXT - инструмент для разработки расширений браузера
• Pinia - управление состоянием приложения
• Vue I18n - интернационализация и локализация
• CSS Custom Properties - динамические стили и анимации
• Vue Draggable - drag & drop функциональность

Архитектура

Проект построен по принципу компонентной архитектуры:

• Entrypoints - точки входа для разных частей расширения
• Components - переиспользуемые Vue компоненты
• Store - централизованное управление состоянием через Pinia
• Locales - файлы локализации для разных языков

Структура виджетов:

• TimeDisplay - отображение времени и даты
• WeatherWidget - прогноз погоды через OpenWeather API
• LinksDisplay - быстрые ссылки и закладки
• NotesWidget - заметки и заметки
• Background - кастомизируемый фон с анимацией

Функциональность

Настройки интерфейса:

• Выбор типа фона (сплошный/градиент)
• Настройка цветов и углов градиентов
• Анимация фонов с настраиваемой скоростью
• Управление активными виджетами

Виджеты:

• Время и дата - текущее время с обновлением в реальном времени
• Погода - прогноз погоды для выбранного города
• Быстрые ссылки - персонализированные закладки
• Заметки - простой блокнот для заметок

Персонализация:

• Сохранение настроек в localStorage
• Миграция настроек между версиями
• Валидация данных конфигурации
• Поддержка русского и английского языков

Результаты

• Производительность - быстрая загрузка и отклик интерфейса
• Гибкость - легко добавлять новые виджеты и функции
• Пользовательский опыт - интуитивно понятные настройки
• Кроссплатформенность - поддержка Chrome, Firefox и других браузеров
• Расширяемость - модульная архитектура для будущих улучшений

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

Система настроек:

• Реактивное состояние через Vue 3 Composition API
• Автоматическое сохранение изменений
• Валидация и миграция данных
• Поддержка сложных объектов конфигурации

Анимации:

• CSS Custom Properties для динамических значений
• Keyframe анимации для градиентов
• Плавные переходы между состояниями
• Настраиваемая скорость и тип анимации

Интернационализация:

• Поддержка множественных языков
• Динамическое переключение локалей
• Автоматическое извлечение строк для перевода
• Локализованные настройки и интерфейс

Заключение

Veyra представляет собой современный подход к созданию стартовых страниц браузера, сочетающий в себе элегантность дизайна, функциональность и гибкость настройки. Проект демонстрирует возможности Vue.js 3 в контексте расширений браузера и показывает, как можно создать удобный и персонализируемый интерфейс для повседневного использования.

Архитектура проекта позволяет легко расширять функциональность, добавлять новые виджеты и адаптировать интерфейс под потребности пользователей, что делает его отличной основой для дальнейшего развития.