Как составить классную биографию для своего профиля на GitHub с помощью Devcard и метрик DailyDev.

Самый большой трюк, который когда-либо проделывал дьявол, — это убедить мир в том, что промедления не существует. Поверьте мне, она вполне реальна. Я думал о том, что написать, уже две недели и, наконец, вот он я, на третьей строчке блога.

Но последние две недели не прошли впустую: я обновил игру «Крестики-нолики», которую создал некоторое время назад, и теперь она доступна здесь. Она построена на react и является прогрессивным веб-приложением.

Я также уделил немного времени и обновил свою биографию на GitHub, и этот блог будет посвящен тому, как я этого добился.

На прошлой неделе я подписался на Daily Dev, и мне нравится, что они отслеживают, сколько технических блогов вы прочитали, и на основании этого выставляют вам оценку за развитие. Мало того, они создают для вас очень крутую персональную карточку, которая называется DevCard и выглядит примерно так, как показано на рисунке ниже. Насколько это круто?

Самое интересное, что вы можете добавить действие GitHub, чтобы периодически обновлять ее, например, ежедневно/еженедельно и т.д.

Вторая часть — это Метрики, которые вы можете генерировать для своего профиля GitHub и добавлять куда захотите. Для этого вы можете использовать Metrics by lowlighter.

Я собираюсь предоставить вам пошаговое руководство по созданию вашей собственной биографии. Я расскажу об основах, а вы сможете расширить его, добавив другие метрики, поддерживаемые Lowlighter Metrics.

Давайте начнем!!!

Первое, что вам понадобится, это создать новый репозиторий Github с тем же именем, что и ваше имя пользователя GitHub, т.е. мой репозиторий GitHub называется sirius93.
Затем вам нужно будет инициировать файл readme.md во вновь созданном репозитории.
Разметка для файла readme должна выглядеть следующим образом:

# Hi there 👋

<div align="left">
  <a href="https://twitter.com/<Your twitter username>">
    <img
      src="https://img.shields.io/twitter/follow/<Your twitter username>?label=Twitter&logo=twitter&style=flat-square&color=1da1f2&logoColor=ffffff"
      alt="Twitter"
    />
  </a>
  <a href="https://www.linkedin.com/in/<Your linkedin username>/">
    <img
      src="https://img.shields.io/static/v1?logo=linkedin&style=flat-square&color=0072b1&label=LinkedIn&message=%E2%98%86"
      alt="LinkedIn"
    />
  </a>

  <a href="https://api.daily.dev/get?r=<Your dailydev username>" target="_blank">
    <img
      width="256"
      align="right"
      src="https://github.com/<Your github username>/<Your github username>/blob/main/devcard.svg"
    />
  </a>

</div>

## I am Nandan Kumar

You can add a small description about yourself. 

