Пример использования Vulcan: GambaClimbing.com
Ваша ежедневная доза вдохновения для видео-скалолазания
За последние два года я по-настоящему влюбился в спорт боулдеринг, вариант скалолазания, при котором вы держитесь достаточно низко над землей, чтобы можно было безопасно приземлиться на мат в случае падения.
И одна из самых крутых составляющих онлайн-болдерингового сообщества - это то, сколько людей делятся видео своих посылов (возможность завершить маршрут) на Reddit, Instagram, YouTube или других платформах.
Это натолкнуло меня на мысль создать сайт, посвященный объединению этих видео и отображению лучших из них. GambaClimbing.com родился!
(Если вам интересно, «гамба!» - это то, что японские альпинисты кричат, чтобы подбодрить друг друга.)
Представляем тему Fuji
Одна из моих основных целей всякий раз, когда я работаю над проектом Vulcan, - сделать как можно большую часть моей работы открытым исходным кодом. Поэтому я начал с создания новой темы, подходящей для любого подобного сайта агрегации видео.
Если вы знакомы с базовым примером форума Vulcan (ранее известным как Телескоп), вы, вероятно, узнаете здесь много элементов.
Но Fuji добавляет несколько вещей, таких как раздел «Избранные сообщения» и складывающаяся боковая панель, которая содержит параметры поиска и фильтрации:
И, конечно же, тема также доступна для мобильных устройств:
В области дизайна большое влияние оказал сайт TED:
Мне очень понравилась ее простота и резкая контрастность, и я решил позаимствовать ее карточную раскладку для Fuji. Я использовал Source Sans Pro для шрифта, потому что вы действительно не ошибетесь с этим шрифтом.
От Фудзи до Гамбы!
Как только у меня появился Fuji Foundation, пришло время добавить еще несколько специфичных для Gamba функций. Во-первых, я переработал дизайн, чтобы отойти от цветов по умолчанию и добавить на главную страницу дополнительный раздел «избранный плейлист»:
Пакет "Места вулкана"
Как вы могли заметить, каждое видео также может быть связано с определенным местом, обычно со скалодромом или площадкой на открытом воздухе. Я использовал Google Maps Places API, чтобы подключить это, и сделал все это доступным в виде отдельного пакета Vulcan Places.
И, сохраняя данные каждого места в виде отдельного документа, я также могу создавать специальные представления, которые показывают вам все видео, связанные с местом, вместе с собственными метаданными места:
Да, и если вы хотите увидеть, как все сочетается друг с другом, репозиторий Gamba также имеет открытый исходный код (только в учебных целях, пожалуйста, не клонируйте все это!).
Заключение
На весь проект у меня ушло около двух недель от начала до конца, включая время, потраченное на создание темы Fuji. Это также включает время, потраченное на работу над самим Vulcan, чтобы исправить несколько ошибок, которые я обнаружил в процессе.
В целом, я очень доволен конечным результатом, учитывая потраченное на него время. Что касается дизайна, мне кажется, что тема Fuji - это шаг вперед по сравнению с темой Zeiss, которую я разработал для оригинального Telescope (которую вы все еще можете увидеть в действии на Screenings). А на техническом уровне работать с React и GraphQL - одно удовольствие.
Так что, если вы думаете о создании какого-либо видеосайта, я рекомендую вам проверить Vulcan и тему Fuji и сообщить мне, что вы думаете!
