LifeFaq/app/services/markdown_render.py

import markdown
from jinja2 import Environment, DictLoader

# Define Jinja2 custom functions
def img_left_overlay(src):
    """Render an image with overlay."""
    return f'''
    <div class="img-left-overlay">
        <img src="{src}" alt="Overlay Image" loading="lazy">
        <div class="overlay-text">Overlay Text</div>
    </div>
    '''

def box(title, content):
    """Render a box component."""
    return f'''
    <div class="box">
        <strong>{title}</strong>
        <p>{content}</p>
    </div>
    '''

def note(content):
    """Render a note component."""
    return f'''
    <div class="note">
        <p>{content}</p>
    </div>
    '''
def link_to(title, url):
    """Render a box component."""
    return f'''
    <a href="{url}" target="_blank" rel="noopener noreferrer">{title}</a>        
    '''

def warning(content):
    """Render a warning component."""
    return f'''
    <div class="warning">
        ⚠️ <p>{content}</p>
    </div>
    '''


def slider(options, images):
    """Render a slider using the provided HTML structure."""
    import uuid
    modal_id = uuid.uuid4().hex.upper()[0:6]  # Lets create some uniq modals

    width = options.get("width", 500)
    height = options.get("height", 375)

    html_content = []
    html_content.append('<div class="button-stack">')
    for i, val in enumerate(images):
        modal_id = f"{modal_id}_{i}"
        modal_id_next = f"{modal_id}_{i+1}"
       
        if int(len(images))<=int(i+1):
            modal_id_next = f"{modal_id}_0"
        if i % 2 == 0:
            html_content.append(f"""<button onclick="openModal('modal{modal_id}')" class="stacked-button">  <img src="{val}" alt="Lets do better" class="thumbnail" loading="lazy"></button>""".strip())
        else:
            html_content.append(f"""<button onclick="openModal('modal{modal_id}')" class="stacked-button">  <img src="{val}" alt="Lets do better" class="thumbnail" loading="lazy"></button>""".strip())
        html_content.append(f"""<div class="modal" id="modal{modal_id}"> 
                                   <div class="modal-content"> 
                                      <h2>Modal {i}</h2>  
                                      <img src="{val}" alt="Lets do better" loading="lazy"> 
                                      <div class="modal-buttons">
                                        <button onclick="closeModal('modal{modal_id}')">Close</button>
                                        <button class="next-btn" onclick="nextModal('modal{modal_id}', 'modal{modal_id_next}')">Next</button>
                                      </div> 
                                   </div>
                                </div>""")

    html_content.append( '</div>' )
    html  = '\n'.join( html_content )

    return html


def create_jinja_environment():
    """Create and configure the Jinja2 environment."""
    env = Environment(loader=DictLoader({"base_template": "{{ content | safe }}"}))
    env.globals.update({
        "img_left_overlay": img_left_overlay,
        "box": box,
        "note": note,
        "warning": warning,
        "link_to": link_to,
        "slider": slider,
    })
    return env

def render_markdown_with_jinja(markdown_content: str):
    """
    Convert Markdown to HTML and apply Jinja2 rendering for custom tags.

    Args:
        markdown_content (str): Raw Markdown content.

    Returns:
        tuple: Rendered HTML content and metadata as a dictionary.
    """
    # Step 1: Convert Markdown to HTML and extract metadata
    md = markdown.Markdown(extensions=["extra", "nl2br", "meta"])
    intermediate_html = md.convert(markdown_content)
    metadata = {key: " ".join(value) for key, value in md.Meta.items()} if md.Meta else {}

    # Step 2: Pass the resulting HTML with Jinja2 custom tags through Jinja2
    env = create_jinja_environment()

    template = env.get_template("base_template")
    final_html = template.render(content=intermediate_html)

    #Step 3: Re-render final_html in Jinja2 for embedded tags like {{ box(...) }}

    try:
        final_output = env.from_string(final_html).render()
    except:
        print(final_html)

    return final_output, metadata