Fix metadata generation and add progress bar

Author: StanFromIreland

.github/workflows/update.yml

@@ -57,7 +57,6 @@ jobs:
           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 🚀
         if: github.event_name != 'pull_request'
         uses: JamesIves/github-pages-deploy-action@v4

build_warnings.py

@@ -33,5 +33,5 @@ def number(clones_dir: str, repo: str, language_code: str) -> int:
             f'./sphinxbuild/{language_code}',  # outputdir
         )
     )
-    copyfile(warning_file, f'warnings-{language_code}.txt')
+    copyfile(warning_file, f'build/warnings-{language_code}.txt')
     return len(findall('ERROR|WARNING', Path(warning_file).read_text()))

src/style.css

@@ -1,6 +1,4 @@
-/* GLOBAL STYLES
--------------------------------------------------- */
-/* Padding below the footer and lighter body text */
+/* ------------------------ GLOBAL STYLES -------------------------- */
 
 body {
   padding-top: 4.5rem;
@@ -9,7 +7,6 @@ body {
   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 {
@@ -20,12 +17,13 @@ a:hover {
   color: #1595fe;
 }
 
-/* NAVAR
- * ----------------------------------------*/
+/* --------------------------- NAVBAR ------------------------------ */
 
 .navbar {
-  background-color: rgb(245, 245, 245);
+  background-color: rgb(245, 245, 245, 0.6);
+  backdrop-filter: blur(10px);
   border-bottom: 0.25px solid #999;
+  -webkit-backdrop-filter: blur(10px);
 }
 
 .navbar li {
@@ -45,8 +43,7 @@ a:hover {
   color: #0d0d0d;
 }
 
-/* Cards and card columns
------------------------------ */
+/* ----------------------- Cards and card columns --------------------------- */
 
 .row > [class^="col-"] {
   display: flex;
@@ -79,7 +76,26 @@ a:hover {
   }
 }
 
-/* -------------------------- OLD STUFF ------------------------------------ */
+/* ------------------------------ Index ------------------------------------- */
+
+.progress-bar-container {
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  height: 20px;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-bar-index {
+  display: inline-block;
+  color: white;
+  height: 100%;
+  line-height: 20px;
+  border-top-left-radius: 4px;
+  border-bottom-left-radius: 4px;
+}
+
+/* ------------------------------ Tables ------------------------------------ */
 
 table {
   border-collapse: collapse;

templates/index.html.jinja

@@ -7,13 +7,23 @@
           <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>
+                <h4 class="card-title">{{ project.language.name }} ({{ project.language.code }})</h4>
+                <h5 class="card-subtitle mb-2">Completion: <strong>{{ '{:.2f}%'.format(project.completion) }}</strong></h5>
+                <h6 class="card-subtitle mb-2 text-muted">30 Days Progress: {{ '{:.2f}%'.format(project.change) }}</h6>
                 <h6 class="card-subtitle mb-2 text-muted">Translators: {{ project.translators.number }}</h6>
+                <div class="progress-bar-container">
+                  <div class="progress-bar-index" 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 %}">
+                  </div>
+                </div>
               </div>
             </a>
           </div>
         {% endfor %}
       </div>
     </div>
-{% endblock %}
+{% endblock %}