Сайт полезных ссылок группы M3310 Университета ИТМО — M3310.nawinds.dev
Useful links website for M3310 group @ ITMO University — M3310.nawinds.dev
Этот сайт работает на базе проекта Docusaurus, что позволяет легко редактировать его содержимое прямо на GitHub в Markdown и хостить его с помощью GitHub Actions.
- Хотите своей группе такой же сайт?
- Установка / Installation
- Локальная разработка / Local Development
- Сборка / Build
- Развертывание / Deployment
- Редактирование сайта
- Фичи / Features:
- Блок дедлайнов / Deadlines block
- Разделение на предметы / Division into subjects
- Удобное редактирование контента в Markdown / Easy editing in Markdown
- Страница ведомостей / Grades table page
- Архив ссылок по семестрам / Links archive by semester
- Горячие клавиши / Shortcuts
- Веб-приложение / PWA (Web app)
- Светлая и темная тема / Light & dark color theme
- Новости / News
- Поддержать проект
Пишите мне! Я сделаю такой же сайт специально для Вашей группы. Вы получите возможность быстро и легко вставлять на сайт ссылки для своей группы и актуальные дедлайны. Если возникнут вопросы о том, как и где это делать, с удовольствием отвечу!
$ yarn
$ yarn start
Эта команда запускает локальный сервер разработки и открывает окно браузера. Большинство изменение применяются в реальном времени без необходимости перезапускать сервер.
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
$ yarn build
Эта команда генерирует статический контент в папке build, который может быть размещен с помощью любого сервера статического контента.
This command generates static content into the build directory and can be served using any static contents hosting service.
Используя SSH:
Using SSH:
$ USE_SSH=true yarn deploy
Не используя SSH:
Not using SSH:
$ GIT_USER=<Your GitHub username> yarn deploy
Если Вы используете GitHub Pages для хостинга, эта команда является удобным способом собрать сайт и запушить его в ветку gh-pages.
If you are using GitHub Pages for hosting, this command is a convenient way to build the website and push to the gh-pages branch.
Push-уведомления работают через OneSignal, так как GitHub Pages не может хранить браузерные подписки самостоятельно.
- Создайте Web Push приложение в OneSignal для
https://m3300.nawinds.dev. - Оставьте стандартные настройки service worker OneSignal: path
/, filenameOneSignalSDKWorker.jsи scope/. Этот worker также подключает сгенерированный Docusaurus/sw.js, поэтому push-уведомления и PWA используют одну регистрацию. - В GitHub откройте Settings → Secrets and variables → Actions → Variables и добавьте
ONESIGNAL_APP_ID. - Там же в Secrets добавьте
ONESIGNAL_REST_API_KEY. Секретный API-ключ нельзя добавлять в код репозитория.
Категории уведомлений реализованы с помощью OneSignal Data Tags. Сайт автоматически записывает выбранные пользователем значения:
| Категория | OneSignal tag | Значение подписки |
|---|---|---|
| Учебные материалы | m3300_notify_study |
1 |
| Дедлайны | m3300_notify_deadlines |
1 |
| Улучшения сайта | m3300_notify_other |
1 |
Дополнительная настройка OneSignal для работы workflow не требуется: Actions отправляет сообщения напрямую по фильтру соответствующего тега. Для просмотра аудитории каждой категории можно создать необязательные сегменты в Audience → Segments → New Segment. Для каждого сегмента добавьте фильтр User Tag, выберите ключ из таблицы и условие equals 1.
После успешной публикации workflow отправляет уведомления по следующим правилам, перечисленным в порядке приоритета:
| Условие коммита | Категория уведомления |
|---|---|
Первая строка начинается с !other |
Улучшения сайта, даже если изменён только файл учебных материалов или дедлайнов |
Первая строка начинается с !study |
Учебные материалы |
Первая строка начинается с !deadlines |
Дедлайны |
Изменён ровно один файл, и он находится в src/pages/ |
Учебные материалы |
Изменён только static/DEADLINES.json |
Дедлайны |
| Любой другой коммит | Улучшения сайта |
Префикс категории удаляется из отображаемого текста уведомления. Если после него указаны две непустые строки, первая становится заголовком, а вторая — сообщением. Если строка одна, она становится сообщением, а заголовок зависит от категории: «Новые материалы», «Новые дедлайны» или «Улучшение сайта».
Примеры сообщений коммитов:
!study Добавлены материалы по математике
!deadlines Обновлены сроки сдачи
Добавлен дедлайн третьей лабораторной работы
!other Улучшена навигация
Если сообщение коммита начинается с #, уведомление для него не отправляется.
Основное содержимое страниц сайта хранится в виде Markdown файлов в директории /src/pages. Для редактирования главной страницы, отредактируйте файл /src/pages/index.md. Остальные файлы называются в соответствии с их путями на сайте.
Дедлайны хранятся в формате JSON в файле /static/DEADLINES.json. Поля name и time являются обязательными для заполнения у каждого дедлайна, url не обязательно, но в него удобно записывать ссылки на дедлайны (то есть на сами лабы, например). Если Вы не хотите указывать url, то нужно вообще убрать поле url из соответствующего дедлайна.
Чтобы добавить не обычный дедлайн, а тест (или, например, контрольную, теормин и т.д.), в поле name перед названием дедлайна напишите [Тест], например, [Тест] Матан: Контрольная работа по интегрированию.
Содержимое меню и подвала сайта редактируется через файл docusaurus.config.js. Просто найдите в этом конфиге navbar и footer, чтобы добавить или удалить оттуда ссылки.
- Измените
titleна номер Вашей группы,urlна актуальный адрес сайта,organizationNameиprojectNameна юзернейм владельца репозитория и название репозитория на GitHub в файле docusaurus.config.js. - Измените номер группы в файле manifest.json.
- Измените иконки сайта на свои (favicon.ico, favicon-32x32.png, android-chrome-192x192.png, android-chrome-512x512.png)
- Откройте содержимое всех страниц в директории pages, измените номер группы и другую информацию на актуальную в
titleиdescription, измените ссылки на редактирование страницы внизу .mdx файлов.
Чтобы настроить сайт под себя, вы можете обратиться к документации Docusaurus.
В верхней части главной страницы располагается блок с актуальными дедлайнами. Дедлайны расположены в хронологическом порядке, старые дедлайны не отображаются.
У каждого дедлайна есть ссылка на добавление в Google Календарь (при наведении на дату дедлайна). Кроме того, дедлайны, выделенные вертикальной полосой слева, имеют ссылки на сами лабы/дз/..., которые к ним относятся.
Дедлайны имеют разделение на обычные и на тесты (то есть тесты/контрольные/зачёты/... визуально выделяются значком 📚)
Ещё таймер у каждого дедлайна обновляется каждую минуту без обновления страницы :)
Под дедлайнами расположена ссылка на добавление дедлайна. Ссылка ведет сначала на подробную инструкцию по добавлению дедлайнов.
Дедлайны добавляются в формате JSON в специальный файл на GitHub. Как и при редактировании страниц сайта, достаточно сделать коммит, чтобы дедлайны появились на сайте.
В дополнение к дедлайнам на сайте, существует так же специальный бот-дедлайнер, который каждый вечер в 17 часов отправляет в группу актуальные дедлайны. Бот берет дедлайны с этого же сайта, что избавляет от необходимости добавлять дедлайны в разные места. Функционал бота почти идентичный блоку дедлайнов на сайте.
Ссылки на сайте разделены на разные предметы для упрощения навигации. В десктопной версии сайта есть быстрая навигация по предметам в правой части сайта, а также поддерживаются горячие клавиши.
Контент страниц можно быстро изменять в Markdown, делая коммиты на GitHub, после чего изменения отображаются на сайте в течение нескольких минут, что позволяет добавлять нужные ссылки с любого устройства прямо на ходу.
Делать коммиты напрямую может любой пользователь с соответствующими правами в репозитории, а все остальные также могут предложить любые свои правки, сделав форк репозитория и создав pull request.
Ссылки на таблицы ведомостей вынесены на отдельную страницу, доступную из меню сайта, делая удобным просмотр всех своих оценок.
Также только на этой странице можно открыть нужную ссылку, используя горячую клавишу нужного предмета.
 |
 |
