El botón de «me gusta»
para repos de GitHub The “like” button
for GitHub repositories

Dale like a los dos paquetes Like the two packages

Los dos paquetes de ghlike viven en el mismo repositorio, así que una sola star los cubre. Estos botones son widgets reales <gh-like> apuntando a 686f6c61/ghlike: pruébalos ahora mismo. Both ghlike packages live in the same repository, so one star covers them both. The buttons below are real <gh-like> widgets pointing at 686f6c61/ghlike — try them right now.

pipx install ghlike  # o · or: npm install -g ghlike

<gh-like repo="686f6c61/ghlike" variant="pill"></gh-like>

Activa el like con un clic — 2 pasos Enable one-click likes — 2 steps

El daemon es la vía sin extensión: instala el CLI, déjalo corriendo en un terminal, y todos los botones <gh-like> de esta página pasan a dar like con un clic usando la sesión de github.com de tu navegador. The daemon is the extension-free path: install the CLI, keep it running in a terminal, and every <gh-like> button on this page becomes one-click, using your browser’s github.com session.

Paso 1 · Instala el CLI (elige uno): Step 1 · Install the CLI (pick one):

pipx install ghlike

npm install -g ghlike

Paso 2 · Arranca el daemon y vuelve aquí: Step 2 · Start the daemon and come back here:

$ ghlike daemon
ghlike daemon escuchando en http://127.0.0.1:8469
Ctrl+C para parar…
# el indicador de arriba pasa a verde · the indicator above turns green

¿Qué pasa al hacer clic? What happens when you click?

El widget se adapta a lo que tenga instalado el visitante. Nunca queda roto: The widget adapts to whatever the visitor has installed. It is never broken:

Cambia los botones a tu gusto Make the buttons yours

Tres niveles: elige una variante predefinida con un atributo, retoca cualquier color con variables CSS, o entra al detalle con shadow parts. Todo se controla desde el CSS de tu propia página — sin reescribir el widget. Three levels: pick a predefined variant with one attribute, tweak any color with CSS variables, or go deeper with shadow parts. Everything is controlled from your own page’s CSS — no need to rewrite the widget.

1 · Las 5 variantes — atributo variant1 · The 5 variants — variant attribute

<gh-like repo="owner/repo"></gh-like>                          classic · default
<gh-like repo="owner/repo" variant="pill"></gh-like>             pill
<gh-like repo="owner/repo" variant="outline"></gh-like>           outline
<gh-like repo="owner/repo" variant="glass"></gh-like>             glass · héroes/heroes
<gh-like repo="owner/repo" variant="block"></gh-like>             block · CTA

2 · Variables CSS — --ghlike-*2 · CSS variables — --ghlike-*

Cualquier valor del botón se cambia desde tu hoja de estilos. Ejemplo — un botón rosa: Every button value can be changed from your stylesheet. Example — a pink button:

gh-like.mi-estilo {
  /* fondo · background */        --ghlike-bg: #fff0f6;
  /* borde · border */           --ghlike-border: #ff2d87;
  /* texto · text */             --ghlike-fg: #c2185b;
  /* estrella · star */          --ghlike-star: #ff2d87;
  /* esquinas · corners */       --ghlike-radius: 4px;
  /* relleno · padding */        --ghlike-padding: 8px 16px;
}

Referencia completa de variables (valores por defecto del tema claro): Full variable reference (light-theme defaults):

3 · Shadow parts — ::part()3 · Shadow parts — ::part()

El botón expone tres partes del shadow DOM que puedes estilizar directamente: ::part(button), ::part(label) y ::part(count). The button exposes three shadow-DOM parts you can style directly: ::part(button), ::part(label) and ::part(count).

gh-like::part(button) { font-weight: 700; letter-spacing: .4px; }
gh-like::part(count) { font-size: 13px; }

4 · Modo oscuro y tema de tu web4 · Dark mode and your site’s theme

La variante classic sigue prefers-color-scheme del sistema por defecto. Si tu web cambia de tema con un atributo (como esta página), los estilos de la página siempre ganan a los internos del widget — esta es la técnica para sincronizarlos: The classic variant follows the system’s prefers-color-scheme by default. If your site switches themes with an attribute (like this page does), page styles always win over the widget’s internal ones — this is the technique to sync them:

/* cuando TU web está en oscuro · when YOUR site is dark */
html[data-theme="dark"] gh-like {
  --ghlike-bg: #26282d; --ghlike-fg: #e6edf3;
  --ghlike-border: #42474e; --ghlike-star: #d29922;
}

5 · Pruébalo en vivo5 · Try it live

La extensión: likes con un clic para tus visitantes The extension: one-click likes for your visitors

Se instala una vez y, a partir de ahí, todo botón <gh-like> de la web funciona con un clic usando la sesión de github.com del visitante. Install it once and, from then on, every <gh-like> button on the web works with one click using the visitor’s github.com session.

Qué pasa por dentro al hacer clicWhat happens under the hood on click

1. El content script de la web visitada (widget-bridge.js) intercepta el clic sobre <gh-like>. The content script on the visited site (widget-bridge.js) intercepts the click on <gh-like>.
2. El service worker abre una pestaña en segundo plano del repo en github.com. The service worker opens one background tab of the repo on github.com.
3. El script de github.com pulsa el botón de Star real — el JS de la propia página envía la petición con su token CSRF — y verifica el nuevo estado. The github.com script clicks the real Star button — the page’s own JS sends the request with its CSRF token — and verifies the new state.
4. La pestaña se cierra y el widget pasa a «Liked». The tab closes and the widget switches to “Liked”.

Instalación (modo desarrollador)Install (developer mode)

Navegadores Chromium (Brave, Chrome, Edge…): Chromium browsers (Brave, Chrome, Edge…):

# 1 · abre brave://extensions (o chrome://extensions) y activa «Developer mode»
#   open brave://extensions (or chrome://extensions) and enable “Developer mode”
# 2 · «Load unpacked» → selecciona la carpeta extension/ del repo
#   “Load unpacked” → select the repo’s extension/ folder

# o lanza una instancia dedicada · or launch a dedicated instance:
brave --load-extension=$PWD/extension http://127.0.0.1:8123/site/

Seguridad y privacidad Security & privacy

ghlike toca sesiones de navegador, así que el diseño entero está pensado para poder auditarse de un vistazo. ghlike touches browser sessions, so the whole design is built to be auditable at a glance.

Limitaciones: solo navegadores Chromium (Firefox no implementa CDP) · cada operación del CLI tarda ~8–12 s · si GitHub cambia el markup del botón de Star, se arregla con una línea de selector. Limitations: Chromium browsers only (Firefox has no CDP) · each CLI operation takes ~8–12 s · if GitHub changes the Star button markup, one selector line fixes it.