# Неделя #3: Реализация слайдера

# Задачи на неделю

  1. Реализовать функционал слайдeра
  2. Подключить роутер.
  3. Вынести данные в стор

# План недели

  • Посмотреть видео-курс Vuex. Менеджер состояний (28м)
  • Подключить стор и перенести запросы и данные в его модуль (namespaced)
  • Посмотреть видео-курс VueRouter. Роутинг в браузере (30м)
  • Подключить роутер в приложение
  • Добавить активное и неактивное состояние для компонента слайдера
  • Реализовать функционирование слайдера
  • Реализовать переход с главной страницы на выбранный слайд

# Компонент слайдa

  • у слайдера есть состояние active
    • отображены стрелки контроллов
    • отображен контент
    • отображен подгруженный контент readme
    • компонент нормального размера

Соответственно, когда этого состояния нет - компонент уменьшен в размерах (transform: scale), отсутствуют стрелки, вместо контента отображен плейсхолдер (можно найти отображение в макетах)

  • так как авторизация не настроена кнопка follow/unfollow пока не работает - это нормально

# Функционирование слайдера

  • Если отображен крайний слайд, одна из стрелок пропадает (с той стороны куда листать нельзя)
  • При смене слайда с неактивного состояния в активное - следующий алгоритм
    1. Отображаем стрелки
    2. Скрываем плейсхолдер
    3. Отображаем прелоадер
    4. Делаем запрос за readme репозитория
    5. При получении ответа - вставляем содержимое как контент слайда
  • К слайдеру можно перейти двумя способами
    1. По прямой ссылке на /stories
    2. По клику на компонент на главной странице (тогда необходимо открыть слайд соответствующий компоненту из которого был совершершен переход). Это можно реализовать передав в качестве параметра роута, например, id репозитория при переходе.

# Запрос на /readme

Сервис GitHub позволяет запросить readme для определенного репозитория, ответ может быть возвращен в разных форматах.

  • Тип запроса: GET
  • Адрес: /repos/${owner}/${repo}/readme
    • где необходимо поставить сл. данные (можно взять из объекта репозитория)
      • ${owner} - владелец репозитория
      • ${repo} - название репозитория
  • Для того чтобы получить ответ в формате HTML необходимо передать заголовок
    • accept: application/vnd.github.v3.html+json

Если после вставки контента в нем не отобразились некоторые картинки - это нормально (так как в при создании описания некоторые авторы указывают относительный путь, поэтому что бы их подключить нужен дополнительный проход и вставка нужных ссылок). В будущем вы можете починить этот момент, но для прохождения курса - это не критично.

# Пример работы слайдера

← Неделя #4: Авторизация →