Как добавить readme на github
Перейти к содержимому

Как добавить readme на github

  • автор:

About READMEs

You can add a README file to your repository to tell other people why your project is useful, what they can do with your project, and how they can use it.

You can add a README file to a repository to communicate important information about your project. A README, along with a repository license, citation file, contribution guidelines, and a code of conduct, communicates expectations for your project and helps you manage contributions.

A README is often the first item a visitor will see when visiting your repository. README files typically include information on:

  • What the project does
  • Why the project is useful
  • How users can get started with the project
  • Where users can get help with your project
  • Who maintains and contributes to the project

If you put your README file in your repository’s hidden .github , root, or docs directory, GitHub will recognize and automatically surface your README to repository visitors.

If a repository contains more than one README file, then the file shown is chosen from locations in the following order: the .github directory, then the repository’s root directory, and finally the docs directory.

Main page of the github/scientist repository and its README file

If you add a README file to the root of a public repository with the same name as your username, that README will automatically appear on your profile page. You can edit your profile README with GitHub Flavored Markdown to create a personalized section on your profile. For more information, see «Managing your profile README.»

README file on your username/username repository

Auto-generated table of contents for README files

For the rendered view of any Markdown file in a repository, including README files, GitHub will automatically generate a table of contents based on section headings. You can view the table of contents for a README file by clicking the

menu icon at the top left of the rendered page.

README with automatically generated TOC

Section links in README files and blob pages

You can link directly to a section in a rendered file by hovering over the section heading to expose the link:

Section link within the README file for the github/scientist repository

Relative links and image paths in README files

You can define relative links and image paths in your rendered files to help readers navigate to other files in your repository.

A relative link is a link that is relative to the current file. For example, if you have a README file in root of your repository, and you have another file in docs/CONTRIBUTING.md, the relative link to CONTRIBUTING.md in your README might look like this:

GitHub will automatically transform your relative link or image path based on whatever branch you’re currently on, so that the link or path always works. The path of the link will be relative to the current file. Links starting with / will be relative to the repository root. You can use all relative link operands, such as ./ and ../ .

Relative links are easier for users who clone your repository. Absolute links may not work in clones of your repository — we recommend using relative links to refer to other files within your repository.

A README should contain only the necessary information for developers to get started using and contributing to your project. Longer documentation is best suited for wikis. For more information, see «About wikis.»

Getting Started With GitHub README.MD

As a developer you sometimes browse the internet in search of the perfect library from a GitHub repository for your project application. We have all come across repositories with very beautiful README files which are very elaborate and do a good job of guiding us through the repository installation and usage.

But whenever we push our code to our repositories, we don’t have the know-how in making one of those. The README.md file is the first thing that the viewer will see in your repository. So it must be professional looking and easy to understand.

The README file has a filename extension “MD” which means markdown. Markdown is a markup language that performs text-to-HTML conversion for web writers. Markdown allows you to write using an easy-to-read, easy-to-write plain text format, then convert it to structurally valid XHTML (or HTML).

Why should I make one?

It’s an easy way to answer questions that your audience will likely have regarding how to install and use your project and also how to collaborate with you. The README.md file is created for your friends, colleagues, future employers and even to use as a reference to your future self. Any and everyone that you send to your GitHub that will look at your project in hopes to learn from, contribute to, benefit from or use on their projects.

Anatomy of a README.md file

In the images(2) above, you’ll see there are some major parts to a README file;

  1. Title
  2. Badges
  3. App Ion
  4. Description
  5. Screenshots
  6. Download
  7. Contributing
  8. License

Title

This is usually the human-readable version of the repository name. Like for example, if you have https://github.com/GeraudLuku/Clink repository, the value of the title would be “Clink”.

Badges

Those are the little images that you see in the repo’s page. Here are the commonly used ones:

  • Travis CI Build status — this is the status of the codes (failed/passing) in travis-ci.org. Continous-Integration is the process of automatic testing of the codes, whether it is running properly in many platforms (multiple PHP versions, HHVM etc) and triggering the PHPUnit/Behat or any other Tests. You can read more about CI in here. Simply put, this is usually an indicator if the repo is safe to use in your own project or not. A passing (green) green indicates it had passed all the tests and good to use.

App Icon

