feat(frontend): ノート・ユーザータイムライン埋め込み #13929

kakkokari-gtyih · 2024-06-01T15:22:07Z

What

Why

Fix #1714
Close #10491

Additional info (optional)

カスタマイズ用パラメータ

共通

colorMode: light | dark | auto。カラーモードのオーバーライド。デフォルト: auto
rounded: true | false。角丸にするかどうか。デフォルト: true
border: true | false。外周のボーダーをつけるかどうか。デフォルト: true

TL系

header: true | false。上部にヘッダを設けるかどうか。デフォルト: true
autoload: true | false。無限スクロールするかどうか。デフォルト: false
maxHeight: 数値。設定すると、指定した高さ以降はスクロールバーが出る。指定しない場合はどこまでも伸びる（デフォルトで何らかの値を設定した状態のコードを生成する）

埋め込みコード

たぶんミニファイして2行になると思う

<iframe src="http://localhost:5173/embed/notes/9qhdxot24f?" data-misskey-embed-id="v1_8482df8f-5f43-49f4-9c18-f2c6b013f9ba" style="border: none; width: 100%; max-width: 500px; height: 300px; color-scheme: light dark;"></iframe>
<script defer src="http://localhost:5173/embed.js"></script>

その他

/packages/backend/assets/embed.js （親ページ側から読み込むiframe制御用スクリプト）はいろいろ使いまわしやすいようにSPDXをMITライセンスとしている

Checklist

Read the contribution guide
Test working in a local environment
(If needed) Add story of storybook
(If needed) Update CHANGELOG.md
(If possible) Add tests

github-actions · 2024-06-01T15:23:46Z

このPRによるapi.jsonの差分

差分はこちら

Get diff files from Workflow Page

codecov · 2024-06-01T15:24:42Z

Codecov Report

Attention: Patch coverage is 17.38241% with 808 lines in your changes missing coverage. Please review.

Project coverage is 41.27%. Comparing base (0d0cd73) to head (21e23c0).
Report is 1 commits behind head on develop.

Files with missing lines	Patch %	Lines
...s/frontend/src/components/MkEmbedCodeGenDialog.vue	0.00%	411 Missing and 1 partial ⚠️
packages/frontend/src/scripts/stream-mock.ts	0.00%	80 Missing and 1 partial ⚠️
packages/frontend/src/scripts/get-embed-code.ts	36.78%	55 Missing ⚠️
...ages/backend/src/server/web/ClientServerService.ts	4.87%	39 Missing ⚠️
packages/frontend/src/pages/clip.vue	0.00%	26 Missing ⚠️
packages/frontend/src/router/main.ts	28.57%	20 Missing ⚠️
packages/frontend/src/scripts/get-note-menu.ts	11.11%	16 Missing ⚠️
packages/frontend/src/pages/tag.vue	0.00%	14 Missing ⚠️
packages/frontend/src/boot/main-boot.ts	0.00%	13 Missing ⚠️
packages/frontend/src/scripts/is-link.ts	0.00%	11 Missing and 1 partial ⚠️
... and 56 more

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #13929      +/-   ##
===========================================
- Coverage    41.46%   41.27%   -0.19%     
===========================================
  Files         1551     1543       -8     
  Lines       196719   196679      -40     
  Branches      3618     3549      -69     
===========================================
- Hits         81564    81181     -383     
- Misses      114591   114902     +311     
- Partials       564      596      +32

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

syuilo · 2024-06-02T00:38:30Z

/preview

syuilo · 2024-06-02T00:46:36Z

特定の操作でログインダイアログ出せるわね

syuilo · 2024-06-02T00:50:00Z

考えられる対応

embedではページ遷移禁止
embedではログインAPI叩くの禁止

syuilo · 2024-06-02T00:51:08Z

ページ遷移は必ず新しいタブの方が良いわね

syuilo · 2024-06-02T00:52:18Z

特定の操作でログインダイアログ出せるわね

時間クリックして投稿詳細に遷移する手法
アバタークリックしてユーザーページに遷移する手法
名前クリックしてユーザーページに遷移する手法

