tlroadmap icon indicating copy to clipboard operation
tlroadmap copied to clipboard

На каждой странице отображать аватарки ее контрибьюторов

Open etolstoy opened this issue 5 years ago • 9 comments

Чтобы поощрить вклад в наполнение базы было бы офигенно в конце каждой страницы из базы знаний показывать имена или аватарки тех, кто вносил в нее какие-то изменения.

etolstoy avatar May 10 '20 09:05 etolstoy

С аватарками сложнее, потому что в гите их нет, они в гитхабе

А вот контрибьюторов мы уже собираем, они лежат в $page.git.contributors, мы из них достаём автора, которого пихаем в мета-теги.

b0g3r avatar May 10 '20 09:05 b0g3r

Можно тогда просто списком бахнуть, отсортировав по количеству изменений

etolstoy avatar May 10 '20 09:05 etolstoy

Количество изменений сложно, у гита такого интерфейса нет

b0g3r avatar May 10 '20 09:05 b0g3r

Количество коммитов же точно можно смотреть по автору

etolstoy avatar May 10 '20 09:05 etolstoy

Конкретная техническая задача:

  • Создать Vue-компонент, который принимает на вход список из контрибьюторов и отображает их. Инструкция (и можно подсматривать в Roamap.vue)
  • Переопределить компонент страницы для дефолтной темы, добавить туда компонент с котрибьюторами https://vuepress.vuejs.org/guide/using-vue.html#using-components
  • Прокидывать в компонент данные из $page.git.contributors

b0g3r avatar May 10 '20 09:05 b0g3r

Изучить техническую возможность собирать данные кроме имени (аватарку гитхаба, количество "вклада")

b0g3r avatar May 10 '20 09:05 b0g3r

Усложняем инструкцию, чтобы всё сделать по-красоте.

Хотим получать именно аватарки и ссылки на github-профили. Проблемы следующие:

  • GitHub не следит за историей перемещения файла, и после каждого изменения структуры веток теряет историю коммитов.
  • API GitHub позволяет сделать 5к запросов в час. Сейчас в репо 900 коммитов, это значит, что пять сборок сайта в час и мы близки к лимитам
  • Логи git (не путать с GitHub) не содержат информацию о github-профилях (только емейл и имя, которые невозможно совместить с информацией о профиле), единственный их источник — это GitHub API.

Что хотим сделать. На этапе сборки:

  • Определить список коммитов (с помощью git log --follow или github api commit history)
  • По каждому коммиту из GitHub API вытягивать данные об авторе и коммитере (кажется, это разные вещи, и обе мы хотим выводить): айди, юзернейм, ссылку на профиль
  • Плагином к каждому $page цеплять список контрибьюторов в формате {github-id, github-username, github-profile-link, avatar}. В идеале — отсортированно по вкладу (количество коммитов, размер коммитов О_О)
  • Кэшировать эти данные (с устареванием, на случай изменения гитхаб-юзернейма) в github-actions, чтобы не запрашивать при каждой сборке
  • Обрабатывать ошибки rate-limit и с варнингом, но не ошибкой, останавливать сбор данных, чтобы не блокировать сборку сайта
  • Не запускать плагин, если не указан API-ключ

На этапе отображения:

  • Сделать Vue-компонент, который отображает одного контрибьютора (круглую аватарку, по наведению никнейм, по клику в новой вкладке гитхаб профиль / коммит)
  • Сделать Vue-компонент, который отображает список контрибьюторов
  • Инжектнуть этот компонент в стандартную тему где-нибудь сверху под заголовком или снизу около даты изменения

Нужно понять:

  • как лучше всего работать с апи: можно из гита доставать коммиты и по каждому запрашивать данные в rest, а можно с помощью graphql запрашивать сразу нужные поля по всем коммитам из истории коммитов репо
  • как лучше кешировать и работать с кешированием
  • как переопределять куски вьюпресс темы

Работу над плагином вести в отдельном репо, компонент для темы — наверное тоже

b0g3r avatar May 17 '20 13:05 b0g3r

Работаем в https://github.com/tlbootcamp/vuepress-plugin-contributors

Серёжа начал работу с кешированием, я — с вью-компонентами

b0g3r avatar May 17 '20 14:05 b0g3r

FYI: @etolstoy @DevAlloy создали организацию tlbootcamp на npm, чтобы заливать scoped-пакеты (@tlbootcamp/*). Админский доступ выдам по запросу

b0g3r avatar May 17 '20 14:05 b0g3r