url-metadata is not maintained for 2 years.

• https://github.com/microlinkhq/metascraper
• https://vdelacou.medium.com/how-to-create-an-api-for-metascraper-js-with-vercel-and-typescript-abdb94d224ba

OGImageを登録した記事、登録していない記事、両方で試しましたが共に非表示でした。

easy-notion-blogを使う人同士で記事をbookmarkした際、画像を取り込めていない事に気づきました。

#91
再びの投稿失礼しますm(_ _)m

🔽notion

🔽ブログで表示

🔽Twitterで確認_validator

🔽Twitterで打ってみる

🔽demoサイト以外の記事で試す_validator

🔽Twitterで打ってみる

記事に埋め込んだbookmarkの画像が発行されない問題...

なかなか難しいことだと思いますのでお時間あるときにでも何か術があれば...と願っておりますm(_ _)m

vercelでの登録を修正後無事にボタンは設置され、
ボタンを押してみると・・・・

「/」が１つ不足した状態で発行されてしまいますm(_ _)m

https://easy-notion-blog-02.vercel.app/blog/v0111_sns_setting

困っていること

記事内(image block)にその都度サイズが異なり予めサイズを統一できない画像(スクショ)を埋め込むと横長・縦長の画像に異様な余白が生じてしまいます。

やったこと

• 高さの値を修正し、横長・縦長画像の表示のされ方を見ながら丁度いい値は無いか調べました。
  👉 「どっちを取るか」の判断となり縦長画像を見やすく高さを設定すれば横長画像は上下余白が大きくなり画像として見にくくなってしまっています。。。。

• 直接importすれば画像サイズを指定しなくていい・・といった記事を見つけ検討してみました。
  👉 publicフォルダに収納する画像ではないので意味が違うなと思い八方塞がりになりました。

まとめ

予め画像のサイズを指定するのは難しい場合に読者の見やすい画像設定をする方法はありませんか？？？

下記の手順に従いVercelでデプロイしようとしたんですがエラーになってしまいました
https://github.com/otoyo/easy-notion-blog/blob/main/README.ja.md#%E3%82%AF%E3%82%A4%E3%83%83%E3%82%AF%E3%82%B9%E3%82%BF%E3%83%BC%E3%83%88

ビルド内容は下記のとおりです

他に必要な情報などあれば合わせてご教授願います！
よろしくお願いいたしますー！

T/O

vercelへdeployはできるものの、
yarn devではエラー画面になります。

▼ターミナル

document-headコンポネントのurlOgImageの値に画像リンクを追記後
null部分を以下のように変更しました。

herohoro@8fa6d3e

deploy直後にツイッターで確認してみましたが反映されずの状態で投稿させていだたいております。
少し待てば反映されますか？
それとも変更の仕方が間違えている部分がありますでしょうか？

不具合の概要

日付またはリマインダーを挿入すると「return null」がないとエラーが出る

再現方法

パブリッシュでないテストページにて行った。

1. テストページを作成する（slug,公開日付等の設定をする）
2. 内容に「日付またはリマインダーを挿入する」
3. yarn dev

エラーログ

期待する挙動

mentionに対応していないので何も表示しない

スクリーンショット

エラーが発生している画面のスクリーンショットを添付します。

リポジトリ

https://github.com/nuovotaka/notion-blog

デスクトップ環境

• OS: [MacOS]
• ブラウザ: [Brave]
• ブラウザのバージョン: [ 1.45.118 Chromium: 107.0.5304.91（Official Build） （x86_64）]

追加情報

なし

Can i use your code to make my blog website?

改行をして次までの行間を調整しようとすると反映されず、
空ブロックを埋め込むことができません。。。

▼Notion上で３行連続改行

▼ブログ上では反映されず

該当箇所を見出し変更したのでこのリンクで飛べます

発生していること

2b92639 辺りでは起きなかったように思うのですが、現在masterの 95da4a5 で yarn dev を実行したところ、以下のエラーが発生します。

