Contador de estrellas de un respotiorio de github

mié, 11 ene 2023

Este es un contador de estrellas para tu respositorio de Github. Puedes usarlo en tu sitio web o blog.

¿Cómo usarlo? Simplemente usa la API y obtendrás la cantidad de estrellas.

1. Crea un token de github

Utilice la variable de entorno para almacenar el token.

github.ts

const octokit = new Octokit({ auth: process.env.GITHUB_TOKEN });

2. Write the GET method

github.ts

const REPOSITORY = {
    owner: 'xabierlameiro',
    repo: 'the-last-dance',
};
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    try {
        const {
            data: { stargazers_count },
        } = await octokit.rest.repos.get(REPOSITORY);
        res.status(200).json(stargazers_count);
    } catch (err: Error) {
        res.status(500).json({ statusCode: 500, message: err.message });
    }
}

3. Úselo en su componente

No es necesario usar el gancho useEffect para obtener información. Puede usar los ganchos getStaticProps o getServerSideProps. En mi caso, uso este enlace porque el blog es un sitio estático y el punto final no está disponible en el tiempo de compilación.

StarCounter.tsx

const StarCounter = () => {
    const [stars, setStars] = React.useState(0);
    React.useEffect(() => {
        (async () => {
            try {
                const stars = await fetch('/api/github').then((res) => res.json());
                setStars(stars);
            } catch (e) {
                setStars(-1);
            }
        })();
    }, []);
    if (stars === -2)
        return (
            <Container>
                <AiFillStar className={styles.starred} title="Starred" />
            </Container>
        );
    if (stars === -1)
        return (
            <Container>
                <RxCross2 className={styles.error} title="Error endpoint" />
            </Container>
        );
    if (stars === 0)
        return (
            <Container>
                <FaSpinner className={styles.spinner} title="Loading stars" />
            </Container>
        );
    return (
        <Container>
            <span>{stars}</span>
        </Container>
    );
};
export default StarCounter;

Ahora mismo solo tienes que mirar hacia arriba para ver el resultado, el contador está resaltado con una estrella amarilla.

Por favor, si crees que este contenido te ha ayudado o te gusta, dame tu estrella. 🤩