首頁 >web前端 >js教程 >建置 jargons.dev [# Word 編輯器腳本

建置 jargons.dev [# Word 編輯器腳本

Linda Hamilton
Linda Hamilton原創
2024-12-13 08:07:10220瀏覽

Building jargons.dev [# The Word Editor Script

還記得「文字編輯器」嗎! ?這是負責實現其端到端功能的腳本,該功能允許透過使用者介面將變更寫入使用者的分叉儲存庫。

功能分解

由腳本授權的 Word 編輯器應執行兩 (2) 個功能,並採取一些特定步驟

  1. 寫新單字 - 基本上是向字典添加新單字;在以下步驟中執行此操作...
    • 取得已建立的Word範本(.md)檔案
    • 使用收集的單字標題和內容填充模板佔位符,以在相應的單字目錄 src/pages/browse 中建立 word.mdx 文件
    • 並將變更提交至使用者分叉儲存庫上已建立的變更分支/參考
  2. 編輯/更新現有單字 - 修改字典中的現有單詞,它透過以下步驟執行此操作...
    • 從使用者的 jargons.dev 分支中取得現有單字(在單字目錄 src/pages/browse 中尋找)
    • 解析其內容並進行必要的編輯
    • 並將變更提交至使用者分叉儲存庫上已建立的變更分支/參考

分解啟發了以下輔助函數和實用函數的創建。

  • writeNewWord - 一個接受單字標題和內容等的函數,利用使用者的GitHub 驗證實例,它執行寫入操作,即將新檔案(word.mdx) 代表使用者帳戶寫入jargons.dev 的分支透過「PUT /repos/ {owner}/{repo}/contents/{path}」端點。
  • getExistingWord - 一個簡單地檢索使用者分叉儲存庫中現有 Word 文件內容的函數,目的是利用它進行編輯。它透過將單字作為參數並將其連接到向端點「GET /repos/{owner} 發出的請求的路徑參數(例如src/pages/browse/${normalizeAsUrl(word)}.mdx)來實現此目的/{repo}/contents/{path}";需要說明的是,出於消費原因,我不得不對此助手傳回的資料進行一些調整,調整如下

    • 新增了 title 屬性:來自對端點「GET /repos/{owner}/{repo}/contents/{path}」的查詢的response.data 物件沒有 title 屬性(這是單字本身);
    • 新增了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 發出的請求中提交的單詞寫入文件內容,它通過獲取單詞標題和內容(即單字定義)會作為變數並從範本產生內容,可用於取代其中的佔位符內容。

公關

建置 jargons.dev [# Word 編輯器腳本 壯舉:實現“word-editor”腳本 #18

建置 jargons.dev [# Word 編輯器腳本
巴布爾貝 發佈於

此Pull 請求實作了文字編輯器腳本;該腳本的主要功能是允許新增單字、檢索和更新現有單字,這些單字是駐留在專案的src/pages/browse 目錄中的單獨.mdx文件。該腳本為我們提供了執行此操作所需的所有輔助函數。

做出的改變

  • 實作了writeNewWord 函數- 這個函數需要3 個參數,分別是userOctokit、forkedRepoDetails 和單字;它利用userOctokit 實例執行寫入操作,即透過「PUT /repos/{owner}/{repo}/」將新檔案(newWord.mdx) 代表使用者寫入使用者帳戶上的項目分支中內容/{路徑}”端點
  • 實作了getExistingWord 函數- 該函數透過呼叫「GET /repos/{owner}/{repo}/contents/{path}」端點來幫助檢索使用者帳戶上項目分支中現有單字的資料;它傳回一個對象,該物件具有我們最感興趣的以下屬性...
    • title - 現有單字的標題 - 這實際上是對端點呼叫的自訂附加資料到response.data
    • path - 現有word檔案的路徑
    • sha - 現有單字的唯一 SHA
  • 實作了editExistingWord 函數- 這個函數需要3 個參數,分別是userOctokit、forkedRepoDetails 和word(儲存屬性:path、sha、title 和content);它利用userOctokit 實例執行編輯操作,即代表使用者透過相同的「PUT /repos/{owner}/{repo}/contents/{path} 更新使用者帳戶上專案分支上的現有檔案“端點
  • 實作了 writeFileContent 輔助函數 - 該函數幫助為我們的字典單字檔案編寫內容,從 src/lib/template/word.md.js 中的另一個新增常數來產生它們

截圖影片/螢幕截圖

懶得錄製這段影片? ,但是相信我這狗屎有效 ?‍?

在 GitHub 上查看

以上是建置 jargons.dev [# Word 編輯器腳本的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn