feat/markdown callouts script

[julia-rabello]

Script to convert HTML callouts to markdown callouts:

• Goes through all files in the docs folder.
• Converts HTML alert divs (alert-info, alert-warning, alert-danger) to Markdown callouts with corresponding symbols (>ℹ️, >⚠️, >❗).
• Converts HTML unordered lists within callouts (<ul>, <li>) and ordered lists (<ol>, <li>) to Markdown lists with appropriate bullet points or numbers.
• Converts common HTML tags like <strong>, <em>, <code>, and <a> within callouts to their Markdown equivalents.
• Recognizes new lines within callouts and formats them accordingly.

I tested it locally, by making it go through another folder with a test markdown file:

Test file

Info callout:

<div class="alert alert-info">
Here you can find useful information.
</div>

Warning callout:

<div class="alert alert-warning">
Here you can find a warning.
</div>

Danger callout:

<div class="alert alert-danger">
Here you can find details about possible dangers.
</div>

Without p, with strong and br:

<div class="alert alert-info">
<strong>Attention</strong>: This callout provides important details.<br>Here you can find useful information.    
</div>

Without p, with indentation and br:

<div class="alert alert-info">
   This callout provides important details.<br>Here you can find useful information. 
</div>


Without p, with strong and br /:

<div class="alert alert-info">
<strong>Attention</strong>: This callout provides important details.<br />Here you can find useful information.  
</div>

With p and without indentation:

<div class="alert alert-info">
<p>This callout provides important details.</p>
</div>

With p and indentation:

<div class="alert alert-info">
   <p>This callout provides important details.</p>
</div>

With two p and indentation:

<div class="alert alert-info">
   <p>This callout provides important details.</p>
   <p>Here you can find useful information.</p>
</div>

With two p and without indentation:

<div class="alert alert-info">
<p>This callout provides important details.</p>
<p>Here you can find useful information.</p>
</div>

With p, br and indentation:

<div class="alert alert-info">
   <p>This callout provides important details.</p>
   <br>Here you can find useful information.
</div>


With p, code, a, strong:

<div class="alert alert-info">
<p>This <code>callout</code> provides <strong>important</strong> details. Learn more at <a href="https://help.vtex.com">VTEX Help Center</a>.</p>
</div>

With ordered list:

<div class="alert alert-info">
   <p>This callout provides important details:</p>
   <ol>
     <li>First topic.</li>
     <li>Second topic.</li>
     <li>Third topic.</li>
   </ol>
   <p>Here you can find useful information. Learn more at <a href="https://help.vtex.com">VTEX Help Center</a>.</p>
</div>

With unordered list:

<div class="alert alert-info">
   <p>This callout provides important details:</p>
   <ul>
     <li>First topic.</li>
     <li>Second topic.</li>
     <li>Third topic.</li>
   </ul>
   <p>Here you can find useful information. Learn more at <a href="https://help.vtex.com">VTEX Help Center</a>.</p>
</div>


With p and blank line:

<div class="alert alert-info">
   <p>This callout provides important details.</p>
   
   Here you can find useful information.
</div>


Without p and with blank line:

<div class="alert alert-info">
   This callout provides important details.
   
   Here you can find useful information.
</div>

Result

Info callout:

>ℹ️ Here you can find useful information.

Warning callout:

>⚠️ Here you can find a warning.

Danger callout:

>❗ Here you can find details about possible dangers.

Without p, with strong and br:

>ℹ️ **Attention**: This callout provides important details.
>
> Here you can find useful information.

Without p, with indentation and br:

>ℹ️ This callout provides important details.
>
> Here you can find useful information.


Without p, with strong and br /:

>ℹ️ **Attention**: This callout provides important details.
>
> Here you can find useful information.

With p and without indentation:

>ℹ️ This callout provides important details.

With p and indentation:

>ℹ️ This callout provides important details.

With two p and indentation:

>ℹ️ This callout provides important details.
>
> Here you can find useful information.

With two p and without indentation:

>ℹ️ This callout provides important details.
>
> Here you can find useful information.

With p, br and indentation:

>ℹ️ This callout provides important details.
>
>
> Here you can find useful information.


With p, code, a, strong:

>ℹ️ This `callout` provides **important** details. Learn more at [VTEX Help Center](https://help.vtex.com).

With ordered list:

>ℹ️ This callout provides important details:
>
> 1. First topic.
>
> 2. Second topic.
>
> 3. Third topic.
>
> Here you can find useful information. Learn more at [VTEX Help Center](https://help.vtex.com).

With unordered list:

>ℹ️ This callout provides important details:
>
> * First topic.
>
> * Second topic.
>
> * Third topic.
>
> Here you can find useful information. Learn more at [VTEX Help Center](https://help.vtex.com).


With p and blank line:

>ℹ️ This callout provides important details.
>
> Here you can find useful information.


Without p and with blank line:

>ℹ️ This callout provides important details.
>
> Here you can find useful information.

I also tested it with the files in the /docs folder and it seemed to work well (didn't commit all the changes to facilitate review).

Next step:

• Find a way to call this script whenever docs are retrieved from Contentful (maybe include it in index.js?)

[PedroAntunesCosta]

Great!