Diseños

ghchronicle -card-layouts

Los imprime con los campos que muestra cada uno por omisión. Cada diseño de abajo tiene su propia sección, que dice su familia, su movimiento, el ancho al que se dibuja y esos campos, sobre una imagen de la tarjeta. Cada tarjeta se muestra en la paleta en la que está esta página, clara u oscura; todos los diseños dibujan las dos, y auto mete ambas en un fichero.

Donde un diseño se anima, la animación se reproduce una vez y se asienta en la tarjeta estática completa, así que cada imagen de abajo es ese fotograma final y no un instante intermedio. Cómo se fija y qué la desactiva está en Movimiento.

Las dos familias

La familia chronicle es el aspecto propio de esta herramienta. La familia github usa la paleta Primer de GitHub y números monoespaciados para que la tarjeta encaje en un README de perfil como si la hubiera dibujado GitHub.

summary

La tarjeta original: título, dos filas de números, un sparkline y los repositorios con más estrellas.

Familia: chronicle
Movimiento: quieto
Ancho: 495 px, se dibuja de 300 a 1200
Campos por omisión: stars, forks, followers, repos, contributions, views, visitors, sparkline, top_repos

El diseño summary: un título, dos filas de números grandes, un sparkline de contribuciones y una lista de los repositorios con más estrellas — Terminal window

github-stats

La caja propia de GitHub: una banda de cabecera, filas de cuatro números monoespaciados y una barra de reparto de lenguajes con su leyenda. El más ancho de todos, y el que parece más nativo en un README de perfil. Los números cuentan hacia arriba, y la barra crece desde su borde izquierdo en cuanto se asientan.

Familia: github
Movimiento: se reproduce una vez
Ancho: 800 px, se dibuja de 600 a 1200
Campos por omisión: repos, stars, forks, followers, commits, pull_requests, views, clones, languages

El diseño github-stats reproducido una vez: una banda de cabecera sobre filas de cuatro números monoespaciados que cuentan, y una barra horizontal de reparto de lenguajes que crece desde la izquierda junto a su leyenda — Terminal window

github-compact

Una fila de números monoespaciados bajo una banda de cabecera fina.

Familia: github
Movimiento: quieto
Ancho: 495 px, se dibuja de 300 a 1200
Campos por omisión: stars, forks, followers, repos, commits

El diseño github-compact: una banda de cabecera fina sobre una única fila de números monoespaciados — Terminal window

badge-row

Una fila de píldoras de 20 píxeles, una por número, para una línea de README.

Familia: chronicle
Movimiento: quieto
Ancho: sigue al contenido
Campos por omisión: stars, forks, followers, repos, contributions

Tamaño real Tamaño real

Orden para badge-row

Binario

ghchronicle -card-layout badge-row -card-theme both -card-only -card card.svg -config config.yaml

GitHub Action

- uses: jmrplens/ghchronicle@v1
  with:
    token: ${{ secrets.GHCHRONICLE_TOKEN }}
    mode: card
    card: generated/card.svg
    card-layout: badge-row
    card-theme: both

Un banner de ancho completo y 60 píxeles de alto: el login a la izquierda, los números repartidos, y el sparkline dibujándose solo por detrás.

Familia: chronicle
Movimiento: se reproduce una vez
Ancho: 800 px, se dibuja de 500 a 1200
Campos por omisión: stars, forks, followers, contributions, sparkline

Tamaño real Tamaño real

Orden para wide-banner

Binario

ghchronicle -card-layout wide-banner -card-theme both -card-only -card card.svg -config config.yaml

GitHub Action

- uses: jmrplens/ghchronicle@v1
  with:
    token: ${{ secrets.GHCHRONICLE_TOKEN }}
    mode: card
    card: generated/card.svg
    card-layout: wide-banner
    card-theme: both

sparkline-hero

El sparkline de contribuciones es toda la tarjeta, con hasta tres números superpuestos. La línea se dibuja sola al cargar.

Familia: chronicle
Movimiento: se reproduce una vez
Ancho: 495 px, se dibuja de 300 a 1200
Campos por omisión: contributions, stars, followers, sparkline

El diseño sparkline-hero reproducido una vez: un sparkline de contribuciones grande que se dibuja llenando la tarjeta con tres números superpuestos — Terminal window

language-ring

Un donut de reparto de lenguajes con la leyenda al lado y una fila de números destacados. Cada porción se dibuja alrededor del anillo detrás de la anterior, y la leyenda aparece cuando el donut está completo.

Familia: github
Movimiento: se reproduce una vez
Ancho: 495 px, se dibuja de 400 a 1200
Campos por omisión: languages, stars, repos

El diseño language-ring reproducido una vez: un gráfico de donut cuyas porciones de lenguaje se dibujan una detrás de otra, con una leyenda que aparece al lado y una fila de números destacados — Terminal window

repo-list

Los repositorios con más estrellas como contenido principal: punto de lenguaje, estrellas y una barra por fila, con los totales debajo.

Familia: github
Movimiento: quieto
Ancho: 495 px, se dibuja de 300 a 1200
Campos por omisión: top_repos, stars, forks, repos

El diseño repo-list: una fila por repositorio con un punto de lenguaje, el número de estrellas y una barra proporcional, con totales debajo — Terminal window

activity-heatmap

Todo el calendario de contribuciones que quepa en el ancho, hasta un año de él, como los cuadrados verdes de GitHub, con hasta tres números al lado. El número de semanas no es una cifra fija: la rejilla ocupa el sitio que le dejan los números de al lado, así que termina donde termina la tarjeta en vez de quedarse a un tercio del final. Con el ancho que declara este diseño son veintitrés semanas, con su mínimo dieciséis, y -card-width en el extremo lejano que dicen sus datos dibuja el año entero que guarda el recolector. Una cuenta con cifras de siete dígitos se lleva una columna más ancha y le deja a la rejilla una o dos semanas menos, que es la misma regla vista del otro lado: con el ancho que declara este diseño, un millón de contribuciones son veintidós semanas en vez de veintitrés, y seis dígitos siguen cabiendo dentro de las etiquetas. El extremo lejano es donde cae el año para los tres números que este diseño dibuja por omisión, así que una tarjeta a la que se le piden menos, o números con etiquetas más cortas, llega al año antes de él y le sobra sitio al final: -card-fields sparkline dibuja su año entero bastante antes del extremo lejano. Las semanas aparecen desde la izquierda, y la ola cruza la rejilla en 0,22 s tenga las semanas que tenga, así que el calendario se llena como una ola de la misma duración a cualquier ancho.

Familia: github
Movimiento: se reproduce una vez
Ancho: 495 px, se dibuja de 400 a 891
Campos por omisión: sparkline, contributions, commits, pull_requests

El diseño activity-heatmap reproducido una vez: veintitrés semanas de cuadrados de contribución en la escala verde de GitHub que aparecen desde la izquierda, con tres números al lado — Terminal window

animated-counters

Números que cuentan hacia arriba al cargar sobre un sparkline que se dibuja solo, asentándose en la tarjeta estática.

Familia: chronicle
Movimiento: se reproduce una vez
Ancho: 495 px, se dibuja de 300 a 1200
Campos por omisión: stars, forks, followers, repos, contributions, views, sparkline

El diseño animated-counters reproducido una vez: una rejilla de números grandes que cuentan sobre un sparkline de contribuciones que se dibuja — Terminal window

terminal

Una ventana de terminal con la marca del proyecto en su barra de título, una línea de salida por número y otra por repositorio. Los números se teclean solos, línea a línea, bajo una tapa pintada del color de fondo de la propia tarjeta.

El cursor del prompt es el único movimiento sin final de la tarjeta, y hace algo distinto en cada modo. Con once se queda encendido mientras llegan las cifras, parpadea un par de veces cuando aterriza la última y se queda encendido, que es el estado en el que descansa la tarjeta terminada. Con loop parpadea desde que se dibuja la ventana y no para, porque un cursor parpadea por la razón por la que una terminal está abierta, no por la razón por la que una tarjeta ha terminado. El tecleo ocurre una sola vez en los dos casos.

Familia: chronicle
Movimiento: se reproduce una vez, o en bucle
Ancho: 495 px, se dibuja de 360 a 1200
Campos por omisión: stars, forks, followers, repos, contributions, top_repos

El diseño terminal reproducido una vez: una ventana de terminal con la marca del proyecto en su barra de título, cuyas líneas de salida tienen cada una un número que se teclea solo bajo un cursor de bloque encendido que empieza a parpadear cuando aterriza la última cifra, y la página también puede reproducirlo en bucle, donde el tecleo sigue ocurriendo una vez y el cursor parpadea desde el principio y no para — Terminal window

ticker

Una banda de píldoras, una por número y otra por repositorio, que se desplaza de derecha a izquierda. El contenido se repite de punta a punta y la banda avanza exactamente una copia, así que la imagen al final de una pasada es la imagen de su comienzo y el bucle no tiene salto. Reproducido una vez, hace una sola pasada y vuelve al inicio. La banda se desplaza a velocidad fija, así que una tarjeta con más contenido tarda en dar la vuelta más de lo que cualquier otro diseño tarda en asentarse.

Familia: chronicle
Movimiento: se reproduce una vez, o en bucle
Ancho: 800 px, se dibuja de 400 a 1200
Campos por omisión: stars, forks, followers, repos, contributions, commits, views, top_repos

El diseño ticker reproducido una vez: una banda ancha de píldoras redondeadas, una por número y otra por repositorio, que se desplaza de derecha a izquierda bajo el nombre de la cuenta, y la página también puede reproducirlo en bucle — Terminal window

language-bars

Una barra de ancho completo por lenguaje, cada una creciendo desde su propio borde izquierdo detrás de la anterior, con el nombre y el porcentaje llegando en cuanto su barra se detiene. Es el diseño que da a cada lenguaje una línea propia, donde language-ring los muestra todos en un donut y github-stats en una sola barra.

Familia: github
Movimiento: se reproduce una vez
Ancho: 495 px, se dibuja de 360 a 1200
Campos por omisión: languages

El diseño language-bars reproducido una vez: una barra de ancho completo por lenguaje que crece desde su borde izquierdo, una detrás de otra, con el nombre del lenguaje y su porcentaje llegando detrás de cada barra — Terminal window

Movimiento

Cada sección de arriba dice el movimiento de su diseño, y hay un hecho que decide lo que esa línea puede decir: una revelación nunca se repite. Una cifra que ya ha contado, una barra que ya ha crecido y una línea que ya se ha dibujado no se quitan, así que -card-motion loop dibuja exactamente la tarjeta que dibuja once en todos los diseños salvo los dos cuyo movimiento no termina, el cursor parpadeante de terminal y la banda que se desplaza de ticker. Esos dos son los que llevan el botón de bucle bajo su imagen, y el razonamiento está en Un bucle nunca repite.

Ancho

Cada diseño declara el ancho con el que se dibuja y los dos extremos fuera de los cuales se niega a hacerlo, y su propia sección de arriba dice los tres. -card-width en el binario, y card-width en la Action, piden otro: cualquiera entre los dos extremos de ese diseño. Un ancho fuera de ahí se rechaza antes de la pasada, nombrando los dos, y -card-layouts los imprime. Si no se dice nada, la tarjeta sale con el ancho de su diseño, que es el ancho con el que salían todas antes de que existiera la opción. badge-row no declara ninguno de los tres, porque una fila de píldoras estirada a un ancho fijo tendría huecos; su ancho sigue al contenido, y la opción ni se lo cambia ni la rechaza.

El extremo cercano es donde una columna deja de caber. El lejano casi siempre es solo una defensa contra una errata, porque a un diseño con más sitio lo que le pasa es que reparte el mismo contenido por él, y uno al que se le pedían veinte mil se dibujaba de veinte mil unidades. activity-heatmap es el que tiene uno de verdad, y es la razón de que los extremos sean los de cada diseño y no un par para todos: lee el ancho en vez de limitarse a que lo dimensione, y calcula cuántas semanas del calendario de contribuciones caben en el sitio que le deja, así que la misma tarjeta son dieciséis semanas en su extremo cercano, veintitrés con el ancho que declara y el año entero que guarda el recolector en su extremo lejano. Más allá ya no hay calendario que dibujar, así que el extremo lejano es justo el ancho en el que cae el año y a la tarjeta nunca se le pide que llene un sitio para el que no tiene nada.

Campos que un diseño no puede dibujar

Cada diseño declara qué campos soporta. Pedir uno que no, como top_repos en github-compact, lo descarta en silencio. Pedir un nombre que no está en el vocabulario en absoluto es un error que lista los válidos.

Doce de los quince campos son números, y todos los diseños admiten los doce. Solo están restringidos los tres que necesitan sitio propio:

Campo	Lo dibujan
`languages`	`summary`, `github-stats`, `language-ring`, `language-bars`
`top_repos`	`summary`, `github-stats`, `repo-list`, `terminal`, `ticker`
`sparkline`	`summary`, `github-stats`, `wide-banner`, `sparkline-hero`, `activity-heatmap`, `animated-counters`

ghchronicle -card-layouts imprime los diseños con los campos que dibuja cada uno por omisión.

Por dónde seguir

La tarjeta es lo que las dibuja, y cómo poner una en un README.
Llamarlo desde un programa es la forma soportada de sacar una desde otro lenguaje.