syuilo · 2024-06-02T00:55:00Z

あと何らかの原因で「読み込みに失敗しました」ページが表示されてしまうとそこからいろいろアクセスできてしまいそう

syuilo · 2024-06-02T00:56:42Z

やっぱり場合によってはこの画面を出すことが可能であることを確認

syuilo · 2024-06-02T02:11:57Z

あとWebSocketに繋ぐのは無駄そう

kakkokari-gtyih · 2024-06-02T04:07:35Z

あとWebSocketに繋ぐのは無駄そう

将来的にLTL埋め込みとかが入ると使うかもしれない（ただし通常の埋め込みに必要ないのは事実なのでBootOptionsで切れるようにするのがよさそう

syuilo · 2024-06-02T04:14:13Z

LTL埋め込む場合でもポーリングで事足りそう

kakkokari-gtyih · 2024-06-02T10:58:07Z

ページ遷移は必ず新しいタブの方が良いわね

navHookで全部別窓に飛ばすようにした

kakkokari-gtyih · 2024-06-02T11:20:05Z

やっぱり場合によってはこの画面を出すことが可能であることを確認

これってどこ由来の画面だっけ

syuilo · 2024-06-02T11:34:46Z

boot.js

kakkokari-gtyih · 2024-06-02T23:59:21Z

boot.js

embed画面では追加CSS読み込んで単に非表示にするだけでよさそう？（boot.jsをいじるとめんどくさそうなので）

kakkokari-gtyih · 2024-06-03T00:33:51Z

WebSocketを無効にするのが難しそう

kakkokari-gtyih · 2024-06-03T00:51:54Z

boot.js

embed画面では追加CSS読み込んで単に非表示にするだけでよさそう？（boot.jsをいじるとめんどくさそうなので）

そうした

kakkokari-gtyih · 2024-06-03T02:28:26Z

右上にサーバーアイコン出すやつやりたいけど構造的にしんどそう（MkNoteSubとかがあると余計）

kakkokari-gtyih · 2024-06-03T02:56:22Z

右上にサーバーアイコン出すやつやりたいけど構造的にしんどそう

MkNoteDetailedをこねこねしてなんとかした

kakkokari-gtyih · 2024-06-03T10:13:57Z

kakkokari-gtyih · 2024-06-03T12:57:11Z

埋め込みコードジェネレーターのフロントエンド側実装のうち詳細設定（パラメータをGUIで設定してプレビューするやつ）の部分については最悪Misskey Hubにドキュメント置いておくのでもいいかもしれない

あとWebSocketに繋ぐのは無駄そう

No Websocket モード #12227 については私では生半可にいじるとまずいかもしれないので @syuilo さんとかにやっていただきたい気持ち

packages/frontend/vite.config.local-dev.ts

kakkokari-gtyih · 2024-06-06T09:24:42Z

埋め込みコードの仕様が変わったときのことを考えてサーバーからサイズ調整用JSを配信するのが良いのかなと思ったりした
Mastodonはそうやってるっぽい

<iframe src="https://mastodon.social/@superdiey/112568890847967947/embed" class="mastodon-embed" style="max-width: 100%; border: 0" width="400" allowfullscreen="allowfullscreen"></iframe>
<script src="https://mastodon.social/embed.js" async="async"></script>

syuilo · 2024-06-07T05:41:34Z

packages/frontend/src/_boot_.ts

embed-bootを作った方が良さそう

embed_boot.tsを作ってエントリーポイントごと分けるということ？それともsub-bootとかの並列で処理を分けたほうがいいということ？

前者だわね

エントリーポイント分けたらサーバーサイドdevモードでHMRが効かなくなった

キャッシュ消したらいけた

kakkokari-gtyih · 2024-06-07T08:40:11Z

だいたいできてきたのでここいらでまわりの人の意見を聞きたい

現時点での懸案事項

