search

tumblr / docs

Tumblr's public platform documentation.
Apache License 2.0
109 stars 27 forks source link

How to render NPF Inline Formatting #68

Closed marcus-at-localhost closed 2 years ago

marcus-at-localhost commented 2 years ago

I'm having a hard time to understand how to create HTML from inline formatting in text blocks: https://github.com/tumblr/docs/blob/master/npf-spec.md#inline-formatting-within-a-text-block

What would it look like in JS/Pseudocode to turn the examples into HTML - I can't find any reference online.

The same for the whole NPF object, although inline styles are ones I'm struggling with.

Thank you!

AprilSylph commented 2 years ago

@nightpool created a solution in JS: https://gist.github.com/nightpool/2fd5c94ef222bf67f9ad58a7a739a26f#file-01-npf-js-L168-L247

I modified this file to remove the library dependencies while implementing it in my browser-facing project, the Outbox for Tumblr extension, here: https://github.com/AprilSylph/Outbox-for-Tumblr/blob/f732885141cd22fd2822cd8f7e310b3d055daedd/src/lib/npf.js#L198-L277

nightpool commented 2 years ago

turning inline formatting into HTML is, in fact, Very Complicated, unfortunately. there are probably more straightforward solutions than the one I came up with though, I was very picky about having extraneous tags like <em></em><a href=""><em>link</em></a>. most people probably don't need to worry about that much (although for a tags having extra can somewhat affect accessibility)

nightpool commented 2 years ago

(also for people reading this: please note that npf.js is published under the AGPL, and you'll need to abide by the terms of that license if you want to adapt it into your project like April has)

marcus-at-localhost commented 2 years ago

@AprilSylph @nightpool thank you so much for giving insight into the concept of rendering npf.

cyle commented 2 years ago

Thanks for passing along that implementation @AprilSylph @nightpool -- I've also passed along this request as yet another great reason for us to open source the NPF => HTML parts of our frontend code (really, we should just open source all of it, imo 😅).