首页 > web前端 > js教程 > 构建 jargons.dev [# Word 编辑器脚本

构建 jargons.dev [# Word 编辑器脚本

Linda Hamilton
发布: 2024-12-13 08:07:10
原创
217 人浏览过

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中文网其他相关文章!

来源:dev.to
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板