nicegui/website/example.py

import inspect
import re
from typing import Callable, Union

import docutils.core

from nicegui import ui
from nicegui.elements.markdown import apply_tailwind

REGEX_H4 = re.compile(r'<h4.*?>(.*?)</h4>')
SPECIAL_CHARACTERS = re.compile('[^(a-z)(A-Z)(0-9)-]')


class example:

    def __init__(self, content: Union[Callable, type, str]) -> None:
        self.content = content
        self.markdown_classes = f'w-full max-w-screen-lg flex-none'
        self.rendering_classes = f'w-80 text-lg'
        self.source_classes = f'w-[43rem] overflow-auto'

    def __call__(self, f: Callable) -> Callable:
        with ui.row().classes('q-mb-xl'):
            if isinstance(self.content, str):
                _add_html_anchor(ui.markdown(self.content).classes(self.markdown_classes))
            else:
                doc = self.content.__doc__ or self.content.__init__.__doc__
                html: str = docutils.core.publish_parts(doc, writer_name='html5_polyglot')['html_body']
                html = html.replace('<p>', '<h4>', 1)
                html = html.replace('</p>', '</h4>', 1)
                html = html.replace('param ', '')
                html = apply_tailwind(html)
                _add_html_anchor(ui.html(html).classes(self.markdown_classes))

            with ui.row().classes('items-stretch max-w-screen-lg'):
                code = inspect.getsource(f).splitlines()
                while not code[0].startswith(' ' * 12):
                    del code[0]
                code = [l[12:] for l in code]
                while code[0].startswith('global '):
                    del code[0]
                code.insert(0, '```python')
                code.insert(1, 'from nicegui import ui')
                if code[2].split()[0] not in ['from', 'import']:
                    code.insert(2, '')
                for l, line in enumerate(code):
                    if line.startswith('# ui.'):
                        code[l] = line[2:]
                    if line.startswith('# ui.run('):
                        break
                else:
                    code.append('')
                    code.append('ui.run()')
                code.append('```')
                code = '\n'.join(code)
                with python_window().classes(self.source_classes):
                    ui.markdown(code)
                with browser_window().classes(self.rendering_classes):
                    f()
        return f


def _add_html_anchor(element: ui.html) -> None:
    html = element.content
    match = REGEX_H4.search(html)
    if not match:
        return
    headline = match.groups()[0].strip()
    headline_id = SPECIAL_CHARACTERS.sub('_', headline).lower()
    if not headline_id:
        return

    icon = '<span class="material-icons">link</span>'
    anchor = f'<a href="reference#{headline_id}" class="text-gray-300 hover:text-black">{icon}</a>'
    html = html.replace('<h4', f'<h4 id="{headline_id}"', 1)
    html = html.replace('</h4>', f' {anchor}</h4>', 1)
    element.content = html


def _add_dots() -> None:
    with ui.row().classes('gap-1').style('transform: translate(-6px, -6px)'):
        ui.icon('circle').style('font-size: 75%').classes('text-red-400')
        ui.icon('circle').style('font-size: 75%').classes('text-yellow-400')
        ui.icon('circle').style('font-size: 75%').classes('text-green-400')


def window(color: str) -> ui.card:
    with ui.card().style(f'box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background: {color}') as card:
        _add_dots()
    return card


def python_window() -> ui.card:
    return window('#eff5ff')


def browser_window() -> ui.card:
    with ui.card().classes('h-fill').style(f'box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background: white') as card:
        with ui.row():
            ui.icon('language').classes('text-blue-400').style('font-size: 90%; margin: -4px 0px 0px -4px')
            ui.label('localhost:8080').classes('text-blue-200').style('font-size: 60%; margin: -3px 0px 0px -12px')
    return card


def bash_window() -> ui.card:
    return window('#e8e8e8')


def css_for_examples() -> str:
    return '''
        dl {
            display: grid;
            grid-template-columns: max-content auto;
        }

        dt {
            grid-column-start: 1;
            margin-right: 1em;
            font-weight: bold;
        }

        dd {
            grid-column-start: 2;
        }
    '''