make mod list better

website/collect-mod-descriptions.py

@@ -37,6 +37,8 @@ import logging
 from tqdm import tqdm
 import json
 import os
+import markdown
+from bs4 import BeautifulSoup
 
 
 logging.basicConfig(level=logging.INFO)
@@ -129,6 +131,10 @@ def render_dependency_tree(tree, mod_id, mod_info, level=0):
                 if dep_id in tree:
                     doc.asis(render_dependency_tree(tree, dep_id, mod_info, level + 1))
     return doc.getvalue()
+# mods you need to know about
+# content you can find in the world
+# optimization
+# dependencies
 
 def generate_html(mod_info, dependency_tree):
     doc, tag, text = Doc().tagtext()
@@ -149,14 +155,25 @@ def generate_html(mod_info, dependency_tree):
                 text('Mod Descriptions')
             with tag('div', id='mod-descriptions'):
                 for mod_id, info in mod_info.items():
-                    with tag('div', klass='mod-description'):
+                    with tag('article', klass='mod-description'):
+                        with tag('header'):
                             with tag('h3'):
+                                if 'icon_url' in info and info['icon_url']:
+                                    src = ""+info['icon_url']
+                                    doc.stag('img', src=src, klass='mod-icon')
                                 with tag('a', href=get_modrinth_url(info['slug'])):
                                     text(info['title'])
+                            with tag('ul', klass='categories'):
+                                for category in info['categories']:
+                                    with tag('li', klass=category.lower().replace(' ', '-')):
+                                        text(category)
                         with tag('p'):
-                            text(f"Category: {info['categories']}")
+                            with tag('details'):
-                        with tag('p'):
+                                with tag('summary'):
                                     text(info['description'])
+                                with tag('div', klass='full-description'):
+                                    bodydoc = BeautifulSoup(markdown.markdown(info['body']), features='html.parser')
+                                    doc.asis(bodydoc.prettify())
 
             with tag('h2'):
                 text('Mods by Category')
@@ -165,16 +182,19 @@ def generate_html(mod_info, dependency_tree):
                 for category in mod_info_dict['categories']:
                     if category not in categories:
                         categories[category] = []
-                    categories[category].append((mod_info_dict['title'], mod_info_dict['slug']))
+                    categories[category].append((mod_info_dict['title'], mod_info_dict['slug'], mod_info_dict['description'], mod_info_dict['icon_url']))
             
             for category, mods in categories.items():
                 with tag('h3'):
                     text(category)
                 with tag('ul'):
-                    for mod_name, slug in mods:
+                    for (mod_name, slug, description, icon_url) in mods:
                         with tag('li'):
+                            if icon_url:
+                                doc.stag('img', src=icon_url, alt=f"{mod_name} icon", klass="mod-icon-category")
                             with tag('a', href=get_modrinth_url(slug)):
                                 text(mod_name)
+                            text(f": {description}")
 
             with tag('h2'):
                 text('Dependency Tree')
@@ -182,7 +202,7 @@ def generate_html(mod_info, dependency_tree):
                 if not any(mod_id in dep['dependencies'] for dep in dependency_tree.values()):
                     doc.asis(render_dependency_tree(dependency_tree, mod_id, mod_info))
 
-    return indent(doc.getvalue())
+    return doc.getvalue()
 
 def generate_dot_graph(mod_info, dependency_tree):
     dot_content = "digraph ModDependencies {\n"

website/style.css

@@ -1,23 +1,85 @@
-/* Mod descriptions layout */
+/* Layout mods in two columns if wide enough */
+@media screen and (min-width: 768px) {
     #mod-descriptions {
         display: grid;
-    gap: 10px;
-    grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
-    grid-template-rows: masonry;
-}
-
-.mod-description {
-    width: 100%;
-}
-
-@media screen and (max-width: 768px) {
-    #mod-descriptions {
         grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
     }
 }
 
-@media screen and (max-width: 480px) {
+.full-description {
-    #mod-descriptions {
+    max-height: 80vh;
-        grid-template-columns: 1fr;
+    overflow-y: auto;
+
 }
+
+.mod-icon,
+.mod-icon-category {
+    width: 48px;
+    height: 48px;
+    vertical-align: middle;
+    margin-right: 5px;
+}
+.mod-icon-category {
+    width: 16px;
+    height: 16px;
+}
+
+/* Mod categories styling */
+.categories {
+    list-style: none;
+    padding: 0;
+    margin: 10px 0;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+.categories li {
+    display: inline-block;
+    padding: 3px 8px;
+    border-radius: 5px;
+    font-size: 0.6em;
+    color: white;
+}
+
+/* Unique colors for different categories */
+.categories .technology {
+    background-color: #007bff;
+}
+
+.categories .magic {
+    background-color: #9c27b0;
+}
+
+.categories .adventure {
+    background-color: #28a745;
+}
+
+.categories .utility {
+    background-color: #ffc107;
+}
+
+.categories .library {
+    background-color: #17a2b8;
+}
+
+.categories .worldgen {
+    background-color: #6c757d;
+}
+
+.categories .storage {
+    background-color: #dc3545;
+}
+
+.categories .optimization {
+    background-color: #20c997;
+}
+
+.categories .decoration {
+    background-color: #fd7e14;
+}
+
+.categories .misc {
+    background-color: #6610f2;
 }