Merge branch 'v1' of github.com:zauberzeug/nicegui into v1

main.py

@@ -1,90 +1,38 @@
 #!/usr/bin/env python3
 from pathlib import Path
 
-import docutils.core
 from pygments.formatters import HtmlFormatter
 
 from nicegui import Client, ui
-from website import demo_card, reference
-from website.constants import ACCENT_COLOR, HEADER_HEIGHT, STATIC
-from website.example import bash_window, browser_window, css_for_examples, python_window
+from website import demo_card, reference, svg
+from website.example import bash_window, browser_window, python_window
+from website.style import example_link, features, header_link, heading, link_target, section_heading, subtitle, title
 
 ui.add_static_files('/favicon', Path(__file__).parent / 'website' / 'favicon')
 
 
 def add_head_html() -> None:
-    ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
-    ui.add_head_html(docutils.core.publish_parts('', writer_name='html')['stylesheet'])
+    ui.add_head_html((Path(__file__).parent / 'website' / 'static' / 'header.html').read_text())
     ui.add_head_html(f'<style>{HtmlFormatter(nobackground=True).get_style_defs(".codehilite")}</style>')
-    ui.add_head_html('''
-        <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
-        <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
-        <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
-        <link rel="manifest" href="favicon/site.webmanifest">
-        <link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#000000">
-        <link rel="shortcut icon" href="favicon/favicon.ico">
-        <meta name="msapplication-TileColor" content="#ffffff">
-        <meta name="msapplication-config" content="favicon/browserconfig.xml">
-        <meta name="theme-color" content="#ffffff">
-    ''')  # https://realfavicongenerator.net/
-    ui.add_head_html(f'''
-        <style>
-        html {{
-            scroll-behavior: smooth;
-        }}
-        body {{
-            background-color: #f8f8f8;
-        }}
-        em {{
-            font-style: normal;
-            color: {ACCENT_COLOR};
-        }}
-        a:hover {{
-            opacity: 0.9;
-        }}
-        </style>
-    ''')
-    ui.add_head_html(f'''
-    <style>
-    .q-header {{
-        height: calc({HEADER_HEIGHT} + 20px);
-        background-color: {ACCENT_COLOR};
-    }}
-    .q-header.fade {{
-        height: {HEADER_HEIGHT};
-        background-color: {ACCENT_COLOR}d0;
-        backdrop-filter: blur(5px);
-    }}
-    </style>
-    <script>
-    window.onscroll = () => {{
-        const header = document.querySelector(".q-header");
-        if (document.documentElement.scrollTop > 50)
-            header.classList.add("fade");
-        else
-            header.classList.remove("fade");
-    }};
-    </script>
-    ''')
-    ui.add_head_html(f'<style>\n{css_for_examples()}\n</style>')
+    ui.add_head_html(f"<style>{(Path(__file__).parent / 'website' / 'static' / 'style.css').read_text()}</style>")
 
 
 def add_header() -> None:
     with ui.header() \
-            .classes('items-center duration-200 px-4', remove='q-pa-md') \
+            .classes('items-center duration-200 p-0 px-4') \
             .style('box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1)'):
         with ui.link(target=index_page).classes('row gap-4 items-center'):
-            ui.html((STATIC / 'happy_face.svg').read_text()).classes('w-8 stroke-white')
-            ui.html((STATIC / 'nicegui_word.svg').read_text()).classes('w-24')
+            svg.face().classes('w-8 stroke-white stroke-2')
+            svg.word().classes('w-24')
         with ui.row().classes('items-center ml-auto'):
-            ui.link('Features', '/#features').classes(replace='text-lg text-white')
-            ui.link('Installation', '/#installation').classes(replace='text-lg text-white')
-            ui.link('Examples', '/#examples').classes(replace='text-lg text-white')
-            ui.link('API Reference', reference_page).classes(replace='text-lg text-white')
-            ui.link('Demos', '/#demos').classes(replace='text-lg text-white')
-            ui.link('Why?', '/#why').classes(replace='text-lg text-white')
+            header_link('Features', '/#features')
+            header_link('Installation', '/#installation')
+            header_link('Examples', '/#examples')
+            header_link('API Reference', reference_page)
+            header_link('Demos', '/#demos')
+            header_link('Why?', '/#why')
             with ui.link(target='https://github.com/zauberzeug/nicegui/'):
-                ui.html((STATIC / 'github.svg').read_text()).classes('fill-white scale-125 m-1')
+                svg.github().classes('fill-white scale-125 m-1')
 
 
 @ui.page('/')
@@ -93,99 +41,81 @@ async def index_page(client: Client):
     add_head_html()
     add_header()
 
-    with ui.row() \
-            .classes('w-full h-screen q-pa-md items-center gap-16 no-wrap') \
-            .style(f'transform: translateX(-250px)'):
-        ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-black').style('width: 500px')
+    with ui.row().classes('w-full h-screen items-center gap-16 no-wrap').style(f'transform: translateX(-250px)'):
+        svg.face().classes('stroke-black w-[500px]')
         with ui.column().classes('gap-8'):
-            ui.html('Meet the <em>NiceGUI</em>.') \
-                .style('font-size: 400%; line-height: 0.9; font-weight: 500')
-            ui.markdown('And let any browser be the frontend\n\nof your Python code.') \
-                .style('font-size: 200%; line-height: 0.9')
-            with ui.link(target='#about').classes('column mt-6 items-center').style('margin-left: -1em'):
-                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5').style('margin-bottom: -0.95em')
+            title('Meet the *NiceGUI*.')
+            subtitle('And let any browser be the frontend\n\nof your Python code.')
+            with ui.link(target='#about') \
+                    .classes('column mt-6 items-center ml-[-12px] hover:translate-y-1 duration-100 ease-out'):
+                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5 mb-[-0.95em]')
                 ui.icon('keyboard_arrow_down').classes('text-6xl text-black')
-                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5').style('margin-top: -0.85em')
+                ui.icon('keyboard_arrow_down').classes('text-4xl text-grey-5 mt-[-0.85em]')
 
-    ui.link_target('about').style(f'position: relative; top: -20px')
-    with ui.row() \
-            .classes('w-full h-screen q-pa-md items-center gap-28 p-32 no-wrap') \
-            .style(f'background: {ACCENT_COLOR}'):
-        with ui.column().classes('gap-6'):
-            ui.markdown('Interact with Python through buttons, dialogs, 3D scenes, plots and much more.') \
-                .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500').classes('mb-4')
-            ui.label('''
-                NiceGUI handles all the web development details for you.
-                So you can focus on writing Python code.
-                Anything from short scripts and dashboards to full robotics projects, IoT solutions, 
-                smart home automations and machine learning projects can benefit from having all code in one place.
-                
-            ''').style('font-size: 150%; color: white').classes('leading-tight')
-            with ui.row().style('font-size: 150%; color: white').classes('leading-tight gap-2'):
+    link_target('about', '-20px')
+    with ui.row().classes('dark-box h-screen items-center gap-28 p-32 no-wrap'):
+        with ui.column().classes('gap-6 text-white'):
+            heading('Interact with Python through buttons, dialogs, 3D scenes, plots and much more.')
+            with ui.column().classes('gap-2 text-xl'):
+                ui.html('''
+                    NiceGUI handles all the web development details for you.
+                    So you can focus on writing Python code.
+                    Anything from short scripts and dashboards to full robotics projects, IoT solutions, 
+                    smart home automations and machine learning projects can benefit from having all code in one place.
+                ''')
                 ui.html('''
                     Available as
                     <a href="https://pypi.org/project/nicegui/"><strong>PyPI package</strong><span class="material-icons">north_east</span></a>,
                     <a href="https://hub.docker.com/r/zauberzeug/nicegui"><strong>Docker image</strong><span class="material-icons">north_east</span></a> and on
                     <a href="https://github.com/zauberzeug/nicegui"><strong>GitHub</strong><span class="material-icons">north_east</span></a>.
                 ''')
-
         demo_card.create()
 
-    ui.link_target('features').style(f'position: relative; top: -{HEADER_HEIGHT}')
+    link_target('features', '-50px')
     with ui.column().classes('w-full q-pa-xl q-mb-xl'):
-        ui.label('Features').classes('text-bold text-lg')
-        ui.html('Code <em>nicely</em>') \
-            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
+        section_heading('Features', 'Code *nicely*')
         with ui.row().classes('w-full no-wrap text-lg leading-tight justify-between q-mb-xl'):
