Contador de estrelas dun respotiorio de github

mér., 11 de xan. de 2023

Este é un contador de estrelas para a túa respositorio de Github. Podes usalo no teu sitio web ou blogue.

Como usalo? Simplemente usa a API e obterás a cantidade de estrelas.

1. Crea un token de github

Utilice a variable de contorna para almacenar o token.

github.ts

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

2. Escribe o método GET

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. Úseo no seu compoñente

Non é necesario usar o gancho useEffect para obter información. Pode usar os ganchos getStaticProps ou getServerSideProps. No meu caso, uso esta ligazón porque o blogue é un sitio estático e o punto final non está dispoñible no tempo 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;

Agora mesmo só tes que mirar cara arriba para ver o resultado, o contador está resaltado cunha estrela amarela.

Por favor, se crees que este contido axudouche ou che gusta, dáme a túa estrela. 🤩