# Frontend задачи: Функционал "Поделиться ссылкой"

## 📋 Обзор
Реализация системы публичного доступа к ссылкам через короткие ссылки Bitly с отслеживанием статистики и призывом к регистрации.

## 🎯 Основные требования
- Показ только ссылок, отмеченных как публичные
- Отображение: title, summary, теги, ссылка
- Статистика просмотров с идентификацией пользователя
- Блок авторизации с преимуществами сервиса

---

## 🚨 Критически важная информация: SEO для Vue SPA

### Проблема SPA для SEO
Vue SPA рендерит контент на клиенте, что означает:
- **Поисковые боты не видят динамический контент**
- **Meta теги отсутствуют в начальном HTML**
- **Плохая индексация публичных страниц**
- **Некорректные превью в социальных сетях**

### Решения для публичного шаринга (2025)

#### **Вариант 1: Hybridly (РЕКОМЕНДУЕТСЯ)**
**Новый Laravel пакет для гибридного рендеринга**
- **Комбинирует Blade (server-rendered) и Vue SFCs (client-rendered)**
- **Набирает популярность в 2025 году**
- **Идеально подходит для Laravel + Vue проектов**

**Реализация:**
```php
// routes/web.php
Route::get('/share/{short_id}', [ShareController::class, 'show']);

// ShareController.php
public function show($shortId)
{
    $link = Link::where('short_id', $shortId)
        ->where('is_public', true)
        ->firstOrFail();
    
    return view('share.show', compact('link'));
}
```

```blade
{{-- resources/views/share/show.blade.php --}}
<!DOCTYPE html>
<html>
<head>
    <title>{{ $link->title }}</title>
    <meta name="description" content="{{ $link->summary }}">
    
    {{-- Open Graph --}}
    <meta property="og:title" content="{{ $link->title }}">
    <meta property="og:description" content="{{ $link->summary }}">
    <meta property="og:url" content="{{ url("/share/{$link->short_id}") }}">
    
    {{-- Twitter Card --}}
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="{{ $link->title }}">
    <meta name="twitter:description" content="{{ $link->summary }}">
</head>
<body>
    <div id="app">
        <public-link-page 
            :link="{{ json_encode($link) }}"
            :analytics="{{ json_encode($analytics) }}"
        />
    </div>
</body>
</html>
```

#### **Вариант 2: Nuxt 3 SSR**
**Стабильное решение для Vue приложений**
- **Создать отдельное Nuxt 3 SSR приложение для публичных страниц**
- **Маршрут `/share/{short_id}` в Nuxt с server-side рендерингом**
- **Fetch данных из Laravel API в `asyncData`**

**Реализация:**
```javascript
// pages/share/[shortId].vue
export default {
  async asyncData({ $axios, params }) {
    const { data: link } = await $axios.get(`/api/share/${params.shortId}`);
    return { link };
  },
  
  head() {
    return {
      title: this.link.title,
      meta: [
        { hid: 'description', name: 'description', content: this.link.summary },
        { hid: 'og:title', property: 'og:title', content: this.link.title },
        { hid: 'og:description', property: 'og:description', content: this.link.summary },
        { hid: 'twitter:card', name: 'twitter:card', content: 'summary' }
      ]
    };
  }
};
```

#### **Вариант 3: Prerendering Middleware**
**Автоматическая предварительная генерация HTML**
- **Использовать Prerender.io или Rendertron**
- **Работает с существующим Vue SPA**
- **Автоматическая генерация HTML для ботов**

**Реализация:**
```javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import prerender from 'vite-plugin-prerender';

export default defineConfig({
  plugins: [
    vue(),
    prerender({
      routes: ['/share/*'], // Автоматически генерировать для всех публичных ссылок
      renderer: 'puppeteer'
    })
  ]
});
```

---

## 📝 Детальные задачи

### 1. Компоненты Vue.js

#### 1.1 ShareLinkButton.vue
**Описание:** Кнопка "Поделиться" для каждой ссылки в списке
**Функционал:**
- Отображение кнопки только для владельца ссылки
- Переключение статуса публичности ссылки
- Показ короткой ссылки после генерации
- Копирование ссылки в буфер обмена
- Индикация загрузки при генерации

**Технические детали:**
- Использовать Vue 3 Composition API
- Интеграция с API `/api/links/{id}/share`
- Обработка ошибок и уведомления
- Адаптивный дизайн

#### 1.2 ShareModal.vue
**Описание:** Модальное окно с настройками публикации
**Функционал:**
- Переключение статуса публичности
- Предварительный просмотр публичной страницы
- Настройки приватности
- История просмотров (если доступна)

**Технические детали:**
- Использовать существующую систему модальных окон
- Форма с валидацией
- Интеграция с API управления публичностью

#### 1.3 PublicLinkPage.vue
**Описание:** Публичная страница просмотра ссылок
**Функционал:**
- Отображение метаданных ссылки (title, summary, теги)
- Красивое представление контента
- Ссылка на оригинальный ресурс
- Информация о владельце (если публичная)
- Социальные кнопки (если нужно)

