Merge pull request #48 from ublue-os/tepene/prepare-release-01

feat: about / home page and drop-down menu

anvil/nicegui/main.py

@@ -1,11 +1,11 @@
 import pages
-import pages.about
 import pages.ansible
 import pages.home
 import pages.registry
 import theme
 
 from nicegui import ui
+from utils.helper import get_project_root
 
 
 @ui.page("/")
@@ -26,10 +26,9 @@ def registry_page() -> None:
         pages.registry.content()
 
 
-@ui.page("/about")
-def about_page() -> None:
-    with theme.frame("About"):
-        pages.about.content()
-
-
-ui.run(title="uBlue Forge", port=3000)
+project_root = get_project_root()
+ui.run(
+    title="uBlue-OS Forge",
+    port=3000,
+    favicon=f"{project_root}/pages/assets/favicon.png",
+)

anvil/nicegui/menu.py

@@ -1,8 +1,55 @@
+import pandas
+import toml
 from nicegui import ui
+from importlib.metadata import version
+from utils.helper import get_project_root
+
+
+def load_pyproject_toml() -> str:
+    project_root = get_project_root().parent
+    pyproject_file = toml.load(f"{project_root}/pyproject.toml")
+    return pyproject_file
+
+
+def get_project_version() -> str:
+    pyproject_file = load_pyproject_toml()
+    project_version = pyproject_file["tool"]["poetry"]["version"]
+    return project_version
+
+
+def get_python_package_version() -> pandas.DataFrame:
+    pyproject_file = load_pyproject_toml()
+    python_packages = pyproject_file["tool"]["poetry"]["dependencies"]
+    python_packages_data = []
+    for key, value in python_packages.items():
+        # Skip python itself
+        if key == "python":
+            continue
+        get_version = version(key)
+        python_packages_data.append({"Package": key, "Version": get_version})
+    python_packages_version = pandas.DataFrame(data=python_packages_data).sort_values(
+        by="Package"
+    )
+    return python_packages_version
+
+
+def get_about(dialog) -> None:
+    project_version = get_project_version()
+    python_packages_versions = get_python_package_version()
+    with ui.column().classes("items-center"):
+        ui.label("uBlue-OS Forge").classes("text-h5")
+        ui.label(f"v{project_version}").classes("text-h6")
+        ui.table.from_pandas(df=python_packages_versions)
+        ui.button("Close", on_click=dialog.close)
 
 
 def menu() -> None:
-    ui.link("Home", "/").classes(replace="text-white")
-    ui.link("Ansible", "/ansible").classes(replace="text-white")
-    ui.link("Registry", "/registry").classes(replace="text-white")
-    ui.link("About", "/about").classes(replace="text-white")
+    with ui.button(icon="menu"):
+        with ui.menu().props("auto-close"):
+            ui.menu_item("Home", lambda: ui.navigate.to(target="/"))
+            ui.menu_item("Ansible", lambda: ui.navigate.to(target="/ansible"))
+            ui.menu_item("Registry", lambda: ui.navigate.to(target="/registry"))
+            ui.menu_item("About", lambda: dialog.open())
+
+    with ui.dialog() as dialog, ui.card():
+        get_about(dialog)

anvil/nicegui/pages/home.py

@@ -1,10 +1,41 @@
 from nicegui import ui
-import os
+from utils.helper import get_project_root
 
 
 def content() -> None:
-    project_root = os.environ['NICEGUI_DIR']
-    ui.label("Work in progress...").classes("text-h6")
-    ui.image(project_root + "/pages/assets/work-in-progress.png").classes(
-        "w-[200%]"
-    )
+    project_root = get_project_root()
+    with ui.row().classes("w-full"):
+        with ui.card().classes("h-full"):
+            with ui.row().classes("no-wrap"):
+                with ui.link(target="/ansible"):
+                    ui.image(source=f"{project_root}/pages/assets/ansible.png").classes(
+                        "w-32"
+                    )
+
+        with ui.card().classes("h-full"):
+            with ui.row().classes("no-wrap"):
+                with ui.link(target="/registry"):
+                    ui.image(
+                        source=f"{project_root}/pages/assets/registry.png"
+                    ).classes("w-32")
+
+    with ui.row().classes("w-full"):
+        with ui.card().classes("h-full"):
+            with ui.row().classes("no-wrap"):
+                ui.markdown(
+                    content="""
+                            ### Welcome to Universal Blue Forge
+
+                            Ublue-OS Forge is your self-hosted OS forge for custom images.
+
+                            To get started have a look at the latest [documentation](https://github.com/ublue-os/forge/blob/main/docs/index.md).
+                            
+                            For feedback and discussion join the [Discourse Forum](https://universal-blue.discourse.group/).
+
+                            Found a bug, feel free to file an [issue](https://github.com/ublue-os/forge/issues).
+
+                            Thanks and enjoy!
+                            """
+                ).classes("text-base")
+    with ui.row():
+        ui.space

