(add) blog index

components/g/Button.vue

@@ -18,7 +18,7 @@ const props = withDefaults(defineProps<({
     to: string;
 }) & {
     /** 色設定 */
-    color: 'accent' | 'plain';
+    color?: 'accent' | 'plain';
 }>(), {
     color: 'plain',
 });

content/blog/2021-09-11-hello-to-misskey-hub.md

@@ -0,0 +1,9 @@
+---
+date: 2021-09-11
+description: 'Misskey初のオフィシャルサイト、Misskey Hubを開設しました。'
+---
+
+# Say hello to Misskey Hub
+Misskey初のオフィシャルサイト、Misskey Hubを開設しました。
+Misskey Hubでは、Misskeyに関するナレッジなどのドキュメント、開発ブログ、プラグインストアなどを提供していく予定です。
+「Misskeyの全てがここにある」サイトを目指していきます🚀

content/blog/2021-11-05-mac2021.md

@@ -0,0 +1,15 @@
+---
+description: '2021年も恒例のMisskey Advent Calendarが企画されています。'
+---
+
+# Misskey Advent Calendar 2021
+
+2021年も恒例のMisskey Advent Calendarが企画され、参加者が募集されています。
+
+[Misskey Advent Calendar 2021](https://adventar.org/calendars/6273)
+
+企画はゆずりょー氏です。
+
+私syuiloも1日目にエントリーしています。皆さんも奮ってご参加ください。
+
+なお、前回となる Misskey Advent Calendar 2020 は[こちら](https://adventar.org/calendars/5026)です。

content/blog/2021-12-01-inside-misskey-hub.md

@@ -0,0 +1,261 @@
+---
+description: 'Misskey Advent Calendar 2021 1日目の記事です。Misskey Hubの実装について紹介します。'
+---
+
+# インサイド Misskey Hub
+
+::: tip
+この記事は、[Misskey Advent Calendar 2021](https://adventar.org/calendars/6273) 1日目の記事です。
+:::
+
+こんにちはsyuiloです。いつもMisskeyを利用してくださってありがとうございます。開発の励みになります！
+
+2021年は、misskey.ioのデータベースが破壊されて貴重なノートが多数失われるなどの心を痛めるインシデントもありましたが、Misskeyの開発は順調に進んでいます。また、RSS3がMisskeyのスポンサーになってくださったことや、Patreonでの支援が増えてきたこともあり、おそらく財政的にはMisskey史上最も余裕が出てきていると思います。なので今後もMisskeyの開発は滞りなく進められそうです。:iihanashi:
+
+さて現在、Misskeyの開発と並行して、Misskeyの公式ドキュメントサイトであるMisskey Hub(つまりあなたが今いるここ！！！)の開発も進めています。
+なぜMisskey Hubを作ったかというと、色々ありますが主に
+
+- プロジェクトとしての公式サイトが無いのは不便
+- Misskeyのドキュメントを見るためには実際に動いている何らかのインスタンスにアクセスしなければならない
+- 文字通りHubとなり、インスタンスを跨いで共有されるような情報(インスタンス一覧、プラグインなど)も管理したい
+- ドキュメントをレンダリングしたり検索したりする機能をMisskey本体に実装するのが面倒
+
+といった理由です。
+
+今回は、そのMisskey Hubの実装詳細について紹介しようと思うので、少しの間お付き合いください。多少専門的になるかもしれませんが、なるべく分かりやすくなるように心がけます。
+
+Misskey Hubの実装について理解するためには、いくつかの前提知識が必要となるので、まずそれらの説明をします。ひとつめは静的サイトについて、ふたつめはSSGについてです。それでは始めましょう🚀
+
+## 静的サイト is 何
+::: warning
+**性的サイト**と誤変換しやすいので注意
+:::
+
+こういった記事がメインのWebサイトは、一般的にはWordpressなどのソフトウェアを使って管理することが多いですが、Misskey Hubはそうではありません。\
+Misskey Hubは、Misskey Hub内のMisskey Hub説明ページにもあるように、[vuepress](https://v2.vuepress.vuejs.org/)を使った**静的サイト**(Static site)です。
+
+静的サイトとは、トートロジーっぽい表現になりますが**動的でないサイト**のことです。動的なサイトというのは、例えばユーザー登録が行えてユーザーがコンテンツを投稿できたり、コメントを残せたり、とにかく「ユーザーから何らかのインタラクションを行えて、それがそのサイトを見る他のユーザーにも反映される」ようなサイトのことです。より雑に言うと常に内容が変化するサイトのことです。究極的に雑に言うと動的サイトがワイワイしたサイトで静的サイトがシーンとしたサイトです。
+
+もちろんMisskeyは動的サイトということになります。なぜかというと、例えばそこにはタイムラインがあって、訪れるたびにタイムラインの内容は変わりますし、タイムラインを見るユーザーによっても内容が変わります(フォローしているユーザーが異なるため)。
+
+静的なサイトは逆に、そういったリッチなことは行わず、**予め用意したコンテンツをどのユーザーに対しても同じように表示するだけのサイト**です。Misskey Hubは(サイト更新を除けば)誰がいつ見ても同じ内容なので、静的サイトです。
+
+::: tip
+技術的な話になりますが、静的と言っても、静的なのは「サーバーから」送られてくる内容だけであって、JavaScriptを使ってブラウザ上で動的にページの内容を変えることは可能です。
+例えばMisskey Hubでは、サイドバーに表示されるMisskeyや藍ちゃんの広告はページを訪れるたびにランダムで変わるようになっています。\
+さらに言うと、静的サイト内に別の動的サイトを埋め込んで表示することも可能です。これを利用して、将来的にはそのページに対するMisskeyのコメントタイムラインをページに表示する、といったことも実装されるかもしれません。
+:::
+
+### 静的サイトだと何が嬉しいのか
+
+ここで、静的サイトには動的サイトには無い、とても嬉しいメリットがあります。もったいぶるようですが、この記事の中でもおそらく一番重要なポイントです。刮目してください。それは...
+
+**サーバーを用意する必要がない**\
+ということです。
+
+もちろん静的といえどもウェブサイトなので、実際にはサーバーが存在しています。しかし、静的サイトは予め内容が決まっていて、どのユーザーが見ても内容は同じであることから、サイトを提供する際に動的サイトに比べて**サーバーの負荷がほとんどかからない**のに加えて、**全てのページ内容をキャッシュすることが可能**です。
+
+サイトをキャッシュできると、**CDN**(Content Delivery Network)と呼ばれるインフラストラクチャ上にサイトのコンテンツを載せることができ、そもそも元のサーバーにリクエストが来る必要がなくなります。そう考えるとサーバーの負荷はゼロと言っても過言ではありません。
+
+負荷がほとんどかからないことから、Misskeyや Misskey Hubがソースコードの管理に利用しているGitHubでは**静的サイトを提供するための環境を無料で開発者に提供しています(GitHub Pages)。**
+そのため、Misskey Hubを静的サイトとすることで、「サーバーを用意して、毎月料金を払って維持する」という必要がなくなります。しかも、GitHubの強力なインフラの上にサイトが構築されるので、DDoSといった障害の心配とも無縁です。
+
+動的サイトを運営する際に発生するそのような諸々の心配から解放されるというのは非常に大きなメリットです。つまり、金銭面においても精神面においても、**ゼロコスト**でMisskey Hubを運用できます。
+
+::: details さらに技術的な話(危険)
+ここまで言っておいてなんですが、先ほど言った
+
+> もちろんMisskeyは動的サイトということになります。
+
+というのは **嘘** です。説明を簡単にするために、また理解してもらいやすくするために嘘をつきました。ここまで読んで混乱してしまった人は、このセクションをスキップしてなかったことにしてください。
+
+実は、厳密に言うとMisskey(のWebクライアント)は**静的サイト**なんです。
+
+どういうことかというと、Misskey Webは、全てJavaScriptで動いています。そしてそのJavaScriptは不変です。
+MisskeyのWebサーバーは、その不変なJavaScriptを送り返すだけで、動的なHTMLをレンダリングしたりはしないので、Misskey Webは静的です。
+なので、あなたがMisskey Webを開いた**瞬間**は、(CDNが設定されている場合)Misskeyサーバーにリクエストはひとつも来ません。
+もちろんJavaScriptが動きだしたら、アカウント情報を取得したり、タイムラインを取得したりするのでリクエストは発生します。
+静的なJavaScript上で動的なコンテンツが実現されているということです。
+実際、インスタンスサーバーがトラブルなどで落ちていても、クライアントにはアクセスすることができますし、テーマの設定などサーバーに依存しない操作は普通に行うことができます。
+
+ちなみに、こういう構成のことをIT界では**サーバーレス**と呼んだりするっぽいです。知らんけど。
+:::
+
+## SSG is 何
+ここまでは静的サイトとは何か、について話しました。ここからは、そんな静的サイトを開発するのに便利な**SSG**について紹介します。
+
+おそらくほとんどの人は見慣れない言葉だと思いますが、SSGとは、**静的サイトジェネレーター**(Static Site Generator)の略で、その名の通り静的サイトを生成するソフトウェアです。
+
+静的サイトを作るだけならば、HTMLやCSSを手で書いてアップロードするだけでも良いのですが、コンテンツの量が多くなってくると管理が大変になるのと、そもそもHTMLという非ヒューマンフレンドリーなマークアップでドキュメントを書きたくないというのがあります。
+
+そこでSSGが登場します。SSGを利用することで、Markdownと呼ばれるより人間に書きやすいマークアップでドキュメントを記述できるようになるほか、特に何も書かなくても自動で良い感じ™のデザインでページを表示してくれたりします。さらに、人力では実装が難しいサイト内検索なども提供してくれます。
+
+もちろん実際のサーバー(というよりブラウザ)はHTMLしか解釈できませんので、SSGはサーバーにファイルをアップロードする前に**コンパイル**という処理を行なって、MarkdownをHTMLに変換します。
+
+SSGは特定のソフトウェアを指すものではなく、概念を表す言葉です。したがって、複数のSSG実装が存在します。Misskey Hubでは、前述のように vuepress というSSGを採用しています。
+
+## vuepress is 何
+ここまではSSGについて話しました。ここからやっと、Misskey Hubの実装の話に入ることができます。
+
+**vuepress**は、UIフレームワークにVueを採用したSSGです。Misskey Hubはvuepressのv2(2021年11月現在ベータ版)を使用しています。
+Vueについては、vuepressがあまりそれを意識しないでも使える設計になっているためこの記事では割愛します。
+
+Misskey HubがSSGにvuepressを採用した理由は、技術スタックがモダンでMisskeyのそれと一致していることや、使いやすさや拡張性で優れていると思ったためです。
+さらに、他のSSGは何かしら欠点があったのに対し、vuepressにはそういった欠点は(SSGの中でもかなり新しい方であるため、まだ後述するプラグインやテーマが少ないというのを除けば)ありませんでした。
+ただ、他のSSGを使い込んで吟味はしていないので、拡張性などに関しては比較ではありません。
+
+### テーマ
+Misskey Hubのデザインは、vuepress標準で用意されているテーマを少しMisskey風にアレンジしたものになっています。ゼロから実装するのは大変ですしメンテナンスするコストも発生してきますが、アレンジなので運用が楽です。もちろんダークモードにも対応しています。
+Misskeyと同じく、vuepressも**CSS Variables**を使って簡単に配色を変更できるようになっています。
+
+### プラグイン
+vuepressはプラグイン機能があり、開発者が自由にvuepressを拡張できるようになっています。
+プラグインを駆使することで、また時には自分でプラグインを作成することで、静的サイトながら動的サイトに見紛うようなリッチな機能を提供することができたりします。
+
+Misskey Hubもプラグイン機能を使っていて、「関連するページ」「最近更新されたページ」といった独自の機能を持たせています。
+
+「関連するページ」については、各ページで自身と関連するページを手動で指定できるようになっているほか、ページ中で使われたリンクを収集&自身にリンクしている他ページを収集して「関連するページ」にリストアップするようにしています。
+
+また、「最近更新されたページ」についても、Misskey Hubオリジナルの実装で実現していて、コンパイル時に全てのページファイルを収集してそれぞれの更新日時を後述するGitで取得し、新しい順に並べ替え、ページとしてレンダリングするようにしています。
+
+さらに、MFMを実際に書いて試せるプレイグラウンド機能や、APIリファレンスにおけるAPIコンソールなども今後実装予定です。
+
+::: tip
+「関連するページ」「最近更新されたページ」は我ながら便利機能だと思っているので、Misskey Hub以外のvuepressを採用したサイトでも使えるようにnpmで一般公開しようかとも考えています。
+:::
+
+### 多言語対応(i18n)
+多言語対応することは**i18n**(Internationalizationの略)と呼ばれます。vuepressには標準でi18n対応が組み込まれているので、Misskey Hubも簡単にi18nすることができました。
+
+### サイト内検索
+vuepress標準の機能で、右上にあるやつです。各ページの見出しを対象にして検索されるようです。これをSSGの助けなしに実装するのは厳しいと思います。
+
+### 目次生成
+自動で目次を生成してくれます。(ページ左)
+
+こんな感じでページ内に埋め込むこともできます:
+[[toc]]
+
+### HMR
+**HMR**(Hot Module Replacementの略)は、開発中に使われる機能で、ブラウザをリロードすることなしにページ内容の変更を反映してくれます。エディタで編集し、保存するだけでリアルタイムでページに反映されるので、開発がとても快適になります。
+
+## 藍モード
+もちろん藍モードも搭載しています。藍モードを有効にすることで藍ちゃんをサイト上に召喚することが可能です。~~スマホだとそれなりに邪魔ですがそれも含めて~~お楽しみください。藍は地球を救う
+
+<button onclick="localStorage.setItem('aimode', 'true'); location.reload();">今すぐ藍モードをオンにする</button>
+
+→→→[Live2D藍ちゃん創造神](https://misskey.io/@shinamu476)←←←
+
+## ページ
+各ページはMarkdown(MFMみたいなもの(いや本来はMFMが「Markdownのようなもの」という立ち位置だけれども))というマークアップ言語で書かれています。Markdownを使うことで、簡単に見出し、リンク、画像、表といった要素を表現できるほか、
+
+::: tip
+こんな
+:::
+
+::: warning
+感じの
+:::
+
+::: danger
+メッセージ
+:::
+
+を表示したりできます。(厳密にはMarkdownの拡張構文)
+
+また、vuepressの機能により、各見出し(ヘッダ)にハッシュリンクが付くようになっています。
+
+このページのMarkdownソースを見たい方は[こちら](https://raw.githubusercontent.com/misskey-dev/misskey-hub/main/src/blog/2021-12-01-inside-misskey-hub.md)
+
+参考までに、同じ文章をMarkdownとHTMLとで書いた場合の比較を載せます。
+
+<CodeGroup>
+  <CodeGroupItem title="Markdown" active>
+
+```md:no-line-numbers
+## 静的サイト is 何
+Misskey Hub内のMisskey Hub説明ページにもあるように、Misskey Hubは[vuepress](https://v2.vuepress.vuejs.org/)を使った**静的サイト**(Static site)です。
+```
+
+  </CodeGroupItem>
+  <CodeGroupItem title="HTML">
+
+```html:no-line-numbers
+<h2>静的サイト is 何</h2>
+<p>Misskey Hub内のMisskey Hub説明ページにもあるように、Misskey Hubは<a href="https://v2.vuepress.vuejs.org/" target="_blank">vuepress</a>を使った<strong>静的サイト</strong>(Static site)です。</p>
+```
+
+  </CodeGroupItem>
+</CodeGroup>
+
+## インスタンス一覧
+「プラグイン」のセクションでも触れましたが、vuepressでは、Markdownで書かれたページ以外にも、プログラムで(コンパイル時に)生成するページを用意することができます。
+
+「インスタンス一覧」ページもその一つで、予めインスタンス一覧の情報をJSONという形式で用意しておき、それを基にしてインスタンス一覧ページをレンダリングするようになっています。
+
+各インスタンス紹介は、インスタンス側で用意されたプロフィールレンダリングページをiframeというHTMLの機能で埋め込んで表示するようになっています。したがって、一度Misskey Hubにインスタンスを登録してしまえば、インスタンスの名前、説明、バナー画像といった情報を更新した場合でもリアルタイムでインスタンス一覧に反映されます。
+
+::: tip
+インスタンス一覧へ掲載するインスタンスを募集しています。お気軽にご連絡ください🤗
+:::
+
+## 管理
+Misskey HubはMisskeyと同じく、**GitHub**(Git)上で管理しています。
+
+Gitで管理することで、全ての変更についての履歴が**リポジトリ**に保存され、簡単に過去の版を参照したり、変更を差し戻したりすることができます。
+
+リポジトリに内容の変更(新規ページの作成も含む)を適用することは**コミット**と呼ばれます。
+
+そのためMisskey Hub内の各Markdownページは、Wordpressなどとは違って、データベースなどではなくそのままファイルとして管理されます。
+
+## デプロイについて
+サイトの内容を実際のサーバーにアップロードし反映させることを**デプロイ**と呼びます。
+
+Misskey Hubにおいては、GitHub ActionsというGitHubの機能を利用して、サイトの内容に変更を加えると(リポジトリにコミットを行うと)自動でコンパイル & GitHub Pagesデプロイが行われる仕組みになっています。
+
+GitHub Pagesは前述した「静的サイトを提供してくれる機能」です。GitHubのインフラストラクチャ上で動くため、いちどデプロイしてしまえば、あとは何の心配もなくMisskey Hubが提供され続けます。
+
+::: warning
+「何の心配もなく」はちょっと言い過ぎたかもしれません。というのも、(強いていうと)ひとつだけ心配があって、それはドメインです。Misskey Hubはmisskey-hub.netというドメインで提供されていますが、これは私が用意したものです。そのため、もし万が一私がドメインの更新を忘れるとMisskey Hubに繋がらなくなりますが、そこは𝑇𝑟𝑢𝑠𝑡 𝑚𝑒
+:::
+
+通常のWebサイトであれば、サーバーにFTPでファイルをアップロードしたり、サーバーにSSHで繋いでファイルをダウンロードしてきたりといった作業が必要になりますが、GitHub Pagesではそのような手間すら要りません。
+
+デプロイを終えると、Misskey Hubがインターネット上に公開されてWebブラウザで見ることができるようになります。めでたし！
+
+## さいごに
+Misskey Hubは、Misskeyと同じくオープンソースであり、貢献はいつでも歓迎しています。まだまだ不足しているドキュメントも多いので、ぜひドキュメント拡充にご協力お願いします。インスタンスを運営してきた上で得られたナレッジなどをアウトプットする場としてもMisskey Hubを利用していただけると幸いです。また、Misskey Hubもi18nしており、ドキュメントの翻訳も歓迎です。
+
+この記事で、Misskey Hubの実装、ひいては静的サイトとは何か、SSGとは何かを何となくでも理解していただけたなら、また利用するだけではなかなか知ることがない開発の裏側について思いを馳せていただけたなら、幸いです。
+
+SSGはMisskey Hubのようなドキュメントサイトだけでなく、ブログなどにも使えるので、皆さんもぜひ活用してみてください。
+実際、この記事のようにMisskey Hubを開発ブログとしても使用しています。
+多少知識は要りますが、ゼロコストでブログ運営できるのでチャレンジする価値はあるはずです。(無料でブログ運営できるサービスはあるけど、広告が付いてくる)
+
+さて、ここまで一気呵成に書き上げて:hinata_acid:になってきたので、今回はここら辺で終わりにします。お付き合いいただきありがとうございました。
+
+この記事が参考になったり、面白かったりしたらぜひMisskeyでシェアお願いします！！！
+
+静的サイトはいいぞ。vuepressはいいぞ。Misskey Hubに幸あれ🙏
+
+::: details Webで記事を公開する際に必ず記述しなければならないと法令で定められている言葉
+> いかがでしたか？
+:::
+
+---
+
+もしMisskeyが少しでもあなたの生活を豊かにしていると感じたら、ぜひ開発に対して[Patreonで寄付](https://www.patreon.com/syuilo)することをご検討お願いします。喜びます。
+
+## P.S.
+藍ちゃんと**ツーショット**撮ったので見て！！！！
+![](https://s3.arkjp.net/misskey/c3e86103-2387-4c04-bf69-99173d857586.png)
+うぇへひひ
+
+## P.S. (2)
+**ニラ**はいいぞ。
+
+栄養があるし、加熱不要で調理も楽(ハサミで切って味噌に突っ込んでチンするだけで味噌汁できる)
+
+::: danger
+ただし加熱しないと風味が強すぎ、ちょっとしたワサビ食べてるみたいになるので多少訓練が必要
+:::

content/blog/2022-02-11-inside-mfm.md

@@ -0,0 +1,44 @@
+---
+description: 'MFMで使われている技術や考え方について紹介します。'
+---
+
+# インサイド MFM
+
+こんにちは、まりはちです🚀
+
+Misskey関係では主にMFM(Markup language For Misskey)やAiScript、MisskeyPagesの開発で関わっています。よろしくお願いします。
+
+今回の記事では、MFMで使われている技術や考え方について紹介しようと思います。
+少し専門的な内容を含むと思いますが、少々お付き合いください！
+
+## MisskeyはどうやってMFMを認識する？
+
+MFMで書かれた文字列をそのまま表示するだけだと、**太字にする**などの効果を与えることはできません。なぜなら、MFMはそのままでは普通の文字列なのでどの部分を**太字**にすればいいのかをMisskeyが認識できないためです。
+
+MisskeyがMFMで書かれた文字列の効果や構造を認識できるようにするためには、構文解析(パース)というステップが必要になります。
+
+構文解析の「構文」とは、例えば**太字**などの記法のことで、MFM構文を含む文字列を解釈してMisskeyが認識できる形のデータに変換することを構文解析(パース)といいます。構文解析はMFMの解析や表示をする上で重要な技術となっています。
+
+また、パースをするプログラムのことをパーサー(構文解析器)と呼びます。
+
+## MFMのパーサーはどのように動作するのか？
+
+MFMのパーサーは、1つのMFMの文字列を受け取り、それを解析することでMisskeyが認識できる形のデータに変換するプログラムです。
+
+```
+[MFMの文字列] --(MFMパーサーのプログラム)--> [Misskeyが認識できる形のデータ]
+```
+
+ここでは、MFMのパーサーの動作について少し見てみることにします。
+
+MFMパーサは、受け取った1つの文字列を、複数の部分として分割します。各部分は、**太字**などの効果が適用される部分と、効果が適用されない普通の文字列です。この各部分のことをノードと呼び、この全体のことをAST(抽象構文木)またはノードツリーと呼んでいます。
+
+この部分に分けることこそがMFMのパーサーが行うもっとも重要な仕事です。先ほど説明した「Misskeyが認識できる形のデータに変換する」とは、この明確に部分分けされたASTを生成することを指していました🚀
+
+## おわりに
+
+いかがでしたか？
+MFMで使われている技術について、基本的な考え方の部分についてお話しました。
+実際のMFMのパーサーはもう少し複雑なこともやっていますが、ベースにある考え方はここに書いたとおりです。
+
+構文解析はいいぞ。🚀

content/blog/2023-02-08-contribute-to-earn.md

@@ -0,0 +1,63 @@
+---
+description: 'Misskey開発に貢献すると報奨金がもらえるキャンペーンを行います。 We offer campaigns you to recieve rewards for contributing to the development of Misskey.'
+---
+
+# Contribute Misskey to Earn
+Misskey開発に貢献すると報奨金がもらえるキャンペーンを行います。  
+We offer campaigns you to recieve rewards for contributing to the development of Misskey.
+
+<https://misskey.io/notes/9auj9aj1ww>
+
+::: tip
+条件や報奨金の額は、予告なく変更になる場合があります。  
+Conditions and reward amounts are subject to change without notice.
+
+これ以外にも貢献に応じて不定期に給付金を支給中  
+In addition to those, benefits are being paid at irregular intervals based on contributions.
+:::
+
+::: warning
+報奨金の原資はパトロンの皆様からの寄付で成り立っています。  
+Rewards come from donations from patrons.
+
+[**→ 寄付について / About Donations**](../docs/donate.html)
+:::
+
+## カバレッジ上げ / Increase Coverage
+Codecovのカバレッジを1%上げるごとに、次に挙げる報奨金を全て獲得できます:  
+You will receive following rewards for every 1% increase of Codecov coverage:
+
+1. 1500JPY by syuilo
+2. 3500JPY by misskey.io <https://misskey.io/notes/9az5he1l9i>  
+   （支払い方法は銀行振込かPayPal.me / By PayPal.me but the amount may vary for overseas transfers.）
+
+## 型エラー潰し / Type Errors Buster
+TypeScriptで書かれたソースコードの型エラーを取り除くと、程度に応じて報奨金進呈  
+You will receive rewards according to the degree if you remove typing errors in source code written in TypeScript.
+
+## ドキュメント整備 / Documentation Maintenance
+Misskey Hubのドキュメントを整備すると、程度に応じて報奨金進呈  
+You will receive rewards according to the degree if you maintain the documentation in Misskey Hub.
+
+## 脆弱性の報告 / Report Vulnerability
+脆弱性の報告で、次に挙げる報奨金を全て獲得できます:  
+You will receive all of the following rewards if you report vulnerabilities to us:
+
+1. 程度に応じて（しゅいろ） / According to the degree by syuilo
+2. Critical is 10000JPY, High is 3000JPY by @ryotak@misskey.io  
+   Check the details: <https://misskey.io/notes/9az6dpm0nt>
+3. Critical is 10000JPY, High is 3000JPY by @AureoleArk@misskey.io  
+   <https://misskey.io/notes/9az75r71ld>
+
+脆弱性報告の方法 / How to report security issues:  
+<https://github.com/misskey-dev/misskey/blob/develop/SECURITY.md>
+
+## バックエンドのメモリリーク解消で2万円程度進呈 / Eliminate Memory Leaks in the Backend
+バックエンドのメモリリークを解消すると、2万円程度進呈します。  
+You will receive 20000JPY when you can eliminate memory leaks in the backend.
+
+## フロントエンドのメモリリーク解消で2万円程度進呈 / Eliminate Memory Leaks in the Frontend
+フロントエンドのメモリリークを解消すると、2万円程度進呈します。  
+You will receive 20000JPY when you can eliminate memory leaks in the frontend.
+
+<https://misskey.io/notes/9az626p0ve>

locales/ja-JP.yml

@@ -101,4 +101,10 @@ _servers:
     inviteOnly: "招待のみ"
   _list:
     notFound: "指定された条件に合致するサーバーは見つかりませんでした。"
-    showMore: "もっと見る"    
+    showMore: "もっと見る"
+_docs:
+  title: "ドキュメント"
+  description: "Misskeyの上手なつかいかたから、サーバーの運営者・プログラムの開発者向けの情報まで網羅しています。"
+_blog:
+  title: "ブログ"
+  description: "Misskey開発本部から、Misskeyに関する最新情報やTips等をお届けします！"

nuxt.config.ts

@@ -4,7 +4,6 @@ import svgLoader from 'vite-svg-loader';
 import genSitemap from './scripts/gen-sitemap';
 
 export default defineNuxtConfig({
-	devtools: { enabled: true },
 	css: [
 		"@/assets/css/tailwind.css",
 		"@/assets/css/bootstrap-forms.scss",

package.json

@@ -11,7 +11,6 @@
   "devDependencies": {
     "@modyfi/vite-plugin-yaml": "^1.0.4",
     "@nuxt/content": "^2.7.0",
-    "@nuxt/devtools": "latest",
     "@nuxtjs/color-mode": "^3.3.0",
     "@nuxtjs/i18n": "8.0.0-beta.13",
     "@types/node": "^18",

pages/blog/[slug].vue

@@ -0,0 +1,16 @@
+<template>
+    <div>
+        あ
+    </div>
+</template>
+
+<script setup lang="ts">
+// 日本語でしか提供されない
+defineI18nRoute({
+    locales: ['ja'],
+});
+</script>
+
+<style scoped>
+
+</style>

pages/blog/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <GHero>
+            <template #title>{{ $t('_blog.title') }}</template>
+            <template #description>
+                {{ $t('_blog.description') }}
+            </template>
+            <template #icon>
+                <div class="hidden lg:block relative px-6 py-8">
+                    <GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
+                    <GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
+                    <div class="relative lg:w-72">
+                        <img class="drop-shadow-xl" src="/img/emojis/open_mailbox_with_raised_flag_3d.png" />
+                    </div>
+                </div>
+            </template>
+        </GHero>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

pages/docs/index.vue

@@ -0,0 +1,28 @@
+<template>
+    <div>
+        <GHero>
+            <template #title>{{ $t('_docs.title') }}</template>
+            <template #description>
+                {{ $t('_seo.defaultDescription') + $t('_docs.description') }}
+            </template>
+            <template #icon>
+                <div class="hidden lg:block relative px-6 py-8">
+                    <GDots class="absolute top-0 left-0 w-32 h-32 text-accent-600" />
+                    <GDots class="absolute bottom-0 right-0 w-32 h-32 text-accent-600" />
+                    <div class="relative lg:w-72 rotate-6">
+                        <img class="drop-shadow-xl" src="/img/emojis/green_book_3d.png" />
+                    </div>
+                </div>
+            </template>
+        </GHero>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

pages/servers.vue

@@ -29,7 +29,7 @@
                 </div>
             </template>
         </GHero>
-        <div class="my-12 pt-6 bg-white dark:bg-slate-950">
+        <div class="mb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950">
             <div class="container mx-auto max-w-screen-xl px-6 grid server-list gap-8">
                 <aside class="hidden lg:block">
                     <div class="sticky top-24 py-2 space-y-4">