jargons.dev 작성 [# Word 편집기 스크립트

"The Word Editor"를 기억하시나요!? 다음은 사용자 인터페이스를 통해 사용자의 포크된 저장소에 변경 사항을 쓸 수 있는 엔드투엔드 기능을 구현하는 스크립트입니다.

기능적 분석

스크립트로 강화된 Word Editor는 몇 가지 특정 단계를 수행하여 두 가지 기능을 수행해야 합니다

1. 새 단어 쓰기 - 기본적으로 사전에 새 단어를 추가합니다. 다음 단계에서 이 작업을 수행합니다...
   • 이미 설정된 워드 템플릿(.md) 파일 받기
   • 템플릿 자리 표시자를 수집된 단어 제목과 내용으로 채워 해당 단어 디렉토리 src/pages/browse에 word.mdx 파일을 만듭니다.
   • 사용자의 포크된 저장소에 설정된 변경 브랜치/참조에 변경 사항을 커밋합니다
2. 기존 단어 편집/업데이트 - 사전에 있는 기존 단어를 수정합니다. 이 작업은 다음 단계에서 수행됩니다...
   • 사용자의 jargons.dev 포크에서 기존 단어를 가져옵니다(단어 디렉토리 src/pages/browse에서 확인)
   • 내용을 분석하고 필요한 수정을 합니다
   • 그리고 사용자의 포크된 저장소에 설정된 변경 분기/참조에 변경 사항을 커밋합니다

분석은 다음 도우미 및 유틸리티 기능의 생성에 영감을 주었습니다.

• writeNewWord - 사용자의 GitHub 인증 인스턴스를 활용하여 단어 제목과 내용을 허용하는 함수입니다. 즉, 사용자를 대신하여 사용자 계정의 jargons.dev 포크에 새 파일(word.mdx)을 쓰는 쓰기 작업을 수행합니다. "PUT /repos/{owner}/{repo}/contents/{path}" 엔드포인트를 통해

• getExistingWord - 편집에 사용할 목적으로 사용자의 포크된 저장소에 있는 기존 단어 파일의 콘텐츠를 간단히 검색하는 함수입니다. 단어를 인수로 사용하고 엔드포인트 "GET /repos/{owner}에 대한 요청의 경로 매개변수(예: src/pages/browse/${normalizeAsUrl(word)}.mdx)에 연결하여 이를 수행합니다. /{repo}/contents/{경로}"; 소비상의 이유로 이 도우미에서 반환된 데이터를 몇 가지 조정해야 했다는 점을 명시하는 것이 중요합니다. 조정 내용은 다음과 같습니다

  • 제목 속성을 추가했습니다. "GET /repos/{owner}/{repo}/contents/{path}" 엔드포인트에 대한 쿼리에서 제공되는 response.data 개체에는 제목 속성이 없습니다(이것은 단어 자체);

  • content_decoded 속성 추가: response.data.content 속성은 검색된 단어의 주요 콘텐츠를 보유하지만 "base64" 형식으로 제공됩니다. 그래서 소비 시 변환할 필요 없이 바로 사용할 수 있는 소비 지원 형식으로 기능을 사용할 수 있으면 좋겠다고 생각했습니다. 아래 코드로 이런 작업을 했습니다...
    

    const { content, ...responseData } = response.data;
    
    return {
      title: word,
      content,
      content_decoded: Buffer.from(content, "base64").toString("utf-8"),
      ...responseData
    };
    

• updateExistingWord - 초기 이름은 editExistingWord이고 jargonsdev/jargons.dev#34에서 현재 이름으로 변경되었습니다. 이 함수는 writeNewWord와 유사한 작업을 수행하지만 대체하여 특정 파일의 기존 단어 내용을 덮어씁니다. 업데이트된 콘텐츠가 있는 다른 파일과 파일. 이 작업은 "PUT /repos/{owner}/{repo}/contents/{path}" 엔드포인트를 통해 사용자를 대신하여 사용자 계정을 통해 수행됩니다.

• writeFileContent - 이름에 암시된 대로 이 도우미는 한 가지 작업을 수행합니다. 즉, writeNewWord 및 updateExistingWord가 GitHub API에 수행한 요청에 제출된 단어에 대한 파일 콘텐츠를 작성합니다. 콘텐츠(예: 단어 정의)를 변수로 지정하고 템플릿에서 콘텐츠를 생성하여 그 안의 자리 표시자 콘텐츠를 대체할 수 있습니다.

홍보

특기: `word-editor` 스크립트 구현 #18

바블비 게시일: 2024년 4월 2일

이 Pull 요청은 단어 편집기 스크립트를 구현합니다. 이 스크립트의 기본 기능은 새 단어를 추가하고 프로젝트의 src/pages/browse 디렉터리에 있는 개별 .mdx 파일인 기존 단어를 검색 및 업데이트할 수 있도록 하는 것입니다. 이 스크립트는 이 작업을 수행하는 데 필요한 모든 도우미 기능을 제공합니다.

변경사항

• writeNewWord 함수를 구현했습니다. 이 함수는 userOctokit, forkedRepoDetails 및 단어라는 3개의 매개변수를 사용합니다. userOctokit 인스턴스를 활용하여 쓰기 작업을 수행합니다. 즉, "PUT /repos/{owner}/{repo}/를 통해 사용자를 대신하여 사용자 계정의 프로젝트 포크에 새 파일(newWord.mdx)을 작성합니다. 내용/{경로}" 끝점
• getExistingWord 함수를 구현했습니다. 이 함수는 "GET /repos/{owner}/{repo}/contents/{path}" 엔드포인트를 호출하여 사용자 계정의 프로젝트 포크에 있는 기존 단어의 데이터를 검색하는 데 도움이 됩니다. 이는 우리가 주로 관심을 갖는 다음 속성을 전달하는 객체를 반환합니다.
  • title - 기존 단어의 제목 - 이 사실은 엔드포인트에 대한 호출에서 response.data에 추가된 사용자 정의 데이터입니다
  • path - 기존 단어 파일의 경로
  • sha - 기존 단어의 고유 SHA
• editExistingWord 함수를 구현했습니다. 이 함수는 userOctokit, forkedRepoDetails 및 단어(경로, 샤, 제목 및 콘텐츠 속성 보유)라는 3개의 매개변수를 사용합니다. userOctokit 인스턴스를 활용하여 편집 작업을 수행합니다. 즉, 동일한 "PUT /repos/{owner}/{repo}/contents/{path}를 통해 사용자를 대신하여 사용자 계정의 프로젝트 포크에 있는 기존 파일을 업데이트합니다. " 엔드포인트
• writeFileContent 도우미 함수 구현 - 이 함수는 src/lib/template/word.md.js에 추가된 다른 상수에서 생성된 사전 단어 파일의 콘텐츠를 작성하는 데 도움이 됩니다.

스크린캐스트/스크린샷

이번 스크린캐스트를 녹화하기에는 너무 게으릅니다 ?, 하지만 저를 믿으세요 ? 정말 효과가 있어요 ?‍?

GitHub에서 보기

위 내용은 jargons.dev 작성 [# Word 편집기 스크립트의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!