anvil/nicegui/pages/registry.py

@@ -6,8 +6,13 @@
 
 ## TODO: this should be async but I currently don't know how to implement this without button press
 def get_image_info() -> pandas.DataFrame:
-    registry = DockerRegistry()
-    all_image_info = registry.get_all_image_info()
+    data = pandas.DataFrame(columns=["image_name", "tag", "size"])
+    try:
+        registry = DockerRegistry()
+        all_image_info = registry.get_all_image_info()
+    except Exception as error:
+        ui.notify(message=error)
+        return data
     if isinstance(all_image_info, list) and len(all_image_info) > 0:
         data = pandas.json_normalize(
             all_image_info,
@@ -26,7 +31,6 @@ def get_image_info() -> pandas.DataFrame:
         return data
     else:
         ui.notify(message="No images found")
-        data = pandas.DataFrame(columns=["image_name", "tag", "size"])
         return data
 
 

anvil/nicegui/theme.py

@@ -1,6 +1,7 @@
 from contextlib import contextmanager
 from menu import menu
 from nicegui import ui
+from utils.helper import get_project_root
 
 
 class GuiProgressSpinner(ui.spinner):
@@ -10,7 +11,7 @@ def __init__(
         type: str = "dots",
         size: str = "lg",
         color: str | None = "red",
-        thickness: float = 5
+        thickness: float = 5,
     ) -> None:
         super().__init__(type, size=size, color=color, thickness=thickness)
         with self, ui.spinner():
@@ -24,21 +25,30 @@ def disable(self) -> None:
 
 
 @contextmanager
-def frame(navigation_title: str, enable_right_drawer: bool = False):
+def frame(
+    navigation_title: str,
+):
     """Custom page frame to share the same styling and behavior across all pages"""
+    project_root = get_project_root()
     ui.colors(primary="#4051b5", secondary="#dddbff", accent="#171d9a")
     with ui.header():
-        with ui.row():
-            menu()
-        ui.space()
-        with ui.link(target="https://github.com/ublue-os/forge", new_tab=True):
-            ui.icon("eva-github").classes("text-2xl")
+        with ui.grid(columns=3).classes("w-full gap-0"):
+            with ui.row(wrap=False).classes("col-span-1 justify-start"):
+                menu()
+                ui.image(source=f"{project_root}/pages/assets/ublue-mini.svg").props(
+                    "width=33px hight=auto"
+                )
+                ui.label(text="Forge").classes("text-h5")
+            with ui.row(wrap=False).classes("col-span-1 justify-center"):
+                ui.label(text=navigation_title).classes("text-h5")
+            with ui.row(wrap=False).classes("col-span-1 justify-end"):
+                with ui.link(target="https://github.com/ublue-os/forge", new_tab=True):
+                    ui.icon("eva-github").classes("text-2xl")
 
     with ui.column().classes():
-        ui.label(navigation_title).classes("text-h4")
         yield
 
     with ui.footer(value=False):
         ui.add_head_html(
-            '<link href="https://unpkg.com/[email protected]/style/eva-icons.css" rel="stylesheet" />'
+            '<link href="https://unpkg.com/[email protected]/style/eva-icons.css" rel="stylesheet"/>'
         )

anvil/nicegui/utils/helper.py

@@ -0,0 +1,5 @@
+from pathlib import Path
+
+
+def get_project_root() -> Path:
+    return Path(__file__).parent.parent