Markdown-It Plugins: Proxy Image & Mixed HTML Fixer

hernandev (61)in #utopian-io • 7 years ago

Repositories

New Projects

Both Mixed-HTML-Fix & Image-Proxy are plugins for Markdown-It, focusing on easy rendering Steem related content (but still good for general usage)

What is the project about?

Package: `@blocker/markdown-it-mixed-html-fix`

This package is a simple parsing fix to allow mixed HTML to live well with Markdown links and images.

For example:

<some-tag>foo-bar</some-tag>
![a](b.jpg)

This syntax, while used by many authors is currently rendering the links as plain text, unless this fixer-plugin is used.

Related discussions about this: https://github.com/busyorg/busy/issues/1647

Thank you @fabien for pointing me the problem.

Usage

const MarkdownIt = require('markdown-it')
const htmlFix = require('@blocker/markdown-it-mixed-html-fix')

const md = new MarkdownIt()
md.use(htmlFix)

Package: `@blocker/markdown-it-image-proxy`

Simple, but powerful plugin for parsing images with a prefix / proxy URL, just like Steemit & Busy uses https://steemitimages.com/0x0.

Usage

const MarkdownIt = require('markdown-it')
const imageProxy = require('@blocker/markdown-it-image-proxy')

const md = new MarkdownIt()
md.use(imageProxy, {
  // default proxy URL prefix.
  proxy: 'https://steemitimages.com/0x0/',
  // bypass for images on the following domains (defaults to none).
  trusted: [
    'https://i.imgur.com',
    'https://image.ibb.co'
  ]
})

This will be enough to parse all image tags with the steemitimages.com prefix.

Notice, that while prefixing image URL's, it will bypass the prefixing for the trusted origins.

Technology Stack

Minimalist Javascript, built with Rollup.

Roadmap

Those are the first installments of a series of plugins for Markdown-It, I mean to cover all Steem related parsing and sanitization as possible and bundle on a single parser package later.

How to contribute?

Github issues, comment or contact on Discord (@hernandev#5834)

GitHub Account

https://github.com/hernandev

#development #markdown #steemdev

7 years ago in #utopian-io by hernandev (61)

$137.02

Sort:

Trending

[-]

amosbastian (72) 7 years ago

Hi @hernandev, thanks for the contribution! They both look like useful plugins, so I am looking forward to seeing which other kind of plugins you are going to make for Markdown-It.

I was also wondering if there is a reason why you commit everything retroactively instead of doing it while you are working on it?

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on https://support.utopian.io/.
Chat with us on Discord.
[utopian-moderator]

$0.13

1 vote

[-]

hernandev (61) 7 years ago

Thank you @amosbastian!

So the plugins are aimed to render steem content mainly. The idea is to have something ready to use for Steem content, compliant / having the same results as on Steemit / Busy.

On this comment I provide a more general idea of what is to come.

Thanks!

$0.00

[-]

espoem (67) 7 years ago

Nice work. Though, is the first issue a real issue? Markdown is often not friendly with HTML tags in general and to have expected result, one should leave a blank space between the tags and other markdown parts.

It often depends on the markdown flavour and the tools probably but in my opinion, people just did not learn to use it properly. On the other hand, Steemit and even Busy changes the behaviour with every report. For example, if the images were not displayed without <img> or ![](), I believe that it would be much better.

$0.13

1 vote

[-]

hernandev (61) 7 years ago

Well, while I do agree, and honestly hate very much inline HTML on Markdown, that's something Steemians are already used to.

The first one is a quick hack, and for me, it qualifies as a real issue since the single line raw html + link/image parsing is the default behavior of Github (CommonMark)

As far the image tags, there's another plugin to be published soon, concerning auto-images.

You would be amazed to see how many posts contains plain steemitimages.com URLs without proper image or link markup wrapping.

My take on that matter is to allow images matching patterns and extensions, and auto-image then.

The whole process is not heavy on the tokenizer, as far as I've tested.

So, on the things pending commit and proper repository refactoring coming up:

@schema parsing (detect usernames on post content and auto-link)
auto images for predefined patterns or hosts.
safe-link exits (you are leaving to a suspicious URL).
extensive, but more strict HTML sanitization.
Asynchronous markdown rendering.
Parallel render executing by ready-to-use Web Workers

As a tutorial from my recent "sanitization" journey, I ended up even creating a Web Assembly parser with Rust (with some help from @tensor).

Thank you for your dedicated review of this post @espoem, keep up the great work!

$0.24

2 votes

[-]

espoem (67) 7 years ago

Hey, thanks for this extensive comment. However, I have little doubts about the last statement.

Thank you for your dedicated review of this post @espoem, keep up the great work!

Your post is yet to be reviewed in Utopian. This is a real struggle for us to distinguish personal comments and review comments and for me to fully understand how you meant it. :D

$0.13

1 vote

[-]

hernandev (61) 7 years ago

no-strings-attached.

I'm considering review, the act of checking out, putting though on the contribution and give some very welcomed feedback!

Officially or not, it's of great help!

$0.03

1 vote

[-]

utopian-io (71) 7 years ago

Hey @hernandev
Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!