PrivateCoffee/gitcloak
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add static asset handling and improved UI

Browse source 
Introduced serving static assets with `send_from_directory` to handle CSS and other assets. Added new CSS styles for improved user interface, enhancing readability and presentation. Introduced a base template for better HTML file structure and consistency across web pages. Applied Bootstrap for responsive design and aesthetic improvements. Modified path template to extend base template and updated README section.
This commit is contained in:
Kumi 2024-06-18 18:20:47 +02:00
parent 117997a5d9
commit b836a385b0
Signed by: kumi
GPG key ID: ECBCC9082395383F
5 changed files with 95 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/gitcloak/app.py
View file

@ -1,7 +1,8 @@
from flask import Flask, render_template, jsonify, abort
from flask import Flask, render_template, abort, send_from_directory
from .classes.git import Git
import markdown2
import logging
from pathlib import Path
logger = logging.getLogger(__name__)
logger.setLevel(logging.DEBUG)
@ -13,28 +14,39 @@ logger.addHandler(handler)
app = Flask(__name__)
@app.route("/assets/<path:path>")
def send_assets(path):
return send_from_directory(Path(__file__).parent / "assets", path)
@app.route("/<owner>/<repo>/", methods=["GET"])
@app.route("/<owner>/<repo>/tree/main/", methods=["GET"])
@app.route("/<owner>/<repo>/tree/main/<path:path>", methods=["GET"])
def get_tree(owner, repo, path=""):
path = path.lstrip("/")
logger.debug(f"Path: {path}")
repo_url = f"https://github.com/{owner}/{repo}.git"
git = Git(repo_url)
try:
directory_structure = git.get_directory_structure()
filtered_structure = [
entry[len(path) :]
entry[len(path) :].lstrip("/")
for entry in directory_structure
if entry.startswith(path)
]
logger.debug(f"Filtered structure: {filtered_structure}")
# Separate files and directories
directories = set(
directories = sorted(list(set(
[entry.split("/")[0] for entry in filtered_structure if "/" in entry]
)
)))
files = [entry for entry in filtered_structure if "/" not in entry]
# Get README.md content if it exists
readme_content = None
if f"README.md" in files:
readme_md = git.get_file_content(f"{path}/README.md")
readme_content = markdown2.markdown(readme_md.decode("utf-8"))

33
src/gitcloak/assets/css/style.css Normal file
View file

@ -0,0 +1,33 @@
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
padding-top: 56px; /* Height of the navbar */
}
.directory a, .file a {
text-decoration: none;
color: #0366d6;
}
.directory a:hover, .file a:hover {
text-decoration: underline;
}
.readme {
margin-top: 20px;
}
.readme .card-title {
font-size: 1.5rem;
}
.readme .card-text pre {
background-color: #f6f8fa;
padding: 10px;
border-radius: 4px;
overflow: auto;
}

5
src/gitcloak/assets/dist/css/bootstrap.min.css vendored Normal file
View file

File diff suppressed because one or more lines are too long

18
src/gitcloak/templates/base.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<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="{{ url_for('static', filename='style.css') }}" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">GitCloak</a>
</nav>
<div class="container mt-4">
{% block content %}{% endblock %}
</div>
</body>
</html>

66
src/gitcloak/templates/path.html
View file

@ -1,43 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{{ owner }}/{{ repo }} - {{ path }}</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.directory,
.file {
margin: 5px 0;
}
.directory a,
.file a {
text-decoration: none;
color: #0366d6;
}
.directory a:hover,
.file a:hover {
text-decoration: underline;
}
.readme {
margin-top: 20px;
padding: 10px;
border: 1px solid #ddd;
background-color: #f6f8fa;
}
</style>
</head>
<body>
<h1>{{ owner }}/{{ repo }} - {{ path }}</h1>
{% extends 'base.html' %} {% block title %}{{ owner }}/{{ repo }} - {{ path }}{%
endblock %} {% block content %}
<div class="row">
<div class="col-md-8">
<h1>{{ owner }}/{{ repo }} - <small>{{ path }}</small></h1>
<div>
<h2>Directories</h2>
<div>
<div class="list-group">
{% for directory in directories %}
<div class="directory">
<a href="/{{ owner }}/{{ repo }}/tree/main/{{ path }}{{ directory }}"
<a
class="list-group-item list-group-item-action"
href="/{{ owner }}/{{ repo }}/tree/main/{{ path }}/{{ directory }}"
>{{ directory }}</a
>
</div>
@ -46,21 +19,28 @@
</div>
<div>
<h2>Files</h2>
<div>
<div class="list-group">
{% for file in files %}
<div class="file">
<a href="/{{ owner }}/{{ repo }}/raw/{{ path }}{{ file }}"
<a
class="list-group-item list-group-item-action"
href="/{{ owner }}/{{ repo }}/raw/{{ path }}/{{ file }}"
>{{ file }}</a
>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="col-md-4">
{% if readme_content %}
<div class="readme">
<h2>README.md</h2>
<div>{{ readme_content|safe }}</div>
<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 %}
</body>
</html>
</div>
</div>
{% endblock %}