Moved client to dyanmic sidebar

Dockerfile

@@ -1,3 +1,10 @@
+FROM node:20-alpine as zimui
+
+WORKDIR /src
+COPY zimui /src
+RUN yarn install --frozen-lockfile
+RUN yarn build
+
 FROM python:3.12-slim-bookworm
 LABEL org.opencontainers.image.source https://github.com/openzim/devdocs
 
@@ -25,4 +32,9 @@ COPY *.md /src/
 RUN pip install --no-cache-dir /src \
  && rm -rf /src
 
+# Copy zimui build output
+COPY --from=zimui /src/dist /src/zimui
+
+ENV DEVDOCS_ZIMUI_DIST=/src/zimui
+
 CMD ["devdocs2zim", "--help"]

src/devdocs2zim/client.py

@@ -6,7 +6,7 @@
 from functools import cached_property
 
 import requests
-from pydantic import BaseModel, TypeAdapter, computed_field
+from pydantic import BaseModel, Field, TypeAdapter, computed_field
 
 from devdocs2zim.constants import logger
 
@@ -170,6 +170,42 @@ def opens_for_page(self, page_path: str) -> bool:
         return page_path in self._contained_pages
 
 
+class NavbarPageEntry(BaseModel):
+    """Model of the a page in the navbar."""
+
+    # Display name of the page e.g. "Introduction"
+    name: str
+
+    # Link to the page
+    href: str
+
+
+class NavbarSectionEntry(BaseModel):
+    """Model of the a section in the navbar."""
+
+    # Display name of the section e.g. "Tutorials"
+    name: str
+
+    # Pages in the section
+    children: list[NavbarPageEntry]
+
+
+class NavbarDocument(BaseModel):
+    """Model of the document to populate each page's navbar with."""
+
+    # Display name of the document e.g. "Lua"
+    name: str
+    # Link to the main root of the document. DevDocs makes this "index"
+    # implicitly.
+    href: str = "index"
+    # Link to the main root of the document, usually "index"
+    license_href: str = Field(alias="licenseHref", default="licenses.txt")
+    # Version information to display.
+    version: str
+    # Sections to show
+    children: list[NavbarSectionEntry]
+
+
 class DevdocsIndex(BaseModel):
     """Represents entries in the /<slug>/index.json file for each resource."""
 
@@ -207,6 +243,29 @@ def build_navigation(self) -> list[NavigationSection]:
 
         return output
 
+    def build_navbar_json(self, name: str, version: str) -> str:
+        """Creates a navbar entry with the given name and version."""
+
+        children = [
+            NavbarSectionEntry(
+                name=section.name,
+                children=[
+                    NavbarPageEntry(
+                        name=page.name,
+                        href=page.path,
+                    )
+                    for page in section.links
+                ],
+            )
+            for section in self.build_navigation()
+        ]
+
+        return NavbarDocument(
+            name=name,
+            version=version,
+            children=children,
+        ).model_dump_json()
+
 
 class DevdocsClient:
     """Utility functions to read data from devdocs."""

src/devdocs2zim/entrypoint.py

@@ -1,5 +1,6 @@
 import argparse
 import logging
+import os
 
 from devdocs2zim.client import DevdocsClient
 from devdocs2zim.constants import (
@@ -71,6 +72,15 @@ def main() -> None:
         default=DEVDOCS_DOCUMENTS_URL,
     )
 
+    parser.add_argument(
+        "--zimui-dist",
+        type=str,
+        help=(
+            "Directory containing Vite build output from the Zim UI Vue.JS application"
+        ),
+        default=os.getenv("DEVDOCS_ZIMUI_DIST", "../zimui/dist"),
+    )
+
     args = parser.parse_args()
 
     logger.setLevel(level=logging.DEBUG if args.debug else logging.INFO)
@@ -88,6 +98,7 @@ def main() -> None:
             zim_config=zim_config,
             output_folder=args.output_folder,
             doc_filter=doc_filter,
+            zimui_dist=args.zimui_dist,
         ).run()
     except Exception as e:
         logger.exception(e)

src/devdocs2zim/generator.py

@@ -291,6 +291,7 @@ def __init__(
         zim_config: ZimConfig,
         doc_filter: DocFilter,
         output_folder: str,
+        zimui_dist: str,
     ) -> None:
         """Initializes Generator.
 
@@ -299,11 +300,13 @@ def __init__(
             zim_config: Configuration for ZIM metadata.
             doc_filter: User supplied filter selecting with docs to convert.
             output_folder: Directory to write ZIMs into.
+            zimui_dist: Directory containing the zimui code.
         """
         self.devdocs_client = devdocs_client
         self.zim_config = zim_config
         self.doc_filter = doc_filter
         self.output_folder = output_folder
