GitHub 구성 파일의 고정 포인트를 자동으로 업데이트하여 일부 내용을 표시합니다.

소개

나는 최근에 이것awesome list for pinned gists을 만났는데, 그것은 나의 호기심을 불러일으켰다.따라서 이것은 기본적으로 메모리 라이브러리의 집합입니다. 일부 정보를 사용하여 정기적으로gist를 업데이트할 수 있습니다.그리고 이 요점을 GitHub 페이지에 고정시켜 사람들이 귀하의 개인 정보를 방문할 때 볼 수 있도록 합니다.
gists를 들어보지 못한 사람들에게는 GitHub가 제공하는 서비스입니다here.그것들은 기본적으로 GitHub repo처럼 갈라지고 복제할 수 있는 파일 그룹이다.
정기적으로 업데이트되는 GIST에는 닉네임, box가 있습니다.awesome-pinned-gists 에서 이러한 GIST에 배치할 수 있는 예는 most recent tweet, weekly music listening report, books you're currently reading 등입니다.
기본적으로, 만약 당신이 서비스에 API가 있다는 것을 알고 있다면, 그것을 한 페이지에 표시할 수 있습니다.이 강좌에서, 나는gist를 만드는 방법을 보여 드리겠습니다. 이 gist는 최신 Dev.to 블로그 글에 따라 정기적으로 업데이트되지만, 이런 방법은 API가 있는 모든 서비스에 적용될 수 있습니다.당신의 상상력과 공개 가능한 API가 당신을 제한합니다.

설치 프로그램

이 강좌는 네 부분으로 나눌 것이다 -

인코딩을 시작하기 전에 모든 선결 조건을 설정합니다.

프로그래밍 방식으로gist를 업데이트합니다.

API에서 데이터를 가져와gist를 업데이트합니다.

GitHub 워크플로우를 설정하여 자동으로 업데이트합니다.

1. 선결 조건

GitHub 토큰 만들기

https://github.com/settings/tokens에 새로운 개인 방문 영패를 만들고 영패를 어딘가에 저장하십시오. 한 번만 볼 수 있기 때문입니다.

요점 만들기

우리가 해야 할 첫 번째 일은 요점을 만드는 것이다.따라서 https://gist.github.com/ 로 이동하여 파일을 만들고 파일을 만들고 필요에 따라 이름을 지정한 다음 현재 필요한 설명과 내용을 추가하십시오.빈 요점을 만들 수 없기 때문에 파일에 내용을 추가해야 합니다.
요점을 만들면 URL은 https://gist.github.com/<username>/ <gist id> 와 유사합니다.이gist id를 복사하여 나중에 사용할 수 있도록 저장합니다.

항목 설정

GitHub에 새 저장소를 생성하여 로컬 설정으로 복제하고 작업 디렉토리로 설정합니다.그리고 npm를 만들어서 질문에 대답하겠습니다. package.json을 만들어야 합니다.

npm init

그리고 이 프로젝트에서 다른 두 개의 중요한 파일을 만들 것입니다. index.js 이것은 우리의 메인 파일입니다. action.yml 나중에 GitHub 작업을 설정할 때 사용할 것입니다.로컬 개발에 사용할 환경 변수를 포함하는 .env 파일을 만들어야 합니다.

종속 항목 설치

이 프로젝트에 사용할 소프트웨어 패키지가 필요합니다. 이 패키지의 사용 방법은 당신이 본 강좌를 공부함에 따라 명확해질 것입니다

npm i @octokit/rest axios dotenv wrap-ansi

2. 업데이트 요점

환경 변수

다른 작업을 수행하기 전에 환경 변수를 .env 파일에 추가합니다.이제 DEV_USERNAME 필드를 비워 둘 수 있습니다.
이 파일에 API 키 또는 기밀 정보를 저장할 수 있습니다.이 파일은 repo로 전송되지 않습니다. 반대로 이 파일의 변수를 저장소 설정에 기밀로 추가해야 합니다.저는 dev.to API를 사용하기 때문에 댓글을 얻기 위해 API 키가 필요하지 않기 때문에 사용자 이름을 저장합니다. 이것은 댓글을 검색하는 데 필요한 유일한 매개 변수입니다.

GIST_ID="<Your gist id>"
GH_TOKEN="<Your github token>"
DEV_USERNAME=""

주 스크립트

현재, 우리는 우리가 만든 요점을 업데이트하기 위해 코드를 작성할 것이다.index.js에 추가합니다.

require('dotenv').config()
const { Octokit } = require("@octokit/rest");

// Get the environment variables
const {
    GIST_ID: gistId,
    GH_TOKEN: githubToken,
    DEV_USERNAME: devUsername
} = process.env;

// Authentication
const octokit = new Octokit({
    auth: `token ${githubToken}`
});

// Function to update the gist contents
async function updateGist() {
    let gist;
    try {
        // Get the gist you made using the gist id
        gist = await octokit.gists.get({ gist_id: gistId });
    } catch (error) {
        console.error(`Unable to get gist\n${error}`);
    }

    // Only one file was created, so fetch it's filename
    const filename = Object.keys(gist.data.files)[0];

    try {
        // Update the gist
        // The description is displayed when the gist is pinned
        // so we can update the description along with the contents
        // to show more information when it's pinned
        await octokit.gists.update({
            gist_id: gistId,
            description: `This is some description`,
            files: {
                [filename]: {
                    content: `This is some example content`
                }
            }
        });
    } catch (error) {
        console.error(`Unable to update gist\n${error}`);
    }
}

