integrate new NiceGUI face

nicegui/error.py

@@ -1,16 +1,26 @@
+from pathlib import Path
+from typing import Union
+
 from nicegui import ui
 
 
-def error_content(status_code: int, message: str = '') -> None:
+def error_content(status_code: int, exception: Union[str, Exception] = '') -> None:
     if 400 <= status_code <= 499:
-        title = "This page doesn't exist"
+        title = "This page doesn't exist."
     elif 500 <= status_code <= 599:
         title = 'Server error'
     else:
         title = 'Unknown error'
 
+    if isinstance(exception, str):
+        message = exception
+    else:
+        message = exception.__class__.__name__
+        if str(exception):
+            message += ': ' + str(exception)
+
     with ui.column().classes('w-full py-20 items-center gap-0'):
-        ui.icon('☹').classes('text-8xl py-5').style('font-family: "Arial Unicode MS", "Times New Roman", Times, serif;')
+        ui.html((Path(__file__).parent / 'static' / 'sad_face.svg').read_text()).classes('w-32 py-5')
         ui.label(status_code).classes('text-6xl py-5')
         ui.label(title).classes('text-xl py-5')
-        ui.label(message).classes('text-lg py-2 text-gray-500')
+        ui.label(message).classes('text-lg text-gray-500')

nicegui/nicegui.py

@@ -61,16 +61,16 @@ def shutdown() -> None:
 
 
 @app.exception_handler(404)
-async def exception_handler(_: Request, exc: Exception):
+async def exception_handler(_: Request, exception: Exception):
     with Client(page('')) as client:
-        error_content(404, f'{exc.__class__.__name__}: {str(exc)}')
+        error_content(404, exception)
     return client.build_response()
 
 
 @app.exception_handler(Exception)
-async def exception_handler(_: Request, exc: Exception):
+async def exception_handler(_: Request, exception: Exception):
     with Client(page('')) as client:
-        error_content(500, f'{exc.__class__.__name__}: {str(exc)}')
+        error_content(500, exception)
     return client.build_response()
 
 

nicegui/static/sad_face.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.44 73.98">
+    <defs>
+        <style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:2px;}</style>
+    </defs>
+    <path class="cls-1" 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="cls-1" d="M14.7,38.09s3.18-2.52,6.99,0"/>
+    <path class="cls-1" d="M39.71,38.09s3.18-2.52,6.99,0"/>
+    <path class="cls-1" d="M6.68,34.87v9.97c-2.07,0-3.75-2.23-3.75-4.99s1.68-4.98,3.75-4.98Z"/>
+    <path class="cls-1" d="M55.35,44.84v-9.97c2.07,0,3.75,2.23,3.75,4.99s-1.68,4.98-3.75,4.98Z"/>
+    <path class="cls-1" d="M58.61,20.11s-1.33-.96-3.34-1.13c-.97-.08-2.1,.03-3.31,.52-5.2,2.1-19.43,6.49-31.33,.41-2.2-1.12-4.23-1.01-6.02-.23,0,0-.53,11.96-8.01,11.96v-10.33c0-.18,0-.35,.01-.53,.03-2.34,.17-4.72,.61-7,.62-3.05,4.35-7.48,9.01-8.8C33.96-.04,47.12,4.46,51.77,7.66c4.91,3.39,6.81,12.45,6.84,12.45Z"/>
+    <path class="cls-1" d="M7.3,13.78c-.44,2.28-.58,4.66-.61,7,.01-2.33,.15-4.71,.61-7Z"/>
+    <path class="cls-1" d="M39.44,13.19s1.3,1.99,5.11,1.97c2.97-.02,4.64-1.83,7.1-1.77,3.55,.08,5.36,2.39,6.24,4.28,.05,.1,.19,.47,.19,.47,.43,1.36,.54,1.98,.55,1.98,0,0-1.33-.96-3.34-1.13-.97-.08-2.1,.03-3.31,.52"/>
+    <path class="cls-1" d="M41.17,55.69s-3.2-2.47-10.19-2.47-10.9,2.47-10.9,2.47"/>
+</svg>

