To prawdziwe rendery z API z przykładowymi wartościami z tabeli niżej. Przełącz rozmiar wyżej: ten sam szablon układa się w każdym z 6 rozmiarów — wyślij size albo sizes w zapytaniu.
Dla produktów SaaS, narzędzi programistycznych i dokumentacji publikujących wskazówkę na każdy skrót. Znane klawisze dostają symbol i nazwę z danej platformy (Cmd to ⌘ command na macOS i Ctrl na Windows i Linuksie; podobnie Shift, Option, Alt, Enter, Tab, Esc i strzałki), każdy inny jest wypisany tak, jak go podasz. Klawisze rosną albo maleją zależnie od ich liczby, kombinacja dłuższa niż pięć kończy się klawiszem „+N”, a bez klawiszy stoją dwa puste. W szerokich i kwadratowych kadrach klawisze stoją w rzędzie, w pionowych biegną z góry na dół.
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 |
|---|---|---|---|
action |
tekst | Co robi skrót — jako nagłówek. domyślnie: Shortcut | Open the command palette |
keys |
tekst |
Klawisze rozdzielone ;, po kolei, np. Cmd;Shift;P. Nazwy modyfikatorów, jak Cmd, Ctrl, Shift, Alt czy Option, zamieniają się w symbole.
|
Cmd;Shift;P |
platform |
tekst | mac, windows albo linux; ustala symbole modyfikatorów i plakietkę w prawym górnym rogu. jedna z wartości: mac | windows | linux domyślnie: mac | mac |
app |
tekst | Nazwa produktu obok logo. | Northwind Studio |
tip |
tekst | Jedno–dwa zdania pod klawiszami. | Jump to any template, render or setting without leaving the keyboard. |
logo |
adres obrazka | Logo produktu, kwadratowe. | 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: #38bdf8 | #38bdf8 |
theme |
dark | light | Schemat kolorów: dark albo 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://shareglint.com/v1/images?wait=true" \
-H "Authorization: Bearer sk_live_YOUR_KEY" \
-H "Content-Type: application/json" \
-d '{
"template": "keyboard-shortcut",
"modifications": {
"action": "Open the command palette",
"keys": "Cmd;Shift;P",
"platform": "mac",
"app": "Northwind Studio",
"tip": "Jump to any template, render or setting without leaving the keyboard.",
"logo": "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://shareglint.com/i/acc_YOUR_ACCOUNT_ID/keyboard-shortcut.png?action=Open%20the%20command%20palette&app=Northwind%20Studio&keys=Cmd%3BShift%3BP&platform=mac&tip=Jump%20to%20any%20template%2C%20render%20or%20setting%20without%20leaving%20the%20keyboard.&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://shareglint.com/v1/templates/library/keyboard-shortcut/copy" \
-H "Authorization: Bearer sk_live_YOUR_KEY"Więcej szablonów: Dla programistów
Repozytorium GitHub
Endpoint API
Fragment kodu
Nowa wersja pakietu
Wyniki Lighthouse
Biuletyn bezpieczeństwa
Okno przeglądarki
Stos technologiczny
Przepis automatyzacji
Wszystkie szablony w kategorii Dla programistów (11) → · Wszystkie szablony →