**Технические детали:**
- Маршрут `/share/:shortId`
- **SEO оптимизация (meta теги) - см. секцию выше**
- Обработка 404 для несуществующих ссылок
- Адаптивная верстка
- **WCAG accessibility стандарты**

#### 1.4 AuthCallToAction.vue
**Описание:** Блок призыва к авторизации
**Функционал:**
- Краткое описание преимуществ сервиса
- Кнопки авторизации (Google OAuth)
- Список основных возможностей:
  - Сохранение и организация ссылок
  - Автоматическая генерация тегов
  - Статистика и аналитика
  - Экспорт и резервное копирование
  - Персональные настройки

**Технические детали:**
- Интеграция с существующей системой авторизации
- Анимации и привлекательный дизайн
- Адаптивная верстка
- **WCAG accessibility стандарты**
- **Интеграция с выбранным SEO подходом**

### 2. Маршрутизация

#### 2.1 Добавить маршрут в Vue Router
```javascript
{
  path: '/share/:shortId',
  name: 'PublicLink',
  component: () => import('@/views/PublicLinkPage.vue'),
  meta: {
    public: true,
    title: 'Поделились ссылкой'
  }
}
```

#### 2.2 SEO оптимизация
**Критически важно для публичных страниц:**
- Динамические meta теги (title, description)
- Open Graph разметка (og:title, og:description, og:url, og:image)
- Twitter Cards (twitter:card, twitter:title, twitter:description)
- Структурированные данные (JSON-LD)
- **Server-side рендеринг meta тегов**

#### 2.3 Обработка ошибок
- 404 для несуществующих ссылок
- 403 для приватных ссылок
- Обработка сетевых ошибок

### 3. API интеграция

#### 3.1 Методы для работы с публичными ссылками
```javascript
// Генерация короткой ссылки
POST /api/links/{id}/share

// Получение публичной ссылки
GET /api/share/{shortId}

// Управление публичностью
PATCH /api/links/{id}/publicity

// Статистика просмотров
GET /api/links/{id}/share-stats
```

#### 3.2 Обработка ответов
- Типизация ответов API
- Обработка ошибок
- Кэширование данных
- Индикация загрузки

### 4. UI/UX дизайн

#### 4.1 Публичная страница
- Минималистичный дизайн
- Фокус на контенте
- Брендинг сервиса
- Призыв к действию
- **Accessibility (WCAG 2.1 AA)**

#### 4.2 Адаптивность
- Mobile-first подход
- Адаптация под планшеты
- Оптимизация для десктопа
- **Touch-friendly интерфейс**

#### 4.3 Анимации
- Плавные переходы
- Индикаторы загрузки
- Hover эффекты
- Микроанимации
- **Reduced motion поддержка**

### 5. Тестирование

#### 5.1 Unit тесты
- Тестирование компонентов
- Тестирование методов API
- Тестирование валидации

#### 5.2 E2E тесты
- Тестирование публичных страниц
- Тестирование авторизации
- Тестирование копирования ссылок
- **SEO тестирование (meta теги)**

#### 5.3 Тестирование производительности
- Оптимизация загрузки
- Lazy loading компонентов
- Кэширование статических данных
- **Lighthouse аудит**

#### 5.4 Accessibility тестирование
- Screen reader тестирование
- Клавиатурная навигация
- Цветовой контраст
- **WCAG 2.1 AA compliance**

---

## 🚀 Приоритеты реализации

### Высокий приоритет
1. **Выбор и реализация SEO подхода** (Nuxt 3 SSR рекомендуется)
2. ShareLinkButton.vue
3. PublicLinkPage.vue с правильным SEO
4. Маршрутизация и meta теги

### Средний приоритет
5. AuthCallToAction.vue
6. API интеграция
7. Адаптивный дизайн
8. Accessibility тестирование

### Низкий приоритет
9. ShareModal.vue
10. Дополнительные анимации
11. Расширенная статистика

---

## 📅 Оценка времени

**Общее время:** 4-5 недель
- **SEO подход и настройка:** 1-1.5 недели
- Компоненты: 1.5 недели
- Маршрутизация и API: 1 неделя
- UI/UX и тестирование: 1-1.5 недели

---

## 🔗 Зависимости

### Backend API (готово)
- ✅ Эндпоинты для публичных ссылок
- ✅ Интеграция с Bitly API
- ✅ Система статистики

### Существующие компоненты
- ✅ Система авторизации
- ✅ Модальные окна
- ✅ Уведомления
- ✅ Адаптивная верстка

### Новые зависимости (для SEO)
- **Nuxt 3** (если выбран Вариант 1)
- **Prerender.io/Rendertron** (если выбран Вариант 3)

---

## 📝 Примечания

1. **Безопасность:** Все публичные данные должны быть безопасными для показа
2. **Производительность:** Оптимизировать загрузку публичных страниц
3. **SEO:** **Критически важно** - правильная разметка для индексации поисковиками
4. **Доступность:** Поддержка screen readers и клавиатурной навигации
5. **Социальные сети:** Корректные превью при шаринге в Facebook, Twitter, Telegram
6. **Аналитика:** Отслеживание просмотров публичных страниц