add installation guide

main.py

@@ -7,6 +7,7 @@ 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, python_window
 
 ui.add_static_files('/favicon', Path(__file__).parent / 'website' / 'favicon')
 
@@ -94,7 +95,37 @@ async def index_page(client: Client):
 
         demo_card.create()
 
-    with ui.row().classes('w-full q-pa-md'):
+    with ui.column().classes('w-full q-pa-xl'):
+        ui.label('Installation').classes('text-bold text-lg')
+        ui.html('Getting <em>started</em>') \
+            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
+        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')
+                ui.markdown('Install').classes('text-lg')
+                with bash_window().classes('w-full h-52'):
+                    ui.markdown('```bash\npython3 -m pip install nicegui\n```')
+            with ui.column().classes('w-1/3 gap-2'):
+                ui.html('<em>2.</em>').classes('text-3xl text-bold')
+                ui.markdown('Write file __main.py__').classes('text-lg')
+                with python_window().classes('w-full h-52'):
+                    ui.markdown('''```python\n
+from nicegui import ui
+
+ui.label('Hello NiceGUI!')
+
+ui.run()
+```''')
+            with ui.column().classes('w-1/3 gap-2'):
+                ui.html('<em>3.</em>').classes('text-3xl text-bold')
+                ui.markdown('Launch it with').classes('text-lg')
+                with bash_window().classes('w-full h-52'):
+                    ui.markdown('```bash\npython3 main.py\n```')
+
+    with ui.column().classes('w-full q-pa-xl'):
+        ui.label('Documentation').classes('text-bold text-lg')
+        ui.html('Interactive <em>Examples</em>') \
+            .style('font-size: 300%; font-weight: 500; margin-top: -20px')
         reference.create_intro()
 
     with ui.row() \
@@ -103,7 +134,7 @@ async def index_page(client: Client):
         with ui.column().classes('gap-4'):
             ui.markdown('Go to the API reference to see a ton of live examples') \
                 .style('font-size: 220%; color: white; line-height: 0.9; font-weight: 500')
-            ui.label('The whole content of https://nicegui.io/ is implemented with NiceGUI itself.') \
+            ui.html('The whole content of <a href="https://nicegui.io/">nicegui.io</a> is implemented with NiceGUI itself.') \
                 .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')

website/example.py

@@ -22,19 +22,16 @@ class example:
     def __call__(self, f: Callable) -> Callable:
         with ui.row().classes('mb-2 flex w-full'):
             if isinstance(self.content, str):
-                self._add_html_anchor(ui.markdown(self.content).classes(self.markdown_classes))
+                _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='html')['html_body']
                 html = html.replace('<p>', '<h4>', 1)
                 html = html.replace('</p>', '</h4>', 1)
                 html = apply_tailwind(html)
-                self._add_html_anchor(ui.html(html).classes(self.markdown_classes))
+                _add_html_anchor(ui.html(html).classes(self.markdown_classes))
 
-            with ui.card() \
-                    .classes(self.rendering_classes) \
-                    .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)'):
-                self._add_dots()
+            with browser_window().classes(self.rendering_classes):
                 f()
 
             code = inspect.getsource(f).splitlines()
@@ -57,33 +54,48 @@ class example:
                 code.append('ui.run()')
             code.append('```')
             code = '\n'.join(code)
-            with ui.card() \
-                    .classes(self.source_classes) \
-                    .style('box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); background: #eff5ff'):
-                self._add_dots()
+            with python_window().classes(self.source_classes):
                 ui.markdown(code)
         return f
 
-    @staticmethod
-    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
-
-    @staticmethod
-    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 _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:
+    return window('white')
+
+
+def bash_window() -> ui.card:
+    return window('#e8e8e8')