① iframeサイズ調整用のscriptをどうするか
将来的にiframe埋め込み時の通信の構造を変更するかもしれないことを考えると、制御用コードを直で置くのではなく、サーバーから親ページ用のコードを読み込ませる方式のほうが良いんじゃないかとも思っている（詳細→ #13929 (comment) ）

② websocketを切る
（やろうとしたけど結構根が深そうだった＋別件でNo Websocketモードが提案されていた）ので @syuilo さんあたりにちゃんとやってもらいたい気持ち

③ 他の埋め込みウィジェット
募集中

kakkokari-gtyih · 2024-09-09T09:10:58Z

frontend-embedとfrontend-sharedに対してCIがないかも
（たぶんeslintだけでいいとおもう）

kakkokari-gtyih · 2024-09-09T09:33:24Z

frontend-sharedがそもそもlintできてない・・・

kakkokari-gtyih · 2024-09-09T09:46:02Z

frontend-sharedがそもそもlintできてない・・・

Error while loading rule '@typescript-eslint/no-unnecessary-condition': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

syuilo · 2024-09-09T11:13:22Z

マージするぞ

kakkokari-gtyih · 2024-09-09T11:13:58Z

frontend-sharedがそもそもlintできてない・・・

Error while loading rule '@typescript-eslint/no-unnecessary-condition': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

これなおしたいけど謎

syuilo · 2024-09-09T11:14:47Z

謎

kakkokari-gtyih · 2024-09-09T11:46:36Z

直った可能性がある

syuilo · 2024-09-09T11:57:41Z

🙏🏻🙏🏻🙏🏻

syuilo · 2024-09-09T11:58:02Z

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

kakkokari-gtyih · 2024-09-09T12:43:22Z

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

ちょっと時間かかるかもしれないけどやっておく

syuilo · 2024-09-11T09:16:20Z

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

ちょっと時間かかるかもしれないけどやっておく

これもう着手されてるかしら

kakkokari-gtyih · 2024-09-12T10:29:29Z

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

ちょっと時間かかるかもしれないけどやっておく

これもう着手されてるかしら

まだかも

kakkokari-gtyih · 2024-09-14T03:06:46Z

@kakkokari-gtyih 戻した分のPRを作ってもらうことできるかしら

#14546

github-actions bot added packages/frontend Client side specific issue/PR packages/backend Server side specific issue/PR labels Jun 1, 2024

kakkokari-gtyih changed the title ~~feat(frontend): ノート・ユーザータイムライン・ローカルタイムライン埋め込み~~ feat(frontend): ノート・ユーザータイムライン埋め込み Jun 1, 2024

kakkokari-gtyih commented Jun 3, 2024

View reviewed changes

packages/frontend/vite.config.local-dev.ts Outdated Show resolved Hide resolved

This comment was marked as resolved.

Sign in to view

syuilo reviewed Jun 7, 2024

View reviewed changes

kakkokari-gtyih added 5 commits September 9, 2024 17:00

fix type error

1ae92eb

fix duplicated import

1510d35

fix lint

5179840

fix

1209ebc

コメントとして残す

9c7dfae

kakkokari-gtyih added 2 commits September 9, 2024 18:13

sharedとembedをlint対象にする

b2743d6

lint

c676530

kakkokari-gtyih added 2 commits September 9, 2024 20:36

attempt to fix eslint (frontend-shared)

2ea0b57

lint fixes

21e23c0

syuilo merged commit 2cbe1d1 into misskey-dev:develop Sep 9, 2024
34 checks passed

kakkokari-gtyih mentioned this pull request Sep 9, 2024

!(DI in frontend) #14529

Open

kakkokari-gtyih deleted the feat-1714 branch September 9, 2024 14:33

kakkokari-gtyih restored the feat-1714 branch September 9, 2024 14:33

syuilo mentioned this pull request Sep 10, 2024

frontend: frontend-embed/src/to-be-shared を共通化する #14530

Closed

1 task

syuilo mentioned this pull request Sep 14, 2024

fix: 通知からロール参照時にロールが存在しないときの例外処理を追加 #14500

Open

5 tasks

kakkokari-gtyih deleted the feat-1714 branch September 14, 2024 03:06

