Improve general documentation around the webpage (#5)

* 📝 Doc: Improve the documentation of the package

* 📝 Doc: Add new documentation style definition

* 📝 Doc: Improve the README file

* 💄 UI: Fix some UI problems

* 🔨 Update: Update the `configuration` file to include more configurartion at once

* 👷 CI: Update CI build

* 🔖 Tag: Bump version `0.3.2`

.github/workflows/ci.yaml

@@ -16,16 +16,16 @@ jobs:
     runs-on: ubuntu-latest
     name: Run Rust CI 🦀
     steps:
-      - uses: ricardoleal20/pymath_compute/.github/actions/rust_ci@ricardo/AddSolverTests
+      - uses: ricardoleal20/pymath_compute/.github/actions/rust_ci
 
   python_ci:
     runs-on: ubuntu-latest
     name: Run Python CI 🐍
     steps:
-      - uses: ricardoleal20/pymath_compute/.github/actions/python_ci@ricardo/AddSolverTests
+      - uses: ricardoleal20/pymath_compute/.github/actions/python_ci
 
   tests_ci:
     runs-on: ubuntu-latest
     name: Run tests 🧪
     steps:
-      - uses: ricardoleal20/pymath_compute/.github/actions/tests_ci@ricardo/AddSolverTests
+      - uses: ricardoleal20/pymath_compute/.github/actions/tests_ci

CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+## [0.3.2] - 18/07/2024
+
+### Added:
+
+- [Documentation]: Better style for the documentation page
+- [Package Info]: Include new package information
+
+### Fixed
+
+- [Documentation]: Improve and fix some minor problems on the documentation
+
 ## [0.3.1] - 16/07/2024
 
 ### Added

Cargo.toml

@@ -1,7 +1,20 @@
 [package]
 name = "pymath_compute"
-version = "0.3.1"
+version = "0.3.2"
 edition = "2021"
+description = "Tool to handle mathematical operations using Variables and Mathematical Expressions."
+authors = ["ricardoleal20 <[email protected]>"]
+homepage = "https://pymath.ricardoleal20.dev"
+documentation = "https://pymath.ricardoleal20.dev/docs/"
+repository = "https://github.com/ricardoleal20/pymath_compute"
+license = "MIT"
+readme = "README.md"
+keywords = ["scientific_computing", "applied_math", "optimization"]
+classifiers = [
+    "Topic :: Scientific Development :: Mathematical Optimization",
+    "Topic :: Scientific Development :: Applied Mathematics",
+]
+
 
 [dependencies]
 pyo3 = { version = "0.16", features = ["extension-module"] }

README.md

@@ -4,6 +4,9 @@
     <img src="https://github.com/ricardoleal20/pymath_compute/blob/main/assets/banner.png" width="70%" height="70%" />
 </p>
 
+[![Actions Status](https://github.com/ricardoleal20/pymath_compute/workflows/Continuous%20Integration%20Workflow%20👾/badge.svg)](https://github.com/ricardoleal20/pymath_compute/actions)
+[![PyPI](https://img.shields.io/pypi/v/pymath_compute.svg?style=flat-square)](https://pypi.org/project/pymath_compute/)
+
 **PyMathCompute** is a Python tool designed to handle mathematical variables, create and evaluate mathematical expressions, and perform various mathematical optimizations. This library is ideal for those working in applied mathematics, optimization, and related fields.
 
 ## Features

docs/__info__.py

@@ -6,7 +6,7 @@
 create and evaluate mathematical expressions, and perform various mathematical
 optimizations.
 """
-VERSION = "0.2.0"
+VERSION = "0.3.2"
 
 # Add the URL
 URL_GITHUB = "https://github.com/ricardoleal20/pymath_compute"

docs/components/sidebar.py

@@ -8,8 +8,7 @@
 from docs import styles
 
 # Add a dictionary for the SECTIONS
-SIDEBAR_SECTIONS: dict[str, Callable[..., rx.Component]] = {}
-
+SIDEBAR_SECTIONS: dict[int, dict] = {}
 
 def sidebar(route: str) -> rx.Component:
     """The sidebar.
@@ -25,9 +24,8 @@ def sidebar(route: str) -> rx.Component:
         rx.mobile_and_tablet(
             __sidebar_mobile_and_tablet_view(route)
         ),
-        display=["none", "none", "block"],
+        # display=["none", "none", "block"],
         position="sticky",
-        min_width=styles.SIDEBAR_WIDTH,
         height="100%",
         top="0px",
         border_right=styles.border,
@@ -37,21 +35,37 @@ def sidebar(route: str) -> rx.Component:
 #                  Sidebar Views                  #
 # =============================================== #
 
-
 def __sidebar_desktop_view(route: str) -> rx.Component:
     """Desktop view of the Sidebar"""
+    # Only take those sidebar section that you need
+    stacks: list[rx.Component] = []
+    stacks_group: dict[str, list[dict]] = {}
+    sorted_sections = sorted(SIDEBAR_SECTIONS)
+    for i in sorted_sections:
+        # If it is a group, then save it for later
+        group = SIDEBAR_SECTIONS[i]["group"]
+        if group is not None:
+            if group in stacks_group:
+                stacks_group[group].append(SIDEBAR_SECTIONS[i])
+            else:
+                stacks_group[group] = [SIDEBAR_SECTIONS[i]]
+            continue
+        stacks.append(sidebar_item(
+            text=SIDEBAR_SECTIONS[i]["title"],
+            url=SIDEBAR_SECTIONS[i]["route"],
+            active=SIDEBAR_SECTIONS[i]["route"] == route
+        ))
+    # Add the groups
+    stacks += [
+        sidebar_grouper(group_name, group_elements, route)
+        for group_name, group_elements in stacks_group.items()
+    ]
+
     return rx.box(
         rx.vstack(
             sidebar_header(),
             rx.vstack(
-                *[
-                    sidebar_item(
-                        text=SIDEBAR_SECTIONS[i]["title"],
-                        url=SIDEBAR_SECTIONS[i]["route"],
-                        active=SIDEBAR_SECTIONS[i]["route"] == route
-                    )
-                    for i in sorted(SIDEBAR_SECTIONS)
-                ],
+                *stacks,
                 width="100%",
                 overflow_y="auto",
                 align_items="flex-start",
@@ -61,11 +75,42 @@ def __sidebar_desktop_view(route: str) -> rx.Component:
             sidebar_footer(),
             height="100dvh",
         ),
+        min_width=styles.SIDEBAR_WIDTH,
+        background=styles.Color.BACKGROUND
     )
 
 
 def __sidebar_mobile_and_tablet_view(route: str) -> rx.Component:
     """Desktop view of the Sidebar"""
+    # Only take those sidebar section that you need
+    stacks: list[rx.Component] = []
+    stacks_group: dict[str, list[dict]] = {}
+    # Sort the sections
+    sorted_sections = sorted(SIDEBAR_SECTIONS)
+    for i in sorted_sections:
+        # If it is a group, then save it for later
+        group = SIDEBAR_SECTIONS[i]["group"]
+        if group is not None:
+            if group in stacks_group:
+                stacks_group[group].append(SIDEBAR_SECTIONS[i])
+            else:
+                stacks_group[group] = [SIDEBAR_SECTIONS[i]]
+            continue
+        stacks.append(sidebar_item(
+            text=SIDEBAR_SECTIONS[i]["title"],
+            url=SIDEBAR_SECTIONS[i]["route"],
+            active=SIDEBAR_SECTIONS[i]["route"] == route
+        ))
+    # Add the groups
+    for group_name, group_elements in stacks_group.items():
+        # Get the icon
+        icon = None
+        for element in group_elements:
+            if element["group_icon"]:
+                icon = element["group_icon"]
+                break
+        stacks.append(sidebar_grouper(group_name, group_elements, route, icon))
+
     return rx.vstack(
         rx.drawer.root(
             rx.hstack(
@@ -129,14 +174,7 @@ def __sidebar_mobile_and_tablet_view(route: str) -> rx.Component:
                             # Add the sidebar
                             sidebar_header(),
                             rx.vstack(
-                                *[
-                                    sidebar_item(
-                                        text=SIDEBAR_SECTIONS[i]["title"],
-                                        url=SIDEBAR_SECTIONS[i]["route"],
-                                        active=SIDEBAR_SECTIONS[i]["route"] == route
-                                    )
-                                    for i in sorted(SIDEBAR_SECTIONS)
-                                ],
+                                *stacks,
                                 width="100%",
                                 align_items="flex-start",
                                 padding="1em",
@@ -155,7 +193,8 @@ def __sidebar_mobile_and_tablet_view(route: str) -> rx.Component:
             ),
             direction="left",
         ),
-        width="100%"
+        width="100%",
+        min_width="0%"
     )
 
 # =============================================== #
@@ -179,6 +218,8 @@ def sidebar_header() -> rx.Component:
                     rx.icon("github"),
                     color_scheme="gray",
                     variant="soft",
+                    cursor="pointer",
+                    border_radius=styles.BORDER_RADIUS
                 ),
                 href="https://github.com/ricardoleal20/pymath_compute",
             ),
@@ -219,7 +260,8 @@ def sidebar_footer() -> rx.Component:
 def sidebar_item(
     text: str,
     url: str,
-    active: bool
+    active: bool,
+    border: bool = False
 ) -> rx.Component:
     """Sidebar item.
 
@@ -230,36 +272,105 @@ def sidebar_item(
     Returns:
         rx.Component: The sidebar item component.
     """
+    if active:
+        border_cond = f"0.5px solid {rx.color('gray', 6)}"
+    else:
+        border_cond = rx.cond(
+            border,
+            f"1px solid {rx.color('gray', 6)}",
+            "transparent",
+        )
+
     return rx.link(
         rx.hstack(
             rx.text(
                 text,
             ),
             bg=rx.cond(
                 active,
-                rx.color("accent", 2),
+                styles.Color.PRIMARY.value,
                 "transparent",
             ),
-            border=rx.cond(
-                active,
-                f"1px solid {rx.color('accent', 6)}",
-                f"1px solid {rx.color('gray', 6)}",
-            ),
+            border=border_cond,
             color=rx.cond(
                 active,
-                styles.accent_text_color,
+                styles.Color.TEXT_SECONDARY.value,
                 styles.text_color,
             ),
             align="center",
             border_radius=styles.BORDER_RADIUS,
             width="100%",
             padding="1em",
+            _hover={
+                "bg": styles.Color.PRIMARY,
+                "text": styles.Color.TEXT_SECONDARY
+            }
         ),
         href=url,
         width="100%",
+        underline="none"
     )
 
 
+def sidebar_grouper(
+    title: str,
+    sub_items: list[dict[str, str]],
+    route: str,
+    icon: Optional[rx.Component] = None,
+) -> rx.Component:
+    """Create a grouper for the Sidebar sections using an accordion"""
+    button_info: list[rx.Component] = []
+
+    if icon:
+        button_info.append(
+            rx.icon(icon, tag=icon, size=25, mapping_right="0.5em"))
+    button_info.append(rx.text(title, size="2"))
+    return rx.chakra.accordion(
+        rx.chakra.accordion_item(
+            rx.chakra.accordion_button(
+                rx.hstack(
+                    *button_info,
+                    rx.box(flex_grow=1,),
+                    rx.chakra.accordion_icon(),
+                    bg="transparent",
+                    # border=f"1px solid {rx.color('gray', 6)}",
+                    color=styles.Color.SIDEBAR_TEXT,
+                    align_items="center",
+                    border_radius=styles.BORDER_RADIUS,
+                    border="transparent",
+                    width="100%",
+                    _hover={
+                        "color": styles.Color.PRIMARY,
+                    }
+                )
+            ),
+            rx.chakra.accordion_panel(
+                rx.chakra.accordion(
+                    rx.flex(
+                        *[
+                            sidebar_item(
+                                text=sub_item["title"],
+                                url=sub_item["route"],
+                                active=sub_item["route"] == route,
+                                border=True,
+                            )
+                            for sub_item in sub_items
+                        ],
+                        align_items="start",
+                        direction="column",
+                    ),
+                    allow_multiple=True,
+                )
+            ),
+            width="100%",
+            align="left",
+            border="transparent",
+        ),
+        height="75%",
+        width="100%",
+        allow_multiple=True,
+    )
+
 # =============================================== #
 #               Sidebar decorators                #
 # =============================================== #
@@ -269,8 +380,10 @@ def sidebar_section(  # pylint: disable=R0913
     sidebar_title: Optional[str] = None,
     description: Optional[str] = None,
     meta: Optional[list[str]] = None,
+    group: Optional[str] = None,
+    group_icon: Optional[str] = None,
     index_position: Optional[int] = None
-) -> Callable[..., rx.Component]:
+) -> Callable[..., Callable[..., rx.Component]]:
     """@sidebar_section decorator.
     
     It allow us to include extra information about the components, and include
@@ -319,7 +432,9 @@ def sidebar_page() -> rx.Component:
             position = index_position
         SIDEBAR_SECTIONS[position] = {
             "title": sidebar_title if sidebar_title else page_title,
-            "route": route
+            "route": route,
+            "group": group,
+            "group_icon": group_icon
         }
         return sidebar_page
     # Return the wrapper

docs/docs.py

@@ -5,6 +5,7 @@
 import reflex as rx
 # Import all the pages.
 from docs.pages import index, documentation_pages
+from docs import styles
 
 
 # ========================================== #
@@ -24,7 +25,8 @@
     ],
     style={
         "font_family": "Montserrat, sans-serif",
-        "font_size": "13px"
+        "font_size": "13px",
+        "background": rx.color("black")
     }
 )