github-repo

Szablon obrazka OG: repozytorium GitHub

Właściciel i nazwa repozytorium, opis, gwiazdki, forki i język — karta repozytorium.

Szablon obrazka Open Graph „repozytorium GitHub” wyrenderowany przez Image API

To prawdziwy render z API z przykładowymi wartościami z tabeli niżej, w rozmiarze 1200×630.

Dla projektów open source, stron pakietów i blogów programistycznych. Płaska i biała jak karty repozytoriów, które programiści już znają, z kolorem języka jako paskiem u dołu — ustaw accent na kolor swojego języka.

Pola

Każde pole jest opcjonalne. Za długi tekst zmniejsza się, zamiast wychodzić poza kadr; pole obrazka przyjmuje publiczny adres URL, który pobieramy po naszej stronie.

Pole Typ Opis Przykład
repo tekst Nazwa repozytorium. domyślnie: repository og-kit
owner tekst Właściciel repozytorium (użytkownik albo organizacja). northwind
description tekst Opis repozytorium. Typed helpers for generating Open Graph images at build time and on the edge.
stars tekst Liczba gwiazdek, np. 12.4k. 12.4k
forks tekst Liczba forków, np. 1.1k. 1.1k
language tekst Główny język programowania. Ustaw accent na jego kolor. TypeScript
site tekst Host w rogu, np. github.com. github.com
avatar adres obrazka Awatar właściciela albo logo projektu. https://example.com/images/logo-northwind.png
accent kolor Kolor marki w zapisie hex, np. #6366f1. Barwi przyciski, wyróżnienia i poświatę w tle. domyślnie: #3178c6 #3178c6
theme dark | light Schemat kolorów: dark albo light. domyślnie: light —

Wyrenderuj go jednym żądaniem

Slug podajesz jako template. W odpowiedzi dostajesz adres gotowego PNG; ?wait=true trzyma połączenie, aż obrazek będzie gotowy.

curl -X POST "https://imageapi.benchkithq.com/v1/images?wait=true" \
  -H "Authorization: Bearer sk_live_YOUR_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "template": "github-repo",
    "modifications": {
        "repo": "og-kit",
        "owner": "northwind",
        "description": "Typed helpers for generating Open Graph images at build time and on the edge.",
        "stars": "12.4k",
        "forks": "1.1k",
        "language": "TypeScript",
        "site": "github.com",
        "avatar": "https://example.com/images/logo-northwind.png"
    }
}'

Albo wklej podpisany adres w og:image

Dla stron statycznych, Webflow, Shopify i narzędzi no-code: pola idą w query stringu, a całość podpisujesz swoim sekretem. Pierwsze żądanie renderuje obrazek, każde kolejne to przekierowanie na gotowy plik. Jak policzyć podpis.

<meta property="og:image" content="https://imageapi.benchkithq.com/i/acc_YOUR_ACCOUNT_ID/github-repo.png?description=Typed%20helpers%20for%20generating%20Open%20Graph%20images%20at%20build%20time%20and%20on%20the%20edge.&forks=1.1k&language=TypeScript&owner=northwind&repo=og-kit&site=github.com&stars=12.4k&s=YOUR_SIGNATURE">

Dopasuj do siebie

accent i theme zmieniasz w każdym żądaniu. Jeśli chcesz więcej, skopiuj szablon na swoje konto: dostajesz zwykły szablon HTML z tymi samymi polami, który edytujesz w panelu albo przez API. Jeśli slug jest na Twoim koncie wolny, kopia go przejmuje — Twoje integracje przechodzą na Twoją wersję bez zmiany jednej linijki.

curl -X POST "https://imageapi.benchkithq.com/v1/templates/library/github-repo/copy" \
  -H "Authorization: Bearer sk_live_YOUR_KEY"

Więcej szablonów obrazków OG

Wszystkie szablony →