Merge pull request #13 from chriskuehl/table-anchors

Add anchor tags to metadata table rows

Author: chriskuehl

pypi_browser/app.py

@@ -95,6 +95,11 @@ def _pluralize(n: int) -> str:
     return '' if n == 1 else 's'
 
 
+def _anchorize(title: str) -> str:
+    """Convert metadata title into HTML anchor ID."""
+    return re.sub(r'\-+', '-', re.sub(r'[^a-z0-9]', '-', title.lower()))
+
+
 def _human_size(size: int) -> str:
     if size >= ONE_GB:
         return f'{size / ONE_GB:.1f} GiB'
@@ -108,6 +113,7 @@ def _human_size(size: int) -> str:
 
 templates.env.filters['human_size'] = _human_size
 templates.env.filters['pluralize'] = _pluralize
+templates.env.filters['anchorize'] = _anchorize
 templates.env.globals['pypi_browser_version'] = importlib.metadata.version('pypi-browser-webapp')
 
 

pypi_browser/static/site.css

@@ -19,3 +19,24 @@ html {
 .page-package-file-archive-path .codeview pre {
     font-size: 14px;
 }
+
+.anchor-row {
+    position: relative;
+}
+
+.anchor-row a {
+    display: none;
+    padding-right: 5px;
+    text-decoration: none;
+    color: #bbb;
+}
+
+.anchor-row a:hover {
+    color: #999;
+}
+
+.anchor-row:hover a {
+    position: absolute;
+    right: 100%;
+    display: inline;
+}

pypi_browser/templates/package_file.html

@@ -36,10 +36,14 @@ <h4>Package Metadata</h4>
                 </a>
             </caption>
             {% for key, values in metadata.items()|sort %}
+                {% set anchor_id = key|anchorize %}
                 {% for value in values %}
-                    <tr>
+                    <tr class="anchor-row">
                         {% if loop.index == 1 %}
-                            <th rowspan="{{values|length}}">{{key}}</th>
+                            <th rowspan="{{values|length}}">
+                                <a id="{{anchor_id}}" href="#{{anchor_id}}" aria-hidden="true">🔗</a>
+                                {{key}}
+                            </th>
                         {% endif %}
                         <td class="font-monospace">{{value}}</td>
                     </tr>