-            with ui.column().classes('gap-1 col-3'):
-                ui.icon('swap_horiz').classes('text-5xl mb-3 text-primary opacity-80')
-                ui.label('Interaction').classes('text-bold mb-3')
-                ui.markdown('- buttons, switches, sliders, inputs, ...')
-                ui.markdown('- notifications, dialogs and menus')
-                ui.markdown('- keyboard input')
-                ui.markdown('- on-screen joystick')
-            with ui.column().classes('gap-1 col-3'):
-                ui.icon('space_dashboard').classes('text-5xl mb-3 text-primary opacity-80')
-                ui.label('Layout').classes('text-bold mb-3')
-                ui.markdown('- navigation bars, tabs, panels, ...')
-                ui.markdown('- grouping with rows, columns and cards')
-                ui.markdown('- HTML and markdown elements')
-                ui.markdown('- flex layout by default')
-            with ui.column().classes('gap-1 col-3'):
-                ui.icon('insights').classes('text-5xl mb-3 text-primary')
-                ui.label('Visualization').classes('text-bold mb-3')
-                ui.markdown('- charts, diagrams and tables')
-                ui.markdown('- 3D scenes')
-                ui.markdown('- progress bars')
-                ui.markdown('- built-in timer for data refresh')
+            features('swap_horiz', 'Interaction', [
+                'buttons, switches, sliders, inputs, ...',
+                'notifications, dialogs and menus',
+                'keyboard input',
+                'on-screen joystick',
+            ])
+            features('space_dashboard', 'Layout', [
+                'navigation bars, tabs, panels, ...',
+                'grouping with rows, columns and cards',
+                'HTML and markdown elements',
+                'flex layout by default',
+            ])
+            features('insights', 'Visualization', [
+                'charts, diagrams and tables',
+                '3D scenes',
+                'progress bars',
+                'built-in timer for data refresh',
+            ])
         with ui.row().classes('w-full no-wrap text-lg leading-tight justify-between'):
-            with ui.column().classes('gap-1 col-3'):
-                ui.icon('brush').classes('text-5xl mb-3 text-primary opacity-80')
-                ui.label('Styling').classes('text-bold mb-3')
-                ui.markdown('- customizable color themes')
-                ui.markdown('- custom CSS and classes')
-                ui.markdown('- modern look with material design')
-                ui.markdown('- built-in [Tailwind](https://tailwindcss.com/) support')
-            with ui.column().classes('gap-1 col-3'):
-                ui.icon('source').classes('text-5xl mb-3 text-primary opacity-80')
-                ui.label('Coding').classes('text-bold mb-3')
-                ui.markdown('- live-cycle events')
-                ui.markdown('- implicit reload on code change')
-                ui.markdown('- straight-forward data binding')
-                ui.markdown('- execute javascript from Python')
-            with ui.column().classes('gap-1 col-3'):
-                ui.icon('anchor').classes('text-5xl mb-3 text-primary opacity-80')
-                ui.label('Foundation').classes('text-bold mb-3')
-                ui.markdown('- generic [Vue](https://vuejs.org/) to Python bridge')
-                ui.markdown('- dynamic GUI through [Quasar](https://quasar.dev/)')
-                ui.markdown('- content is served with [FastAPI](http://fastapi.tiangolo.com/)')
-                ui.markdown('- Python 3.7+')
-
-    ui.link_target('installation').style(f'position: relative; top: -{HEADER_HEIGHT}')
+            features('brush', 'Styling', [
+                'customizable color themes',
+                'custom CSS and classes',
+                'modern look with material design',
+                'built-in [Tailwind](https://tailwindcss.com/) support',
+            ])
+            features('source', 'Coding', [
+                'live-cycle events',
+                'implicit reload on code change',
+                'straight-forward data binding',
+                'execute javascript from Python',
+            ])
+            features('anchor', 'Foundation', [
+                'generic [Vue](https://vuejs.org/) to Python bridge',
+                'dynamic GUI through [Quasar](https://quasar.dev/)',
+                'content is served with [FastAPI](http://fastapi.tiangolo.com/)',
+                'Python 3.7+',
+            ])
+
+    link_target('installation', '-50px')
     with ui.column().classes('w-full q-pa-xl q-mb-xl'):
