start to create new website

main.py

@@ -1,91 +0,0 @@
-#!/usr/bin/env python3
-import re
-
-import markdown2
-
-import api_docs_and_examples
-import traffic_tracking
-from nicegui import ui
-from nicegui.elements.markdown import apply_tailwind
-
-with open('README.md') as f:
-    content = f.read()
-    content = re.sub(r'(?m)^\<img.*\n?', '', content)
-    # change absolute link on GitHub to relative link
-    content = content.replace('(https://nicegui.io/reference)', '(reference)')
-    README = apply_tailwind(markdown2.markdown(content, extras=['fenced-code-blocks']))
-
-
-async def go_to_anchor() -> None:
-    # NOTE because the docs are added after initial page load, we need to manually trigger the jump to the anchor
-    await ui.run_javascript('''
-        parts = document.URL.split("#");
-        console.log(parts);
-        if (parts.length > 1) {
-            console.log(window.location);
-            window.location = parts[0] + "reference#" + parts[1];
-            console.log(window.location);
-        }
-    ''')
-
-
-@ui.page('/', on_connect=traffic_tracking.on_connect, on_page_ready=go_to_anchor)
-async def index():
-    # avoid display:block for PyPI/Docker/GitHub badges
-    ui.add_head_html('<style>p a img {display: inline; vertical-align: baseline}</style>')
-    ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
-
-    ui.html('''
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
-        <style>
-            .github-fork-ribbon:before { background-color: #999; }
-        </style>
-        <a class="github-fork-ribbon" href="https://github.com/zauberzeug/nicegui" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
-    ''')
-
-    installation_start = README.find('<h2 class="text-4xl mb-3 mt-5">Installation</h2>')
-    documentation_start = README.find('The API reference is hosted at')
-    assert installation_start >= 0
-    assert documentation_start >= 0
-
-    with ui.row().classes('flex w-full overflow-scroll'):
-        ui.html(README[:installation_start]).classes('w-1/2 flex-grow')
-
-        with ui.column().classes('flex-none items-center'):
-            with ui.card(), ui.row().classes('w-96'):
-                with ui.column().classes('w-5/12'):
-                    ui.button('Click me!', on_click=lambda: output.set_text('Click'))
-                    ui.checkbox('Check me!', on_change=lambda e: output.set_text('Checked' if e.value else 'Unchecked'))
-                    ui.switch('Switch me!', on_change=lambda e: output.set_text(
-                        'Switched' if e.value else 'Unswitched'))
-                    ui.input('Text', value='abc', on_change=lambda e: output.set_text(e.value))
-                    ui.number('Number', value=3.1415927, format='%.2f', on_change=lambda e: output.set_text(e.value))
-
-                with ui.column().classes('w-6/12'):
-                    ui.slider(min=0, max=100, value=50, step=0.1, on_change=lambda e: output.set_text(e.value))
-                    ui.radio(['A', 'B', 'C'], value='A', on_change=lambda e: output.set_text(e.value)).props('inline')
-                    ui.toggle(['1', '2', '3'], value='1', on_change=lambda e: output.set_text(e.value))
-                    ui.select({1: 'One', 2: 'Two', 3: 'Three'}, value=1, on_change=lambda e: output.set_text(e.value))
-
-                with ui.row().classes('mt-8'):
-                    ui.label('Output:')
-                    output = ui.label().classes('text-bold')
-
-            traffic_tracking.chart().classes('mt-8 w-full h-64')
-
-    ui.html(README[installation_start:documentation_start]).classes('w-full')
-
-    api_docs_and_examples.create_intro()
-    with ui.row().style('background-color: #e8f0fa; width: 100%; margin: 1em 0; padding: 1em 1em 0.5em 1em; font-size: large'):
-        ui.markdown('See the [API reference](/reference) for many more interactive examples!')
-
-    ui.html(README[documentation_start:]).classes('w-full')
-
-
-@ui.page('/reference')
-def reference():
-    ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
-    api_docs_and_examples.create_full()
-
-
-ui.run()

test_startup.sh

@@ -28,7 +28,7 @@ check() {
 }
 
 error=0
-check main.py || error=1
+check website/main.py || error=1
 for path in examples/*
 do
     check $path/main.py || error=1

test_v1.py

@@ -1,59 +0,0 @@
-#!/usr/bin/env python3
-from nicegui import ui
-
-with ui.card():
-    ui.label('Hello, world!')
-
-with ui.card():
-    ui.label('Events')
-    ui.button('Click', on_click=lambda e: print(e, flush=True))
-    ui.button('Notify', on_click=lambda _: ui.notify('Hello', closeBtn=True, type='info', color='red'))
-
-with ui.card():
-    ui.label('Binding')
-
-    class Model:
-        value = 'foo'
-
-        def set_value(self, value: str):
-            self.value = value
-    model = Model()
-
-    label1 = ui.label('Label 1')
-    label2 = ui.label('Label 2').bind_text_from(label1)
-    label3 = ui.label('Label 3').bind_text_from(model, 'value')
-
-    ui.button('Change label 1', on_click=lambda: label1.set_text(label1.text + '!'))
-    ui.button('Change label 2', on_click=lambda: label2.set_text(label2.text + '!'))
-    ui.button('Change label 3', on_click=lambda: label3.set_text(label3.text + '!'))
-    ui.button('Change model', on_click=lambda: model.set_value(model.value + '!'))
-
-with ui.card():
-    ui.label('Element gallery')
-    ui.separator().classes('w-full')
-    ui.icon('face')
-    with ui.button('Click me!', on_click=lambda _: badge.set_text(int(badge.text) + 1)):
-        badge = ui.badge('0', color='red').props('floating')
-    ui.image('http://placeimg.com/640/360/tech').classes('w-full')
-    c1 = ui.checkbox('Check A')
-    c2 = ui.checkbox('Check B').bind_value_from(c1, 'value')
-    ui.label('Visibility...').bind_visibility_from(c1, 'value')
-    ui.button('Default', on_click=lambda: ui.colors())
-    ui.button('Gray', on_click=lambda: ui.colors(primary='#555'))
-    with ui.label('Tooltips...'):
-        ui.tooltip('...are shown on mouse over').props('class=bg-orange')
-    ui.html('<strong>HTML</strong>')
-
-    ui.joystick(color='blue', size=50,
-                on_start=lambda msg: print(msg, flush=True),
-                on_move=lambda msg: coordinates.set_text(f"{msg['args']['data']['vector']['x']:.3f}, " +
-                                                         f"{msg['args']['data']['vector']['y']:.3f}"),
-                on_end=lambda msg: coordinates.set_text('0, 0')).style('width: 15em')
-    coordinates = ui.label('0, 0')
-    ui.link('Google', 'https://www.google.com/')
-    ui.link('Target', '#target')
-    ui.link_target('target')
-    ui.markdown('**Markdown**')
-
-
-ui.run(port=1234)

website/main.py

@@ -0,0 +1,18 @@
+#!/usr/bin/env python3
+import website.api_docs_and_examples as api_docs_and_examples
+from nicegui import ui
+
+
+@ui.page('/')
+async def index():
+    ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
+    api_docs_and_examples.create_intro()
+
+
+@ui.page('/reference')
+def reference():
+    ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
+    api_docs_and_examples.create_full()
+
+
+ui.run()