fixed file sorting in menu by title instead of filename

Author: rishikanthc

markopolis/dantic.py

@@ -26,6 +26,7 @@ class NoteHtml(BaseModel):
 
 class File(BaseModel):
     filename: str
+    title: str
     link: str
 
 

markopolis/md.py

@@ -243,12 +243,31 @@ def build_file_tree(root_path: Path, current_path: str = "") -> D.Folder:
         else:
             updated_path = f"{current_path}/{folder_name}".lstrip("/")
 
-        # List files and sort them lexicographically
-        files = sorted(root_path.glob("*.md"), key=lambda f: f.name)
+        # List files, extract titles from frontmatter, and sort them by title lexicographically
+        files = list(root_path.glob("*.md"))
+        file_info = []
+
         for file in files:
+            ftitle = os.path.relpath(file, md_root)
+            fpath = os.path.join(md_root, ftitle)
+
+            # Extract title from the frontmatter
+            _title = extract_title_from_frontmatter(fpath)
+            if _title is None:
+                _title = ftitle.split(".")[0]
+
+            file_info.append({"file": file, "title": _title})
+
+        # Sort the files by title
+        sorted_files = sorted(file_info, key=lambda x: x["title"])
+
+        for info in sorted_files:
+            file = info["file"]
+            _title = info["title"]
             file_obj = D.File(
                 filename=file.name.split(".")[0],
-                link=f"/{updated_path}/{file.stem}".lstrip("/"),
+                link=f"{updated_path}/{file.stem}",
+                title=_title,
             )
             members.append(file_obj)
 

markopolis/static/styles.css

@@ -143,7 +143,7 @@ a:hover {
     /* font-family: "Literata", sans-serif; */
     font-size: 18px;
     /* line-height: 26.4384px; */
-    line-height: 30px;
+    line-height: 32px;
     color: var(--text-primary);
     overflow-wrap: break-word;
     box-sizing: border-box;

markopolis/templates/page.html

@@ -107,8 +107,7 @@
                         member in folder.members %} {% if member.filename %}
                         <div class="file">
                             <a href="{{ member.link }}">
-                                <i class="fas fa-file"></i> {{ member.filename
-                                }}
+                                <i class="fas fa-file"></i> {{ member.title }}
                             </a>
                         </div>
                         {% elif member.folder_name %}
@@ -135,8 +134,7 @@
                         member.filename %}
                         <div class="file">
                             <a href="{{ member.link }}">
-                                <i class="fas fa-file"></i> {{ member.filename
-                                }}
+                                <i class="fas fa-file"></i> {{ member.title }}
                             </a>
                         </div>
                         {% elif member.folder_name %}