На каждой странице отображать аватарки ее контрибьюторов
Чтобы поощрить вклад в наполнение базы было бы офигенно в конце каждой страницы из базы знаний показывать имена или аватарки тех, кто вносил в нее какие-то изменения.
С аватарками сложнее, потому что в гите их нет, они в гитхабе
А вот контрибьюторов мы уже собираем, они лежат в $page.git.contributors, мы из них достаём автора, которого пихаем в мета-теги.
Можно тогда просто списком бахнуть, отсортировав по количеству изменений
Количество изменений сложно, у гита такого интерфейса нет
Количество коммитов же точно можно смотреть по автору
Конкретная техническая задача:
- Создать Vue-компонент, который принимает на вход список из контрибьюторов и отображает их. Инструкция (и можно подсматривать в Roamap.vue)
- Переопределить компонент страницы для дефолтной темы, добавить туда компонент с котрибьюторами https://vuepress.vuejs.org/guide/using-vue.html#using-components
- Прокидывать в компонент данные из $page.git.contributors
Изучить техническую возможность собирать данные кроме имени (аватарку гитхаба, количество "вклада")
Усложняем инструкцию, чтобы всё сделать по-красоте.
Хотим получать именно аватарки и ссылки на 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 запрашивать сразу нужные поля по всем коммитам из истории коммитов репо
- как лучше кешировать и работать с кешированием
- как переопределять куски вьюпресс темы
Работу над плагином вести в отдельном репо, компонент для темы — наверное тоже
Работаем в https://github.com/tlbootcamp/vuepress-plugin-contributors
Серёжа начал работу с кешированием, я — с вью-компонентами
FYI: @etolstoy @DevAlloy создали организацию tlbootcamp на npm, чтобы заливать scoped-пакеты (@tlbootcamp/*). Админский доступ выдам по запросу