bookmarkについて
nuovotaka opened this issue · comments
'@dhaiwat10/react-link-preview'がうまく動作していないようです。
Notionでのbookmarkがことごとく表示されません。
どうしたらよろしいですか？
私の方でもブックマークが動作していないことを確認しました。
調査して修正しますね。ご報告ありがとうございます。
エラーログ
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サービスがエラーを吐いていそう。
Dhaiwat10/react-link-preview#24 によるとリクエストが多すぎてプロキシがダウンしている模様。
作者は自前でプロキシを立てることを推奨している。
Next.js なのでプロキシの代わりとなるAPIを生やせば対応可能。だがAPIでOriginを確認してガードしてあげる必要がある。
下記を参考に実装する。
@nuovotaka さん
調査の結果、リンクプレビュー機能を自前で実装する必要がありそうなので、次のバージョン (v0.11) で実装します。
少々時間がかかると思いますが、お待ちいただけますと幸いです。
了解しました。
私も、
https://github.com/NotionX/react-notion-x
こちらのutilsなどを利用して内製しようとしたのですがreactは初学者でして「よくわからないなぁ」というのが本音です。
取り敢えずブックマークのところはリンクをそのまま貼り付けて対処しました。
迅速な対応有難う御座いました。
react-notion-x がありましたね。こちら確認してみますね。
メモ
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 のメタ情報を得るのは下記ライブラリを使う。
@nuovotaka さん
#108 で修正しましたので、コミットを取り込んで動作をご確認ください。
よろしくお願いします。
確認しました。有難う御座いました。
#108 へのissueになるのでしょうか？
取り敢えずこちらへ記載しておきます。
問題はスマホで該当のブックマークを表示させた時urlの🔒鍵マークがビックリマークに変更されます。PCで表示させている時は問題ないのですが、スマホだと「！」が表示されます。
@nuovotaka さん
URLの鍵マークというのはブラウザの下記画像の部分ですよね？
鍵マークはURLが https:// のときに、ビックリマークはURLが http:// のときに表示されます。
対象となっているURLとスマホのブラウザ名を教えていただけますでしょうか？
また実際の easy-notion-blog のページもありましたら教えていただければ幸いです。
https://blog.nuovotaka.com/blog へ訪問した時は鍵マークが表示され
https://blog.nuovotaka.com/blog/sick-egpa-part37
へ遷移すると鍵 -> ！マークが表示されます。
Brave、Chromeを利用しています。
Safariでは鍵マークが消えました。
iphoneでの確認です。
ちなみに、
https://easy-notion-blog.nuovotaka.com
forkしたものをそのままデプロイして見ました。
情報をくださりありがとうございます。こちら原因が分かりましたので修正しますね。
memo
favicon を取得する際の google API アクセスが http になっているので修正する
@nuovotaka さん
#109 で対応しましたので、コミットを取り込んでご確認いただけますでしょうか？
追記
#111 古いライブラリを使った結果、セキュリティ対応が必要になってしまったため、お手数ですがこちらの取り込みもお願いいたします 🙇
有難う御座いました。
npmの脆弱性アラートが気になっていたのですがそちらも解消されてよかったです。
ご確認ありがとうございました。