(async () => {
    await updateGist();
})();

이 스크립트가 작동하는지 테스트하려면 실행하십시오

node index.js

요점을 확인하면 설명과 내용이 업데이트 함수에 전달되는 문자열로 업데이트되어야 합니다.

3. 취수

현재 우리는 dev.to 계정에서 최신 게시물을 얻는 데 주의를 기울일 것이다.index.js에서 함수를 업데이트/추가합니다.

// The endpoint for the request
const baseURL = 'https://dev.to/api/articles'

// Parameters to pass to the dev.to api
const options = {
    params: {
        username: devUsername
    }
}

// This is useful if the string is too long to display on the pinned gist
function truncate(str, n){
    return (str.length > n) ? str.substr(0, n-2) + '…' : str;
};

// Get the most recent post
async function getPost() {
    try {
        const response = await axios.get(baseURL, options);
        const post = response.data[0];
        // Pass the post as a parameter
        await updateGist(post)
    } catch (error) {
        console.error(error);
    }
}

// Pass the post as a parameter
async function updateGist(post) {
    let gist;
    try {
        gist = await octokit.gists.get({ gist_id: gistId });
    } catch (error) {
        console.error(`Unable to get gist\n${error}`);
    }

    const filename = Object.keys(gist.data.files)[0];

    // Tags from the post
    const tags = '#' + post.tag_list.join(", #");

    // In the gist show the title, a short excerpt from the post
    // and the date the post was published in the contents of the gist
    const content = `📜 ${truncate(post.title, 60).replace(/\s+/g, ' ')} \n ▶ ${
        truncate(post.description, 100).replace(/\s+/g, ' ')
    } \n🔖 ${tags} \n📆 ${post.readable_publish_date.replace(/\s+/g, ' ')}`;

    try {
        //  In the post description show the username, number of likes and comments
        await octokit.gists.update({
            gist_id: gistId,
            description: `dev.to/${devUsername} | ❤ ${post.public_reactions_count} | 💬 ${
                post.comments_count
            }`,
            files: {
                [filename]: {
                    content: wrapAnsi(content, 60, { hard: true, trim: false })
                }
            }
        });
    } catch (error) {
        console.error(`Unable to update gist\n${error}`);
    }
}

(async () => {
    await getPost();
})();

wrapAnsii 라이브러리는 일정 길이 이상의 텍스트를 포장하는 데 사용됩니다.그렇지 않으면 텍스트가 고정될 때 너무 길면 갑자기 잘립니다.
개인 정보에 요점을 고정시키고 이 스크립트를 실행합니다.너는 마땅히 이런 물건을 얻어야 한다.

다른 API를 사용하려는 경우 이 단계는 사용자에 따라 다르지만 기본은 동일합니다.API에서 필요한 데이터를 추출하여gist에 표시할 수 있도록 업데이트 함수에 전달합니다.

4. GitHub 작업 설정

현재 우리는 필요한 블로그 게시물로 주제를 업데이트할 수 있는 스크립트가 하나 생겼지만, 우리는 그것을 수동으로 실행하고 있다.이제 cron 작업을 사용하여 GitHub 작업을 설정하여 계획대로 실행하고 자동으로 업데이트합니다.

실행 명령 설치

action.yml 에서 node와 node로 실행해야 할 파일을 설정합니다.

name: blog-box
author: <your-username>
description: GitHub Action for updating a gist with your latest blog post.

runs:
  using: node12
  main: ./index.js

워크플로우 설정

.github/workflows/ 아래에 새 폴더를 만들고 update.yml 라는 GitHub 작업 파일을 추가합니다.

name: Update gist with latest songs
on:
  # THis option allows you to run the script manually
  workflow_dispatch:

  # This sets up a cron job that runs the script once a day
  schedule:
    - cron: "0 0 * * *"

jobs:
  # Create a job
  blog-box:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      # Install dependencies
      - run: npm install
      - name: Update
        uses: ./
        # Use the secrets as environment variables
        env:
          GH_TOKEN: ${{ secrets.GH_TOKEN }}
          GIST_ID: ${{ secrets.GIST_ID }}
          DEV_USERNAME: ${{ secrets.DEV_USERNAME }}

cron 작업과 작업 배정에 대한 더 많은 정보를 알고 싶으면 다음 사이트를 방문하십시오https://crontab.guru/.

결론

변경 내용을 밀어넣은 후 GitHub 저장소의 actions > Update gist with latest post > Run workflow로 이동합니다.이 동작은 성공적으로 실행될 것입니다. 고정된gist는 최근 dev.tp 블로그 게시물을 표시합니다.이 워크플로우는 매일 UTC 00:00에 자동으로 실행됩니다.

코드 및 데모

여기서 코드 가져오기: blog-box
GitHub 프로필을 현장에서 보고 싶다면: https://github.com/Aveek-Saha