feat: Improve category links in article pages

Enhances API request to include categories for articles and displays
categories with links on article pages. Aligns styling for category
links by updating CSS class names. This change improves article
navigation by providing users direct access to related categories.

src/wikimore/app.py

@@ -394,13 +394,14 @@ def wiki_article(
 
     # Check if the article is something we need to handle differently
     info_api_request = urllib.request.Request(
-        f"{base_url}/w/api.php?action=query&format=json&titles={escape(quote(title.replace(' ', '_')), True)}&prop=info|pageprops|categoryinfo|langlinks&lllimit=500",
+        f"{base_url}/w/api.php?action=query&format=json&titles={escape(quote(title.replace(' ', '_')), True)}&prop=info|pageprops|categoryinfo|langlinks|categories&lllimit=500&cllimit=500",
         headers=HEADERS,
     )
 
     category_members = []
     interwiki = []
     badges = []
+    categories = []
 
     with urllib.request.urlopen(info_api_request) as response:
         logger.debug(
@@ -522,6 +523,18 @@ def wiki_article(
                     title=member["title"],
                 )
 
+        # Get categories the article is in
+        if "categories" in page:
+            categories = page["categories"]
+
+            for category in categories:
+                category["url"] = url_for(
+                    "wiki_article",
+                    project=project,
+                    lang=lang,
+                    title=category["title"],
+                )
+
     interwiki = langsort(interwiki)
 
     # Prepare the API request to fetch the article content
@@ -716,6 +729,7 @@ def wiki_article(
         license=license,
         interwiki=interwiki,
         badges=badges,
+        categories=categories,
         category_members=category_members,
     )
 

src/wikimore/static/css/style.css

@@ -204,16 +204,16 @@ h1 {
     text-align: center;
 }
 
-section:last-child>.category-link {
+.wm-category {
     display: inline;
     font-size: 0.8em;
 }
 
-section>.category-link::before {
+.wm-category::before {
     content: "[";
 }
 
-section>.category-link::after {
+.wm-category::after {
     content: "]";
 }
 

src/wikimore/templates/article.html

@@ -40,6 +40,13 @@
             {% endfor %}
         </ul>
     {% endif %}
+    {% if categories %}
+        <div id="wm-categories">
+            {% for category in categories %}
+                <a href="{{ category.url }}" class="wm-category">{{ category.title }}</a>
+            {% endfor %}
+        </div>
+    {% endif %}
 {% endblock %}
 
 {% block license %}