This displays the logo of your application. Remember to upload it to the root of your repository

Description

This contains the basic explanation of what your repository is all about. This is a good place to put links to the documentation page and any other overview info about your repository.

Screenshot

Screenshots illustrate what the project does, they help distinguish your repository from one another. They can help you remember projects you worked on a while ago and also show off your ability to document your work

Download

For mobile and any other running applications, this contains the google play link of your project, click the image will redirect you to the google play store/App store link of your mobile app or any other location.

Contributing

This section guides you on how you can contribute to the project, it shows you the additional features in which you can develop for the application. It generally contains the link to a contributions.md file which has more information concerning contributing to the project. Don’t forget to include the file in your repository root.

License

Public repositories on GitHub are often used to share open-source software. For your repository to truly be open source, you’ll need to license it so that others are free to use, change, and distribute the software. You can learn more about adding a license here.

NB: you should include any resource file referenced in the readme file into your repository.

knock! Knock! Is someone there. �� �� Below is the complete readme.md file template for the above repository used in this tutorial. You may use it and modify it to your personal needs.

Too lazy to create a readme file on your own? Head over to Dillinger, it’s online.MD file editor which provides you with templates to choose from and get a quick start

Last but not the least, Thank you for reading this, Since I’m a beginner and I may make mistakes, feel free to point it out so that I can rectify them along the way. ���� ���� ���� ����

Quickstart for writing on GitHub

Learn advanced formatting features by creating a README for your GitHub profile.

Markdown — это удобный для чтения язык для форматирования обычного текста. Вы можете использовать синтаксис Markdown вместе с некоторыми дополнительными HTML-тегами для форматирования записи в GitHub, в таких местах, как репозиторий READMEs и комментарии к запросам на вытягивание и проблемам. В этом руководстве вы узнаете о некоторых расширенных функциях форматирования, создав или изменив файл сведений для профиля GitHub.

Если вы не знакомы с Markdown, вам может потребоваться начать с курса «Basic writing and formatting syntax» или курса Взаимодействие с помощью Markdown GitHub Skills.

Если у вас уже есть файл сведений профиля, вы можете следовать этому руководству, добавив некоторые функции в существующий файл СВЕДЕНИЙ или создав gist с файлом Markdown, который называется чем-то вроде about-me.md . Дополнительные сведения см. в разделе Creating gists.

Создание или изменение файла сведений профиля

Файл сведений профиля позволяет делиться сведениями о себе с сообществом на GitHub.com. Файл сведений отображается в верхней части страницы профиля.

