main.py 4.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. #!/usr/bin/env python3
  2. import re
  3. import markdown2
  4. import api_docs_and_examples
  5. import traffic_tracking
  6. from nicegui import ui
  7. from nicegui.elements.markdown import Markdown
  8. with open('README.md') as f:
  9. content = f.read()
  10. content = re.sub(r'(?m)^\<img.*\n?', '', content)
  11. # change absolute link on GitHub to relative link
  12. content = content.replace('(https://nicegui.io/reference)', '(reference)')
  13. README = Markdown.apply_tailwind(markdown2.markdown(content, extras=['fenced-code-blocks']))
  14. async def go_to_anchor() -> None:
  15. # NOTE because the docs are added after initial page load, we need to manually trigger the jump to the anchor
  16. await ui.run_javascript('''
  17. parts = document.URL.split("#");
  18. console.log(parts);
  19. if (parts.length > 1) {
  20. console.log(window.location);
  21. window.location = parts[0] + "reference#" + parts[1];
  22. console.log(window.location);
  23. }
  24. ''')
  25. @ui.page('/', on_connect=traffic_tracking.on_connect, on_page_ready=go_to_anchor)
  26. async def index():
  27. # avoid display:block for PyPI/Docker/GitHub badges
  28. ui.add_head_html('<style>p a img {display: inline; vertical-align: baseline}</style>')
  29. ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
  30. ui.html('''
  31. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
  32. <style>
  33. .github-fork-ribbon { top: -16px; }
  34. .github-fork-ribbon:before { background-color: #999; }
  35. </style>
  36. <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>
  37. ''')
  38. installation_start = README.find('<h2 class="text-4xl mb-3 mt-5">Installation</h2>')
  39. documentation_start = README.find('The API reference is hosted at')
  40. assert installation_start >= 0
  41. assert documentation_start >= 0
  42. with ui.row().classes('flex w-full overflow-scroll'):
  43. ui.html(README[:installation_start]).classes('w-1/2 flex-grow')
  44. with ui.column().classes('flex-none items-center'):
  45. with ui.card(), ui.row().classes('w-96'):
  46. with ui.column().classes('w-5/12'):
  47. ui.button('Click me!', on_click=lambda: output.set_text('Click'))
  48. ui.checkbox('Check me!', on_change=lambda e: output.set_text('Checked' if e.value else 'Unchecked'))
  49. ui.switch('Switch me!', on_change=lambda e: output.set_text(
  50. 'Switched' if e.value else 'Unswitched'))
  51. ui.input('Text', value='abc', on_change=lambda e: output.set_text(e.value))
  52. ui.number('Number', value=3.1415927, format='%.2f', on_change=lambda e: output.set_text(e.value))
  53. with ui.column().classes('w-6/12'):
  54. ui.slider(min=0, max=100, value=50, step=0.1, on_change=lambda e: output.set_text(e.value))
  55. ui.radio(['A', 'B', 'C'], value='A', on_change=lambda e: output.set_text(e.value)).props('inline')
  56. ui.toggle(['1', '2', '3'], value='1', on_change=lambda e: output.set_text(e.value))
  57. ui.select({1: 'One', 2: 'Two', 3: 'Three'}, value=1, on_change=lambda e: output.set_text(e.value))
  58. with ui.row().classes('mt-8'):
  59. ui.label('Output:')
  60. output = ui.label().classes('text-bold')
  61. traffic_tracking.chart().classes('mt-8 w-full h-64')
  62. ui.html(README[installation_start:documentation_start]).classes('w-full')
  63. api_docs_and_examples.create_intro()
  64. with ui.row().style('background-color: #e8f0fa; width: 100%; margin: 1em 0; padding: 1em 1em 0.5em 1em; font-size: large'):
  65. ui.markdown('See the [API reference](/reference) for many more interactive examples!')
  66. ui.html(README[documentation_start:]).classes('w-full')
  67. @ui.page('/reference')
  68. def reference():
  69. ui.add_head_html('<meta name="viewport" content="width=device-width, initial-scale=1" />')
  70. api_docs_and_examples.create_full()
  71. ui.run()