website/main.py

@@ -9,6 +9,7 @@ from nicegui import Client, ui
 
 ACCENT_COLOR = '#428BF5'
 HEADER_HEIGHT = '70px'
+STATIC = Path(__file__).parent / 'static'
 
 
 @ui.page('/')
@@ -19,11 +20,12 @@ async def index_page(client: Client):
     client.content.classes(remove='q-pa-md gap-4').style('background: #f8f8f8')
 
     with ui.header() \
-            .classes('justify-between items-center') \
+            .classes('items-center') \
             .style(f'background-color: {ACCENT_COLOR}; height: {HEADER_HEIGHT}') \
             .props('elevated'):
-        ui.label('NiceGUI').classes('text-3xl')
-        with ui.row().classes('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')
+        with ui.row().classes('items-center ml-auto'):
             ui.link('Features').classes('text-lg').style('color: white!important')
             ui.link('Installation').classes('text-lg').style('color: white!important')
             ui.link('Documentation').classes('text-lg').style('color: white!important')
@@ -31,12 +33,12 @@ async def index_page(client: Client):
             ui.link('Docker').classes('text-lg').style('color: white!important')
             ui.link('Deployment').classes('text-lg').style('color: white!important')
             with ui.link(target='https://github.com/zauberzeug/nicegui/'):
-                ui.html(Path('static/github.svg').read_text()).classes('fill-white scale-125 m-1')
+                ui.html((STATIC / 'github.svg').read_text()).classes('fill-white scale-125 m-1')
 
     with ui.row() \
-            .classes('w-full q-pa-md items-center gap-8') \
-            .style(f'height: calc(100vh - {HEADER_HEIGHT}); transform: translateX(-375px)'):
-        ui.icon('face').style('font-size: 5000%')
+            .classes('w-full q-pa-md items-center gap-12 no-wrap') \
+            .style(f'height: calc(100vh - {HEADER_HEIGHT}); transform: translateX(-250px)'):
+        ui.html((STATIC / 'happy_face.svg').read_text()).classes('stroke-black').style('width: 500px')
         with ui.column().classes('gap-8'):
             ui.markdown('The NiceGUI you really\n\nneed in your life.') \
                 .style('font-size: 400%; line-height: 0.9; font-weight: 500')

website/static/happy_face.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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>
+    </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"/>
+    <path class="svg_face" d="M39.71,38.09s3.18-2.52,6.99,0"/>
+    <path class="svg_face" d="M6.68,34.87v9.97c-2.07,0-3.75-2.23-3.75-4.99s1.68-4.98,3.75-4.98Z"/>
+    <path class="svg_face" d="M55.35,44.84v-9.97c2.07,0,3.75,2.23,3.75,4.99s-1.68,4.98-3.75,4.98Z"/>
+    <path class="svg_face" d="M58.69,20.11s-1.33-.96-3.34-1.13c-.97-.08-2.1,.03-3.31,.52-5.2,2.1-19.43,6.49-31.33,.41-2.2-1.12-4.23-1.01-6.02-.23,0,0-.53,11.96-8.01,11.96v-10.33c0-.18,0-.35,.01-.53,.03-2.34,.17-4.72,.61-7,.62-3.05,4.35-7.48,9.01-8.8C34.04-.04,47.2,4.46,51.85,7.66c4.91,3.39,6.85,12.41,6.84,12.45Z"/>
+    <path class="svg_face" d="M7.3,13.78c-.44,2.28-.58,4.66-.61,7,.01-2.33,.15-4.71,.61-7Z"/>
+    <path class="svg_face" d="M58.69,20.11s-.99-6.57-7.03-6.71c-2.46-.05-4.13,1.75-7.1,1.77-3.8,.02-5.11-1.97-5.11-1.97"/>
+    <path class="svg_face" d="M14.82,51.45s4.92,6.49,15.65,6.49,16.74-6.49,16.74-6.49"/>
+</svg>