TypeError [ERR_INVALID_URL]: Invalid URL
    at new NodeError (node:internal/errors:371:5)
    at onParseError (node:internal/url:552:9)
    at new URL (node:internal/url:628:5)
    at Header (webpack-internal:///./src/components/header.tsx:24:17)
    at processChild (/Users/user2/code/easy-notion-blog/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)
    at resolve (/Users/user2/code/easy-notion-blog/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)
    at ReactDOMServerRenderer.render (/Users/user2/code/easy-notion-blog/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)
    at ReactDOMServerRenderer.read (/Users/user2/code/easy-notion-blog/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)
    at Object.renderToString (/Users/user2/code/easy-notion-blog/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)
    at Object.renderPage (/Users/user2/code/easy-notion-blog/node_modules/next/dist/server/render.js:736:46) {
  input: '/_next/static/webpack/07ea94bbe1acf6f4.webpack.hot-update.json',
  code: 'ERR_INVALID_URL'
}

再現手順

1. git clone https://github.com/otoyo/easy-notion-blog
2. yarn install
3. yarn dev

※厳密には、forkした https://github.com/nitaking/easy-notion-blog にて fork元の最新化を行った際に事象は発生しました

解決策

1. env.local に 以下を追加（READMEに加筆）

NEXT_PUBLIC_URL=http://localhost:3000/

2. NEXT_PUBLIC_URLのデフォルト値を設定

私としては 2. NEXT_PUBLIC_URLのデフォルト値を設定 が適切かな、と思うのでそちらでdraft PRを作成しておきます。対応方針ご相談したいです！

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

不具合の概要

NotionDBのテンプレート内のbookmarkブロックが異なるブロックになっている

再現方法

1. NotionDBを複製して取り込む
2. 初期設定を済ませVercelでDeploy
3. サンプル記事「Support blocks」を開く
4. Link Preview & Bookmarkの部分までスクロールすると表示されていない

修正前のNotion

期待する挙動

bookmarkブロックを表示するために修正するとブログでも表示されました

デスクトップ環境

• OS: MacOS
• ブラウザ: Chrome
• ブラウザのバージョン: ？？

追加情報

NotionDBを複製する際、アルパカ先生のいつものアイコンではないアイコンが表示されていましたが大丈夫でしょうか？？？
(アルパカ先生はアルパカでいてほしい願望ありです....(´・ω・｀))

Issuesでの投稿失礼致します。

最近になってから、「easy-notion-blog」を利用させていただいております。
そしてその中で色々と分からないことがありまして、「クイックスタート」内のものでいくつかご質問をさせていただきます。

【質問1】8番目の「ターミナルアプリ」というのはWindowsでいうと「Git Bash」でよろしいでしょうか？

【質問2】9番目の「初期化スクリプトを実行します」という所で...

【DATABASE_ID=<YOUR_DATABASE_ID> NOTION_API_SECRET=<YOUR_NOTION_API_SECRET> ./scripts/init-database.sh】

を「Git Bash」に入力したのですが、以下のようになってしまうのですがどのようにすればよいでしょうか？

【$ DATABASE_ID=<YOUR_DATABASE_ID> NOTION_API_SECRET=<YOUR_NOTION_API_SECRET> ./scripts/init-database.sh
bash: YOUR_DATABASE_ID: No such file or directory】

自身がプログラミング及び、Githubの初心者故に本当の初期の初期段階(まず「初期化スクリプト」という言葉自体等々)で分からないという状態で大変申し訳ないのですが、是非ともご回答の方を宜しくお願い致します。

差分を同期後の異変です。

デモページの「Supported blocks」によると
Heading1~3をh4からh6で作成されていますが、

Notionの見出しはh3までしか残念ながらありません。。。。

念の為Notionの方で「####」でh4を呼び出せるか確認しましたができませんでしたm(_ _)m

【文字装飾】

notion上でよく使われる装飾

• color block
• color text
• table
• Web bookmark

あったら嬉しい装飾

• twitter embed

12/18にプレビューの解説記事を書いていたときは記事一覧まで遷移できていましたが、

今日になってHomeからエラーになってしまいます。

振り返ってみると・・・
今日以下の２つを同期してます。(おそらくその後かと・・・)

同期後エラーになっているコードが１つありまして、それも気になるので添付します。

「Vercel」でデプロイする際に、以下の複数のエラーが発生してしまいました。

(以下のスクショ画像の掲載を失礼致します。)

Environment VariablesでのNOTION_API_SECRETとDATABASE_IDの入力間違いがないか等も見直してみたのですが、

最終的にはError: Command "yarn run build" exited with 1という表示に何度もなってしまいました。

この件に関しましての、アドバイス等々を頂けましたら幸いです。

Can't you add another language? For example, Korean.

はじめまして、自分のブログに導入してみようと思い検証しています。

問題の詳細

プロジェクト自体は React v17 を使用しているが、 @zeit/[email protected] と [email protected] が React v16 に依存しており npm install に失敗する。

プロジェクト内を検索したところ @zeit/react-jsx-parser については使用箇所が見当たらなかったのですがどこで使用されていますか？最終アップデートも3年前とかなり古いライブラリですので、代替となるライブラリとの入れ替えを検討した方がいいかと思いました。

また react-twitter-embed については最新のバージョンが 4.0.4 となっていますのでアップデートをした方がいいのではないかと思います。

経緯

以前vercel Limitの打開をするためにPRしていただいた herohoro#13 から、

記事内でbookmarkをするとOgImageが表示されない...
といった不具合がありました。

私のリポジトリの影響かと思い、解決できるまで保留にし放置していました。

現象

他の方(八朔さん)も同じ現象になっていたことが分かりました。

相談

問題は本家なのかどうかが判断しかねる状況だったためこちらに投稿させていただきました。
何か解決策がありましたら教えていただけるとありがたいです。

唯一「easy-notion-blog_最新情報」というタグが10件以上あるので確認してみると、
ページへ移動するボタンの表示がされない状態でした。

開発画面上では問題ないです。
vercelでは怒られてしまいます....。

以下のようなエラーメッセージがタグ毎に表示される状態です。

もしかすると取り込み漏れもあるかもしれません。(改造してますし...)

何か手がかりがありましたら教えていただけるとありがたいです。(´ﾟдﾟ｀)

不具合の概要

Vercelのデプロイで失敗する。

再現方法

下記のREADME.jaの手順に従い、Vercelでデプロイ
https://github.com/otoyo/easy-notion-blog/blob/main/README.ja.md

ただし手順の7のみ記述の意味がわからなかったので以下のように行った
Import Third-Party Git Repository →
からhttps://github.com/otoyo/easy-notion-blogを入力してContinue
Create Git Repositoryの中の
Git Scope: 自分のGit acount
Repository Name: easy-notion-blog
としてCreate
すると、環境変数を入力する前にDeployが始まり、失敗に終わりますが、
再度Environment Variablesの
key: NOTION_API_SECRET
Value: database ID
としてsaveしredeploymentするとやはり失敗に終わります。

エラーログ

以下のようになります。

他に必要な情報などあれば合わせてご教授願います！
よろしくお願いいたしますー！

現状報告

• 過去の記事ページへは問題なく開ける
• 過去の記事でもサムネはいくらリロードしても表示されない

▼ エラー画面

Vercel Function

不具合の概要

npm run devした際に下記のエラーが表示される。

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'call')

