bookmarkについて

[nuovotaka]

'@dhaiwat10/react-link-preview'がうまく動作していないようです。
Notionでのbookmarkがことごとく表示されません。
どうしたらよろしいですか？

[otoyo]

私の方でもブックマークが動作していないことを確認しました。
調査して修正しますね。ご報告ありがとうございます。

[otoyo]

エラーログ

my-first-post:1 Access to fetch at 'https://rlp-proxy.herokuapp.com/v2?url=https://github.com/otoyo/easy-notion-blog' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
index.esm.js?9229:1          GET https://rlp-proxy.herokuapp.com/v2?url=https://github.com/otoyo/easy-notion-blog net::ERR_FAILED 503
eval @ index.esm.js?9229:1
invokePassiveEffectCreate @ react-dom.development.js?ac89:23487
callCallback @ react-dom.development.js?ac89:3945
invokeGuardedCallbackDev @ react-dom.development.js?ac89:3994
invokeGuardedCallback @ react-dom.development.js?ac89:4056
flushPassiveEffectsImpl @ react-dom.development.js?ac89:23574
unstable_runWithPriority @ scheduler.development.js?bcd2:468
runWithPriority$1 @ react-dom.development.js?ac89:11276
flushPassiveEffects @ react-dom.development.js?ac89:23447
eval @ react-dom.development.js?ac89:23324
workLoop @ scheduler.development.js?bcd2:417
flushWork @ scheduler.development.js?bcd2:390
performWorkUntilDeadline @ scheduler.development.js?bcd2:157
next-dev.js?3515:32 TypeError: Failed to fetch
    at eval (index.esm.js?9229:1:3124)
    at invokePassiveEffectCreate (react-dom.development.js?ac89:23487:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js?ac89:3945:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js?ac89:3994:1)
    at invokeGuardedCallback (react-dom.development.js?ac89:4056:1)
    at flushPassiveEffectsImpl (react-dom.development.js?ac89:23574:1)
    at unstable_runWithPriority (scheduler.development.js?bcd2:468:1)
    at runWithPriority$1 (react-dom.development.js?ac89:11276:1)
    at flushPassiveEffects (react-dom.development.js?ac89:23447:1)
    at eval (react-dom.development.js?ac89:23324:1)
    at workLoop (scheduler.development.js?bcd2:417:1)
    at flushWork (scheduler.development.js?bcd2:390:1)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js?bcd2:157:1)
window.console.error @ next-dev.js?3515:32
overrideMethod @ react_devtools_backend.js:4026
eval @ index.esm.js?9229:1
Promise.catch（非同期）
eval @ index.esm.js?9229:1
invokePassiveEffectCreate @ react-dom.development.js?ac89:23487
callCallback @ react-dom.development.js?ac89:3945
invokeGuardedCallbackDev @ react-dom.development.js?ac89:3994
invokeGuardedCallback @ react-dom.development.js?ac89:4056
flushPassiveEffectsImpl @ react-dom.development.js?ac89:23574
unstable_runWithPriority @ scheduler.development.js?bcd2:468
runWithPriority$1 @ react-dom.development.js?ac89:11276
flushPassiveEffects @ react-dom.development.js?ac89:23447
eval @ react-dom.development.js?ac89:23324
workLoop @ scheduler.development.js?bcd2:417
flushWork @ scheduler.development.js?bcd2:390
performWorkUntilDeadline @ scheduler.development.js?bcd2:157
next-dev.js?3515:32 No metadata could be found for the given URL.

CORSのためにプロキシを使ってるっぽい？
プロキシのWebサービスがエラーを吐いていそう。

https://github.com/Dhaiwat10/react-link-preview/blob/729657054d63a8de12368b957374c76d81af6cfe/src/components/LinkPreview/LinkPreview.tsx#L6
プロキシを使っている。

Dhaiwat10/react-link-preview#24 によるとリクエストが多すぎてプロキシがダウンしている模様。
作者は自前でプロキシを立てることを推奨している。

[otoyo]

Next.js なのでプロキシの代わりとなるAPIを生やせば対応可能。だがAPIでOriginを確認してガードしてあげる必要がある。
下記を参考に実装する。

• https://zenn.dev/nitaking/scraps/1cf8d3c76ccfb0
• Allow /api routes to be private to the client app vercel/next.js#16441

[otoyo]

@nuovotaka さん
調査の結果、リンクプレビュー機能を自前で実装する必要がありそうなので、次のバージョン (v0.11) で実装します。
少々時間がかかると思いますが、お待ちいただけますと幸いです。

[nuovotaka]

了解しました。
私も、
https://github.com/NotionX/react-notion-x
こちらのutilsなどを利用して内製しようとしたのですがreactは初学者でして「よくわからないなぁ」というのが本音です。
取り敢えずブックマークのところはリンクをそのまま貼り付けて対処しました。
迅速な対応有難う御座いました。

[otoyo]

react-notion-x がありましたね。こちら確認してみますね。

[otoyo]

メモ
react-notion-x もURLしか表示できていない模様。Notion API の Bookmark Block の内容が URL しかないのでフロントだけでは実現できない。
react-notion-x はAPIレスポンスに情報が追加されるのを待つというスタンスか。

• https://github.com/NotionX/react-notion-x/tree/7a8179f12d94d755d89b0687b95f0646edeed79c/packages/notion-compat#blocks-with-partial-compatibility-
• https://react-notion-x-official-api-demo.transitivebullsh.it/c1c8f540c06f4ac89f831e4a9cc402ae

見た目は react-notion-x の方が Notion のブックマークに近い。

URL のメタ情報を得るのは下記ライブラリを使う。

• https://www.npmjs.com/package/url-metadata

[otoyo]

@nuovotaka さん
#108 で修正しましたので、コミットを取り込んで動作をご確認ください。
よろしくお願いします。

[nuovotaka]

確認しました。有難う御座いました。

[nuovotaka]

#108 へのissueになるのでしょうか？
取り敢えずこちらへ記載しておきます。
問題はスマホで該当のブックマークを表示させた時urlの🔒鍵マークがビックリマークに変更されます。PCで表示させている時は問題ないのですが、スマホだと「！」が表示されます。

[otoyo]

@nuovotaka さん
URLの鍵マークというのはブラウザの下記画像の部分ですよね？

鍵マークはURLが https:// のときに、ビックリマークはURLが http:// のときに表示されます。

対象となっているURLとスマホのブラウザ名を教えていただけますでしょうか？
また実際の easy-notion-blog のページもありましたら教えていただければ幸いです。

[nuovotaka]

https://blog.nuovotaka.com/blog　へ訪問した時は鍵マークが表示され
https://blog.nuovotaka.com/blog/sick-egpa-part37
へ遷移すると鍵 -> ！マークが表示されます。
Brave、Chromeを利用しています。
Safariでは鍵マークが消えました。
iphoneでの確認です。
ちなみに、
https://easy-notion-blog.nuovotaka.com
forkしたものをそのままデプロイして見ました。

[otoyo]

情報をくださりありがとうございます。こちら原因が分かりましたので修正しますね。

[otoyo]

memo
favicon を取得する際の google API アクセスが http になっているので修正する

[otoyo]

@nuovotaka さん
#109 で対応しましたので、コミットを取り込んでご確認いただけますでしょうか？

追記
#111 古いライブラリを使った結果、セキュリティ対応が必要になってしまったため、お手数ですがこちらの取り込みもお願いいたします 🙇

[nuovotaka]

有難う御座いました。
npmの脆弱性アラートが気になっていたのですがそちらも解消されてよかったです。

[otoyo]

ご確認ありがとうございました。