Use a API do GitHub para exibir código em um aplicativo React

Eu queria exibir algum código de um dos meus repositórios do GitHub em um aplicativo React e queria que ele fosse atualizado automaticamente no site quando eu enviasse uma nova versão.

Eu queria isso para uma pequena biblioteca de componentes que eu estava fazendo para mim, para que eu pudesse ver a versão mais recente do componente do repositório. Para fazer isso, usei a API do GitHub e o pacote de realce de sintaxe Prism.

1. Adicione o pacote do cliente GitHub e o Prism para realce de sintaxe.

npm i @octokit/rest react-prism axios

2. Autentique-se no GitHub a partir do seu aplicativo React.

• Crie um token de acesso pessoal aqui para autenticar no GitHub a partir do navegador.
• Você deve estar logado para acessar o token. Isso gerará um token Oauth na forma de uma string a ser usada. Copie-o porque só estará acessível uma vez.
• Criei um módulo JS chamado octokit.js e importei o Octokit.
• Crie uma nova instância do GH. Os únicos parâmetros necessários são o token Oauth para authe um userAgent.

import { Octokit } from "@octokit/rest"  
export const octokit = new Octokit({     
     auth: "your token string here",    
     userAgent: 'skylight v1' 
});

• Crie o arquivo .env na raiz do projeto. Na linha de comando na raiz do seu projeto, escreva touch .env.
• Escrevanano .env
• No arquivo .env, crie uma variável chamada REACT_APP_GHe atribua o valor ao seu token do GitHub.

No módulo octokit.js, substitua a string do token pela variável oculta.

import { Octokit } from "@octokit/rest"
export const octokit = new Octokit({     
     auth: process.env.REACT_APP_GH,    
     userAgent: 'skylight v1' 
});

5. Chame a API do GitHub

• Eu chamei o endpoint de um gancho personalizado que fiz chamado useOctokit.

import { useState, useEffect } from 'react';
import { octokit } from '../utils/octokit';
export default function useOctokit(path) {
   const [code, setCode] = useState(null);
   
   useEffect(() => {
     async function onLoad() {
       await octokit.request(
          'GET /repos/{owner}/{repo}/contents/{path}', {
             owner: 'jawblia',
             repo: 'components',
             path: `src/lib/components/${path}`
       }).then(res => console.log(res)
       }).catch(err => console.log(err));
    }
onLoad();
},[])
return {
   code
    }
};

Acredito que a API do GH limita a taxa a 5.000 chamadas por hora com essa abordagem, portanto, essa abordagem não é utilizável para sites com muito tráfego.

Console.registrando a resposta, vemos a chamada bem-sucedida no navegador.

console.log(res):

Muita informação aqui. A URL do Github, o nome do arquivo, o caminho. Uma coisa notavelmente ausente (à primeira vista) é o código real. Está na resposta, no contentparâmetro. O Github codifica todo o conteúdo, com base64 , que é um formato para transferir arquivos binários para strings de texto para que possam ser transferidos online. Mais sobre isso aqui .

console.log(res.data.content):

aW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsgCmltcG9ydCBGbGV4IGZyb20g
Jy4vbGF5b3V0L0ZsZXgnOwoKY29uc3QgQmFkZ2UgPSAoeyB2YWx1ZSB9KSA9
PiB7CiAgICByZXR1cm4gKAogICAgICAgICAgICA8RmxleCBjZW50ZXIgbWlk
ZGxlIGNsYXNzTmFtZT17YGJhZGdlICR7IXZhbHVlID8gJ2JhZGdlLS1ub25l
JyA6Jyd9IGB9PgogICAgICAgICAgICAgICAgPGg0IGNsYXNzTmFtZT0iaGVh
dnkiPnt2YWx1ZSB8fCAwfTwvaDQ+CiAgICAgICAgICAgIDwvRmxleD4KICAg
ICk7Cn0KIApleHBvcnQgZGVmYXVsdCBCYWRnZTs=

• Existe um método JS integrado, atob, que recebe uma string codificada em base64 como argumento e retorna a versão decodificada em texto simples. (btoa faz o oposto, codificando strings em base64.)

import { useState, useEffect } from 'react';
import { octokit } from '../utils/octokit';
export default function useOctokit(path) {
   const [code, setCode] = useState(null);
   
   useEffect(() => {
     async function onLoad() {
       await octokit.request(
          'GET /repos/{owner}/{repo}/contents/{path}', {
             owner: 'jawblia',
             repo: 'components',
             path: `src/lib/components/${path}`
        }).then(res => {
            const encoded = res.data.content;
            const decoded = atob(encoded);
            setCode(decoded);
       }).catch(err => console.log(err));
    }
onLoad();
},[])
return {
   code
    }
};

• Retorne codedo gancho.

• Retorne o código de texto simples armazenado em state.

import React, { useState } from 'react';
import useOctokit from '../hooks/useOctokit';
import Codeblock from '../data/raw/Codeblock';
const CodeDetails = (path) => {
  const { code } = useOctokit(path);
  return <Codeblock code={code} lang='js'/>;
  }
export default CodeDetails;

• Em um componente, importe Prism e use o highlightAll()método com useEffect para destacar a sintaxe

import React, { useEffect } from 'react';
import Prism from 'prismjs';
import './_styles/assets/prism.css';
const Codeblock = ({ code, lang }) => {
  useEffect(() => {
    Prism.highlightAll();
  }, [code]);
return (
<div className="codeblock">
   <pre className="line-numbers">
   <code className={`language-${lang}`}>
     {code}
   </code>
   </pre>
</div>
);
}
export default Codeblock;

       

Isso é tudo.

Referências:

• Base64 pode ser decodificado aqui:https://www.base64decode.org/, mas também o decodificamos usando o método atob .
• Mais sobre base64 .
• https://docs.github.com/en/rest— Documentos da API do GitHub