再現方法

README.jaの手順通りに実行（1/10時点）
https://github.com/otoyo/easy-notion-blog/blob/main/README.ja.md

エラーログ

下記はエラーメッセージの全文になります。

Unhandled Runtime Error
TypeError: Cannot read properties of undefined (reading 'call')

Call Stack
options.factory
file:///C:/www_dev/notion-blog-test/easy-notion-blog/.next/static/chunks/webpack.js (722:31)
__webpack_require__
/_next/static/chunks/webpack.js (37:33)
fn
file:///C:/www_dev/notion-blog-test/easy-notion-blog/.next/static/chunks/webpack.js (377:21)
require
node_modules\next\dist\client\link.js (7:31)
./node_modules/next/dist/client/link.js
file:///C:/www_dev/notion-blog-test/easy-notion-blog/.next/static/chunks/app/layout.js (126:1)
options.factory
/_next/static/chunks/webpack.js (722:31)
__webpack_require__
file:///C:/www_dev/notion-blog-test/easy-notion-blog/.next/static/chunks/webpack.js (37:33)
fn
/_next/static/chunks/webpack.js (377:21)
__webpack_require__
node_modules\next\dist\client\app-index.js (26:16)
requireModule
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (142:0)
initializeModuleChunk
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (427:0)
readChunk
node_modules\next\dist\compiled\react-server-dom-webpack\client.js (252:0)
mountLazyComponent
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (23079:0)
beginWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (24792:0)
beginWork$1
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (32185:0)
performUnitOfWork
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (31082:0)
workLoopSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (30891:0)
renderRootSync
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (30856:0)
recoverFromConcurrentError
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (30109:0)
performConcurrentWorkOnRoot
node_modules\next\dist\compiled\react-dom\cjs\react-dom.development.js (29996:0)
workLoop
node_modules\next\dist\compiled\scheduler\index.js (10:3921)
flushWork
node_modules\next\dist\compiled\scheduler\index.js (10:3629)
MessagePort.performWorkUntilDeadline
node_modules\next\dist\compiled\scheduler\index.js (10:1811)