Если у вас еще нет файла сведений профиля, его можно добавить.

  1. Создайте репозиторий с тем же именем, что и имя пользователя GitHub, инициализировав репозиторий README.md с помощью файла. Дополнительные сведения см. в разделе Managing your profile README.
  2. Измените README.md файл и удалите текст шаблона (начало ### Hi there ), который автоматически добавляется при создании файла.

Если у вас уже есть файл сведений о профиле, его можно изменить на странице профиля.

В правом верхнем углу любой страницы GitHub нажмите фото своего профиля, затем выберите Ваш профиль.

рядом с файлом сведений профиля.

Снимок экрана: страница профиля с выделенным значком карандаша рядом с файлом сведений профиля

Добавление изображения в соответствии с вашими посетителями

В GitHub можно включать изображения. Здесь вы добавите адаптивное изображение, например баннер, в верхнюю часть profile README.

С помощью элемента HTML <picture> с функцией prefers-color-scheme мультимедиа можно добавить изображение, которое изменяется в зависимости от того, использует ли посетитель светлый или темный режим. Дополнительные сведения см. в разделе Managing your theme settings.

Скопируйте и вставьте следующую разметку в файл README.md .

Замените заполнители в разметке URL-адресами выбранных изображений. Кроме того, чтобы сначала опробовать эту функцию, можно скопировать URL-адреса из нашего примера ниже.

  • Замените YOUR-DARKMODE-IMAGE URL-адресом изображения, отображаемого для посетителей в темном режиме.
  • Замените YOUR-LIGHTMODE-IMAGE URL-адресом изображения, отображаемого для посетителей в светлом режиме.
  • Замените YOUR-DEFAULT-IMAGE URL-адресом отображаемого изображения, если ни один из других изображений не может быть сопоставлен, например, если посетитель использует браузер, который не поддерживает эту функцию prefers-color-scheme .

Чтобы сделать изображение доступным для посетителей, использующих средство чтения с экрана, замените YOUR-ALT-TEXT его описанием.

Чтобы проверить правильность отображения изображения, перейдите на вкладку Предварительный просмотр .

Дополнительные сведения об использовании изображений в Markdown см. в разделе Basic writing and formatting syntax.

Пример адаптивного изображения

Как выглядит изображение

Снимок экрана: вкладка "Предварительный просмотр" в светлом режиме с изображением улыбающегося солнца

Таблицы Markdown можно использовать для упорядочения информации. Здесь вы будете использовать таблицу, чтобы представить себя, ранжируя что-то, например ваши наиболее часто используемые языки программирования или платформы, то, что вы тратите свое время на обучение, или ваши любимые хобби. Если столбец таблицы содержит числа, полезно выровнять столбец по правому краю, используя синтаксис —: под строкой заголовка.

Вернитесь на вкладку Изменить .

Чтобы представиться, две строки под тегом </picture> , добавьте заголовок ## About me и короткий абзац о себе, как показано ниже.

В двух строках под этим абзацем вставьте таблицу, скопировав и вставив следующую разметку.

В столбце справа замените THING-TO-RANK словами «Языки», «Хобби» или другими словами и заполните столбец своим списком вещей.

Чтобы проверить правильность отображения таблицы, перейдите на вкладку Предварительный просмотр .

Дополнительные сведения см. в разделе Organizing information with tables.

Как выглядит таблица

Снимок экрана: вкладка "Предварительный просмотр" с заголовком "Обо мне" и отображаемой таблицей со списком языков

Добавление свернутого раздела

Чтобы сохранить содержимое в порядке, можно использовать <details> тег для создания разворачиваемого свернутого раздела.

Чтобы создать свернутый раздел для созданной таблицы, заключите таблицу в <details> теги, как показано в следующем примере.

<summary> Между тегами замените THINGS-TO-RANK на то, что вы ранжированы в таблице.

При необходимости, чтобы по умолчанию раздел отображалось как открытый, добавьте open атрибут в <details> тег .

Чтобы проверить правильность отображения свернутого раздела, перейдите на вкладку Предварительный просмотр .

Пример свернутого раздела

Как выглядит свернутый раздел

Снимок экрана: вкладка "Предварительный просмотр" с свернутым разделом "Мои лучшие языки", отмеченным стрелкой раскрывающегося списка

В Markdown есть много других вариантов форматирования содержимого. Здесь вы добавите горизонтальное правило для разделения страницы и блок-кавычки для форматирования любимой цитаты.

В нижней части файла в двух строках под </details> тегом добавьте горизонтальное правило, введя три или более дефисов.

Под строкой — добавьте цитату, введя разметку, как показано ниже.

Замените QUOTE цитатой по своему выбору. Кроме того, можно скопировать цитату из приведенного ниже примера.

Чтобы убедиться, что все отображается правильно, откройте вкладку Предварительный просмотр .

Как выглядит цитата

Снимок экрана: вкладка "Предварительный просмотр" с цитатой с отступом под толстой горизонтальной линией

Вы можете использовать синтаксис комментариев HTML, чтобы добавить комментарий, который будет скрыт в выходных данных. Здесь вы добавите комментарий, чтобы напомнить себе, что позже обновите README.

В двух строках под заголовком ## About me вставьте комментарий, используя следующую разметку.

Замените COMMENT элементом to-do, чтобы напомнить себе о необходимости выполнить что-то позже (например, добавить дополнительные элементы в таблицу).

Чтобы убедиться, что комментарий скрыт в выходных данных, перейдите на вкладку Предварительный просмотр .

Если вы довольны изменениями, сохраните профилировать файл сведений, нажав кнопку Зафиксировать изменения.

Фиксация непосредственно в main ветви сделает изменения видимыми для любого посетителя в вашем профиле. Если вы хотите сохранить свою работу, но не готовы сделать ее видимой в своем профиле, можно выбрать Создать новую ветвь для этой фиксации и запустить запрос на вытягивание.

Оформляем README-файл профиля на GitHub

Летом 2020 года GitHub позволила пользователям создавать персональные README-файлы и с их помощью кастомизировать свои профили. Сама платформа при создании подобного файла предлагает уже готовый шаблон, в который можно вписать свои данные. Но о какой кастомизации может идти речь, если у всех будут одинаково оформленные профили? За почти два года сообщество придумало множество различных способов выделиться и особенно оформить свою страницу на GitHub.

Создаем README.md профиля

Для того чтобы создать README-файл, который будет отображаться в профиле, необходимо создать новый публичный репозиторий с названием, полностью повторяющим никнейм пользователя. Также важно не забыть поставить галочку в поле, предлагающем вместе с репозиторием создать и README.md. Во время настройки репозитория нас поздравит Октокот и сообщит о том, что только что мы создали особенный репозиторий и его содержимое будет отображаться на странице профиля. GitHub автоматически сделает базовый шаблон, в который можно вписать информацию о себе, а можно не вписывать и сделать что-то чуть более интересное.

Официальный профиль Октокота с базовым README профиля

Официальный профиль Октокота с базовым README профиля

Для редактирования файла понадобятся знание Markdown-разметки и базовое понимание HTML. Оба навыка не сложны в освоении и интуитивно понятны в том объеме, который необходим для кастомизации профиля. На самом деле можно ограничиться только Markdown, но его особенность в том, что текст автоматически выравнивается по левому краю и нет никакой возможности повлиять на это. А HTML в тандеме с Markdown позволяет контролировать расположение объектов на экране. Для создания интерактивных блоков понадобится понимание того, как устроен сервис GitHub Actions, но нужны тоже только лишь базовые знания. Глубокие понадобятся только в том случае, если захочется создать собственный динамический виджет.

Заголовок

Как уже и говорилось ранее, заголовки можно писать как с помощью Markdown, так и с помощью HTML. Последний способ поможет разместить текст по центру, что мне больше нравится — выделяется на фоне основного текста. Заголовок обычно содержит в себе приветствие, обращенное к посетителю профиля. Имя в моем заголовке оформлено в виде ссылки и ведет на сайт-визитку, в конце расположен эмодзи с машущей рукой, значок анимированный. Второй строчкой можно коротко рассказать о своей деятельности, чтобы посетителю сразу было ясно, с кем он имеет дело.

Заголовок в моем профиле

Заголовок в моем профиле

Оформляется все это дело вот такой нехитрой HTML-конструкцией:

Можно сделать с помощью Markdown, но тогда не получится выровнять текст по центру и будут сложности с гифкой — в Markdown не предусмотрены теги для указания размеров изображения:

Некоторые умельцы вовсе отказываются от текстовых заголовков и используют баннеры в их качестве. Баннер можно сделать самостоятельно в любом удобном редакторе изображений или использовать конструкторы, например, REHeader.

Так бы мог выглядеть мой профиль с банером

Так бы мог выглядеть мой профиль с банером

Картинку можно вставить как с помощью Markdown, так и с помощью HTML. Опять же, последний вариант позволяет контролировать расположение изображения и его размер:

Можно использовать необычные шрифты. К сожалению, нет возможности подключить CSS-стили и полноценно кастомизировать внешний вид текста, но можно найти подходящий шрифт, набрать необходимый текст и вставить в README.md. Для этих целей подойдут сервисы, излюбленные пользователями Twitter и Instagram. Все шрифты из подобных конвертеров включены в таблицу символов Unicode и корректно отображаются на всех современных платформах.

Unicode-шрифт в заголовке

Unicode-шрифт в заголовке

Помимо всего прочего, можно добавить анимированный текст с эффектом печати. В репозитории проекта есть подробная инструкция по настройке блока и советы по развертыванию приложения на собственном сервере. Также разработчик сделал веб-интерфейс для настройки — можно указать все необходимые параметры, а сервис выдаст готовый код для встраивания.

О себе

После заголовка принято рассказывать о себе, представлять свои навыки, возможности и давать ссылки для обратной связи. Это, конечно же, необязательное условие, можно расположить блоки в любой последовательности, но в этой части статьи рассмотрим именно те инструменты, которые помогут организовать блок «О себе».

Simple Icons — огромная коллекция иконок популярных брендов, компаний, технологий и сервисов в svg-формате. У проекта есть сайт, на котором можно найти удобную иконку и скачать себе, а потом использовать в своем md-файле. Вставлять изображения лучше с помощью HTML — так удобнее задавать необходимый размер.

Markdown Badges — библиотека бейджей с готовыми фрагментами md-кодов для вставки. Коллекция обширная, можно найти необходимые языки программирования, технологии и оформить блок, к примеру, навыков.

Shields.io — инструмент для генерации кастомных бейджей. Можно выбрать из готовых шаблонов и подогнать под свой случай, а можно настроить полностью с нуля.

Статистика

В README-файл профиля можно добавлять различные виджеты со статистическими данными о себе и свой деятельности на GitHub. Данные автоматически обновляются с некоторой периодичностью и в профиле всегда отображается актуальная информация:

GitHub Trophy — добавляет в профиль трофеи и ачивки. Награды показывают, насколько пользователь активно ведет свой профиль. Для выбора доступно более десяти различных цветовых схем, что позволяет настроить виджет под свой стиль оформления. Также можно выбрать различные варианты расположения наград и включить фильтрацию. Для добавления необходимо вставить следующий md-код в свой файл, параметр username= необходимо заменить на свой никнейм на платформе.

Longest streak stats — добавляет виджет, показывающий актуальную продолжительность ежедневных сессий на GitHub, самую длинную сессию за все время и суммарное количество вкладов в сообщество. Автор виджета предлагает подробную инструкцию по его настройке, но вместе с этим предоставляет и визуальный конструктор, позволяющий настроить необходимую цветовую схему. Кроме этого, в репозитории разработчика имеется руководство по развертыванию приложения на собственном сервере. Если вставлять код из примеров, то параметр user= надо заменить на свой никнейм, если создавать собственный дизайн в конструкторе, то система выдаст необходимый код для вставки.

Top Languages Card — виджет, выводящий статистику по часто используемым языкам в репозиториях пользователя. Можно выводить информацию как по всем репозиториям в профиле, так и только по избранным. Есть возможность удалить некоторые языки и никогда не показывать их в поле активности. Также можно выбрать компактный и более подробный вид карточки. Есть поддержка разных цветовых схем. При вставке кода необходимо заменить параметр username= на свой никнейм.

GitHub Stats Card — карточка от разработчика прошлого виджета. Виджет выводит основную информацию о деятельности пользователь на платформе — общее количество звезд, коммитов и вкладов в сообщество. Также карточка отображает оценку пользователя, сравнивая его деятельность с другими юзерами GitHub. Доступно около десятка уже готовых тем, но можно настроить и уникальную. Ненужные позиции в статистике можно скрыть. Для вставки все так же надо скопировать код, добавить в свой файл и заменить параметр username= на актуальный.

GitHub Extra Pins — и уже третья карточка все от того же самого разработчика. GitHub позволяет закреплять на странице профиля не более 6 репозиториев, но если этого мало, то можно добавить их в README-файл в виде карточки и не ограничиваться только 6 проектами. Для вставки надо заменить параметры username= на актуальный никнейм, repo= на название необходимого репозитория, а в скобках указать ссылку на сам репозиторий.

Codewars — баннер со статистикой сервиса с задачами для программистов. Виджет показывает количество решенных задач и актуальный уровень пользователя на платформе. Ссылки на карточки можно найти в своем профиле, нажав на кнопку «View Profile Badges» под аватаркой. Цветовые схемы нельзя выбрать и нет широкой возможности кастомизации, но доступны три размера — большой, маленький и крошечный. Если сложно найти, то можно скопировать код для карточки необходимого размера, заменить оба поля username на актуальный никнейм на платформе Codewars и вставить в свой md-файл.

LeetCode Readme Stats — виджет будет полезен любителям порешать задачки на сервисе LeetCode. Карточка выводит данные о количестве решенных задач с распределением по уровню сложности. Есть две темы — светлая и темная. Также у автора имеется инструкция по настройке отслеживания статистики с помощью GitHub Actions. Параметр username= необходимо заменить на актуальный.

GitHub Profile Views Counter — небольшой бейдж, выводящий информацию о количестве посетителей профиля. В поиске GitHub можно найти несколько репозиториев с реализацией виджета, но устроены они приблизительно одинаково, поэтому рассмотрим на примере самого популярного. Бейдж можно персонализировать, выбрав цвет из готовых или указать необходимый в шестнадцатеричной системе, на выбор есть три разных дизайна и возможность изменить исходный текст бейджа. Для вставки надо заменить поле your-github-username на соответствующее своему никнейму.

Github Readme Activity Graph — виджет с графиком активности на платформе за последний месяц. Для персонализации имеется более 10 готовых тем, поэтому можно спокойно подобрать что-то подходящее под свои нужды. Если ничего не понравится, то у разработчика есть подробная инструкция по кастомизации. Вставка производится уже привычным способом — копируем код, меняем параметр username= на нужный и вставляем в свой md-файл.

GitHub Readme StackOverflow — виджет позволяет делиться статистикой вклада в сообщество StackOverflow. На выбор есть две темы и два размера карточки. Для вставки в свой README профиля надо скопировать код, заменить параметр userID= на свой. С помощью параметра theme= можно выбрать нужную тему — ligh и dark , а с помощью layout= размер — default и compact . Своего профиля на StackOverflow у меня нет, поэтому продемонстрирую все на примере аккаунта автора виджета.

GitHub Profile Summary Cards — еще одна библиотека карточек, выводит основную информацию по популярным языкам, график активности и общие сведения об аккаунте. Встраивать можно как с помощью Markdown, так и с помощью GitHub Actions. Для выбора доступно ровно десять цветовых схем. В репозитории есть инструкция, но также имеется и веб-приложение для генерации необходимых ссылок. Код для вставки ( username= меняем на свой ник, а theme= на название темы из списка):

GitHub Actions

GitHub Actions позволяет пользователям автоматизировать свои репозитории. Но можно приспособить технологию под динамический вывод информации в README.md профиля. Некоторые умельцы умудряются таким образом встраивать в свои профили мини-игры и виджеты с отображением информации в реальном времени.

Waka Readme Stats — позволяет динамически выводить статистику из сервиса Wakatime в свой профиль GitHub. Можно выбрать, какую именно информацию надо выводить. Это может быть статистика по языкам программирования использованным за неделю, количество коммитов в разное время суток, статистика по часто используемым средам разработки и операционным системам. Сам сервис Wakatime собирает эти данные с помощью плагинов, которые доступны для большого количества популярных IDE, браузеров и редакторов кода. Он анализирует информацию и формирует из нее детальный дашборд в личном кабинете пользователя, а с помощью скрипта можно выводить избранные данные в профиль и настраивать периодичность обновления информации. У автора репозитория есть подробная инструкция по настройке GitHub Actions для взаимодействия с Wakatime.

Blog post workflow — репозиторий рассказывает, как настроить вывод последних постов из блогов или социальных сообществ в md-файл. У автора репозитория есть подробные инструкции по интеграции с Dev.to, Medium, Stackoverflow, Reddit, YouTube и другими популярными платформами. Но можно воспользоваться RSS-ссылкой и выводить последние посты из собственного блога. В этой статье рассмотрим инструкцию о том, как выводить посты с Хабра в свой профиль GitHub. Во-первых, у нас уже должен быть создан md-файл профиля. Во-вторых, надо открыть этот файл и в необходимом месте вставить следующую конструкцию:

Затем в корне репозитория надо создать папку .github в ней папку workflows , а в ней файл blog-post-workflow.yml . Полный путь должен выглядеть следующим образом: username/.github/workflows/blog-post-workflow.yml .

Теперь переходим в созданный yml-файл и вставляем следующее, заменяя ссылку в поле feed-list: на вашу RSS-ссылку (можно скопировать в профиле Хабра в разделе «Публикации»):

Теперь только остается запись изменения и запустить действие. Для этого переходим во вкладку «Actions» в репозитории, с левого края в поле «All workflows» выбираем само действие и нажимаем «Run workflow». Ждем. Если все пройдет успешно, то увидим оповещение, если что-то пойдет не так, то все равно увидим, но уже ошибку. Если все прошло хорошо, то можно обновить страницу профиля и увидеть пять последних постов с Хабра. Часто возникают задержки, и содержимое блока при первом запуске появляется не сразу. В этом случае можно подождать несколько минут, и данные обязательно обновятся.

На момент написания статьи мои пять последних постов выглядели вот так

На момент написания статьи мои пять последних постов выглядели вот так

В yml-файле можно менять поля и их содержимое, кастомизируя выдачу. Если надо выводить последние посты сразу с нескольких сайтов, то можно указать ссылки через запятую.

Metrics — обширная библиотека с динамической инфографикой. Репозиторий включает в себя более 30 различных плагинов с более чем 200 параметрами для настройки. Можно выводить статистику коммитов, популярные языки, последние обновления, статистику вкладов в сообщество по дням и многое другое. В репозитории есть подробные инструкции для подключения. Библиотека настолько большая, что бессмысленно описывать в этой статье способы интеграции (там на самом деле много всего).

GitHub Stats Terminal Style — анимированное окно со статистикой в дизайне терминала. Информация также обновляется с помощью GitHub Actions, а на выбор есть около десяти цветовых схем. В репозитории имеется инструкция по настройке.

Todoist Stats — интеграция с сервисом отслеживания задач Todoist. Выводит в профиль основную статистику о работе над задачами. Для подключения необходим API-токен из приложения. Само подключение осуществляется через GitHub Actions. Можно сделать все руками, а можно подключить уже готовое решение через маркетплейс GitHub.

snk — добавляет в md-файл еще одну сетку Contributions Graph, но только анимированную. По сетке перемещается змейка и съедает зеленые квадратики активности. Анимация зацикленная и начинается заново после того, как все квадратики будут съедены. Посмотреть демо можно на сайте проекта. За ежедневную генерацию нового поля отвечает GitHub Actions. Практической пользы от этого дополнения мало, но в грамотных руках может эффектно оживить профиль.

Забавы ради

В readme-файлы профиля можно добавлять не только полезные статистические данные, но и различные украшения и забавные блоки. Эти элементы не расскажут о пользователе как о специалисте, но могут пригодиться для оформления.

README Jokes — карточки со случайно генерируемыми шутками. В репозитории есть пара десятков готовых тем, но доступна и кастомизация, поэтому можно воплотить практически любое цветовое решение. Для вставки в профиль надо просто скопировать себе следующий фрагмент кода.

Github Readme Quotes — динамически выводит блок с цитатами. Размер ограничен двумя вариантами — вертикальный и горизонтальный, а цветовых схем четыре. В будущем автор проекта планирует расширить параметры кастомизации. Встроить в свой профиль можно с помощью следующего md-кода:

А если совсем нет времени?

На самом деле необязательно полностью с нуля писать свой md-файл. В Сети есть достаточное количество генераторов, в которые можно ввести информацию о себе, поставить галочки около необходимых интеграций и получить на выходе готовый код. Такой файл можно так и оставить, а можно взять за основу и дополнить своими идеями.

Github Readme Generator by @arturssmirnovs — проект позволят сгенерировать шаблон README-профиля, добавить хедер, информацию о себе, блок социальных сетей и интегрировать метрики. Приложение доступно онлайн по ссылке.

Github Readme Generator by @rahuldkjain — еще один генератор с чуть более широким выбором функций. Кроме основного набора, позволяет выбрать языки программирования, технологии, добавить кнопки для донатов через Ko-Fi и buymeacoffe и посмотреть превью сгенерированного файла.

Awesome GitHub Profile README — репозиторий-библиотека «потрясающих» README-файлов, собранных в одном месте. Можно использовать ее в качестве источника вдохновения или же форкать интересующие проекты, если автор разрешает. Все README разбиты по тематическим категориям, что упрощает поиск.

Что дальше?

Уверен, что я показал не все возможные плагины, но постарался рассказать обо всем что знал и нашел. Модули из источников можно использовать как отдельные детальки конструктора и собирать из них уникальные страницы профилей. Markdown можно использовать рядом с HTML, оборачивать блоки в теги, таблицы и добиваться потрясающих результатов. GitHub Actions поможет добавить динамики в профиль, а если есть достаточно знаний, то можно дописывать собственные решения. В коллекции уже готовых README можно заметить, что связка из обычных картинок и md-разметки уже дает заметные результаты и создает отличительный визуальный образ профиля.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *