# Diseños Trece diseños en dos familias visuales, con lo que dibuja cada uno por omisión, cuáles se animan y cuáles pueden seguir moviéndose. Source: https://jmrplens.github.io/ghchronicle/es/card/layouts/ ```sh 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](/ghchronicle/es/card/#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. > **La orden bajo cada tarjeta** > > Bajo cada imagen, **Orden para** abre la orden que dibuja esa tarjeta a partir > de tu propia cuenta, y la misma tarjeta como paso de la > [Action](/ghchronicle/es/install/actions/#una-tarjeta-en-el-readme-de-tu-perfil). > `config.yaml` es tu configuración, y `-card-theme both` escribe dos ficheros, > `card.svg` y `card_dark.svg`, que es como una página o un README muestran la > tarjeta en su propia paleta. En las dos tarjetas que hacen bucle, pulsar el > botón de bucle añade `-card-motion loop`. Los números que dibuja una tarjeta > se eligen con `-card-fields`, y todas las opciones están en [la > tarjeta](/ghchronicle/es/card/#las-opciones). ## 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](../../../../assets/card-summary.svg) - **Binario** ```sh ghchronicle -card-layout summary -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: summary card-theme: both ``` ## 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](../../../../assets/card-github-stats.svg) - **Binario** ```sh ghchronicle -card-layout github-stats -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: github-stats card-theme: both ``` ## 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](../../../../assets/card-github-compact.svg) - **Binario** ```sh ghchronicle -card-layout github-compact -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: github-compact card-theme: both ``` ## 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` ![El diseño badge-row: una fila horizontal de píldoras pequeñas, cada una con una etiqueta y un número](../../../../assets/card-badge-row.svg) - **Binario** ```sh ghchronicle -card-layout badge-row -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: badge-row card-theme: both ``` ## wide-banner 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` ![El diseño wide-banner reproducido una vez: un banner ancho y bajo con el login a la izquierda, números repartidos y un sparkline que se dibuja detrás](../../../../assets/card-wide-banner.svg) - **Binario** ```sh ghchronicle -card-layout wide-banner -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - 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](../../../../assets/card-sparkline-hero.svg) - **Binario** ```sh ghchronicle -card-layout sparkline-hero -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: sparkline-hero card-theme: both ``` ## 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](../../../../assets/card-language-ring.svg) - **Binario** ```sh ghchronicle -card-layout language-ring -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: language-ring card-theme: both ``` ## 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](../../../../assets/card-repo-list.svg) - **Binario** ```sh ghchronicle -card-layout repo-list -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: repo-list card-theme: both ``` ## 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](../../../../assets/card-activity-heatmap.svg) - **Binario** ```sh ghchronicle -card-layout activity-heatmap -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: activity-heatmap card-theme: both ``` ## 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](../../../../assets/card-animated-counters.svg) - **Binario** ```sh ghchronicle -card-layout animated-counters -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: animated-counters card-theme: both ``` ## 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](../../../../assets/card-terminal.svg) - **Binario** ```sh ghchronicle -card-layout terminal -card-theme both -card-only -card card.svg -config config.yaml ``` La imagen en bucle: ```sh ghchronicle -card-layout terminal -card-theme both -card-only -card card.svg -config config.yaml -card-motion loop ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: terminal card-theme: both ``` La imagen en bucle: ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: terminal card-theme: both card-motion: loop ``` ## 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](../../../../assets/card-ticker.svg) - **Binario** ```sh ghchronicle -card-layout ticker -card-theme both -card-only -card card.svg -config config.yaml ``` La imagen en bucle: ```sh ghchronicle -card-layout ticker -card-theme both -card-only -card card.svg -config config.yaml -card-motion loop ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: ticker card-theme: both ``` La imagen en bucle: ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: ticker card-theme: both card-motion: loop ``` ## 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](../../../../assets/card-language-bars.svg) - **Binario** ```sh ghchronicle -card-layout language-bars -card-theme both -card-only -card card.svg -config config.yaml ``` - **GitHub Action** ```yaml - uses: jmrplens/ghchronicle@v1 with: token: ${{ secrets.GHCHRONICLE_TOKEN }} mode: card card: generated/card.svg card-layout: language-bars card-theme: both ``` ## 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](/ghchronicle/es/card/#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](/ghchronicle/es/card/) es lo que las dibuja, y cómo poner una en un README. - [Llamarlo desde un programa](/ghchronicle/es/reference/subprocess/) es la forma soportada de sacar una desde otro lenguaje.