-        ui.label('Installation').classes('text-bold text-lg')
-        ui.html('Get <em>started</em>') \
-            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
+        section_heading('Installation', 'Get *started*')
         with ui.row().classes('w-full no-wrap text-lg leading-tight'):
             with ui.column().classes('w-1/3 gap-2'):
                 ui.html('<em>1.</em>').classes('text-3xl text-bold')
@@ -209,30 +139,21 @@ ui.run()
                 with browser_window().classes('w-full h-52'):
                     ui.label('Hello NiceGUI!')
 
-    ui.link_target('examples').style(f'position: relative; top: -{HEADER_HEIGHT}')
+    link_target('examples', '-50px')
     with ui.column().classes('w-full q-pa-xl q-mb-xl'):
-        ui.label('Examples').classes('text-bold text-lg')
-        ui.html('Try <em>this</em>') \
-            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
+        section_heading('Examples', 'Try *this*')
         with ui.row().classes('justify-center w-full'), ui.column().classes('w-[65rem]'):
             reference.create_intro()
 
-    with ui.row() \
-            .classes('w-full items-center gap-28 px-32 py-16 no-wrap') \
-            .style(f'background: {ACCENT_COLOR}'):
-        with ui.column().classes('gap-4'):
-            ui.markdown('Browse through plenty of live examples.') \
-                .style('font-size: 220%; color: white; line-height: 0.9; font-weight: 500')
-            ui.html('Fun-Fact: This whole website is also coded with NiceGUI.') \
-                .style('font-size: 150%; color: white')
-        ui.link('API reference', '/reference') \
-            .classes('rounded-full mx-auto px-12 py-2 text-xl text-bold bg-white')
+    with ui.row().classes('dark-box items-center gap-28 px-32 py-16'):
+        with ui.column().classes('gap-2'):
+            ui.markdown('Browse through plenty of live examples.').classes('text-3xl text-white font-medium')
+            ui.html('Fun-Fact: This whole website is also coded with NiceGUI.').classes('text-xl text-white')
+        ui.link('API reference', '/reference').classes('rounded-full mx-auto px-12 py-2 text-xl text-bold bg-white')
 
-    ui.link_target('demos').style(f'position: relative; top: -{HEADER_HEIGHT}')
+    link_target('demos', '-50px')
     with ui.column().classes('w-full q-pa-xl q-mb-xl'):
-        ui.label('In-depth demonstrations').classes('text-bold text-lg')
-        ui.html('Pick your <em>solution</em>') \
-            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
+        section_heading('In-depth demonstrations', 'Pick your *solution*')
         with ui.row().classes('w-full no-wrap text-lg leading-tight'):
             with ui.column().classes('w-1/3'):
                 example_link('Slideshow', 'implements a keyboard-controlled image slideshow')
@@ -249,53 +170,43 @@ ui.run()
                     'demonstrates wrapping the JavaScript library leaflet to display a map at specific locations')
                 example_link(
                     'AI Interface',
-                    'utilizes the great [replicate](https://replicate.com) library to perform voice-to-text transcription and generate images from prompts with Stable Diffusion')
+                    'utilizes the [replicate](https://replicate.com) library to perform voice-to-text transcription and generate images from prompts with Stable Diffusion')
                 example_link('3D Scene', 'creates a webGL view and loads an STL mesh illuminated with a spotlight')
             with ui.column().classes('w-1/3'):
                 example_link('Custom Vue Component', 'shows how to write and integrate a custom vue component')
                 example_link('Image Mask Overlay', 'shows how to overlay an image with a mask')
                 example_link('Infinite Scroll', 'presents an infinitely scrolling image gallery')
 
-    ui.link_target('why')
-    with ui.row() \
-            .classes('w-full h-screen q-pa-md items-center gap-28 p-32 no-wrap') \
-            .style(f'background: {ACCENT_COLOR}'):
-        with ui.column().classes('gap-6'):
-            ui.markdown('Why?') \
-                .style('font-size: 300%; color: white; line-height: 0.9; font-weight: 500').classes('mb-4')
-            ui.html('''
-                We like
-                <strong><a href="https://streamlit.io/">Streamlit</a></strong>
-                but find it does
-                <strong><a href="https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651">too much magic</a></strong>
-                when it comes to state handling.
-                In search for an alternative nice library to write simple graphical user interfaces in Python we discovered
-                <strong><a href="https://justpy.io/">JustPy</a></strong>.
-                Although we liked the approach, it is too "low-level HTML" for our daily usage.
-                But it inspired us to use
-                <strong><a href="https://vuejs.org/">Vue</a></strong>
-                and
-                <strong><a href="https://quasar.dev/">Quasar</a></strong>
-                for the frontend.<br/>
-
-                We have built on top of
-                <strong><a href="https://fastapi.tiangolo.com/">FastAPI</a></strong>,
-                which itself is based on the ASGI framework
-                <strong><a href="https://www.starlette.io/">Starlette</a></strong>,
-                and the ASGI webserver
-                <strong><a href="https://www.uvicorn.org/">Uvicorn</a></strong>
-                because of their great performance and ease of use.
-            ''').style('font-size: 150%; color: white').classes('leading-tight')
-
-        ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-white').style('width: 1500px')
-
-
-def example_link(title: str, description: str) -> None:
-    name = title.lower().replace(' ', '_')
-    with ui.column().classes('gap-0'):
-        with ui.link(target=f'https://github.com/zauberzeug/nicegui/tree/main/examples/{name}/main.py'):
-            ui.label(title).classes(replace='text-black text-bold')
-            ui.markdown(description).classes(replace='text-black')
+    link_target('why', '0')
+    with ui.row().classes('dark-box h-screen items-center gap-28 p-32 no-wrap'):
+        with ui.column().classes('gap-8'):
+            heading('Why?')
+            with ui.column().classes('gap-2 text-xl text-white'):
+                ui.html('''
+                    We like
+                    <strong><a href="https://streamlit.io/">Streamlit</a></strong>
+                    but find it does
+                    <strong><a href="https://github.com/zauberzeug/nicegui/issues/1#issuecomment-847413651">too much magic</a></strong>
+                    when it comes to state handling.
+                    In search for an alternative nice library to write simple graphical user interfaces in Python we discovered
+                    <strong><a href="https://justpy.io/">JustPy</a></strong>.
+                    Although we liked the approach, it is too "low-level HTML" for our daily usage.
+                    But it inspired us to use
+                    <strong><a href="https://vuejs.org/">Vue</a></strong>
+                    and
+                    <strong><a href="https://quasar.dev/">Quasar</a></strong>
+                    for the frontend.
+                ''')
+                ui.html('''
+                    We have built on top of
+                    <strong><a href="https://fastapi.tiangolo.com/">FastAPI</a></strong>,
+                    which itself is based on the ASGI framework
+                    <strong><a href="https://www.starlette.io/">Starlette</a></strong>,
+                    and the ASGI webserver
+                    <strong><a href="https://www.uvicorn.org/">Uvicorn</a></strong>
+                    because of their great performance and ease of use.
+                ''')
+        svg.face().classes('stroke-white').style('width: 1500px')
 
 
 @ui.page('/reference')
@@ -305,4 +216,4 @@ def reference_page():
     reference.create_full()
 
 
-ui.run()
+ui.run(uvicorn_reload_includes='*.py, *.css, *.html')

nicegui/templates/index.html

@@ -61,10 +61,16 @@
       }
 
       function run_javascript(code, request_id) {
-        const result = eval(code);
-        if (request_id) {
-          window.socket.emit("javascript_response", {request_id, result});
-        }
+        (new Promise((resolve) =>resolve(eval(code)))).catch((reason) => {
+          if(reason instanceof SyntaxError)
+            return eval(`(async() => {${code}})()`);
+          else
+            throw reason;
+        }).then((result) => {
+          if (request_id) {
+            window.socket.emit("javascript_response", {request_id, result});
+          }
+        });
       }
 
       const app = Vue.createApp({

tests/test_javascript.py

@@ -62,3 +62,30 @@ def test_response_from_javascript(screen: Screen):
     screen.open('/')
     screen.click('compute')
     screen.should_contain('42')
+
+
+def test_async_javascript(screen: Screen):
+    async def run():
+        result = await ui.run_javascript('await new Promise(r => setTimeout(r, 100)); return 42')
+        ui.label(result)
+    ui.button('run', on_click=run)
+    screen.open('/')
+    screen.click('run')
+    screen.should_contain('42')
+
+
+def test_simultaneous_async_javascript(screen: Screen):
+    async def runA():
+        result = await ui.run_javascript('await new Promise(r => setTimeout(r, 500)); return 1')
+        ui.label(f'A: {result}')
+
+    async def runB():
+        result = await ui.run_javascript('await new Promise(r => setTimeout(r, 250)); return 2')
+        ui.label(f'B: {result}')
+    ui.button('runA', on_click=runA)
+    ui.button('runB', on_click=runB)
+    screen.open('/')
+    screen.click('runA')
+    screen.click('runB')
+    screen.should_contain('A: 1')
+    screen.should_contain('B: 2')

website/constants.py

@@ -1,5 +0,0 @@
-from pathlib import Path
-
-ACCENT_COLOR = '#5A99FF'
-HEADER_HEIGHT = '50px'
-STATIC = Path(__file__).parent / 'static'

website/demo_card.py

@@ -1,6 +1,6 @@
 from nicegui import ui
 
-from .constants import STATIC
+from . import svg
 
 
 def create():
@@ -8,8 +8,7 @@ def create():
         with ui.card().style(f'clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%)') \
                 .classes('pb-16 no-shadow'), ui.row().classes('no-wrap'):
             with ui.column().classes('items-center'):
-                ui.html((STATIC / 'happy_face.svg').read_text()) \
-                    .classes('w-16 mx-6 stroke-black').on('click', lambda _: output.set_text("That's my face!"))
+                svg.face().classes('w-16 mx-6 stroke-black stroke-2').on('click', lambda _: output.set_text("That's my face!"))
                 ui.button('Click me!', on_click=lambda: output.set_text('Clicked')).classes('w-full')
                 ui.input('Text', value='abc', on_change=lambda e: output.set_text(e.value))
                 ui.checkbox('Check', on_change=lambda e: output.set_text('Checked' if e.value else 'Unchecked'))

website/example.py

@@ -21,14 +21,11 @@ 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))
+                documentation = ui.markdown(self.content)
             else:
                 doc = self.content.__doc__ or self.content.__init__.__doc__
                 html: str = docutils.core.publish_parts(doc, writer_name='html5_polyglot')['html_body']
@@ -36,9 +33,10 @@ class example:
                 html = html.replace('</p>', '</h4>', 1)
                 html = html.replace('param ', '')
                 html = apply_tailwind(html)
-                _add_html_anchor(ui.html(html).classes(self.markdown_classes))
+                documentation = ui.html(html)
+            _add_html_anchor(documentation)
 
-            with ui.row().classes('items-stretch max-w-screen-lg'):
+            with ui.row().classes('items-stretch'):
                 code = inspect.getsource(f).splitlines()
                 indentation = len(code[0].split('@example')[0]) + 4
                 while not code[0].startswith(' ' * indentation):
@@ -60,9 +58,9 @@ class example:
                     code.append('ui.run()')
                 code.append('```')
                 code = '\n'.join(code)
-                with python_window().classes(self.source_classes):
+                with python_window().classes(f'w-[43rem] overflow-auto'):
                     ui.markdown(code)
-                with browser_window().classes(self.rendering_classes):
+                with browser_window().classes('w-80'):
                     f()
         return f
 
@@ -78,9 +76,10 @@ def _add_html_anchor(element: ui.html) -> None:
         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)
+    link = f'<a href="reference#{headline_id}" class="hover:text-black" style="color: #ddd">{icon}</a>'
+    target = f'<div id="{headline_id}" style="position: relative; top: -90px"></div>'
+    html = html.replace('<h4', f'{target}<h4', 1)
+    html = html.replace('</h4>', f' {link}</h4>', 1)
     element.content = html
 
 
@@ -131,22 +130,3 @@ def bash_window() -> ui.card:
 
 def browser_window() -> ui.card:
     return window(BROWSER_COLOR, BROWSER_BGCOLOR, tab='NiceGUI')