スクリーンショット

追加情報

過去に以下でも同じような課題が挙がっていたため、
「.next」ディレクトリを削除する方法を試しましたが改善されませんでした。
#19

ご教示いただけると助かります！

twitterのカードも変更されているのでテストしたところ、新しい記事をNotion側で書いたがvercel側が反応しない。
Notion側ではPublishedにしているのですが。。。

v0.13

• Support ToDo blocks #128
• Support "Table of Contents" blocks #130
• Add more tests #131
• Define API Response interfaces #132
• Delete useless files #133

1.0.0

• Support Semantic Versioning
• Update Next.js to 13

次のページの表示がされなくなりました。
今回のバージョンアップを同期後に生じた不具合です。

不具合の概要

Twitter ブックマークが画像付きで表示されない。
仕様でしょうか？

期待しているのは下記のような画像付きのブックマークです。

再現方法

easy-notion-blog.nuovotaka.com
の　
https://easy-notion-blog.nuovotaka.com/blog/twitter-card

エラーログ

Functions の内容

[GET] /_next/data/j1dAM7xsus_wvqTtJ4HOY/blog/sick-egpa-part35.json
11:24:25:15

[GET] /_next/data/j1dAM7xsus_wvqTtJ4HOY/blog/smartphonepoach2-leathercraft.json
11:24:24:68

[GET] /_next/data/j1dAM7xsus_wvqTtJ4HOY/blog/tag/blog.json
11:24:24:58

[GET] /_next/data/j1dAM7xsus_wvqTtJ4HOY/blog.json
11:24:24:58

