自己紹介ページを作成するためにdeno展開のためのサービスを作りました

dev,twitter,githubなどの増加のアカウントを持つページ数として,各サービス上の他のサービスへのリンクを表示することは困難になります.
そのような場合、どこかの「リンクリスト」プロフィールページを作成して、それにリンクを貼るなら、管理するのはより簡単です.
既存のサービスlinktreeがあります.
https://linktr.ee/
しかし、私は個人的にリンクだけを管理したくありません.
私は、同様に銃弾点としてプロフィール項目を表示することができてうれしいと思いました.
これは私がdeno展開を学んでいる間、私がそれを自分で作った理由です.
私は他の人のためのサービスとして利用できるようにしたので、ここで紹介します.

示す
名称は示す.
デモです.https://denote.deno.dev/denote
このページはこんな感じです.

ページの全体的なバランス(アイコンの下の項目のリスト)はLinkTreeに基づいていますが、ページ内のアイテムの分離と雨はオリジナルです.
結局、デノは夜のすべての雨です!
Kararimidolのプロフィールページはこちらhttps://denote.deno.dev/kawarimidoll

API

登録と更新POST https://denote.deno.dev/分離の代わりにPOST and PUT 登録と更新のために、私は同じものを使うことに決めました.
これは、Githubのアクションなどを自動化するのがより便利であると考えたからです(後述).

パラメータname ページ名token トークン(ページを更新または削除するときに参照するには、変更できません)config リスト項目、メイン画像などの設定のJSON.
新しいページを登録するとき、どんなトークンも使用することができます、しかし、更新するとき、名前とトークンが合わないなら、エラーは起こります.

削除DELETE https://denote.deno.dev/
パラメータname ページ名token トークン

ディスプレイGET https://denote.deno.dev/[name]
CLI
あなたは、上記のAPIを使用して要求をスローして登録、更新、削除できますcurl , しかし、構成項目の数が増加するにつれて、長いJSONファイルが設定され、設定が難しくなります.

curl -X POST -d '{"name":"my-name","token":"my-token","config":{"list":{"id-1":{"icon":"fontawesome/font-awesome","items":[{"icon":"jam/info","text":"this is a text with an icon"},{"text":"this is a just text"},{"icon":"octicons/octoface","text":"this is a link to GitHub","link":"https://github.com"},{"text":"this is a link to Twitter","link":"https://twitter.com"},{"link":"https://gitlab.com"}]},"id-2":{"icon":"feather/anchor","items":[{"icon":"clarity/block","text":"this is the second block"},{"icon":"simple/deno"}]}}}}' https://denote.deno.dev

それで、私はローカルJSON/YAMLファイルを解析して、エンドポイントに要求をするスクリプトを作成しました.
これはCLIツールとしてインストールすることができますdeno install .

用途
https://deno.land/x/denote

インストール

❯ deno install --allow-read --allow-write --allow-net --no-check --force https://deno.land/x/denote/cli/denote.ts

登録と更新
用途denote register 設定ファイルを反映する.
The name and token オプションが必要です.
それはあなたのローカルだけでなく、ファイルを指定することも可能ですが、Web上でDEMO仕様のために公開.
つまり、設定をGISTで実行することができますdenote register ローカルでそれを発表する.

❯ denote register ./config.yml --name my-name --token my-token

削除
を示すページを削除します.
The name and token オプションが必要です.

❯ denote unregister --name my-name --token my-token

ローカルサーバーのチェック
あなたがローカルサーバーを設定することができますdenote serve , 場合は、公開前に表示をチェックしたい場合.

❯ denote serve ./config.yml

オートラン
我々は、直接のパブリックURLを押すことによってインストールせずに実行することができますdeno run .
それで、あなたが走るならばdenote register GitHubアクションでは、自動的に表示することができます.

# .github/workflows/denote_profile.yml
name: Denote profile
on:
  push:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - uses: actions/checkout@v2
      - uses: denoland/setup-deno@v1
      - run: >
          deno run --allow-read --allow-net --no-check
          https://deno.land/x/denote/cli/denote.ts register ./denote.yml
          --name kawarimidoll --token '${{ secrets.DENOTE_TOKEN }}'

これをするとき、新しい登録と更新の間で分割することは困難でした.
それは、Kawarmidollプロフィール倉庫で走っています.
https://github.com/kawarimidoll/kawarimidoll/blob/master/.github/workflows/denote_profile.yml

設定ファイル
設定ファイルはJSONまたはYAMLで記述できます.
があるexample.yml リポジトリ内で(実際には)denote init ダウンロードしてください.
https://github.com/kawarimidoll/denote/blob/main/example.yml

必須キー
キー“リスト”は、トップレベルで必要です.
その下で少し複雑なので、説明しますexample.yml .

# example.yml
list:
  id-1:
    icon: fontawesome/font-awesome
    items:
      - icon: jam/info
        text: this is a text with an icon
      - text: this is a just text
      - icon: octicons/octoface
        text: this is a link to GitHub
        link: https://github.com
      - text: this is a link to Twitter
        link: https://twitter.com
      - link: https://gitlab.com
  id-2:
    icon: feather/anchor
    items:
      - icon: clarity/block
        text: this is the second block
      - icon: simple/deno

リストにはその名のキーがあります.

この子たちlist ( id-1 and id-2 群として扱われる.

このキーはページのリンクのIDとして扱われます.

グループにはキーという名前のキーがありますicon and items .

The icon は名前の文字列です[iconset-name]/[icon-name] .

アイコンはicongram を使用できます.

items はリスト項目の配列です.

リスト項目はキーを持つことができますicon , text , and link .

これらの3つは任意です.

icon アイコンと同様にグループで表示することができますアイコンです.

text テキストはリストに表示されます.

link はリンク先のURLです.If text が存在する場合、link 文字列が表示されます.

オプションキー
以下のキーはオプションです.

名称
ページの上部に表示する名前.
省略するとname 登録時に設定されるオプション(すなわち、中に入るもの)https://denote.deno.dev[name] 表示されるときに使用されます.
また、フォーム内のHTMLファイルのページ名として使用されますname | Denote .

イメージ
メイン画像のURL.
省略された場合、画像は使用されません.
これはOGP設定にも反映されますog:image , それで、それは埋め込まれたリンクで表示されます.

favicon
Favicon画像のURL.
省略されるならば、ロゴは使われます.

説明
上記の名前の下に表示される説明またはコメント.
省略された場合、コメントは使用されません.
これはOGP設定にも反映されますog:description , それで、それは埋め込まれたリンクで表示されます.
Twitter
これは、OGP設定で使用されるTwitterユーザー名ですtwitter:site .
省略した場合は、単にスキップされます.

閉鎖
最初は単純な白い背景だった.
私は、それがDenoであったので、夜雨を降らせたかったので、私は若干の研究をして、若干の調整をしました.
私はその結果に満足しています.なぜなら、私はそれが良い外観を与えることができたと思うので.
これは次の記事の翻訳です.
翻訳の間違いがあればコメントを残してください.
https://zenn.dev/kawarimidoll/articles/e00d79b97042ee