Update projectDetail css + external links open on new page

src/generate_web.py

@@ -1,6 +1,7 @@
 import os
 import random
 import re
+import requests
 from datetime import datetime
 from os import path, makedirs
 from pprint import pprint
@@ -15,7 +16,7 @@
 from markdown import markdown
 
 from src.jinja_extensions.color_extension import ColorExtension
-from src.web_helpers import load_projects, fix_readme_relative_images
+from src.web_helpers import load_projects, fix_readme_relative_images, conv_markdown
 
 logging.basicConfig(level=logging.INFO)
 logger = logging.getLogger(__name__)
@@ -121,9 +122,9 @@ def generate_repos_detail(self):
             print(f"Generating {repo.name} {i}/{repo_count}")
             readme_md = self.readme.get(repo.full_name, "No readme found")
             readme_fixed_images = fix_readme_relative_images(readme_md, repo.full_name, repo.default_branch)
-            readme_fixed_images = readme_fixed_images.replace(':\n- ', ':\n\n- ') # fix markdown lists
-            readme_fixed_images = readme_fixed_images.replace('- ', '- ● ') # add the dot before each element of the list
-            readme_html = markdown(readme_fixed_images, extensions=['fenced_code'])
+            readme_fixed_lists = readme_fixed_images.replace('\n- ', '\n@@ ').replace('\n* ', '\n@@ ').replace('\n    - ', '\n    @@ ').replace('\n    * ', '\n    @@ ').replace("@@", "- ●") # add the dot before each element of the list
+
+            readme_html = conv_markdown(readme_fixed_lists)
             path_repo = self.paths.get("Repo").get("path").format(repo.name)
 
             self.render_page('repoDetail.html', path_repo, repo=repo, readme=readme_html, repo_contrib = self.contributors[repo.full_name])
@@ -139,8 +140,26 @@ def generate_projects(self, projects: list):
         pprint(projects)
 
         for project in projects:
+            for i, repo in enumerate(project["related_repos"]):
+                project["related_repos"][i]["name"] = repo["url"].split("/")[-1] # add "name" key to related_projects
+
+            readme_url = project["readme"].replace("https://github.com/", "https://raw.githubusercontent.com/").replace("/blob", "")
+            readme_md = requests.get(readme_url).content.decode().strip()
+            if readme_md == "404: Not Found":
+                readme_md = "No readme found"
+
+
+            full_name = "/".join(project["readme"].split("/")[-5:-3])
+            branch = project["readme"].split("/")[-2]
+
+            readme_fixed_images = fix_readme_relative_images(readme_md, full_name, branch)
+            readme_fixed_lists = readme_fixed_images.replace('\n- ', '\n@@ ').replace('\n* ', '\n@@ ').replace('\n    - ', '\n    @@ ').replace('\n    * ', '\n    @@ ').replace("@@", "- ●") # add the dot before each element of the list
+
+            readme_html = conv_markdown(readme_fixed_lists)
+
+
             path_project = self.paths.get("Project").get("path").format(project["url"])
-            self.render_page('projectDetail.html', path_project, project=project)
+            self.render_page('projectDetail.html', path_project, project=project, readme=readme_html)
 
 
 

src/web_helpers.py

@@ -1,6 +1,6 @@
 import os
 from typing import IO
-
+import markdown
 import yaml
 
 def load_projects(project_dir: os.path) -> list:
@@ -55,7 +55,7 @@ def replace_url(img_url):
         elif img_url.startswith("./"):
             new_url = f"{base_url}/{img_url[2:]}"
         elif img_url.startswith("https://github.com"):
-            new_url = base_url + img_url.split("/blob/master")[-1]
+            new_url = base_url + img_url.split(f"/blob/{default_branch}")[-1]
         elif img_url.startswith("http"):
             # The URL is already absolute, or it's a type of relative URL
             new_url = img_url
@@ -78,3 +78,19 @@ def replace_url(img_url):
     # readme_md = re.sub(r'\[([^]]*)\]\(([^)]*)\)', link_replacer_md, readme_md)
 
     return readme_md
+
+
+class TargetBlankExtension(markdown.Extension):
+    def extendMarkdown(self, md):
+        md.treeprocessors.register(TargetBlankTreeprocessor(md), 'target_blank', 15)
+
+class TargetBlankTreeprocessor(markdown.treeprocessors.Treeprocessor):
+    def run(self, root):
+        for element in root.iter():
+            if element.tag == 'a':
+                element.set('target', '_blank')
+
+def conv_markdown(text):
+    md = markdown.Markdown(extensions=['fenced_code', 'markdown.extensions.extra', 'markdown.extensions.meta', TargetBlankExtension()])
+    html = md.convert(text)
+    return html

templates/projectDetail.html

@@ -7,30 +7,49 @@
 
 {% block content %}
 
-<div class="col-md-12">
-    <h1>{{ project.name }}</h1>
-    <p>{{ project.description }}</p>
-    <p><a href="/projects">Back to Projects</a></p>
-</div>
+<div class="mx-2 mt-2 ">
+    {# Project info #}
+
+    <div class="flex flex-col md:flex-row gap-2 h-auto md:items-stretch">
+        <div class="p-4 flex flex-col w-full min-w-0 md:w-3/4 dark:bg-gray-800 bg-white rounded-lg shadow-md">
+            <p class="dark:text-white text-xl font-bold text-gray-800 mb-1">{{ project.name }}</p>
+            <p class="dark:text-gray-300 text-gray-600 flex-grow">{% if project.description %}{{ project.description
+                }}{% else
+                %}No description{% endif %}</p>
+        </div>
+        <a href="{{ project.website }}" class="w-full md:w-1/4 dark:bg-gray-800 bg-white p-4 rounded-lg shadow-md" target="_blank">
+            <div class="flex flex-col h-full justify-center items-center">
+                <svg class="w-10 h-10 mb-1 dark:fill-gray-300 fill-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M352 256c0 22.2-1.2 43.6-3.3 64H163.3c-2.2-20.4-3.3-41.8-3.3-64s1.2-43.6 3.3-64H348.7c2.2 20.4 3.3 41.8 3.3 64zm28.8-64H503.9c5.3 20.5 8.1 41.9 8.1 64s-2.8 43.5-8.1 64H380.8c2.1-20.6 3.2-42 3.2-64s-1.1-43.4-3.2-64zm112.6-32H376.7c-10-63.9-29.8-117.4-55.3-151.6c78.3 20.7 142 77.5 171.9 151.6zm-149.1 0H167.7c6.1-36.4 15.5-68.6 27-94.7c10.5-23.6 22.2-40.7 33.5-51.5C239.4 3.2 248.7 0 256 0s16.6 3.2 27.8 13.8c11.3 10.8 23 27.9 33.5 51.5c11.6 26 20.9 58.2 27 94.7zm-209 0H18.6C48.6 85.9 112.2 29.1 190.6 8.4C165.1 42.6 145.3 96.1 135.3 160zM8.1 192H131.2c-2.1 20.6-3.2 42-3.2 64s1.1 43.4 3.2 64H8.1C2.8 299.5 0 278.1 0 256s2.8-43.5 8.1-64zM194.7 446.6c-11.6-26-20.9-58.2-27-94.6H344.3c-6.1 36.4-15.5 68.6-27 94.6c-10.5 23.6-22.2 40.7-33.5 51.5C272.6 508.8 263.3 512 256 512s-16.6-3.2-27.8-13.8c-11.3-10.8-23-27.9-33.5-51.5zM135.3 352c10 63.9 29.8 117.4 55.3 151.6C112.2 482.9 48.6 426.1 18.6 352H135.3zm358.1 0c-30 74.1-93.6 130.9-171.9 151.6c25.5-34.2 45.2-87.7 55.3-151.6H493.4z"/></svg>
+                <p class="font-bold dark:text-gray-300 text-gray-600">Visit project website</p>
+            </div>
+        </a>
+    </div>
+
+    {# Readme #}
+    <div
+        class="mt-2 gap-2 p-4 flex flex-col w-full min-w-0 overflow-x-auto dark:bg-gray-800 bg-white rounded-lg shadow-md">
+        {# <p class="font-bold dark:text-white text-gray-800">Readme:</h2> #}
+        <div class="readme dark:text-gray-300 text-gray-600 overflow-x-auto">
+            {{ readme | safe }}
+        </div>
+    </div>
+
+    <div class="my-2 p-4 flex flex-col w-full min-w-0 dark:bg-gray-800 bg-white rounded-lg shadow-md">
+        <p class="dark:text-gray-300 text-gray-600">Related repos:</p>
+    </div>
+
+    <div class="mt-2 grid grid-cols-1 md:grid-cols-4 gap-2 h-auto">
+
+        {% for repo in project.related_repos %}
+
+        <a href="{{ repo.url }}" class="dark:bg-gray-800 bg-white p-4 rounded-lg shadow-md" target="_blank">
+            <p class="dark:text-white text-xl font-bold text-gray-800 mb-1">{{ repo.name }}</p>
+            <p class="dark:text-gray-300 text-gray-600 flex-grow">{{ repo.description }}</p>
+            </a>
+        {% endfor %}
+
+    </div>
 
-{% for repo in project.related_repos %}
-<div class="col-md-12">
-    <h2>{{ repo.name }}</h2>
-    <p>{{ repo.description }}</p>
-    <p><a href="{{ repo.url }}" target="_blank">View on Github</a></p>
 </div>
 
-{#{% if repo.has_readme %}#}
-{#<div class="col-md-12">#}
-{#    <h3>Readme</h3>#}
-{#    <div class="readme">#}
-{#        {{ repo.readme }}#}
-{#    </div>#}
-{#</div>#}
-{#{% endif %}#}
-
-{% endfor %}
-
-
-
-{% endblock %}
+{% endblock %}

templates/repos.html

@@ -32,15 +32,11 @@ <h2 class="dark:text-white text-xl font-bold text-gray-800 mb-1">{{ repo.name }}
                     </div>
                     <div class="flex items-center justify-between mt-4">
                         <div class="flex items-center">
-                            <svg class="w-4 h-4 dark:text-gray-300 text-gray-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M10 2a8 8 0 100 16 4 4 0 013.446-6.032 1 1 0 011.868.828 4 4 0 01-.893 4.26A3.5 3.5 0 0110 18v-2a1.5 1.5 0 00-1.14-1.446A4 4 0 016 12a4 4 0 100-8 1 1 0 11-2 0 6 6 0 116 6v-1.928A1.5 1.5 0 0010 2z" clip-rule="evenodd" />
-                            </svg>
+                            <svg class="w-4 h-4 dark:fill-gray-300 fill-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M287.9 0c9.2 0 17.6 5.2 21.6 13.5l68.6 141.3 153.2 22.6c9 1.3 16.5 7.6 19.3 16.3s.5 18.1-5.9 24.5L433.6 328.4l26.2 155.6c1.5 9-2.2 18.1-9.7 23.5s-17.3 6-25.3 1.7l-137-73.2L151 509.1c-8.1 4.3-17.9 3.7-25.3-1.7s-11.2-14.5-9.7-23.5l26.2-155.6L31.1 218.2c-6.5-6.4-8.7-15.9-5.9-24.5s10.3-14.9 19.3-16.3l153.2-22.6L266.3 13.5C270.4 5.2 278.7 0 287.9 0zm0 79L235.4 187.2c-3.5 7.1-10.2 12.1-18.1 13.3L99 217.9 184.9 303c5.5 5.5 8.1 13.3 6.8 21L171.4 443.7l105.2-56.2c7.1-3.8 15.6-3.8 22.6 0l105.2 56.2L384.2 324.1c-1.3-7.7 1.2-15.5 6.8-21l85.9-85.1L358.6 200.5c-7.8-1.2-14.6-6.1-18.1-13.3L287.9 79z"/></svg>
                             <span class="ml-2 dark:text-gray-300 text-gray-700">{{ repo.stargazers_count }} Stars</span>
                         </div>
                         <div class="flex items-center">
-                            <svg class="w-4 h-4 dark:text-gray-300 text-gray-500 fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                                <path fill-rule="evenodd" d="M2 5a2 2 0 012-2h4a2 2 0 012 2v1h4a2 2 0 012 2v5a2 2 0 01-2 2h-4v1a2 2 0 01-2 2H4a2 2 0 01-2-2V5zm10 1H8v1H4v5h4v-1h4V6z" clip-rule="evenodd" />
-                            </svg>
+                            <svg class="w-4 h-4 dark:fill-gray-300 fill-gray-700" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M80 104a24 24 0 1 0 0-48 24 24 0 1 0 0 48zm80-24c0 32.8-19.7 61-48 73.3v87.8c18.8-10.9 40.7-17.1 64-17.1h96c35.3 0 64-28.7 64-64v-6.7C307.7 141 288 112.8 288 80c0-44.2 35.8-80 80-80s80 35.8 80 80c0 32.8-19.7 61-48 73.3V160c0 70.7-57.3 128-128 128H176c-35.3 0-64 28.7-64 64v6.7c28.3 12.3 48 40.5 48 73.3c0 44.2-35.8 80-80 80s-80-35.8-80-80c0-32.8 19.7-61 48-73.3V352 153.3C19.7 141 0 112.8 0 80C0 35.8 35.8 0 80 0s80 35.8 80 80zm232 0a24 24 0 1 0 -48 0 24 24 0 1 0 48 0zM80 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"/></svg>
                             <span class="ml-2 dark:text-gray-300 text-gray-700">{{ repo.forks_count }} Forks</span>
                         </div>
                     </div>