Сайт полезных ссылок группы M3204 Университета ИТМО — M3204.nawinds.dev
Useful links website for M3204 group @ ITMO University — M3204.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.
Основное содержимое страниц сайта хранится в виде 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!
Собранные средства мотивируют развивать сайт, добавлять новые фичи, а также подумать над созданием других полезных сервисов в рамках ИТМО.