Sử dụng API GitHub để hiển thị mã trong ứng dụng React

Tôi muốn hiển thị một số mã từ một trong các kho lưu trữ GitHub của mình trong ứng dụng React và tôi muốn nó tự động cập nhật trên trang web khi tôi đẩy phiên bản mới.

Tôi muốn điều này cho một thư viện thành phần nhỏ mà tôi đang tạo cho chính mình, vì vậy tôi có thể xem phiên bản mới nhất của thành phần từ repo. Để thực hiện điều này, tôi đã sử dụng API GitHub và gói tô sáng cú pháp Prism.

1. Thêm gói ứng dụng GitHub và Prism để làm nổi bật cú pháp.

npm i @octokit/rest react-prism axios

2. Xác thực với GitHub từ ứng dụng React của bạn.

• Tạo mã thông báo truy cập cá nhân tại đây để xác thực với GitHub từ trình duyệt.
• Bạn phải đăng nhập để truy cập mã thông báo. Thao tác này sẽ tạo mã thông báo Oauth ở dạng chuỗi để sử dụng. Sao chép nó vì nó sẽ chỉ có thể truy cập được một lần.
• Tôi đã tạo một mô-đun JS có tên là octokit.js và nhập Octokit.
• Tạo một phiên bản GH mới. Các thông số bắt buộc duy nhất là mã thông báo Oauth cho authvà a userAgent.

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

• Tạo tệp .env tại gốc dự án. Trong dòng lệnh ở gốc dự án của bạn, hãy viết touch .env.
• Viết nano .env
• Trong tệp .env, hãy tạo một biến được gọi REACT_APP_GHvà gán giá trị cho mã thông báo GitHub của bạn.

Trong mô-đun octokit.js, thay thế chuỗi mã thông báo bằng biến ẩn.

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

5. Gọi API GitHub

• Tôi đã gọi điểm cuối từ một móc tùy chỉnh mà tôi đã thực hiện có tên 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
    }
};

Tôi tin rằng API GH thực hiện giới hạn tốc độ ở 5.000 cuộc gọi mỗi giờ với phương pháp này, vì vậy phương pháp này không thể sử dụng được cho các trang web có nhiều lưu lượng truy cập.

Console.logging phản hồi, chúng tôi thấy cuộc gọi thành công trong trình duyệt.

console.log(res):

Rất nhiều thông tin ở đây. URL từ Github, tên của tệp, đường dẫn. Một điều đáng chú ý bị thiếu (thoạt nhìn) là mã thực tế. Nó nằm trong phản hồi, trong contenttham số. Github mã hóa tất cả nội dung, với base64 , là định dạng để chuyển các tệp nhị phân thành chuỗi văn bản để chúng có thể được chuyển trực tuyến. Thêm về nó ở đây .

console.log(res.data.content):

aW1wb3J0IFJlYWN0IGZyb20gJ3JlYWN0JzsgCmltcG9ydCBGbGV4IGZyb20g
Jy4vbGF5b3V0L0ZsZXgnOwoKY29uc3QgQmFkZ2UgPSAoeyB2YWx1ZSB9KSA9
PiB7CiAgICByZXR1cm4gKAogICAgICAgICAgICA8RmxleCBjZW50ZXIgbWlk
ZGxlIGNsYXNzTmFtZT17YGJhZGdlICR7IXZhbHVlID8gJ2JhZGdlLS1ub25l
JyA6Jyd9IGB9PgogICAgICAgICAgICAgICAgPGg0IGNsYXNzTmFtZT0iaGVh
dnkiPnt2YWx1ZSB8fCAwfTwvaDQ+CiAgICAgICAgICAgIDwvRmxleD4KICAg
ICk7Cn0KIApleHBvcnQgZGVmYXVsdCBCYWRnZTs=

• Có một phương thức JS tích hợp, atob, lấy một chuỗi được mã hóa base64 làm đối số và trả về phiên bản đã giải mã ở dạng bản rõ. (btoa làm ngược lại, mã hóa chuỗi trong 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
    }
};

• Trở lại codetừ móc.

• Trả lại mã plaintext được lưu trữ ở trạng thái.

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;

• Trong một thành phần, nhập Prism và sử dụng highlightAll()phương thức với useEffect để làm nổi bật cú pháp

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;

       

Đó là tất cả.

Người giới thiệu:

• Base64 có thể được giải mã tại đây: https://www.base64decode.org/, nhưng chúng tôi cũng giải mã nó bằng phương pháp atob .
• Thông tin thêm về base64 .
• https://docs.github.com/en/rest - Tài liệu API GitHub