وقتی اولین بار وارد لینوکس میشی

استفاده از Skill Icons در README گیت هاب

اگه می‌خوای صفحه‌ی پروفایل یا پروژه‌هات تو گیت‌هاب حرفه‌ای‌تر و چشم‌گیرتر بشه، می‌تونی از Skill Icons استفاده کنی!
این آیکون‌ها رو خیلی راحت می‌تونی به README اضافه کنی. کافیه این کد رو بذاری:

[![Skill Icons](https://skillicons.dev/icons?i=html,css,js,react,python,git,github&theme=dark)](https://skillicons.dev/)

📌 توی قسمت i= اسم تکنولوژی‌هایی که می‌خوای رو با کاما جدا کن (html, css, js و …).
📌 با theme=dark یا theme=light هم می‌تونی تم رو تغییر بدی.

بعد از اینکه آیکون ها و تم رو کاستوم کردی، کافیه کدش رو بزاری تو فایل README پروفایل یا پروژه‌ات و از خروجی لذت ببری!

👨‍💻 نتیجه‌اش؟ یه README خفن جذاب که همه تو کفش میرن!

تو پست بعدی بهتون یاد میدم چجوری یدونه از اینا بزارید تو پروفایل گیت هاب خودتون تا پشمای همه فر بخوره 😉

اضافه کردن Snake Game به پروفایل گیت هاب 🐍

خب همونطور که قولش رو داده بودم تو این پست میخوام روش اضافه کردن مار بازی به گیت هاب رو بهتون بگم!

این کار چند مرحله ساده داره که کافیه طبق تصاویر و پست اونها رو دنبال کنید!

1️⃣ مرحله اول: ساخت ریپازیتوری پروفایل:
اول از همه، اگه تا الان اینکار رو انجام ندادید، باید یه ریپازیتوری جدید بسازید و اسمش رو دقیقا شبیه یوزرنیم گیت هاب خودتون قرار بدید. دقت کنید که اسم ریپازیتوری به حروف کوچک و بزرگ حساسه!.
بعد از اینکه ریپازیتوری رو ساختید، داخلش یه فایل README.md درست کنید. محتویات این فایل قراره درون پروفایل شما نمایش داده بشه!

2️⃣ مرحله دوم: ساخت فایل snake.yml:
تو این مرحله باید یه اکشن جدید بسازیم که کارش ساخت فایل انیمیشن مار بر اساس نمودار مربع های گیت هابمون هست.
برای این کار، داخل ریپازیتوری خودتون یه پوشه به اسم .github بسازید و داخلش یه پوشه دیگه به اسم workflows ؛ حالا داخل پوشه workflows یه فایل به اسم snake.yml بسازید و کد زیر رو داخلش قرار بدید:

name: GitHub Snake Game



on:

  # Schedule the workflow to run daily at midnight UTC

  schedule:

    - cron: "0 0 * * *"



  # Allow manual triggering of the workflow

  workflow_dispatch:



  # Trigger the workflow on pushes to the main branch

  push:

    branches:

      - main



jobs:

  generate:

    runs-on: ubuntu-latest

    timeout-minutes: 10



    steps:

      # Step 1: Checkout the repository

      - name: Checkout Repository

        uses: actions/checkout@v3



      # Step 2: Generate the snake animations

      - name: Generate GitHub Contributions Snake Animations

        uses: Platane/snk@v3

        with:

          # GitHub username to generate the animation for

          github_user_name: ${{ github.repository_owner }}



          # Define the output files and their configurations

          outputs: |

            dist/github-snake.svg

            dist/github-snake-dark.svg?palette=github-dark

            dist/ocean.gif?color_snake=orange&color_dots=#bfd6f6,#8dbdff,#64a1f4,#4b91f1,#3c7dd9

        env:

          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}



      # Step 3: Deploy the generated files to the 'output' branch

      - name: Deploy to Output Branch

        uses: peaceiris/actions-gh-pages@v3

        with:

          github_token: ${{ secrets.GITHUB_TOKEN }}

          publish_dir: ./dist

          publish_branch: output

          # Optionally, you can set a custom commit message

          commit_message: "Update snake animation [skip ci]"

بعد از اینکه کد رو پیست کردید، فایل رو با کلیک روی دکمه سبز رنگ کامیت کنید (تصویر 1)

ساختار فایل ریپازیتوری شما باید به این شکل باشه:

YOUR_GITHUB_USERNAME/
├── .github/
│   └── workflows/
│       └── snake.yml
└── README.md

3️⃣ مرحله سوم: فعال کردن اکشن:
تو ریپازیتوری خودتون، به تب Action برید و از منوی سمت چپ روی گزینه All Workflows کلیک کنید. تو این قسمت میتونید یک سری workflow مربوط به ریپازیتوری خودتون رو مشاهده کنید که بین این گزینه ها یک یا دو مورد به اسم GitHub Snake Game وجود داره. (تصویر 2)

حالا دوباره از منوی سمت چپ روی گزینه GitHub Snake Game کلیک کنید. تو این قسمت دوباره یک لیست از workflow ها رو مشاهده میکنید. بالای لیست یک گزینه رو میتونید مشاهده کنید که نوشته:

This workflow has a workflow_dispatch event trigger.

سمت راست این گزینه یه دکمه با متن Run Workflow وجود داره.
1- روش کلیک کنید و برنچ main رو انتخاب کنید
2- روی دکمه سبز رنگ با متن Run Workflow کلیک کنید

(تصویر 3)

حالا بعد از 1 یا چند دقیقه اجرای workflow به پایان میرسه. بعد از کلیک روی گزینه Run Workflow باید به صف اجرا اضافه بشه و بعد از تکمیل شدن یه تیک سبز کنارش نمایش داده میشه (تصویر 4).

خب، حالا بعد از اجرا شدن workflow باید بریم به صفحه اصلی ریپازیتوری یا root. حالا تو قسمت برنچ ها میتونیم ببینیم که یه برنچ جدید به اسم output ایجاد شده. (تصویر 5).

اگه سوئیچ کنیم به برنچ output میتونیم ببینیم چند تا فایل ایجاد شده (تصویر 6)
این فایل ها انیمیشن مار رو تشکیل میدن و هر نیمه شب به صورت خودکار آپدیت میشن تا فعالیت های اخیر رو نمایش بدن.

خب حالا وقتشه بریم سراغ مرحله چهارم!


4️⃣ مرحله چهارم: اضافه کردن انیمیشن به پروفایل
این مرحله آخره و تنها کاری که باید انجام بدیم اینه که کد markdown انیمیشن رو به فایل README.md پروفایل اضافه کنیم!

برای انجام این کار کافیه برگردیم به برنچ main و روی گزینه ادیت فایل README کلیک کنیم، و بعد کد زیر رو درون فایل قرار بدیم:

<!-- Snake Game Animation -->
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_USERNAME/output/github-snake-dark.svg" />
  <source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_USERNAME/output/github-snake.svg" />
  <img alt="github-snake" src="https://raw.githubusercontent.com/YOUR_GITHUB_USERNAME/YOUR_GITHUB_USERNAME/output/github-snake.svg" />
</picture>

توی کد بالا قسمت YOUR_GITHUB_USERNAME رو با یوزرنیم خودتون جایگزین کنید!

انجام مرحله به مرحله این کار رو میتونید تو تصویر 7 ببینید!

تمام! حالا فقط کافیه از خروجی کار لذت ببریم!

اگه سوالی داشتید یا با مشکلی مواجه شدید میتونید تو کامنتا بپرسید 👇