(add) tools

layouts/slim.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+const isNavOpen = ref<boolean>(false);
+
+useHead({
+    htmlAttrs: {
+        class: 'scroll-pt-32 lg:scroll-pt-20',
+    },
+});
+
+</script>
+
+<template>
+    <div class="bg-white dark:bg-slate-950">
+        <GNav @toggleNav="isNavOpen = !isNavOpen" :is-open="isNavOpen" :slim="true" :disable-shadow="true" />
+        <div class="main-content" :class="$style.slimPageRoot">
+            <slot />
+        </div>
+        <GFooter class="bg-slate-100 dark:bg-gray-900" />
+    </div>
+</template>
+
+<style module>
+.slimPageRoot {
+    min-height: calc(100vh - 4rem);
+}
+</style>

locales/ja-JP.yml

@@ -1,16 +1,19 @@
 noScript: "現在Javascriptが無効になっています。サイトの表示にはJavascriptが必須となりますので有効にしてください。"
 learnMore: "詳しく知る"
 loading: "読み込み中…"
+
 _seo:
   siteName: "Misskey Hub"
   defaultTitleTagline: "ノートでひろがるネットワーク"
   defaultDescription: "Misskeyはオープンソースの分散型ソーシャルネットワーキングプラットフォームです。"
+
 _nav:
   servers: "サーバー"
   docs: "ドキュメント"
   blog: "ブログ"
   other: "もっと！"
   switchLang: "言語の設定"
+
 _landing:
   _hero:
     description: "Misskeyはオープンソースの分散型ソーシャルネットワーキングプラットフォームです。"
@@ -77,6 +80,7 @@ _landing:
     description: "Misskeyは非営利なため、開発資金は皆様からの寄付に頼っています。Misskeyを気に入られたら、今後も開発を続けられるようにぜひ支援をお願いします。"
   _sponsors:
     title: "スポンサー"
+
 _servers:
   title: "サーバー一覧"
   description: "Misskeyは単一のサービスではなく、各々がサービスを提供する分散型ネットワークとなっています。Misskeyを利用するには、サービスを提供しているサーバーでアカウントを作成する必要があります。"
@@ -104,6 +108,7 @@ _servers:
   _list:
     notFound: "指定された条件に合致するサーバーは見つかりませんでした。"
     showMore: "もっと見る"
+
 _docs:
   title: "ドキュメント"
   description: "Misskeyの上手なつかいかたから、サーバーの運営者・プログラムの開発者向けの情報まで網羅しています。"
@@ -126,18 +131,22 @@ _docs:
   _toc:
     title: "このページの内容"
     toPageTop: "ページ上部に戻る"
+
 _blog:
   title: "ブログ"
   description: "Misskey開発本部から、Misskeyに関する最新情報やTips等をお届けします！（日本語のみ）"
   back: "戻る"
+
 _content:
   tip: "ヒント"
   warning: "注意"
   danger: "警告"
   preview: "プレビュー"
+
 _other:
   title: "もっと！"
   description: "Misskeyをもっと楽しめるその他のリソースをご紹介しています。"
+
 _brandAssets:
   title: "アセット集"
   description: "Misskeyのロゴ、アイコンなどのアセットのコレクションです。一定のライセンスのもとでご自由にお使いいただけます。"
@@ -146,6 +155,7 @@ _brandAssets:
   logo: "ロゴ"
   icon: "アイコン"
   banner: "バナー"
+
 _links:
   title: "リンク"
   _github:
@@ -160,6 +170,17 @@ _links:
   _aiChan:
     title: "藍"
     description: "Misskeyの看板娘、藍のウェブサイトです。"
+
+_tools:
+  title: "ツール集"
+  description: "Misskey向けの便利ツールを公開中！"
+  _forUsers:
+    title: "Misskeyユーザー向け"
+
+_mfmPlayground:
+  title: "MFMお試しコーナー"
+  description: "MFMを自由に練習できます！Misskeyの投稿画面・ノートの画面を再現！"
+
 _api:
   _permissions:
     title: "権限"

pages/learn-more.vue

@@ -24,6 +24,12 @@
                         description: $t('_brandAssets.description'),
                         img: '/img/emojis/artist_palette_3d.png',
                     },
+                    {
+                        to: localePath('/tools/'),
+                        title: $t('_tools.title'),
+                        description: $t('_tools.description'),
+                        img: '/img/emojis/toolbox_3d.png',
+                    },
                     {
                         to: 'https://github.com/misskey-dev',
                         title: $t('_links._github.title'),

pages/tools/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <div>
+        <GHero>
+            <template #title>{{ $t('_tools.title') }}</template>
+            <template #description>
+                {{ $t('_tools.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-64 h-64 flex items-center">
+                        <img class="drop-shadow-xl toolsHeroToolbox" src="/img/emojis/toolbox_3d.png" />
+                    </div>
+                </div>
+            </template>
+        </GHero>
+        <div class="pb-12 lg:mt-12 pt-6 bg-white dark:bg-slate-950">
+            <div class="container mx-auto max-w-screen-xl px-6 space-y-6 lg:space-y-8">
+                <GLocalNav :items="[
+                    {
+                        name: $t('_tools._forUsers.title'),
+                        anchor: '#forUsers',
+                    },
+                ]" />
+                <section>
+                    <h2 class="text-2xl lg:text-3xl font-bold mb-4">
+                        {{ $t(`_tools._forUsers.title`) }}
+                    </h2>
+                    <GLinks :wide="true" :items="[
+                        {
+                            to: localePath('/tools/mfm-playground/'),
+                            title: $t('_mfmPlayground.title'),
+                            description: $t('_mfmPlayground.description'),
+                        }
+                    ]" />
+                </section>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+const localePath = useLocalePath();
+</script>
+
+<style>
+.toolsHeroToolbox:hover {
+animation: .75s linear 0s 1 normal both running tada;
+}
+</style>

pages/tools/mfm-playground.vue

@@ -0,0 +1,30 @@
+<template>
+    <div class='container mx-auto max-w-screen-xl px-6 py-6'>
+        <h1 class='text-2xl lg:text-3xl font-bold mb-4'>
+            {{ $t(`_mfmPlayground.title`) }}
+        </h1>
+        <div class='rounded-lg grid grid-cols-2'>
+            WIP
+        </div>
+    </div>
+</template>
+
+<script setup lang='ts'>
+definePageMeta({
+    layout: 'slim',
+});
+
+const mfmText = ref<string>();
+const mfmHost = ref<string>('misskey.io');
+</script>
+
+<style module>
+.mfmRoot {
+    font-family: Hiragino Maru Gothic Pro,BIZ UDGothic,Roboto,HelveticaNeue,Arial,sans-serif;
+    line-height: 1.35;
+}
+
+.mfmRoot img {
+    display: inline;
+}
+</style>