kakkokari-gtyih mentioned this pull request Sep 14, 2024

refactor(frontend): #13929 の revert の revert #14546

Draft

5 tasks

feat(frontend): ノート・ユーザータイムライン埋め込み #13929

feat(frontend): ノート・ユーザータイムライン埋め込み #13929

Conversation

kakkokari-gtyih commented Jun 1, 2024 • edited Loading

What

Why

Additional info (optional)

カスタマイズ用 パラメータ

共通

TL系

埋め込みコード

その他

Checklist

github-actions bot commented Jun 1, 2024 • edited Loading

codecov bot commented Jun 1, 2024 • edited Loading

Codecov Report

syuilo commented Jun 2, 2024

syuilo commented Jun 2, 2024

syuilo commented Jun 2, 2024

syuilo commented Jun 2, 2024

syuilo commented Jun 2, 2024 • edited Loading

syuilo commented Jun 2, 2024

syuilo commented Jun 2, 2024

syuilo commented Jun 2, 2024

kakkokari-gtyih commented Jun 2, 2024

syuilo commented Jun 2, 2024

kakkokari-gtyih commented Jun 2, 2024

kakkokari-gtyih commented Jun 2, 2024 • edited Loading

syuilo commented Jun 2, 2024

kakkokari-gtyih commented Jun 2, 2024

kakkokari-gtyih commented Jun 3, 2024 • edited Loading

kakkokari-gtyih commented Jun 3, 2024

kakkokari-gtyih commented Jun 3, 2024 • edited Loading

kakkokari-gtyih commented Jun 3, 2024 • edited Loading

kakkokari-gtyih commented Jun 3, 2024

kakkokari-gtyih commented Jun 3, 2024 • edited Loading

This comment was marked as resolved.

kakkokari-gtyih commented Jun 6, 2024 • edited Loading

syuilo Jun 7, 2024

Choose a reason for hiding this comment

kakkokari-gtyih Jun 7, 2024

Choose a reason for hiding this comment

syuilo Jun 7, 2024

Choose a reason for hiding this comment

kakkokari-gtyih Jun 7, 2024

Choose a reason for hiding this comment

This comment was marked as resolved.

kakkokari-gtyih Jun 7, 2024

Choose a reason for hiding this comment

kakkokari-gtyih commented Jun 7, 2024 • edited Loading

現時点での懸案事項

kakkokari-gtyih commented Sep 9, 2024 • edited Loading

kakkokari-gtyih commented Sep 9, 2024

kakkokari-gtyih commented Sep 9, 2024

syuilo commented Sep 9, 2024

kakkokari-gtyih commented Sep 9, 2024

syuilo commented Sep 9, 2024

kakkokari-gtyih commented Sep 9, 2024

syuilo commented Sep 9, 2024

syuilo commented Sep 9, 2024

kakkokari-gtyih commented Sep 9, 2024 • edited Loading

syuilo commented Sep 11, 2024

kakkokari-gtyih commented Sep 12, 2024

kakkokari-gtyih commented Sep 14, 2024

kakkokari-gtyih commented Jun 1, 2024 •

edited

Loading

カスタマイズ用パラメータ

github-actions bot commented Jun 1, 2024 •

edited

Loading

codecov bot commented Jun 1, 2024 •

edited

Loading

syuilo commented Jun 2, 2024 •

edited

Loading

kakkokari-gtyih commented Jun 2, 2024 •

edited

Loading

kakkokari-gtyih commented Jun 3, 2024 •

edited

Loading

kakkokari-gtyih commented Jun 3, 2024 •

edited

Loading

kakkokari-gtyih commented Jun 3, 2024 •

edited

Loading

kakkokari-gtyih commented Jun 3, 2024 •

edited

Loading

kakkokari-gtyih commented Jun 6, 2024 •

edited

Loading

kakkokari-gtyih commented Jun 7, 2024 •

edited

Loading

kakkokari-gtyih commented Sep 9, 2024 •

edited

Loading

kakkokari-gtyih commented Sep 9, 2024 •

edited

Loading