Agregue insignias personalizadas de GitHub a su repositorio trucos CSS
Si ha dedicado tiempo a buscar repositorios de código abierto en GitHub, probablemente haya notado que la mayoría de ellos usan insignias en sus archivos README. Tomemos, por ejemplo, el repositorio oficial de React. Hay insignias de GitHub en todas partes del archivo README que informan información dinámica importante, como la última versión y si la compilación actual se está ejecutando.
Insignias como estas proporcionan una buena manera de resaltar información clave de almacenamiento. Incluso puede usar sus propios activos personalizados como insignias, como lo hace Next.js en su repositorio.
Pero lo más útil de las insignias de GitHub es que se actualizan de ellosEn lugar de codificar firmemente los valores en su LÉAME, las insignias de GitHub pueden aceptar cambios automáticamente desde un servidor remoto.
Analicemos cómo agregar insignias dinámicas de GitHub al archivo LÉAME de su propio proyecto. Comenzaremos con un generador en línea llamado badgen.net para crear algunas insignias básicas. Luego, haremos que nuestras insignias sean dinámicas conectándolas a nuestra propia función sin servidor a través de ServilletaFinalmente, llevaremos las cosas un paso más allá usando nuestros propios archivos SVG personalizados.
Primero: ¿Cómo funcionan las insignias?
Antes de comenzar a crear algunas insignias de GitHub, echemos un vistazo rápido a cómo se implementan. De hecho, es muy simple: las insignias son solo imágenesLos archivos .README se guardan en Markdown, y Markdown admite imágenes de la siguiente manera:
El hecho de que podamos incluir una URL a una imagen significa que la página de Markdown solicitará los datos de la imagen de un servidor cuando se muestre la página. Y entonces, si controlamos el servidor que tiene la imagen, ¡podemos cambiar qué imagen se devuelve usando la lógica que queramos!
Afortunadamente, tenemos varias opciones para implementar nuestra propia lógica de servidor sin toda la parte de "configuración del servidor". Para casos de uso básicos, podemos crear imágenes de insignias de GitHub con badgen.net utilizando sus plantillas predefinidas. Y otra vez, Servilleta nos permitirá codificar rápidamente una función sin servidor en nuestro navegador y luego implementarla como un punto final con el que pueden comunicarse nuestras insignias de GitHub.
Crea insignias con Badgen
Comencemos con la solución más simple para una credencial: una credencial estática mediante badgen.net. La API de Badgen usa plantillas de URL para crear insignias de plantilla sobre la marcha. El modelo de URL es el siguiente:
https://badgen.net/badge/:subject/:status/:color?icon=githubHay una lista completa de opciones que tiene para colores, íconos y más badgen.netPara este ejemplo, usemos estos valores:
:subject: Hola:status:: El mundo:color:: rojo:icon:: twitter
Nuestra URL final se ve así:
https://badgen.net/badge/hello/world/red?icon=twitterAgregue una insignia de GitHub al archivo README
Ahora necesitamos incrustar esta insignia en el archivo LÉAME de nuestro repositorio de GitHub. Podemos hacer esto en Markdown usando la sintaxis que vimos anteriormente:
Badgen ofrece muchas opciones diferentes, ¡así que lo animo a navegar por su sitio y jugar! Por ejemplo, una de las plantillas le permite mostrar cuántas veces se destaca un repositorio de GitHub. Aquí hay una insignia de estrella de GitHub para el repositorio Next.js como ejemplo:
https://badgen.net/github/stars/vercel/next.js¡Muy bien! Pero, ¿qué sucede si desea que su insignia muestre información que Badgen no admitió originalmente? Afortunadamente, Badgen tiene una plantilla de URL para usar sus propios puntos finales HTTPS para recuperar datos:
https://badgen.net/https/url/to/your/endpointPor ejemplo, digamos que queremos que nuestra insignia muestre el precio actual de bitcoin en dólares estadounidenses. Todo lo que necesitamos es un punto final personalizado que devuelva estos datos como JSON de la siguiente manera:
{
"color": "blue",
"status": "$39,333.7",
"subject": "Bitcoin Price USD"
}Asumiendo que nuestro punto final está disponible en https://some-endpoint.example.com/bitcoinpodemos pasar sus datos a Badgen usando el siguiente esquema de URL:
https://badgen.net/https/some-endpoint.example.com/bitcoin
¡Aún más genial ahora! Pero aún tenemos que crear el punto final que proporciona los datos de la insignia de GitHub. 🤔 Lo que nos lleva a...
Bagen + servilleta
Hay muchas formas de obtener su propio punto final HTTPS. Puede rotar un servidor con DigitalOcean o AWS EC2, o puede usar una opción sin servidor, como Google Cloud Functions o AWS Lambda; todos sin embargo, aún pueden volverse un poco complicados y molestos para nuestro caso de uso simple. Por eso sugiero Editor de características del navegador de servilletas para codificar e implementar un punto final sin ninguna instalación o configuración.
Ir al ejemplo de la insignia de bitcoin Servilleta para ver un punto final de ejemplo. Puede ver el código para recuperar el precio actual de bitcoin y devolverlo como JSON en el editor. Puede ejecutar el código desde el editor usted mismo o usar el punto final directamente.
Para usar el punto final Badgen, trabaje con el mismo esquema de URL anterior, solo que esta vez con el punto final Servilleta:
https://badgen.net/https/napkin-examples.npkn.net/bitcoin-badgeMás formas de personalizar las insignias de GitHub
Entonces deja bifurcar esta función para que podamos agregarle nuestro propio código personalizado. Haga clic en el botón Fork en la esquina superior derecha para hacerlo. Se le pedirá que cree una cuenta con una servilleta si aún no ha iniciado sesión.
Una vez que hayamos bifurcado con éxito la función, podemos agregar el código que queramos, usando todos los módulos npm que queramos. agreguemos Paquete Moment.js npm y actualice la respuesta del punto final para mostrar la hora en que el precio de bitcoin se actualizó por última vez directamente en nuestra insignia de GitHub:
import fetch from 'node-fetch'
import moment from 'moment'
const bitcoinPrice = async () => {
const res = await fetch("<https://blockchain.info/ticker>")
const json = await res.json()
const lastPrice = json.USD.last+""
const [ints, decimals] = lastPrice.split(".")
return ints.slice(0, -3) + "," + ints.slice(-3) + "." + decimals
}
export default async (req, res) => {
const btc = await bitcoinPrice()
res.json({
icon: 'bitcoin',
subject: `Bitcoin Price USD (${moment().format('h:mma')})`,
color: 'blue',
status: `\$${btc}`
})
}
Es posible que observe que la insignia tarda un tiempo en actualizarse la próxima vez que cargue el archivo README en GitHub. Esto se debe a que GitHub usa un mecanismo de proxy para dar servicio a las imágenes de íconos.
GitHub maneja las imágenes de íconos de esta manera para evitar abusos, como solicitudes de gran volumen o inyecciones de código JavaScript. No podemos controlar el servidor proxy de GitHub, pero afortunadamente no almacena en caché de manera demasiado agresiva (de lo contrario, violaría el propósito de las insignias. En mi experiencia, TTL es de aproximadamente 5 a 10 minutos.
Vale, última vez para el jefe.
Insignias SVG personalizadas con servilleta
Para nuestro último truco, usemos Napkin para enviar un SVG nuevo para que podamos usar imágenes personalizadas, como vimos en el repositorio Next.js.
Un caso común de uso de insignias de GitHub muestra el estado actual de un sitio web. Vamos a hacerlo. Estos son los dos estados que admitirá nuestra insignia:
Badgen no es compatible con SVG personalizado, por lo que haremos que nuestra insignia se comunique directamente con nuestro punto final de servilleta. Vamos a crear una nueva función para servilletas para esto, llamada site-status-badge.
El código en esta función consulta example.com. Si el estado de la solicitud es 200, devuelve la insignia verde como un archivo SVG; de lo contrario, devuelve la insignia roja. Puede comprobar la funciónpero incluiré el código aquí como referencia:
import fetch from 'node-fetch'
const site_url = "<https://example.com>"
// full SVGs at <https://napkin.io/examples/site-status-badge>
const customUpBadge=""
const customDownBadge=""
const isSiteUp = async () => {
const res = await fetch(site_url)
return res.ok
}
export default async (req, res) => {
const forceFail = req.path?.endsWith('/400')
const healthy = await isSiteUp()
res.set('content-type', 'image/svg+xml')
if (healthy && !forceFail) {
res.send(Buffer.from(customUpBadge).toString('base64'))
} else {
res.send(Buffer.from(customDownBadge).toString('base64'))
}
}Las posibilidades son bastante bajas de que example.com el sitio se descargará algún día, así que agregue forceFail caso para simular este escenario. Ahora podemos agregar un /400 después de la URL del punto final de la servilleta para probarlo:
Muy bonito 😎
¡Y aquí está! Tu entrenamiento de la insignia de GitHub está completo. Pero el viaje está lejos de terminar. Hay un millón de cosas diferentes en las que insignias como esta son extremadamente útiles. ¡Diviértete experimentando y haz que README brille! ✨
Deja una respuesta