-
-
-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;
-        }
-    '''

website/static/happy_face.svg

@@ -2,7 +2,7 @@
 <svg id="Ebene_1"
     xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.44 71.74">
     <defs>
-        <style>.svg_face{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style>
+        <style>.svg_face{fill:none;stroke-linecap:round;stroke-linejoin:round}</style>
     </defs>
     <path class="svg_face" d="M55.35,18.98v23.97c0,14.34-10.89,25.96-24.34,25.96S6.68,57.29,6.68,42.95v-11.31c7.48,0,8.01-11.96,8.01-11.96,1.79-.78,3.82-.89,6.02,.23,11.9,6.08,26.13,1.69,31.33-.41,1.21-.49,2.34-.6,3.31-.52Z"/>
     <path class="svg_face" d="M14.7,38.09s3.18-2.52,6.99,0"/>

website/static/header.html

@@ -0,0 +1,20 @@
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+
+<!-- https://realfavicongenerator.net/ -->
+<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png" />
+<link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png" />
+<link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png" />
+<link rel="manifest" href="favicon/site.webmanifest" />
+<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#000000" />
+<link rel="shortcut icon" href="favicon/favicon.ico" />
+<meta name="msapplication-TileColor" content="#ffffff" />
+<meta name="msapplication-config" content="favicon/browserconfig.xml" />
+<meta name="theme-color" content="#ffffff" />
+
+<script>
+  window.onscroll = () => {
+    const header = document.querySelector(".q-header");
+    if (document.documentElement.scrollTop > 50) header.classList.add("fade");
+    else header.classList.remove("fade");
+  };
+</script>

website/static/style.css

@@ -0,0 +1,46 @@
+html {
+  scroll-behavior: smooth;
+}
+html,
+body {
+  max-width: 100%;
+  overflow-x: hidden;
+}
+body {
+  background-color: #f8f8f8;
+}
+em {
+  font-style: normal;
+  color: #5a99ff;
+}
+a:hover {
+  opacity: 0.85;
+}
+
+.q-header {
+  height: 70px;
+  background-color: #5a99ff;
+}
+.q-header.fade {
+  height: 50px;
+  background-color: #5a99ffd0;
+  backdrop-filter: blur(5px);
+}
+
+dl.field-list {
+  display: grid;
+  grid-template-columns: max-content auto;
+}
+dl.field-list dt {
+  grid-column-start: 1;
+  margin-right: 1em;
+  font-weight: bold;
+}
+dl.field-list dd {
+  grid-column-start: 2;
+}
+
+.dark-box {
+  background-color: #5a99ff;
+  width: 100%;
+}

website/style.py

@@ -0,0 +1,44 @@
+from typing import List
+
+from nicegui import ui
+
+
+def header_link(title: str, target: str) -> ui.link:
+    return ui.link(title, target).classes(replace='text-lg text-white')
+
+
+def link_target(name: str, offset: str) -> ui.link_target:
+    return ui.link_target(name).style(f'position: relative; top: {offset}')
+
+
+def section_heading(subtitle: str, title: str) -> None:
+    ui.label(subtitle).classes('text-lg text-bold')
+    ui.markdown(title).classes('text-5xl font-medium mt-[-12px]')
+
+
+def heading(title: str) -> ui.label:
+    return ui.label(title).classes('text-5xl font-medium text-white')
+
+
+def title(content: str) -> ui.markdown:
+    return ui.markdown(content).classes('text-6xl font-medium')
+
+
+def subtitle(content: str) -> ui.markdown:
+    return ui.markdown(content).classes('text-3xl leading-7')
+
+
+def example_link(title: str, description: str) -> None:
+    name = title.lower().replace(' ', '_')
+    with ui.column().classes('gap-0'):
+        with ui.link(target=f'https://github.com/zauberzeug/nicegui/tree/main/examples/{name}/main.py'):
+            ui.label(title).classes(replace='text-black text-bold')
+            ui.markdown(description).classes(replace='text-black')
+
+
+def features(icon: str, title: str, items: List[str]) -> None:
+    with ui.column().classes('gap-1 col-3'):
+        ui.icon(icon).classes('text-5xl mb-3 text-primary opacity-80')
+        ui.label(title).classes('text-bold mb-3')
+        for item in items:
+            ui.markdown(f'- {item}')

website/svg.py

@@ -0,0 +1,21 @@
+from pathlib import Path
+
+from nicegui import ui
+
+PATH = Path(__file__).parent / 'static'
+
+
+def _svg(name: str) -> ui.html:
+    return ui.html((PATH / f'{name}.svg').read_text())
+
+
+def face() -> ui.html:
+    return _svg('happy_face')
+
+
+def word() -> ui.html:
+    return _svg('nicegui_word')
+
+
+def github() -> ui.html:
+    return _svg('github')