From 89f16c36b3251a4fb9107983dae617be6bb3d209 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?= <67428053+kakkokari-gtyih@users.noreply.github.com> Date: Sat, 6 Apr 2024 17:06:58 +0900 Subject: [PATCH] =?UTF-8?q?feat(docs):=20=E3=82=B9=E3=83=86=E3=83=83?= =?UTF-8?q?=E3=83=97=E3=83=90=E3=82=A4=E3=82=B9=E3=83=86=E3=83=83=E3=83=97?= =?UTF-8?q?=E3=82=AC=E3=82=A4=E3=83=89=20(#145)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(docs): ステップバイステップガイドを追加 * fix * fix * docs * add docs --- composables/useScrollSpy.ts | 46 ++++-- .../2.for-users/5.stepped-guides/1.index.md | 11 ++ .../2.for-users/5.stepped-guides/_dir.yml | 2 + .../5.stepped-guides/how-to-use-pwa.yml | 82 ++++++++++ locales/ja-JP.yml | 2 + pages/docs/[...slug].vue | 143 ++++++++++++++++-- .../how-to-use-pwa/android/sp_0.png | Bin 0 -> 18005 bytes .../how-to-use-pwa/android/sp_1.png | Bin 0 -> 15141 bytes .../how-to-use-pwa/android/sp_2.png | Bin 0 -> 24428 bytes .../how-to-use-pwa/android/sp_3.png | Bin 0 -> 82773 bytes .../how-to-use-pwa/ios/sp_0.png | Bin 0 -> 20685 bytes .../how-to-use-pwa/ios/sp_1.png | Bin 0 -> 18665 bytes .../how-to-use-pwa/ios/sp_2.png | Bin 0 -> 18361 bytes .../how-to-use-pwa/ios/sp_3.png | Bin 0 -> 63930 bytes types/content.ts | 29 +++- 15 files changed, 283 insertions(+), 32 deletions(-) create mode 100644 content/ja/docs/2.for-users/5.stepped-guides/1.index.md create mode 100644 content/ja/docs/2.for-users/5.stepped-guides/_dir.yml create mode 100644 content/ja/docs/2.for-users/5.stepped-guides/how-to-use-pwa.yml create mode 100644 public/img/docs/for-users/stepped-guides/how-to-use-pwa/android/sp_0.png create mode 100644 public/img/docs/for-users/stepped-guides/how-to-use-pwa/android/sp_1.png create mode 100644 public/img/docs/for-users/stepped-guides/how-to-use-pwa/android/sp_2.png create mode 100644 public/img/docs/for-users/stepped-guides/how-to-use-pwa/android/sp_3.png create mode 100644 public/img/docs/for-users/stepped-guides/how-to-use-pwa/ios/sp_0.png create mode 100644 public/img/docs/for-users/stepped-guides/how-to-use-pwa/ios/sp_1.png create mode 100644 public/img/docs/for-users/stepped-guides/how-to-use-pwa/ios/sp_2.png create mode 100644 public/img/docs/for-users/stepped-guides/how-to-use-pwa/ios/sp_3.png diff --git a/composables/useScrollSpy.ts b/composables/useScrollSpy.ts index 8a27e31f..9763702d 100644 --- a/composables/useScrollSpy.ts +++ b/composables/useScrollSpy.ts @@ -1,32 +1,47 @@ -import type { Ref } from 'vue' - /** * Scrollspy allows you to watch visible headings in a specific page. * Useful for table of contents live style updates. */ -export const useScrollspy = () => { - const observer = ref() as Ref - const visibleHeadings = ref([]) as Ref - const activeHeadings = ref([]) as Ref +export const useScrollspy = (config?: IntersectionObserverInit) => { + let observingElements: Element[] = []; - const observerCallback = (entries: IntersectionObserverEntry[]) => + const observer = ref(); + const visibleHeadings = ref([]); + const activeHeadings = ref([]); + const mainHeading = ref(null); + + function observerCallback(entries: IntersectionObserverEntry[]) { entries.forEach((entry) => { - const id = entry.target.id + const id = entry.target.id; - if (entry.isIntersecting) { visibleHeadings.value.push(id) } else { visibleHeadings.value = visibleHeadings.value.filter(t => t !== id) } - }) + if (entry.isIntersecting) { + visibleHeadings.value.push(id); + } else { + visibleHeadings.value = visibleHeadings.value.filter((t) => t !== id); + } + }); - const updateHeadings = (headings: Element[]) => - headings.forEach((heading) => { - observer.value.observe(heading) - }) + mainHeading.value = entries.reduce((max, entry) => (entry.intersectionRatio > max.intersectionRatio ? entry : max), entries[0]).target.id; + } + + function updateHeadings(headings: Element[]) { + observingElements.forEach((el) => { + observer.value?.unobserve(el); + }); + + observingElements = headings; + + observingElements.forEach((heading) => { + observer.value?.observe(heading); + }); + } watch(visibleHeadings, (val, oldVal) => { if (val.length === 0) { activeHeadings.value = oldVal } else { activeHeadings.value = val } }, { deep: true }) // Create intersection observer - onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback))) + onBeforeMount(() => (observer.value = new IntersectionObserver(observerCallback, config))) // Destroy it onBeforeUnmount(() => observer.value?.disconnect()) @@ -34,6 +49,7 @@ export const useScrollspy = () => { return { visibleHeadings, activeHeadings, + mainHeading, updateHeadings } } \ No newline at end of file diff --git a/content/ja/docs/2.for-users/5.stepped-guides/1.index.md b/content/ja/docs/2.for-users/5.stepped-guides/1.index.md new file mode 100644 index 00000000..a11ea4ea --- /dev/null +++ b/content/ja/docs/2.for-users/5.stepped-guides/1.index.md @@ -0,0 +1,11 @@ +# ステップバイステップガイド + +このセクションでは、Misskeyを利用する中で見られる複雑な操作を、一歩ずつ丁寧に解説しています。 + +:::warning + +このセクションはベータ版です。内容が不完全である可能性があります。 + +::: + + diff --git a/content/ja/docs/2.for-users/5.stepped-guides/_dir.yml b/content/ja/docs/2.for-users/5.stepped-guides/_dir.yml new file mode 100644 index 00000000..b0bbe3ae --- /dev/null +++ b/content/ja/docs/2.for-users/5.stepped-guides/_dir.yml @@ -0,0 +1,2 @@ +title: "ステップバイステップガイド" +description: "Misskeyの操作を一歩ずつ丁寧に解説しています。操作方法がわからなくなったらここをチェック！" diff --git a/content/ja/docs/2.for-users/5.stepped-guides/how-to-use-pwa.yml b/content/ja/docs/2.for-users/5.stepped-guides/how-to-use-pwa.yml new file mode 100644 index 00000000..7b2d87d7 --- /dev/null +++ b/content/ja/docs/2.for-users/5.stepped-guides/how-to-use-pwa.yml @@ -0,0 +1,82 @@ +title: "Misskey Webをアプリ化して使う方法" +description: "Misskey WebをPWAアプリ化する方法をご紹介します。スマートフォンでMisskeyを利用する際のおすすめの方法です。" + +# Do not translate any keys that includes underscore + +_TYPE_: "STEPPED_GUIDE" + +body: | + ここでは、Misskey WebをPWAアプリ化する方法をご紹介します。スマートフォンでMisskeyを利用する際のおすすめの方法です。 + + ## PWAとは？ + + PWAは、Progressive Web Appの略で、ウェブページをアプリのように扱うことができる技術です。Misskeyは、標準でPWAに対応しています。 + + ここでは、PWAの設定方法を端末のOS別に紹介しています。以下からお使いのOSを選んで進んでください！ + +guides: + - _AUTOSELECT_TYPE_: "OS_ANDROID" + _LAYOUT_TYPE_: "IMAGE_PORTRAIT_FIXED" + title: "Android (Google Chrome)" + description: | + AndroidでPWAをお使いになる際は、Google Chromeがおすすめです。 + + ここでは、Google Chromeを使用した設定方法について解説します。 + + steps: + - title: "PWAにしたいMisskeyサーバーを開く" + image: "android/sp_0.png" + description: | + PWAとして端末にインストールしたいMisskeyサーバーにアクセスし、ログインしてください。 + + - title: "詳細設定メニューを開く" + image: "android/sp_1.png" + description: | + Misskeyサーバーの任意のページを開いたまま、右上にある「︙」ボタンをタップします。 + + - title: "「ホーム画面に追加」または「アプリをインストール」をタップ" + image: "android/sp_2.png" + description: | + メニュー内にある「ホーム画面に追加」もしくは「アプリをインストール」の項目をタップし、出てきたダイアログの指示に従ってください。 + + - title: "ホーム画面を確認する" + image: "android/sp_3.png" + description: | + しばらくすると、ホーム画面に、サーバーのアイコンもしくはMisskeyのアイコンが追加されます。 + + このアイコンをタップすることで、Misskeyはアプリモードで起動します。 + + - _AUTOSELECT_TYPE_: "OS_IOS" + _LAYOUT_TYPE_: "IMAGE_PORTRAIT_FIXED" + title: "iOS / iPadOS" + description: | + iOS または iPadOS でPWAをお使いになる際は、Safariをご利用ください。 + + 開始する前に、お使いの端末に搭載されているOSが最新のものかどうかを確認してください。最新ではない場合は、[こちら](https://support.apple.com/ja-jp/ios/update)を参考にしてアップデートしてください。 + + steps: + - title: "PWAにしたいMisskeyサーバーを開く" + image: "ios/sp_0.png" + description: | + PWAとして端末にインストールしたいMisskeyサーバーにアクセスし、ログインしてください。 + + - title: "共有ボタンをタップして開く" + image: "ios/sp_1.png" + description: | + Misskeyサーバーの任意のページを開いたまま、メニューバーの共有ボタンをタップします。 + + - title: "「ホーム画面に追加」をタップ" + image: "ios/sp_2.png" + description: | + オプションのリストを下にスクロールしてから、「ホーム画面に追加」をタップします。 + + この後、通知の送信許可を求められることがありますので、画面の指示に従い、必要に応じて許可してください。 + + 「ホーム画面に追加」が表示されない場合は、設定項目が非表示になっている可能性があります。表示するには、リストの一番下までスクロールし、「アクションを編集」から「ホーム画面に追加」の項目を追加してください。詳しくは[Appleのサポートページ](https://support.apple.com/ja-jp/guide/iphone/iph42ab2f3a7/ios)をご覧ください。 + + - title: "ホーム画面を確認する" + image: "ios/sp_3.png" + description: | + しばらくすると、ホーム画面に、サーバーのアイコンもしくはMisskeyのアイコンが追加されます。 + + このアイコンをタップすることで、Misskeyはアプリモードで起動します。 diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index 8aafdb7f..ce9e0fa0 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -172,6 +172,8 @@ _docs: _toc: title: "このページの内容" toPageTop: "ページ上部に戻る" + _steppedGuide: + selectCourse: "ガイドを選ぶ" _blog: title: "ブログ" diff --git a/pages/docs/[...slug].vue b/pages/docs/[...slug].vue index c062da90..5b20a986 100644 --- a/pages/docs/[...slug].vue +++ b/pages/docs/[...slug].vue @@ -1,7 +1,12 @@