This has turned out to be much trickier than expected. There are tricky implications to nesting the hovercard inside the linked text because <p>s cannot contain block-level elements. But I don't want to stop using <p>s for accessibility reasons. Nor do I want to sacrifice having block elements in the hovercards. So, for each internal site link, I break the containing <p> in half by inserting </p>, insert a link and a <div> containing the hovercard, and then mend the second part of the original <p> by inserting <p>.
TODO
[x] show preview of linked page
[x] add some space between link and card
[x] update all post_url links using regex: \[([^\]]+)\]\(\{\{\s*site.base_?url\s*\}\}\{% post_url /?(202.-[0-9][0-9]-[0-9][0-9]-[a-zA-Z-.0-9]+) %\}\)
[x] fix bug: decrease top to make it easy
[x] fix bug: <blockquote> not allowed in hovercard span (e.g. man with custom tripod)
[x] fix bug: <h3> not allowed in hovercard span (e.g. King's writing advice)
[x] fix bug: embedded media not allowed in hovercard span (e.g. YouTube video in how to reinvent yourself)
[x] fix bug: hovercard opaque except when another link ( to a vbook page specifically?) is below it! then it is visible on top of the other link's hovercard!
[x] fix bug: hovercard inside of hovercard open by default e.g. in feb '24 "now" update, hover card of link mini-essay link to where do ideas come from #2 has On Writing hovercard open by default
[x] sub-bug: The Road (book) and The Road (movie) hovercards have unprocessed links
[x] [Virtual Book](medium link) not parsed in hovercard of link to how to justify writing (see screenshot1 at bottom)
This has turned out to be much trickier than expected. There are tricky implications to nesting the hovercard inside the linked text because
<p>
s cannot contain block-level elements. But I don't want to stop using<p>
s for accessibility reasons. Nor do I want to sacrifice having block elements in the hovercards. So, for each internal site link, I break the containing<p>
in half by inserting</p>
, insert a link and a<div>
containing the hovercard, and then mend the second part of the original<p>
by inserting<p>
.TODO
post_url
links using regex:\[([^\]]+)\]\(\{\{\s*site.base_?url\s*\}\}\{% post_url /?(202.-[0-9][0-9]-[0-9][0-9]-[a-zA-Z-.0-9]+) %\}\)
top
to make it easy<blockquote>
not allowed in hovercardspan
(e.g. man with custom tripod)<h3>
not allowed in hovercardspan
(e.g. King's writing advice)span
(e.g. YouTube video inhow to reinvent yourself
)mini-essay
link towhere do ideas come from #2
hasOn Writing
hovercard open by default[Virtual Book](medium link)
not parsed in hovercard of link tohow to justify writing
(see screenshot1 at bottom)screenshot1