Render language data

m-aciek · m-aciek · commit b250f038dab1 · 2025-05-16T17:28:34.000+02:00
diff --git a/generate.py b/generate.py
@@ -58,6 +58,11 @@ def get_project_data(
     built = language.code in languages_built
     if repo:
         stats, translators_data, branch, change = get_stats(clones_dir, repo)
+
+        template = Template(Path('language.html.jinja').read_text())
+        Path(f'{language.code}.html').write_text(
+            template.render(stats=stats, language=language)
+        )
     else:
         stats = SimpleNamespace(completion=0.0)
         translators_data = TranslatorsData(0, False)
diff --git a/language.html.jinja b/language.html.jinja
@@ -0,0 +1,56 @@
+<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: {{ language.name }}</h1>
+<nav class="switchpages">
+<a href="index.html" target="_self">main</a> | <a href="metadata.html" target="_self">meta</a>
+</nav>
+<table>
+<thead>
+<tr>
+  <th>path</th>
+  <th>completion</th>
+</tr>
+</thead>
+<tbody>
+{% for directory in stats.stats_by_directory() %}
+<tr>
+  <td>{{ directory.path.stem }}</td>
+  <td data-label="completion">
+    <div class="progress-bar" style="width: {{ directory.completion }}%;background-color: #4caf50;">
+        {{ '{:.2f}%'.format(directory.completion) }}
+    </div>
+    <div class="progress-bar-outer-label">
+        {{ '{:.2f}%'.format(directory.completion) }}
+    </div>
+  </td>
+</tr>
+{% endfor %}
+</tbody>
+</table>
+</body>
+<script>
+  function updateProgressBarVisibility() {
+    document.querySelectorAll('.progress-bar').forEach(progressBar => {
+      const barWithOverflowWidth = progressBar.scrollWidth;
+      const barWidth = progressBar.clientWidth;
+
+      if (barWidth < barWithOverflowWidth) {
+        progressBar.classList.add('low');
+      } else {
+        progressBar.classList.remove('low');
+      }
+    });
+  }
+
+  updateProgressBarVisibility();
+
+  window.addEventListener('resize', updateProgressBarVisibility);
+</script>
+</html>
