Handle Markdown badges so they render side by side

[caendesilva]

A recurring annoyance I have when converting Readmes to Hyde sites, is that badges render like this:

Instead of this:

This is because Tailwind makes images display as block, instead of inline.

Implementation ideas

Question is, what's the best way to fix this without breaking BC?

Class

I'm thinking either we add a CSS class with styles. This is the easiest, but adds another class, and might only work if HTML is enabled in Markdown. It might also look ugly when viewing on GitHub or similar

Directive

An alternative, which is more complex to implement and maybe for the user to remember the syntax, is by adding a directive to the Markdown parser. For example:

[//]: #HYDE (Shields)
[![License MIT](https://img.shields.io/...)
[![Latest Version](https://img.shields.io/...)

This could then render the badges inline.

Make images inline

This would be a BC break, but honestly, it seems like most Markdown renderers (GitHub, PhpStorm) actually only ever render images inline. Maybe for HydePHP v2.0 we should make this the default. Until then we could have an opt-in config setting?

Other ideas?

If anyone has more ideas, let me know!

[caendesilva]

Until the fix, I made a script: (currently only works with badges having links)

<?php

// Put your input in here
$input = <<<'MARKDOWN'
[![Test & Build](https://github.com/hydephp/develop/actions/workflows/continuous-integration.yml/badge.svg)](https://github.com/hydephp/develop/actions/workflows/continuous-integration.yml)
[![Total Downloads on Packagist](https://img.shields.io/packagist/dt/hyde/framework)](https://packagist.org/packages/hyde/framework)
[![License MIT](https://img.shields.io/github/license/hydephp/hyde)](https://github.com/hydephp/develop/blob/master/LICENSE.md)
MARKDOWN;

// Compile to HTML according to pattern:
// Input line: [!Alt text](Image URL)](Link URL)
// Output line: <a href="Link URL"><img src="Image URL" alt="Alt text" style="display: inline; margin: 0 2px;"></a>
$pattern = '/\[(.*?)\]\((.*?)\)\]\((.*?)\)/';
$replacement = '<a href="$3"><img src="$2" alt="$1" style="display: inline; margin: 0 2px;"></a>';
$output = preg_replace($pattern, $replacement, $input);

echo $output;

// Output:
// <a href='https://github.com/hydephp/develop/actions/workflows/continuous-integration.yml'><img src='https://github.com/hydephp/develop/actions/workflows/continuous-integration.yml/badge.svg' alt='![Test & Build' style='display: inline; margin: 0 2px;'></a>
// <a href='https://packagist.org/packages/hyde/framework'><img src='https://img.shields.io/packagist/dt/hyde/framework' alt='![Total Downloads on Packagist' style='display: inline; margin: 0 2px;'></a>
// <a href='https://github.com/hydephp/develop/blob/master/LICENSE.md'><img src='https://img.shields.io/github/license/hydephp/hyde' alt='![License MIT' style='display: inline; margin: 0 2px;'></a>

Edit: This version is buggy, use latest in this gist instead
Edit 2: nevermind, gist version is still better, but both work. It's just a cors issue on the gist for some reason

[caendesilva]

Yeah in the future I want images to be inline by default. If one wants an image to display as block, just add newlines around it, and it will be in a <p> element which renders as a block.

[caendesilva]

This really is as simple as adding prose-img:inline. Working on a configurable fix now.

[caendesilva]

Closing as resolved, as this can be fixed by adding the prose-img:inline class to the config option added in #1357

// config/markdown.php
- 'prose_classes' => 'prose dark:prose-invert',
+ 'prose_classes' => 'prose dark:prose-invert prose-img:inline',