feat: enhance file decoding and UI improvements

- Updated dependencies to include all optional Markdown2 extensions
- Improved file content handling to better support non-UTF-8 encodings
- Refined CSS styling for better readability and consistency
- Added new folder and file icons for directory listings
- Modified template paths for consistent asset loading
- Allowed navigation to parent directories in the file viewer

These changes enhance user experience by improving file handling, visual consistency, and navigation within the directory structure.

pyproject.toml

@@ -15,7 +15,7 @@ classifiers = [
   "License :: OSI Approved :: MIT License",
   "Operating System :: OS Independent",
 ]
-dependencies = ["requests", "flask", "markdown2"]
+dependencies = ["requests", "flask", "markdown2[all]"]
 
 [project.urls]
 "Homepage" = "https://git.private.coffee/kumi/gitcloak"

src/gitcloak/app.py

@@ -73,7 +73,13 @@ def get_raw(owner, repo, file_path):
     git = Git(repo_url)
     try:
         file_content = git.get_file_content(file_path)
-        return file_content
+        try:
+            file_content = file_content.decode("utf-8")
+            content_type = "text/plain"
+        except UnicodeDecodeError:
+            content_type = "application/octet-stream"
+
+        return file_content, 200, {"Content-Type": content_type}
     except Exception as e:
         logger.error(
             f"Error getting file content for {file_path} in {owner}/{repo}: {e}"

src/gitcloak/assets/css/style.css

@@ -1,19 +1,18 @@
-html, body {
+html,
+body {
     margin: 0;
     padding: 0;
     height: 100%;
 }
 
-body {
+.directory a,
-    padding-top: 56px; /* Height of the navbar */
+.file a {
-}
-
-.directory a, .file a {
     text-decoration: none;
     color: #0366d6;
 }
 
-.directory a:hover, .file a:hover {
+.directory a:hover,
+.file a:hover {
     text-decoration: underline;
 }
 
@@ -30,4 +29,18 @@ body {
     padding: 10px;
     border-radius: 4px;
     overflow: auto;
+}
+
+.icon {
+    margin-right: 5px;
+}
+
+.list-group-item {
+    display: flex;
+    align-items: center;
+}
+
+.navbar-brand {
+    font-size: 1.5rem;
+    padding: 0 10px;
 }

src/gitcloak/assets/dist/icons/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Phosphor Icons
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

src/gitcloak/assets/dist/icons/file.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M213.66,82.34l-56-56A8,8,0,0,0,152,24H56A16,16,0,0,0,40,40V216a16,16,0,0,0,16,16H200a16,16,0,0,0,16-16V88A8,8,0,0,0,213.66,82.34ZM160,51.31,188.69,80H160ZM200,216H56V40h88V88a8,8,0,0,0,8,8h48V216Z"></path></svg>

src/gitcloak/assets/dist/icons/folder.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#000000" viewBox="0 0 256 256"><path d="M216,72H131.31L104,44.69A15.86,15.86,0,0,0,92.69,40H40A16,16,0,0,0,24,56V200.62A15.4,15.4,0,0,0,39.38,216H216.89A15.13,15.13,0,0,0,232,200.89V88A16,16,0,0,0,216,72ZM40,56H92.69l16,16H40ZM216,200H40V88H216Z"></path></svg>

src/gitcloak/templates/base.html

@@ -4,12 +4,12 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{% block title %}GitCloak{% endblock %}</title>
-    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="/assets/dist/css/bootstrap.min.css" rel="stylesheet">
-    <link href="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
+    <link href="/assets/css/style.css" rel="stylesheet">
 </head>
 <body>
     <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
-        <a class="navbar-brand" href="#">GitCloak</a>
+        <a class="navbar-brand" href="/">GitCloak</a>
     </nav>
     <div class="container mt-4">
         {% block content %}{% endblock %}

src/gitcloak/templates/path.html

@@ -1,46 +1,49 @@
-{% extends 'base.html' %} {% block title %}{{ owner }}/{{ repo }} - {{ path }}{%
+{% extends 'base.html' %} {% block title %}{{ owner }}/{{ repo }} - {{ path or
-endblock %} {% block content %}
+"/" }}{% endblock %} {% block content %}
 <div class="row">
   <div class="col-md-8">
-    <h1>{{ owner }}/{{ repo }} - <small>{{ path }}</small></h1>
+    <h1>{{ owner }}/{{ repo }} - <small>{{ path or "/" }}</small></h1>
-    <div>
+    <div class="list-group">
-      <h2>Directories</h2>
+      {% if path %}
-      <div class="list-group">
+      <div class="directory">
-        {% for directory in directories %}
+        <a
-        <div class="directory">
+          class="list-group-item list-group-item-action"
-          <a
+          href="/{{ owner
-            class="list-group-item list-group-item-action"
+            }}/{{ repo }}/tree/main/{{ '/'.join(path.split('/')[:-1]) }}"
-            href="/{{ owner }}/{{ repo }}/tree/main/{{ path }}/{{ directory }}"
+          ><img
-            >{{ directory }}</a
+            class="icon"
-          >
+            src="/assets/dist/icons/folder.svg"
-        </div>
+            alt="Go up"
-        {% endfor %}
+          />..</a
+        >
       </div>
-    </div>
+      {% endif %} {% for entry in directories + files %}
-    <div>
+      <div
-      <h2>Files</h2>
+        class="{% if entry in directories %}directory{% else %}file{% endif %}"
-      <div class="list-group">
+      >
-        {% for file in files %}
+        <a
-        <div class="file">
+          class="list-group-item list-group-item-action"
-          <a
+          href="/{{ owner }}/{{ repo }}/{{ 'tree/main' if entry in directories else 'raw' }}/{{ path }}/{{ entry }}"
-            class="list-group-item list-group-item-action"
+        >
-            href="/{{ owner }}/{{ repo }}/raw/{{ path }}/{{ file }}"
+          <img class="icon" src="{{ "/assets/dist/icons/" + ('folder.svg' if
-            >{{ file }}</a
+          entry in directories else 'file.svg') }}" alt="{{ 'folder' if entry in
-          >
+          directories else 'file' }}" /> {{ entry }}
-        </div>
+        </a>
-        {% endfor %}
       </div>
+      {% endfor %}
     </div>
   </div>
-  <div class="col-md-4">
+</div>
-    {% if readme_content %}
+
+{% if readme_content %}
+<div class="row">
+  <div class="col-md-8">
     <div class="readme card">
       <div class="card-body">
         <h2 class="card-title">README.md</h2>
         <div class="card-text">{{ readme_content|safe }}</div>
       </div>
     </div>
-    {% endif %}
   </div>
 </div>
-{% endblock %}
+{% endif %} {% endblock %}