Użyj interfejsu API GitHub, aby wyświetlić kod w aplikacji React

Chciałem wyświetlić kod z jednego z moich repozytoriów GitHub w aplikacji React i chciałem, aby aktualizował się automatycznie na stronie, gdy wypchnę nową wersję.

Chciałem tego dla małej biblioteki komponentów, którą tworzyłem dla siebie, abym mógł zobaczyć najnowszą wersję komponentu z repozytorium. Aby to osiągnąć, użyłem API GitHub i pakietu podświetlania składni Prism.

1. Dodaj pakiet klienta GitHub i Prism do podświetlania składni.

npm i @octokit/rest react-prism axios

2. Uwierzytelnij się w GitHub z aplikacji React.

• Utwórz tutaj osobisty token dostępu , aby uwierzytelnić się w GitHub z przeglądarki.
• Musisz być zalogowany, aby uzyskać dostęp do tokena. Spowoduje to wygenerowanie tokena Oauth w postaci ciągu do użycia. Skopiuj go, ponieważ będzie dostępny tylko raz.
• Stworzyłem moduł JS o nazwie octokit.js i zaimportowałem Octokit.
• Utwórz nową instancję GH. Jedyne wymagane parametry to token Oauth dla authi userAgent.

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

• Utwórz plik .env w katalogu głównym projektu. W wierszu poleceń w katalogu głównym projektu wpisz touch .env.
• pisać nano .env
• W pliku .env utwórz zmienną o nazwie REACT_APP_GHi przypisz wartość do swojego tokena GitHub.

W module octokit.js zastąp ciąg tokenu ukrytą zmienną.

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

5. Wywołaj interfejs API GitHub

• Wywołałem punkt końcowy z niestandardowego hooka, który stworzyłem, o nazwie 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
    }
};

Uważam, że dzięki temu podejściu API GH ogranicza szybkość do 5000 wywołań na godzinę , więc to podejście nie jest użyteczne w przypadku witryn o dużym ruchu.

Konsola.rejestrując odpowiedź, widzimy udane wywołanie w przeglądarce.

console.log(res):

Dużo informacji tutaj. Adres URL z Github, nazwa pliku, ścieżka. Jedna rzecz, której wyraźnie brakuje (na pierwszy rzut oka) to rzeczywisty kod. Jest w odpowiedzi, w contentparametrze. Github koduje całą zawartość za pomocą base64 , który jest formatem przesyłania plików binarnych do ciągów tekstowych, aby można je było przesyłać online. Więcej na ten temat tutaj .

console.log(res.data.content):

aW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsgCmltcG9ydCBGbGV4IGZyb20g
Jy4vbGF5b3V0L0ZsZXgnOwoKY29uc3QgQmFkZ2UgPSAoeyB2YWx1ZSB9KSA9
PiB7CiAgICByZXR1cm4gKAogICAgICAgICAgICA8RmxleCBjZW50ZXIgbWlk
ZGxlIGNsYXNzTmFtZT17YGJhZGdlICR7IXZhbHVlID8gJ2JhZGdlLS1ub25l
JyA6Jyd9IGB9PgogICAgICAgICAgICAgICAgPGg0IGNsYXNzTmFtZT0iaGVh
dnkiPnt2YWx1ZSB8fCAwfTwvaDQ+CiAgICAgICAgICAgIDwvRmxleD4KICAg
ICk7Cn0KIApleHBvcnQgZGVmYXVsdCBCYWRnZTs=

• Istnieje wbudowana metoda JS, atob, która jako argument przyjmuje ciąg zakodowany w base64 i zwraca zdekodowaną wersję w postaci zwykłego tekstu. (btoa działa odwrotnie, kodując ciągi w 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
    }
};

• Wróć codez haka.

• Zwróć kod zwykłego tekstu zapisany w stanie.

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;

• W komponencie zaimportuj Prism i użyj highlightAll()metody z useEffect, aby podświetlić składnię

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;

       

To wszystko.

Bibliografia:

• Base64 można zdekodować tutaj: https://www.base64decode.org/, ale dekodujemy go również za pomocą metody atob .
• Więcej o base64 .
• https://docs.github.com/en/rest — Dokumentacja API GitHub