ホームページ > ウェブフロントエンド > jsチュートリアル > jargons.dev の構築 [# Word Editor スクリプト

jargons.dev の構築 [# Word Editor スクリプト

Linda Hamilton
リリース: 2024-12-13 08:07:10
オリジナル
217 人が閲覧しました

Building jargons.dev [# The Word Editor Script

「Word Editor」を覚えていますか?これは、ユーザー インターフェイスを介してユーザーのフォークされたリポジトリに変更を書き込むことを可能にするエンドツーエンドの機能を実装するスクリプトです。

機能的故障

スクリプトによって強化された Word Editor は、いくつかの特定の手順を実行して 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) に連結することによって行われます。 /{リポ}/コンテンツ/{パス}";消費上の理由から、このヘルパーから返されたデータにいくつかの調整を加える必要があることを述べておくことが重要です。調整は次のとおりです

    • 追加された 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 と同様の操作を実行しますが、置換することで特定のファイル内の既存の Word コンテンツを上書きします。ファイルと更新された内容を持つ別のファイル。これは、ユーザーに代わって、「PUT /repos/{owner}/{repo}/contents/{path}」エンドポイントを通じてユーザーのアカウントを介して実行されます。

  • writeFileContent - このヘルパーは、名前に示されているように、1 つのことを行います。writeNewWord と updateExistingWord の両方によって GitHub API に行われたリクエストで送信された単語のファイル コンテンツを書き込みます。単語のタイトルを取得し、コンテンツ (単語の定義など) を変数として使用し、テンプレートからコンテンツを生成して、その中のプレースホルダーのコンテンツを置き換えます。

PR

jargons.dev の構築 [# Word Editor スクリプト 特技: `word-editor` スクリプトを実装する #18

jargons.dev の構築 [# Word Editor スクリプト
おしゃべり 投稿日:

このプル リクエストはワードエディタ スクリプトを実装しています。このスクリプトの主な機能は、新しい単語の追加、プロジェクトの src/pages/browse ディレクトリにある個々の .mdx ファイルである既存の単語の取得と更新を可能にすることです。このスクリプトは、この操作を実行するために必要なすべてのヘルパー関数を利用します。

行われた変更

  • writeNewWord 関数を実装しました。この関数は 3 つのパラメータ、つまり userOctokit、forkedRepoDetails、および word を受け取ります。 userOctokit インスタンスを利用して書き込み操作を実行します。つまり、「PUT /repos/{owner}/{repo}/」を通じて、ユーザーに代わってユーザーのアカウント上のプロジェクトのフォークに新しいファイル (newWord.mdx) を書き込みます。 content/{path}" エンドポイント
  • 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 Editor スクリプトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート