dissolve/socialstream

jf2-to-html Use img to embed author photos and link to profiles instead of showing as plain text URLs

Closed this issue · 7 comments

When I try https://webmention.io/api/links.jf2?target=http://tantek.com/2017/183/e1/sunday-yoga-presidio in stream.thatmustbe.us to convert jf2 to mf2 rendered in HTML, it returns a good start towards a presentable list of RSVPs:

http://stream.thatmustbe.us/?url=https%3A%2F%2Fwebmention.io%2Fapi%2Flinks.jf2%3Ftarget%3Dhttp%3A%2F%2Ftantek.com%2F2017%2F183%2Fe1%2Fsunday-yoga-presidio&op=jf2-mf2&ashtml=1

Key improvements could be:

  • Use img to embed author photo instead of showing plain text jpg URL
  • Use a href to link author photo and name to author profile instead of using profile URL as link text

I have updated the rendering to be a bit improved. It was originally written to just make it something that will round trip back in to the same jf2, but there is definitely a lot more improvements that can be done here. Including possibly adding some styling.

This is amazingly improved. Filing a different issue for a styling hook.

I consider this issue resolved, well done. Follow-up for styling hook: #10

Per this example: http://stream.thatmustbe.us/?url=https%3A%2F%2Fwebmention.io%2Fapi%2Flinks.jf2%3Ftarget%3Dhttp%3A%2F%2Ftantek.com%2F2017%2F183%2Fe1%2Fsunday-yoga-presidio+&op=jf2-mf2&ashtml=1&style=img{height%3A44px}.h-feed%3E.p-name,.h-entry%3E.u-url%3Afirst-child{display%3Anone}

One more tweak to this:

Instead of:

<a class="u-url p-name" href="https://www.facebook.com/10153450952308886"><img class="u-photo" title="Sukant Ghosh" src="https://webmention.io/avatar/graph.facebook.com/08196cf4adc8251861f778e1839692ec08279f13fffeafcbe132ae197b36141b.jpg">Sukant Ghosh</a>

markup the text separately with a span p-name so it is independently stylable, e.g.:

<a class="u-url" href="https://www.facebook.com/10153450952308886"><img class="u-photo" title="Sukant Ghosh" src="https://webmention.io/avatar/graph.facebook.com/08196cf4adc8251861f778e1839692ec08279f13fffeafcbe132ae197b36141b.jpg"><span class="p-name">Sukant Ghosh</span></a>

(view comment markdown source to see the code that is too long to fit on a line and GHmd does not do code with linewraps :P)

agreed, nicer to have them split up

fixed in the latest push

Looks good!