Redesign the dashboard

.github/workflows/update.yml

@@ -21,7 +21,6 @@ jobs:
       - run: sudo apt-get install -y gettext
       - run: pip install -r requirements.txt
       - run: uv run generate.py  # generates index.html and index.json
-      - run: mkdir -p build && cp index.* style.css build
       - name: Deploy 🚀
         if: github.event_name != 'pull_request'
         uses: JamesIves/github-pages-deploy-action@v4
@@ -55,8 +54,8 @@ jobs:
         if: github.event_name == 'pull_request'
         run: |
           curl -Lo index.html-public https://github.com/python-docs-translations/dashboard/raw/refs/heads/gh-pages/index.html
-          diff --color=always -u index.html-public index.html || :
-          cat index.html
+          diff --color=always -u index.html-public build/index.html || :
+          cat build/index.html
       - run: uv run generate_metadata.py  # generates metadata.html
       - run: cp metadata.html warnings* build
       - name: Deploy metadata view 🚀

generate.py

@@ -9,7 +9,7 @@
 from pathlib import Path
 
 from git import Repo
-from jinja2 import Template
+from jinja2 import Environment, FileSystemLoader
 from urllib3 import PoolManager
 
 import build_status
@@ -93,16 +93,36 @@ class LanguageProjectData:
 if __name__ == '__main__':
     logging.basicConfig(level=logging.INFO)
     logging.info(f'starting at {generation_time}')
-    template = Template(Path('template.html.jinja').read_text())
+    Path('build').mkdir(parents=True, exist_ok=True)
 