+        self.zimui_dist = Path(zimui_dist)
 
         os.makedirs(self.output_folder, exist_ok=True)
 
@@ -363,6 +366,27 @@ def load_common_files(self) -> list[StaticItem]:
             )
         )
 
+        # Dynamic navbar
+        static_files.append(
+            StaticItem(
+                path="assets/index.css",
+                filepath=Path(self.zimui_dist, "assets", "index.css"),
+                is_front=False,
+                mimetype="text/css",
+                auto_index=False,
+            )
+        )
+
+        static_files.append(
+            StaticItem(
+                path="assets/index.js",
+                filepath=Path(self.zimui_dist, "assets", "index.js"),
+                is_front=False,
+                mimetype="text/javascript",
+                auto_index=False,
+            )
+        )
+
         return static_files
 
     def run(self) -> list[Path]:
@@ -491,6 +515,19 @@ def add_zim_contents(
         # but isn't in the dynamic list of pages.
         page_to_title["index"] = f"{doc_metadata.name} Documentation"
 
+        nav_json = index.build_navbar_json(
+            name=doc_metadata.name, version=doc_metadata.version
+        )
+        creator.add_item(  # type: ignore
+            StaticItem(
+                path="navbar.json",
+                content=nav_json,
+                is_front=False,
+                mimetype="application/json",
+                auto_index=False,
+            )
+        )
+
         nav_sections = index.build_navigation()
 
         logger.info(f"  Rendering {len(page_to_title)} pages...")

src/devdocs2zim/templates/page.html

@@ -11,52 +11,18 @@
     <meta charset="utf-8">
     <title>{{title}}</title>
     <link rel="stylesheet" type="text/css" href="{{rel_prefix | safe}}application.css" />
-    <style type="text/css">
-        /* Make the <details> tag based navigation match the look and feel of devdocs.io. */
-        ._list-count, ._list-enable {
-            margin-right: .375rem;
-        }
-        ._list-item {
-            padding: .25rem;
-        }
-    </style>
+    <link rel="stylesheet" type="text/css" href="{{rel_prefix | safe}}assets/index.css" />
 </head>
 <body>
     <div class="_app">
-        {# Remove top padding which is usually reserved for the search bar. #}
-        <section class="_sidebar" style="padding-top: 0px">
-            <div class="_list">
-                <a href="{{rel_prefix | safe}}index" class="_list-item">{{devdocs_metadata.name}}</a>
-                <div class="_list">
-                    {% for section in nav_sections %}
-                    <details {% if section.opens_for_page(path) %}open{% endif %}>
-                        <summary>
-                            <span class="_list-item" style="display:inline; box-shadow: none;">
-                                <span class="_list-count">{{ section.count | safe}}</span>
-                                <span>{{ section.name }}</span>
-                            </span>
-                        </summary>
-                        <div class="_list">
-                            {% for link in section.links %}
-                                <a
-                                    href="{{rel_prefix | safe}}{{link.path | safe}}"
-                                    class="_list-item _list-hover {% if link.path == path %}focus active{% endif %}">
-                                    {{ link.name }}
-                                </a>
-                            {% endfor %}
-                        </div>
-                    </details>
-                    {% endfor %}
-                    <a href="{{rel_prefix | safe}}licenses.txt" class="_list-item">Open-source Licenses</a>
-                </div>
-            </div>
-        </section>
+        <devdocs-navbar current="{{path | safe}}" prefix="{{rel_prefix | safe}}" listing-src="{{rel_prefix | safe}}navbar.json"></devdocs-navbar>
         <div class="_container">
             <main class="_content">
                 <div class="_page _{{devdocs_metadata.slug_without_version | safe}}">{{content | safe}}</div>
             </main>
         </div>
     </div>
+    <script type="text/javascript" src="{{rel_prefix | safe}}assets/index.js"></script>
 </body>
 
 </html>

zimui/index.html

@@ -2,8 +2,9 @@
 <html lang="en" class="_theme-default">
   <head>
     <meta charset="UTF-8">
-    <link rel="stylesheet" type="text/css" href="/application.css">
-     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <!-- Hotlink the current DevDocs CSS for testing. -->
+    <link rel="stylesheet" type="text/css" href="https://devdocs.io/application.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Devdocs Navbar Example</title>
   </head>
   <body id="body">