![Metrics](https://raw.githubusercontent.com/<Your github username>/<Your github username>/github-metrics/github-metrics.svg)
![Most used languages](https://raw.githubusercontent.com/<Your github username>/<Your github username>/github-metrics/language.svg)
![Notable contributions](https://raw.githubusercontent.com/<Your github username>/<Your github username>/github-metrics/notable.svg)
![Achievements](https://raw.githubusercontent.com/<Your github username>/<Your github username>/github-metrics/achievements.svg)

Войти в полноэкранный режим Выйти из полноэкранного режима

Вы можете ознакомиться с моим репозиторием здесь.
Вы можете сгенерировать свою devcard здесь

Теперь, когда вы сгенерировали devcard и добавили приведенный выше код в файл readme.md вашего специального репозитория. Пришло время заставить все работать.

Давайте попробуем добавить немного автоматизации, добавив действия в ваш репозиторий. Перейдите на вкладку Actions вашего репозитория и нажмите кнопку create a new workflow, а затем нажмите кнопку set up a workflow yourself Это предложит вам создать файл .yml в папке «.github/workflows/». Пожалуйста, создайте два файла с именами, указанными ниже:
daily-devcard.yml

name: daily-devcard

on:
  workflow_dispatch:
  push:
    branches:
      - main
  schedule:
    - cron: "0 0 * * *"

jobs:
  devcard:
    runs-on: ubuntu-latest
    permissions:
      contents: write
    steps:
      - name: devcard
        uses: dailydotdev/action-devcard@2.0.6
        with:
          devcard_id: ${{ secrets.DEVCARD_ID }}
          commit_branch: main
          commit_message: "chore: update ${filename}"

Вход в полноэкранный режим Выход из полноэкранного режима

daily-metrics.yaml

name: daily-metrics

on:
  workflow_dispatch:
  push: {branches: ["master", "main"]}
  schedule: [{cron: "0 0 * * *"}]

jobs:   
  stats:
    runs-on: ubuntu-latest
    steps:
      - uses: lowlighter/metrics@latest
        with:
          # You'll need to setup a personal token in your secrets.
          token: ${{ secrets.METRICS_TOKEN }}
          # GITHUB_TOKEN is a special auto-generated token used for commits
          committer_token: ${{ secrets.GITHUB_TOKEN }}
          committer_branch: github-metrics
          committer_message: "build: update `${filename}`"

          # Options
          user: <Your github username>
          template: classic
          base: header, activity, community
          config_timezone: Europe/Oslo

  notable:
    runs-on: ubuntu-latest
    steps:
      - uses: lowlighter/metrics@latest
        with:
          # You'll need to setup a personal token in your secrets.
          token: ${{ secrets.METRICS_TOKEN }}
          # GITHUB_TOKEN is a special auto-generated token used for commits
          committer_token: ${{ secrets.GITHUB_TOKEN }}
          committer_branch: github-metrics
          committer_message: "build: update `${filename}`"

          # Options
          user: <Your github username>
          template: classic
          base: ""
          config_display: large
          config_timezone: Europe/Oslo
          config_output: svg
          filename: notable.svg

          # Notable contributions
          plugin_notable: yes
          plugin_notable_filter: stars:>25

  language:
    runs-on: ubuntu-latest
    steps:
      - uses: lowlighter/metrics@latest
        with:
          # You'll need to setup a personal token in your secrets.
          token: ${{ secrets.METRICS_TOKEN }}
          # GITHUB_TOKEN is a special auto-generated token used for commits
          committer_token: ${{ secrets.GITHUB_TOKEN }}
          committer_branch: github-metrics
          committer_message: "build: update `${filename}`"

          # Options
          user: <Your github username>
          template: classic
          base: ""
          config_display: large
          config_timezone: Europe/Oslo
          config_output: svg
          filename: language.svg

          # Language plugin
          plugin_languages: yes
          plugin_languages_details: bytes-size, percentage

  achievements:
    runs-on: ubuntu-latest
    steps:
      - uses: lowlighter/metrics@latest
        with:
          # You'll need to setup a personal token in your secrets.
          token: ${{ secrets.METRICS_TOKEN }}
          # GITHUB_TOKEN is a special auto-generated token used for commits
          committer_token: ${{ secrets.GITHUB_TOKEN }}
          committer_branch: github-metrics
          committer_message: "build: update `${filename}`"

          # Options
          user: <Your github username>
          template: classic
          base: ""
          config_display: large
          config_timezone: Europe/Oslo
          config_output: svg
          filename: achievements.svg
          repositories_batch: 5

          # Achievement plugin
          plugin_achievements: yes
          plugin_achievements_threshold: C
          plugin_achievements_secrets: yes
          plugin_achievements_display: compact

Войти в полноэкранный режим Выйти из полноэкранного режима

Добавьте файл dependbot.yml в папку .github для ежедневного запуска задания действий.

version: 2
updates:
  # Maintain dependencies for GitHub Actions
  - package-ecosystem: github-actions
    directory: /
    schedule:
      interval: daily

Войти в полноэкранный режим Выйти из полноэкранного режима

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

Добавьте маркеры доступа для ваших действий. Перейдите на вкладку Settings —> Security —> Secrets вашего репозитория GitHub и добавьте два секретных кода в ваши действия и dependbot.
- DEVCARD_ID : Уникальный идентификатор, с которым генерируется png-файл вашей devcard. Он должен выглядеть примерно так :
- METRICS_TOKEN : Уникальный ключ, сгенерированный вами для вашего профиля github, Этот ключ может быть сгенерирован в окне настроек вашего профиля GitHub, на основе которого вы можете сгенерировать персональный токен доступа. Этот ключ предоставляет доступ сторонним библиотекам к вашему репозиторию GitHub. Убедитесь, что предоставили только необходимые разрешения.
Вручную запустите оба действия GitHub для генерации SVG-файлов в первый раз. Все последующие запуски возьмет на себя dependbot, который будет генерировать контент в соответствии с заданным вами временным интервалом.

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

Если у вас возникнут какие-либо проблемы или вам понадобится помощь, оставьте комментарий ниже или напишите мне на contact@nandankumar.info, и я постараюсь вам помочь.

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

Twitter | Instagram | Github | Веб-сайт

Сноски:

https://daily.dev/blog/adding-the-daily-devcard-to-your-github-profile?utm_source=webapp&utm_medium=devcard&utm_campaign=devcardguide&utm_id=inapp