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

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
JavaScript的核心:它是在C还是C上构建的?JavaScript的核心:它是在C还是C上构建的?May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1)javascriptwasdesignedAsalightweight,解释edganguageforwebbrowsers.2)Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers,典型地提示。

JavaScript应用程序:从前端到后端JavaScript应用程序:从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验,后端通过Node.js处理服务器任务。1.前端示例:改变网页文本内容。2.后端示例:创建Node.js服务器。

Python vs. JavaScript:您应该学到哪种语言?Python vs. JavaScript:您应该学到哪种语言?May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统:1)职业发展:Python适合数据科学和后端开发,JavaScript适合前端和全栈开发。2)学习曲线:Python语法简洁,适合初学者;JavaScript语法灵活。3)生态系统:Python有丰富的科学计算库,JavaScript有强大的前端框架。

JavaScript框架:为现代网络开发提供动力JavaScript框架:为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑:1.项目规模和复杂度,2.团队经验,3.生态系统和社区支持。

JavaScript,C和浏览器之间的关系JavaScript,C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪,JavaScript、C 和浏览器之间到底有什么关系?它们之间看似毫无关联,但实际上,它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章,你将了解到JavaScript如何在浏览器中运行,C 在浏览器引擎中的作用,以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道,JavaScript是前端开发的核心语言,它直接在浏览器中运行,让网页变得生动有趣。你是否曾经想过,为什么JavaScr

node.js流带打字稿node.js流带打字稿Apr 30, 2025 am 08:22 AM

Node.js擅长于高效I/O,这在很大程度上要归功于流。 流媒体汇总处理数据,避免内存过载 - 大型文件,网络任务和实时应用程序的理想。将流与打字稿的类型安全结合起来创建POWE

Python vs. JavaScript:性能和效率注意事项Python vs. JavaScript:性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在:1)Python作为解释型语言,运行速度较慢,但开发效率高,适合快速原型开发;2)JavaScript在浏览器中受限于单线程,但在Node.js中可利用多线程和异步I/O提升性能,两者在实际项目中各有优势。

JavaScript的起源:探索其实施语言JavaScript的起源:探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年,由布兰登·艾克创造,实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。2.JavaScript的内存管理和性能优化依赖于C语言。3.C语言的跨平台特性帮助JavaScript在不同操作系统上高效运行。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

mPDF

mPDF

mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),