markdown 記事内の外部リンクをカード表示するのをやってみる。
meta 情報の取得
Next.jsでブログをつくった
自作ブログの実装について
https://www.haxibami.net/blog/posts/blog-renewal
mdast の ノード置き換えできた🙏
Taildind で LinkCard
Next.jsで作ったブログにリンクカードを実装する
https://zenn.dev/dl10yr/articles/b49e70fe595c14
参考に svelte 化 🙏
meta と card を連結
remark の async を server 側で完結するため、
+page.server.ts:load
で markdown の html 化を済ませている。
確か rehype-pretty-code
が processSync できなかったため。
svelte で以下のように markdown から rendering HTML rendering 済みのテキストを貼りつける方式です。
unified を使って Markdown を拡張する
https://zenn.dev/januswel/articles/745787422d425b01e0c1
mdast から hast へ変換する際に、 LinkCard として完成させよう。
fromHtml でできちゃった。
svelte
出番無し。
画像位置とか調整はまだだが、なんか今風のサイトっぽくなった感じがするなー。
build 失敗
なんとかせねば。
remark-link-card 発見
MarkdownをHTMLに変換するunifiedインターフェースについての解説 - Qiita
はじめにこの記事はマークアップ言語変換インターフェイスunifiedについて解説、共有するためのものです。node.js環境でQiitaのマークダウンファイルをHTMLに変換する過程を題材に、un…
https://qiita.com/masato_makino/items/ef35e6687a71ded7b35a#remark-link-card
GitHub - gladevise/remark-link-card
Contribute to gladevise/remark-link-card development by creating an account on GitHub.
https://github.com/gladevise/remark-link-card
最初に作った方法にキャッシュを作る方式になった
しかしメンテナンス性が悪いので、もう少しきれいにしたいわね。
TODO
せっかくなので LinkCard を svelte component 化したい
参考
GitHub - ssssota/svelte-exmarkdown: Svelte component to render markdown.
Svelte component to render markdown. Contribute to ssssota/svelte-exmarkdown development by creating an account on GitHub.
https://github.com/ssssota/svelte-exmarkdown