enhance: Add OGP data for notes with multiple images/videos (#11142)

* Add OGP data for notes with multiple images/videos

* Update CHANGELOG.md

* Update packages/backend/src/server/web/views/note.pug

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

* Update packages/backend/src/server/web/views/note.pug

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

---------

Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>

CHANGELOG.md

@@ -27,6 +27,7 @@
 - deck UIのカラムのメニューからアンテナとリストの編集画面を開けるように
 - ドライブファイルのメニューで画像をクロップできるように
 - 画像を動画と同様に簡単に隠せるように
+- Enhance: ノートの埋め込みが複数画像と動画を表示されるように
 - オリジナル画像を保持せずにアップロードする場合webpでアップロードされるように(Safari以外)
 - 見たことのあるRenoteを省略して表示をオンのときに自分のnoteのrenoteを省略するように
 - フォルダーやファイルに対しても開発者モード使用時、IDをコピーできるように

packages/backend/src/server/web/views/note.pug

@@ -5,8 +5,8 @@ block vars
 	- const title = user.name ? `${user.name} (@${user.username})` : `@${user.username}`;
 	- const url = `${config.url}/notes/${note.id}`;
 	- const isRenote = note.renote && note.text == null && note.fileIds.length == 0 && note.poll == null;
-	- const image = (note.files || []).find(file => file.type.startsWith('image/') && !file.isSensitive)
-	- const video = (note.files || []).find(file => file.type.startsWith('video/') && !file.isSensitive)
+	- const images = (note.files || []).filter(file => file.type.startsWith('image/') && !file.isSensitive)
+	- const videos = (note.files || []).filter(file => file.type.startsWith('video/') && !file.isSensitive)
 
 block title
 	= `${title} | ${instanceName}`
@@ -19,15 +19,17 @@ block og
 	meta(property='og:title'       content= title)
 	meta(property='og:description' content= summary)
 	meta(property='og:url'         content= url)
-	if video
-		meta(property='og:video:url'        content= video.url)
-		meta(property='og:video:secure_url' content= video.url)
-		meta(property='og:video:type'       content= video.type)
-		// FIXME: add width and height
-		// FIXME: add embed player for Twitter
-	if image
+	if videos.length
+		each video in videos
+			meta(property='og:video:url'        content= video.url)
+			meta(property='og:video:secure_url' content= video.url)
+			meta(property='og:video:type'       content= video.type)
+			// FIXME: add width and height
+			// FIXME: add embed player for Twitter
+	if images.length
 		meta(property='twitter:card' content='summary_large_image')
-		meta(property='og:image'     content= image.url)
+		each image in images	
+			meta(property='og:image'     content= image.url)
 	else
 		meta(property='twitter:card' content='summary')
 		meta(property='og:image'     content= avatarUrl)