-    output = template.render(
-        completion_progress=(completion_progress := list(get_completion_progress())),
+    completion_progress = list(get_completion_progress())
+    counts = get_counts(Path('clones', 'cpython', 'Doc', 'build', 'gettext'))
+
+    env = Environment(loader=FileSystemLoader('templates'))
+    index = env.get_template('index.html.jinja').render(
+        completion_progress=completion_progress,
+        generation_time=generation_time,
+        duration=(datetime.now(timezone.utc) - generation_time).seconds,
+        counts=counts,
+    )
+
+    chart = env.get_template('chart.html.jinja').render(
+        completion_progress=completion_progress,
         generation_time=generation_time,
         duration=(datetime.now(timezone.utc) - generation_time).seconds,
-        counts=get_counts(Path('clones', 'cpython', 'Doc', 'build', 'gettext')),
+        counts=counts,
     )
 
-    Path('index.html').write_text(output)
-    Path('index.json').write_text(
+    lang_template = env.get_template('language.html.jinja')
+    for project in completion_progress:
+        code = project.language.code
+        html = lang_template.render(project=project)
+        Path(f'build/{code}.html').write_text(html)
+
+    Path('build/style.css').write_bytes(Path('src/style.css').read_bytes())
+    Path('build/logo.png').write_bytes(Path('src/logo.png').read_bytes())
+    Path('build/index.html').write_text(index)
+    Path('build/chart.html').write_text(chart)
+    Path('build/index.json').write_text(
         json.dumps(completion_progress, indent=2, default=asdict)
     )

generate_metadata.py

@@ -9,7 +9,7 @@
 
 import dacite
 from git import Repo
-from jinja2 import Template
+from jinja2 import Environment, FileSystemLoader
 from urllib3 import request
 
 import build_warnings
@@ -55,20 +55,20 @@ def get_language_repo_and_completion(
 if __name__ == '__main__':
     logging.basicConfig(level=logging.INFO)
     logging.info(f'starting at {generation_time}')
-    template = Template(Path('metadata.html.jinja').read_text())
-    if (index_path := Path('index.json')).exists():
-        index_json = loads(Path('index.json').read_text())
+    env = Environment(loader=FileSystemLoader('templates'))
+    if (index_path := Path('build/index.json')).exists():
+        index_json = loads(Path('build/index.json').read_text())
     else:
         index_json = request('GET', argv[1]).json()
 
     completion_progress = [
         dacite.from_dict(LanguageProjectData, project) for project in index_json
     ]
 
-    output = template.render(
+    output = env.get_template('metadata.html.jinja').render(
         metadata=zip(completion_progress, get_projects_metadata(completion_progress)),
         generation_time=generation_time,
         duration=(datetime.now(timezone.utc) - generation_time).seconds,
     )
 
-    Path('metadata.html').write_text(output)
+    Path('build/metadata.html').write_text(output)

style.css → src/style.css

@@ -1,6 +1,86 @@
+/* GLOBAL STYLES
+-------------------------------------------------- */
+/* Padding below the footer and lighter body text */
+
 body {
-  font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
+  padding-top: 4.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 3rem;
+  color: #5a5a5a;
+  background-color: rgb(245, 245, 245);
+  overflow-x: hidden; /* Risky, this need testing but I find scroll bar annoying */
+}
+
+a {
+  color: #0d0d0d;
+}
+
+a:hover {
+  color: #1595fe;
+}
+
+/* NAVAR
+ * ----------------------------------------*/
+
+.navbar {
+  background-color: rgb(245, 245, 245);
+  border-bottom: 0.25px solid #999;
+}
+
+.navbar li {
+  transition: 0.3s background-color;
+  text-align: center;
+  background-color: transparent;
+  padding: 0rem 1rem;
+  text-decoration: none;
+  border-radius: 0.3rem;
+}
+
+.navbar li:hover {
+  background-color: #d0cccd;
+}
+
+.navbar li .nav-link {
+  color: #0d0d0d;
+}
+
+/* Cards and card columns
+----------------------------- */
+
+.row > [class^="col-"] {
+  display: flex;
+}
+
+.card {
+  flex: 1;
+}
+
+.card:hover {
+  background: linear-gradient(90deg, #cc9add 8.06%, #ebad98 106.93%);
+  text-decoration: none;
+  transform: scale(1.05);
+  transition: all 0.3s ease-in-out;
+}
+
+.card:hover .card-title,
+.card:hover .card-subtitle,
+.card:hover .card-text {
+  color: white;
+}
+
+.card:hover .card-link {
+  color: rgb(231, 231, 231);
+}
+
+@media (min-width: 768px) {
+  .card {
+    flex-basis: calc(33.33% - 30px);
+  }
 }
+
+/* -------------------------- OLD STUFF ------------------------------------ */
+
 table {
   border-collapse: collapse;
 }
@@ -11,7 +91,7 @@ th, td {
   white-space: nowrap;
 }
 th {
-  background-color: #f4f4f4;
+  background-color: #d6d6d6;
 }
 hr {
   color: #f4f4f4;

templates/base.html.jinja

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+  <meta name="description" content="">
+  <meta name="author" content="">
+
+  <title>Python Docs Translation Dashboard</title>
+
+  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.0/css/bootstrap.min.css" rel="stylesheet">
+  <link href="style.css" rel="stylesheet">
+</head>
+
+<body>
+  <header>
+    <nav class="navbar navbar-expand-md fixed-top">
+
+      <div class="navbar-brand">
+        <a href="./" style="all: unset; cursor: pointer;">
+          <img src="logo.png" style="height: 2rem;" alt="">
+          <span style="font-size: 1.25rem; font-weight: bold;">Translation Dashboard</span>
+        </a>
+      </div>
+
+      <div class="navbar-light bg-light">
+        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+      </div>
+
+      <div class="collapse navbar-collapse" id="navbarNavDropdown">
+        <ul class="navbar-nav mr-auto">
+          <li class="nav-item">
+            <a class="nav-link" href="chart.html">Chart</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="metadata.html">Metadata</a>
+          </li>
+          <li class="nav-item">
+            <a class="nav-link" href="https://devguide.python.org/documentation/translations/translating/">Devguide ❯ Translating</a>
+          </li>
+        </ul>
+      </div>
+    </nav>
+  </header>
+
+  <main role="main">
+    {% block main %}
+    {% endblock %}
+  </main>
+
+</body>
+
+<script>
+  function padnavbar() {
+    const navbar = document.querySelector('.navbar.fixed-top');
+    if (navbar) {
+      document.body.style.paddingTop = (navbar.offsetHeight + 10) + 'px';
+    }
+  }
+  window.addEventListener('load', padnavbar);
+  window.addEventListener('resize', padnavbar);
+</script>
+
+<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
+  integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
+  crossorigin="anonymous">
+</script>
+<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+
+</html>

template.html.jinja → templates/chart.html.jinja

@@ -1,22 +1,10 @@
-<html lang="en">
-<head>
-  <title>Python Docs Translation Dashboard</title>
-  <link rel="stylesheet" href="style.css">
-  <meta charset="UTF-8">
-  <meta name="description" content="Python Docs Translation Dashboard">
-  <base target="_blank">
-</head>
-<body>
-<h1>Python Docs Translation Dashboard</h1>
-<nav class="switchpages">
-main | <a href="metadata.html" target="_self">meta</a>
-</nav>
+{% extends "base.html.jinja" %}
+
+{% block main %}
 <table>
 <thead>
 <tr>
   <th>language</th>
-  <th>switcher</th>
-  <th>translators</th>
   <th>completion*</th>
 </tr>
 </thead>
@@ -30,18 +18,6 @@ main | <a href="metadata.html" target="_self">meta</a>
       {{ project.language.name }} ({{ project.language.code }})
     {% endif %}
   </td>
-  <td data-label="build">
-    {% if project.in_switcher %}
-      <a href="https://docs.python.org/{{ project.language.code }}/">✓</a>
-    {% elif project.built %}
-      <a href="https://docs.python.org/{{ project.language.code }}/">✗</a>
-    {% endif %}
-  </td>
-  <td data-label="translators">
-    {% if project.translators.link %}<a href="{{ project.translators.link }}">{% endif %}
-    {{ project.translators.number }}
-    {% if project.translators.link %}</a>{% endif %}
-  </td>
   <td data-label="completion">
     <div class="progress-bar"
          style="width: {{ project.completion }}%;{% if project.change %}background: linear-gradient(to left, #94cf96 {{ project.change * 100 / project.completion }}%, #4caf50 {{ project.change * 100 / project.completion }}%);{% else %}background-color: #4caf50;{% endif %}"
@@ -66,7 +42,7 @@ For more information about translations, see the <a href="https://devguide.pytho
 <p>You can download the data on this page in <a href="https://github.com/python-docs-translations/dashboard/blob/gh-pages/index.json">JSON format</a>.</p>
 <p>You can also find the scripts used to generate these pages <a href="https://github.com/python-docs-translations/dashboard">here</a>.</p>
 <p>Last updated at {{ generation_time.strftime('%A, %-d %B %Y, %-H:%M:%S %Z') }} (in {{ duration // 60 }}:{{ "{:02}".format(duration % 60) }} minutes).</p>
-</body>
+
 <script>
   function updateProgressBarVisibility() {
     document.querySelectorAll('.progress-bar').forEach(progressBar => {
@@ -85,4 +61,4 @@ For more information about translations, see the <a href="https://devguide.pytho
 
   window.addEventListener('resize', updateProgressBarVisibility);
 </script>
-</html>
+{% endblock %}

templates/index.html.jinja

@@ -0,0 +1,19 @@
+{% extends "base.html.jinja" %}
+
+{% block main %}
+    <div>
+      <div class="row">
+        {% for project in completion_progress | sort(attribute='completion,translators.number') | reverse %}
+          <div class="col-12 col-sm-6 col-md-4 d-flex">
+            <a href="{{ project.language.code }}.html" class="card mb-3 w-100">
+              <div class="card-body">
+                <h5 class="card-title">{{ project.language.name }} ({{ project.language.code }})</h5>
+                <h6 class="card-subtitle mb-2 text-muted">Completion: {{ '{:.2f}%'.format(project.completion) }}</h6>
+                <h6 class="card-subtitle mb-2 text-muted">Translators: {{ project.translators.number }}</h6>
+              </div>
+            </a>
+          </div>
+        {% endfor %}
+      </div>
+    </div>
+{% endblock %}

templates/language.html.jinja

@@ -0,0 +1,9 @@
+{% extends "base.html.jinja" %}
+
+{% block main %}
+  {% if project.built %}
+    <h1><a href="https://docs.python.org/{{ project.language.code }}/3">{{ project.language.name }}</a></h1>
+  {% else %}
+    <h1>{{ project.language.name }}</h1>
+  {% endif %}
+{% endblock %}

metadata.html.jinja → templates/metadata.html.jinja

@@ -1,15 +1,6 @@
-<html lang="en">
-<head>
-  <title>Python Docs Translation Dashboard</title>
-  <link rel="stylesheet" href="style.css">
-  <meta charset="UTF-8">
-  <base target="_blank">
-</head>
-<body>
-<h1>Python Docs Translation Dashboard</h1>
-<nav class="switchpages">
-<a href="index.html" target="_self">main</a> | meta
-</nav>
+{% extends "base.html.jinja" %}
+
+{% block main %}
 <table>
 <thead>
 <tr>
@@ -38,5 +29,4 @@
 </table>
 <p>* number of Sphinx build process warnings</p>
   <p>Last updated at {{ generation_time.strftime('%A, %-d %B %Y, %-H:%M:%S %Z') }} (in {{ duration // 60 }}:{{ "{:02}".format(duration % 60) }} minutes).</p>
-</body>
-</html>
+{% endblock %}