|---|
Из меню сайта нетрудно найти архив со ссылками за прошлые семестры, что позволяет быстро находить свои старые оценки, работы и лекции.
На всём сайте работают горячие клавиши для быстрой навигации по сайту в десктопной версии. Среди них есть клавиши для перехода на другие страницы сайта и для пролистывания страницы к нужному предмету.
У каждого предмета есть несколько горячих клавиш, семантически привязанных к первой букве в названии предмета и в русской и в английской раскладке. В большинстве случаев активная раскладка на работу горячих клавиш не влияет, что позволяет не тратить время на включение нужной.
| Иконка приложения | Скриншот 1 | Скриншот 2 |
|---|---|---|
 |
 |
|
Сайт настроен под использование в качестве веб-приложения (PWA), что позволяет устанавливать его как приложение на мобильных телефонах. Это позволяет получить быстрый доступ к сайту с мобильных устройств.
Для установки веб-приложения, рекомендуется воспользоваться браузером Chrome.
 |
 |
|---|
В ИТМО учится много любителей тёмной темы, а поэтому немаловажной особенностью всего, что разрабатывается для студентов, является наличие тёмной темы, кроме стандартной светлой.
Переключение темы поддерживается на всех версиях сайта.
Чтобы активировать сайт, размещенный на GitHub Pages, необходимо использовать актуальный лицензионный ключ. О том, как его сгенерировать, можно прочитать в этом приватном репозитории. Всем, у кого нет к нему доступа, нужно обратиться ко мне для активации сайта.
5 апреля на сайте был запущен первый A/B-тест с целью выбрать лучший дизайн ссылок на дедлайны:
| Старый дизайн | Новый дизайн |
|---|---|
 |
 |
11 апреля эксперимент был завершен, однако в связи с неоднозначными результатами повторный тест был запущен 16 апреля на двухнедельный срок (до 30 апреля).
Поддержите проект, сделав перевод на Т-Банк или став моим спонсором на GitHub Sponsors!
Собранные средства мотивируют развивать сайт, добавлять новые фичи, а также подумать над созданием других полезных сервисов в рамках ИТМО.