File display page is basically styled

Author: chriskuehl

poetry.lock

@@ -10,6 +10,7 @@
 import packaging.version
 import pygments.lexers.special
 from identify import identify
+from markupsafe import Markup
 from starlette.applications import Starlette
 from starlette.middleware import Middleware
 from starlette.middleware.base import BaseHTTPMiddleware
@@ -261,6 +262,11 @@ async def package_file_archive_path(request: Request) -> Response:
         )
     entry = matching_entries[0]
     mimetype, _ = mimetypes.guess_type(archive_path)
+    metadata = (
+        ('Size', _human_size(entry.size)),
+        ('Mimetype', Markup(f'<tt>{mimetype}</tt>') if mimetype else 'Unknown'),
+        ('Mode', Markup(f'<tt>{entry.mode}</tt>')),
+    )
 
     def _transfer_raw():
         """Return the file verbatim."""
@@ -329,32 +335,35 @@ async def transfer_file():
                             highlight_diff=False,
                         ),
                     ),
+                    'metadata': metadata,
                     'extra_css': fluffy_code.code.get_global_css() + '\n' + style_config.css,
                     'extra_js': fluffy_code.code.get_global_javascript(),
                 },
             )
         else:
             # Case 2: too long to syntax highlight.
             return templates.TemplateResponse(
-                'package_file_archive_path_cannot_render.html',
+                'package_file_archive_path.html',
                 {
                     'request': request,
                     'package': package_name,
                     'filename': file_name,
                     'archive_path': archive_path,
-                    'error': 'This file is too long to syntax highlight.',
+                    'metadata': metadata,
+                    'cannot_render_error': 'This file is too long to display inline with syntax highlighting.',
                 },
             )
 
     # Case 4: link to binary
     return templates.TemplateResponse(
-        'package_file_archive_path_cannot_render.html',
+        'package_file_archive_path.html',
         {
             'request': request,
             'package': package_name,
             'filename': file_name,
             'archive_path': archive_path,
-            'error': 'This file appears to be a binary.',
+            'metadata': metadata,
+            'cannot_render_error': 'This file appears to be a binary.',
         },
     )
 

pypi_view/app.py

@@ -4,6 +4,7 @@
 import enum
 import os.path
 import re
+import stat
 import typing
 import zipfile
 from dataclasses import dataclass
@@ -32,6 +33,7 @@ class PackageFormat(enum.Enum):
 @dataclass(frozen=True)
 class PackageEntry:
     path: str
+    mode: str
     size: int
 
 
@@ -41,6 +43,7 @@ def _package_entries_from_zipfile(path: str) -> typing.Set[PackageEntry]:
             PackageEntry(
                 path=entry.filename,
                 size=entry.file_size,
+                mode=stat.filemode(entry.external_attr >> 16),
             )
             for entry in zf.infolist()
         }

pypi_view/packaging.py

@@ -1,3 +1,11 @@
+.breadcrumb {
+    --bs-breadcrumb-divider: '>';
+}
+
 .page-package-file .metadata {
     width: auto;
 }
+
+.page-package-file-archive-path .codeview {
+    border: solid 1px #ddd;
+}

pypi_view/static/site.css

@@ -23,9 +23,6 @@
                    />
                    <button class="btn btn-outline-success" type="submit">Go</button>
                 </form>
-                <div class="collapse navbar-collapse">
-                    foo
-                </div>
             </div>
         </nav>
 

pypi_view/templates/_base.html

@@ -5,7 +5,15 @@
 {% block title %}{{package}} | PyPi View{% endblock %}
 
 {% block content %}
-    <h1>{{package}}</h1>
+    <h1 class="font-monospace">{{package}}</h1>
+
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{{url_for('home')}}">Browse</a></li>
+            <li class="breadcrumb-item active">{{package}}</li>
+        </ol>
+    </nav>
+
     <p>
     <tt>{{package}}</tt> has {{version_to_files|length}} version{{version_to_files|length|pluralize}} and {{total_files}} file{{total_files|pluralize}}.
         Select a file below to explore it.

pypi_view/templates/package.html

@@ -6,7 +6,22 @@
 {% block title %}{{filename}} | {{package}} | PyPi View{% endblock %}
 
 {% block content %}
-    <h1><tt>{{filename}}</tt></h1>
+    <h1 class="font-monospace">{{filename}}</h1>
+
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{{url_for('home')}}">Browse</a></li>
+            <li class="breadcrumb-item">
+                <a
+                    href="{{url_for('package', package=package)}}"
+                >
+                    {{package}}
+                </a>
+            </li>
+            <li class="breadcrumb-item active">{{filename}}</li>
+        </ol>
+    </nav>
+
     <h5>{{macros.package_type_pill(filename)}}</h5>
 
     {% if metadata_path %}

pypi_view/templates/package_file.html

@@ -17,12 +17,59 @@
 {% endblock %}
 
 {% block content %}
-    <h1>{{package}}: {{filename}}</h1>
-    <h2>{{archive_path}}</h2>
-    <div class="font-monospace">
-        {{rendered_text|safe}}
+    <h1 class="font-monospace">{{archive_path}}</h1>
+
+    <nav aria-label="breadcrumb">
+        <ol class="breadcrumb">
+            <li class="breadcrumb-item"><a href="{{url_for('home')}}">Browse</a></li>
+            <li class="breadcrumb-item">
+                <a
+                    href="{{url_for('package', package=package)}}"
+                >
+                    {{package}}
+                </a>
+            </li>
+            <li class="breadcrumb-item">
+                <a
+                    href="{{url_for('package_file', package=package, filename=filename)}}"
+                >
+                    {{filename}}
+                </a>
+            </li>
+            <li class="breadcrumb-item active" aria-current="page">{{archive_path}}</li>
+        </ol>
+    </nav>
+
+    <div class="row">
+        <div class="col">
+            {% if cannot_render_error %}
+                <div class="card">
+                    <div class="card-body text-center">
+                        <h4>This file cannot be displayed.</h4>
+                        <p>{{cannot_render_error}}</p>
+                        <a href="?raw" class="btn btn-primary">View Raw File</a>
+                    </div>
+                </div>
+            {% else %}
+                <div class="font-monospace codeview">
+                    {{rendered_text|safe}}
+                </div>
+            {% endif %}
+        </div>
+
+        <div class="col col-sm-3">
+            <h5>Metadata</h5>
+            <table class="table table-bordered table-sm small metadata">
+                {% for key, value in metadata %}
+                    <tr>
+                        <th>{{key}}</th>
+                        <td>{{value}}</td>
+                    </tr>
+                {% endfor %}
+            </table>
+            <a href="?raw" class="btn btn-primary btn-sm">View Raw File</a>
+        </div>
     </div>
-    <p><a href="?raw">View Raw</a></p>
 {% endblock %}
 
 {# vim: ft=jinja

pypi_view/templates/package_file_archive_path.html

@@ -16,6 +16,7 @@ httpx = "^0.23.0"
 aiofiles = "^22.1.0"
 identify = "^2.5.5"
 Pygments = "^2.13.0"
+MarkupSafe = "^2.1.1"
 
 
 [tool.poetry.group.dev.dependencies]