[GET] /api/url-metadata?url=https://twitter.com/nuovotaka/status/1559998318939439108?s=21&t=rwsON9JfEczxmXI7z1F5eA
11:24:24:34
start: 1660789464533,
socket: 1660789464533,
lookup: 1660789464533,
connect: 1660789464591,
secureConnect: 1660789464607,
upload: 1660789464608,
response: 1660789464628,
end: 1660789464629,
error: undefined,
abort: undefined,
phases: {
wait: 0,
dns: 0,
tcp: 58,
tls: 16,
request: 1,
firstByte: 20,
download: 1,
total: 96
}
},
options: {
request: undefined,
agent: { http: undefined, https: undefined, http2: undefined },
h2session: undefined,
decompress: true,
timeout: {
connect: undefined,
lookup: undefined,
read: undefined,
request: undefined,
response: undefined,
secureConnect: undefined,
send: undefined,
socket: undefined
},
prefixUrl: '',
body: undefined,
form: undefined,
json: undefined,
cookieJar: undefined,
ignoreInvalidCookies: false,
searchParams: undefined,
dnsLookup: undefined,
dnsCache: undefined,
context: {},
hooks: {
init: [],
beforeRequest: [],
beforeError: [],
beforeRedirect: [],
beforeRetry: [],
afterResponse: []
},
followRedirect: true,
maxRedirects: 10,
cache: undefined,
throwHttpErrors: true,
username: '',
password: '',
http2: false,
allowGetBody: false,
headers: {
'user-agent': 'got (https://github.com/sindresorhus/got)',
'accept-encoding': 'gzip, deflate, br'
},
methodRewriting: false,
dnsLookupIpVersion: undefined,
parseJson: [Function: parse],
stringifyJson: [Function: stringify],
retry: {
limit: 2,
methods: [ 'GET', 'PUT', 'HEAD', 'DELETE', 'OPTIONS', 'TRACE' ],
statusCodes: [
408, 413, 429, 500,
502, 503, 504, 521,
522, 524
],
errorCodes: [
'ETIMEDOUT',
'ECONNRESET',
'EADDRINUSE',
'ECONNREFUSED',
'EPIPE',
'ENOTFOUND',
'ENETUNREACH',
'EAI_AGAIN'
],
maxRetryAfter: undefined,
calculateDelay: [Function: calculateDelay],
backoffLimit: Infinity,
noise: 100
},
localAddress: undefined,
method: 'GET',
createConnection: undefined,
cacheOptions: {
shared: undefined,
cacheHeuristic: undefined,
immutableMinTimeToLive: undefined,
ignoreCargoCult: undefined
},
https: {
alpnProtocols: undefined,
rejectUnauthorized: undefined,
checkServerIdentity: undefined,
certificateAuthority: undefined,
key: undefined,
certificate: undefined,
passphrase: undefined,
pfx: undefined,
ciphers: undefined,
honorCipherOrder: undefined,
minVersion: undefined,
maxVersion: undefined,
signatureAlgorithms: undefined,
tlsSessionLifetime: undefined,
dhparam: undefined,
ecdhCurve: undefined,
certificateRevocationLists: undefined
},
encoding: undefined,
resolveBodyOnly: false,
isStream: false,
responseType: 'text',
url: URL {
href: 'https://twitter.com/nuovotaka/status/1559998318939439108?s=21',
origin: 'https://twitter.com',
protocol: 'https:',
username: '',
password: '',
host: 'twitter.com',
hostname: 'twitter.com',
port: '',
pathname: '/nuovotaka/status/1559998318939439108',
search: '?s=21',
searchParams: URLSearchParams { 's' => '21' },
hash: ''
},
pagination: {
transform: [Function: transform],
paginate: [Function: paginate],
filter: [Function: filter],
shouldContinue: [Function: shouldContinue],
countLimit: Infinity,
backoff: 0,
requestLimit: 10000,
stackAllItems: false
},
setHost: true,
maxHeaderSize: undefined,
signal: undefined,
enableUnixSockets: true
}
}

期待する挙動

Notionでtwitterを埋め込んだモノの下にブックマークがあります。そのブックも表示させたい。
twitter ブックマークの表示(今回は画像付き)

スクリーンショット

・Notionのスクショ

・エラーが発生している画面のスクリーンショットを添付します。

リポジトリとブランチ名

もし Fork した easy-notion-blog でエラーが発生している場合には、あなたのリポジトリの URL とブランチ名を記載します。
https://github.com/nuovotaka/easy-notion-blog
main ブランチ　#111

デスクトップ環境

• OS: [MacOS]　big sur
• ブラウザ: [Brave]
• ブラウザのバージョン: 1.42.97 Chromium: 104.0.5112.102（Official Build） （x86_64）

追加情報

他に伝えておくべき追加情報があれば記述します。