リンクカードを実装 #8139
リンクカードを実装 #8139
Conversation
machida
force-pushed
the
feature/introduce-of-link-card
branch
from
0eaf7d4 to
783adac
Compare
|
このPRに最新のmainを取り込みました。 git pull --rebase origin feature/introduce-of-link-card をお願いします。 このブランチにプルリクを送りました。 デザイン以外にJSに手を入れてるので、それらを確認の上（コードを読んだり、動作を確認したり）、OKだったらこのブランチにマージしてくださいー もし、修正が必要なときは、
もしくは、
どちらかでお願いします。 |
|
@machida |
machida
force-pushed
the
feature/introduce-of-link-card
branch
from
b3f1aba to
c3954c8
Compare
|
?なんかコミットの履歴がおかしい 一旦手元のブランチ git branch -D feature/introduce-of-link-card |
machida
force-pushed
the
feature/introduce-of-link-card
branch
2 times, most recently
from
4ff3c5f to
7ca62e1
Compare
これを貼り付けると、GとIだけがリンクカードになります。 |
|
@machida |
|
@machida |
mousu-a
force-pushed
the
feature/introduce-of-link-card
branch
from
7ca62e1 to
7a9b10f
Compare
|
@machida Iの時だけリンクカードを生成するようにコードを変更しました。合わせてフィクスチャも変更しています。 ZENNのリンクカード実装がほとんどそのまま使えたのでそのまま使っています。（FBCの仕様に合わせて改変を加えています） 今回実装するリンクカードの仕様として「マークダウンにネストした状態でもリンクカードを生成する」となっていますが、これはdetailsだけ許容する形としています。 ところでリンクカードの前後に中身のない空のpタグが表示されてしまい、いまだ原因が掴めません... リンクカードの前後に謎のpタグが入ってしまう現状説明このようにリンクカードを展開すると 
私見、試してみたことなどtokensの配列としては"paragraph_open", "html_inline", "paragraph_close"となっており、余計なpタグが入る余地はないと思うのですが... 
確認してみたところ、リンクカードの対象となるToken(tokens[i])の前のpタグはどうやらtokens[i - 1]のようです。 
ただ後ろのpタグはtokens配列の中に存在しません。（存在しないのにpタグが生成されてしまっているようです）
こちらアドバイスなどいただけたらと思います🙇♂️ |
|
@mousu-a markdownの仕様に従ってmarkdown記法からHTMLを生成したときに発生してるのかもです。もしかしたら、pの開始タグだけ生成されてしまって、それをChromeがHTMLの矛盾を無くすために無理やりpを閉じている、とかかもしれないです。念のためFFとSafariでも確認してみるといいです。もしかしたら別のHTMLになっているかもです。 そのまま実装したらリンクカードがpで囲われてしまうのを、そのpを生成しないという機能も付けてるので、それとのバッティングなどもあるかも？ で、僕もその辺の問題がうまく解決出来なかったんですよねー。なので、Iのときだけリンクカードにするというのは、そこまで優先度は高くないので、今回の件が解決ができなかったら、前のコードでレビューを出してしまって大丈夫です。 ただ、変なHTMLに変換されないようにしたいので、コードを戻してもその点はチェックをお願いしたいです。 |
|
@machida 正確には、Markdown-it プラグインを適用する時に元となったa要素(の親であるp要素)を なぜリンクカードの前後に空のpタグが出力されてしまっていたのかコードのコメントにも書いてありますが、 お手すきの際にご確認をお願いいたします🙇♂️ すみません、余計なdiffが混じってしまいました。ここは本質的な変更には関係ありません。 |
|
@mousu-a @[card](https://esa.io/)
@[card](https://www.yahoo.co.jp/)
@[card](https://bootcamp.fjord.jp/)このように、文章の最後がリンクカード記法になっている場合、最後のリンクカード記法がリンクカードに変換されませんでした。 @[card](https://esa.io/)
@[card](https://www.yahoo.co.jp/)
@[card](https://bootcamp.fjord.jp/)
aaaaa上記だと変換されます。 デザインやクラス名を少し修正しました。 |
|
@machida |
|
@mousu-a調査よろしくお願いします。そこ以外の動作はバッチリでした👍 |
mousu-a
force-pushed
the
feature/introduce-of-link-card
branch
from
788ae1f to
7920338
Compare
|
@machida バグ3つ以上リンクカードが生成されるとき、最後のリンクカードだけ生成されていませんでした。 原因リンクカードを生成する際、 解決for文を使うことにより、 すみません、rebaseしたのでこちらをお願いいたします🙇♂️ |
|
確認しました！！ @[card](https://bootcamp.fjord.jp/articles/146)あ@[card](https://bootcamp.fjord.jp/articles/146) あ上記のとき、「あ」が無視されリンクカードが生成されてしまいました。 |
|
@machida |
|
@mousu-a 了解です！よろしくお願いしますー🙏 |
mousu-a
force-pushed
the
feature/introduce-of-link-card
branch
from
7920338 to
f5a7e93
Compare
|
@machida 以下行った変更です。
|
|
@machida 聞きたいこと今からでもそのように(全てのマークダウンにネストできるように)修正した方がいいでしょうか？（修正の手間はそれほどかかりません） また、その際修正する考え方としては、"p要素にネストしていなければ基本的にはリンクカードは展開する"という形で良かったでしょうか？ |
|
@mousu-a liの中で展開してもinvalidにはなりません。なので、もしliの中でだけリンクカードが使えたら助かります。でも、全く優先度は高くなく、見た目も見にくくなりそうなので、それが大変な作業だったら今回は含めなくてもOKです。 対応が可能だった場合はデザインもそれに対応する必要があるので言ってください〜 |
|
@machida |
|
@machida |
mousu-a
force-pushed
the
feature/introduce-of-link-card
branch
from
c692d79 to
803b1e9
Compare
|
|
||
| module LinkCard | ||
| class CardTest < ActiveSupport::TestCase | ||
| test '#metadata' do |
There was a problem hiding this comment.
このテストでリンクカードの動きをまとめてテストしています。
(LinkCard::Ogpクラス、LinkCard::Cardクラス、Metadataクラス)
| const sibling = targetLink.previousElementSibling | ||
| if (sibling.tagName === 'P') { | ||
| sibling.insertAdjacentElement('afterend', targetLink) | ||
| sibling.remove() |
There was a problem hiding this comment.
リンクカードの元となったリンクを削除しています。
（Markdown-itはリンクが<p><a></a></p>の形で出力されるため、リンクの親要素であるP要素を削除しています）
| ) | ||
| } | ||
|
|
||
| const loadTwitterScript = () => { |
There was a problem hiding this comment.
この関数でTweetのデザインを適用しています。（最終的なデザインはbootcampアプリ内で整えています）
|
@ayu-0505 都合が合わなければ遠慮なく仰ってください〜🙏 |
|
@mousu-a ※フィヨルドチョイス不具合について |
|
@ayu-0505
これは初耳でした👀
承知いたしました！全然急ぎではないのでのんびりやっていただければと思います🍵 レビューに際して質問などあればドシドシお気軽にお願いいたします🙆♂️ |
| const embedToTweet = async (targetLink, url) => { | ||
| try { | ||
| const response = await fetch( | ||
| `/api/metadata?url=${encodeURIComponent(url)}&tweet=1`, |
There was a problem hiding this comment.
初めはtweet=trueで送っていたんですが、paramsで送ると絶対に文字列になってしまうので、受け取るときは"true"となってしまいます。
動きとしては別にどちらでも問題はないんですが、勘違いを避けるために"フラグが立っている状態"という意味で"1"を送っています。
Issue
概要
新機能リンクカードを実装しました。
変更確認方法
feature/introduce-of-link-cardをローカルに取り込む。i.
git fetch origin feature/introduce-of-link-cardii.
git checkout feature/introduce-of-link-cardrails db:seedでテストデータを作成。foreman start -f Procfile.devでローカルサーバーを立ち上げる。komagata、パスワードtesttestでログインする。（誰でもいいです）Screenshot
変更前
変更後