website/static/nicegui_word.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Ebene_1"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 62.44 16.48">
+    <defs>
+        <style>.svg_letter1{stroke:#fff;fill:#fff;stroke-miterlimit:10;stroke-width:.25px;}</style>
+        <style>.svg_letter2{fill:#fff}</style>
+    </defs>
+    <path class="svg_letter1" d="M3.26,14.29c-.22,0-.4-.08-.55-.22-.14-.15-.22-.33-.22-.56V3.35c0-.23,.07-.42,.22-.56s.33-.22,.55-.22c.24,0,.44,.09,.6,.29l6.54,8.7V3.35c0-.23,.08-.42,.23-.56,.15-.15,.33-.22,.55-.22,.23,0,.42,.07,.56,.22,.14,.14,.21,.33,.21,.56V13.51c0,.22-.07,.41-.21,.56-.14,.15-.33,.22-.56,.22-.1,0-.21-.02-.32-.07s-.21-.11-.28-.2L4.04,5.32V13.51c0,.22-.07,.41-.22,.56-.14,.15-.33,.22-.56,.22Z"/>
+    <path class="svg_letter1" d="M15.23,4.75c-.27,0-.5-.1-.7-.29-.2-.2-.29-.43-.29-.7s.1-.5,.29-.7,.43-.29,.7-.29,.5,.1,.7,.29c.2,.2,.29,.43,.29,.7s-.1,.5-.29,.7-.43,.29-.7,.29Zm0,9.54c-.22,0-.4-.07-.55-.22s-.22-.33-.22-.55V6.85c0-.23,.07-.41,.22-.55,.15-.14,.33-.21,.55-.21,.23,0,.42,.07,.55,.21s.21,.33,.21,.55v6.68c0,.22-.07,.4-.21,.55-.14,.15-.32,.22-.55,.22Z"/>
+    <path class="svg_letter1" d="M22.08,14.35c-.8,0-1.51-.18-2.14-.55-.62-.37-1.12-.86-1.47-1.49-.35-.62-.53-1.33-.53-2.12s.17-1.53,.53-2.16c.35-.63,.83-1.12,1.44-1.48,.61-.35,1.31-.53,2.1-.53,.59,0,1.13,.11,1.62,.34,.49,.23,.93,.56,1.32,1.01,.14,.16,.19,.33,.15,.5s-.15,.32-.33,.45c-.14,.1-.29,.13-.46,.1-.17-.04-.33-.12-.46-.26-.49-.52-1.1-.78-1.83-.78-.51,0-.96,.12-1.35,.35-.39,.24-.7,.56-.92,.98s-.33,.92-.33,1.49c0,.54,.11,1.02,.34,1.44s.54,.75,.94,1c.4,.25,.87,.37,1.39,.37,.35,0,.66-.04,.92-.13,.26-.08,.51-.22,.73-.4,.16-.13,.33-.2,.5-.22,.17-.02,.32,.03,.45,.14,.17,.14,.26,.3,.29,.47,.02,.18-.04,.33-.18,.47-.72,.67-1.62,1-2.7,1Z"/>
+    <path class="svg_letter1" d="M30.75,14.35c-.83,0-1.57-.18-2.21-.53-.64-.35-1.15-.84-1.51-1.47-.37-.62-.55-1.34-.55-2.15s.17-1.54,.52-2.17,.82-1.11,1.43-1.47c.61-.35,1.31-.53,2.1-.53s1.45,.17,2.01,.52c.56,.34,.99,.82,1.28,1.42,.29,.6,.44,1.3,.44,2.09,0,.19-.07,.35-.2,.47s-.29,.19-.5,.19h-6.04v-1.2h6l-.61,.42c-.01-.5-.11-.95-.3-1.34-.19-.4-.46-.71-.81-.94-.35-.23-.78-.34-1.28-.34-.57,0-1.06,.12-1.46,.38-.41,.25-.71,.59-.92,1.03-.21,.43-.32,.93-.32,1.48s.12,1.04,.38,1.47,.6,.77,1.04,1.02c.44,.25,.95,.38,1.52,.38,.31,0,.63-.06,.95-.17s.59-.25,.79-.4c.15-.11,.31-.17,.49-.17,.17,0,.33,.05,.46,.16,.17,.15,.26,.32,.27,.5,0,.18-.07,.34-.24,.46-.34,.27-.76,.49-1.27,.66-.5,.17-.99,.25-1.45,.25Z"/>
+    <path class="svg_letter2" d="M41.56,14.4c-.81,0-1.57-.16-2.27-.47-.71-.31-1.33-.74-1.86-1.3-.53-.56-.95-1.2-1.25-1.92-.3-.73-.45-1.5-.45-2.33s.15-1.59,.44-2.32c.29-.72,.71-1.36,1.25-1.91s1.16-.98,1.86-1.3c.71-.31,1.47-.47,2.29-.47,.72,0,1.38,.11,1.96,.32s1.16,.54,1.71,1c.09,.07,.14,.15,.16,.25,.01,.1,0,.19-.04,.27s-.25,.33-.33,.37-.17,.06-.28,.04c-.1,0-.21-.05-.31-.13-.39-.34-.81-.59-1.27-.76s-1-.25-1.61-.25c-.65,0-1.26,.13-1.82,.39-.57,.26-1.06,.62-1.49,1.07-.43,.45-.77,.97-1.01,1.56-.25,.59-.37,1.21-.37,1.88s.12,1.32,.37,1.91,.58,1.11,1.01,1.56c.43,.45,.93,.8,1.49,1.06,.56,.25,1.17,.38,1.82,.38,.55,0,1.07-.09,1.56-.27,.49-.18,.95-.44,1.39-.78,.12-.1,.25-.14,.38-.12,.13,.02,.25,.08,.35,.18,.1,.1,.15,.23,.15,.39,0,.08,0,.15-.03,.22-.02,.07-.07,.13-.14,.2-.51,.47-1.08,.8-1.71,1s-1.29,.29-1.96,.29Zm3.84-1.71l-1.14-.24v-3.02h-2.34c-.17,0-.31-.05-.42-.15-.11-.1-.17-.23-.17-.38s.05-.27,.17-.37c.11-.1,.25-.14,.42-.14h2.89c.17,0,.31,.05,.42,.16,.11,.1,.17,.24,.17,.41v3.72Z"/>
+    <path class="svg_letter2" d="M52.05,14.49c-.91,0-1.72-.18-2.42-.53s-1.25-.83-1.65-1.46c-.39-.62-.59-1.33-.59-2.13V3.12c0-.17,.05-.31,.17-.42,.11-.11,.25-.17,.42-.17s.31,.05,.42,.17c.11,.11,.17,.25,.17,.42v7.26c0,.59,.15,1.11,.44,1.56,.29,.45,.71,.8,1.24,1.06,.53,.26,1.13,.38,1.82,.38s1.26-.13,1.79-.38c.52-.25,.93-.61,1.22-1.06,.29-.45,.44-.97,.44-1.56V3.12c0-.17,.05-.31,.16-.42,.11-.11,.25-.17,.42-.17,.18,0,.32,.05,.43,.17,.11,.11,.16,.25,.16,.42v7.26c0,.8-.2,1.51-.59,2.13-.4,.62-.94,1.11-1.63,1.46-.7,.35-1.49,.53-2.39,.53Z"/>
+    <path class="svg_letter2" d="M59.36,14.25c-.17,0-.31-.05-.42-.17-.11-.11-.17-.25-.17-.42V3.12c0-.17,.05-.31,.17-.42,.11-.11,.25-.17,.42-.17s.31,.05,.42,.17c.11,.11,.17,.25,.17,.42V13.67c0,.17-.06,.31-.17,.42-.11,.11-.25,.17-.42,.17Z"/>
+</svg>