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 @@