Switch to a cards layout for the dashboard (#105)

Co-authored-by: Maciej Olko <[email protected]>
Co-authored-by: Adam Turner <[email protected]>

Author: 3 people

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

build_status.py

@@ -1,8 +1,7 @@
 """
-Fetch build status of languages in the https://docs.python.org.
+Fetch translated names of languages.
 
-Yield a tuple of language code and a Boolean indicating
-whether it is in the language switcher.
+Yield a tuple of language code and a string with the translated name.
 """
 
 import tomllib
@@ -11,26 +10,13 @@
 from urllib3 import PoolManager
 
 
-def get_languages(http: PoolManager) -> Iterator[tuple[str, bool]]:
+def get_languages(http: PoolManager) -> Iterator[tuple[str, str]]:
     data = http.request(
         'GET',
         'https://raw.githubusercontent.com/python/docsbuild-scripts/refs/heads/main/config.toml',
     ).data
     config = tomllib.loads(data.decode())
     for code, language in config['languages'].items():
         language_code = code.lower().replace('_', '-')
-        in_switcher = language.get('in_prod', config['defaults']['in_prod'])
-        yield language_code, in_switcher
-
-
-def main() -> None:
-    languages = {
-        language: in_switcher for language, in_switcher in get_languages(PoolManager())
-    }
-    print(languages)
-    for code in ('en', 'pl', 'ar', 'zh-cn', 'id'):
-        print(f'{code}: {code in languages} {languages.get(code)}')
-
-
-if __name__ == '__main__':
-    main()
+        translated_name = language.get('translated_name')
+        yield language_code, translated_name

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()))

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
@@ -37,7 +37,11 @@ def get_completion_progress() -> Iterator['LanguageProjectData']:
     )
     subprocess.run(['make', '-C', cpython_dir / 'Doc', 'venv'], check=True)
     subprocess.run(['make', '-C', cpython_dir / 'Doc', 'gettext'], check=True)
-    languages_built = dict(build_status.get_languages(PoolManager()))
+
+    languages_built: dict[str, str] = {
+        language: translated_name
+        for language, translated_name in build_status.get_languages(PoolManager())
+    }
 
     with concurrent.futures.ThreadPoolExecutor() as executor:
         return executor.map(
@@ -51,7 +55,7 @@ def get_completion_progress() -> Iterator['LanguageProjectData']:
 def get_project_data(
     language: Language,
     repo: str | None,
-    languages_built: dict[str, bool],
+    languages_built: dict[str, str],
     clones_dir: str,
 ) -> 'LanguageProjectData':
     built = language.code in languages_built
@@ -62,6 +66,7 @@ def get_project_data(
         translators_data = TranslatorsData(0, False)
         change = 0.0
         branch = ''
+
     return LanguageProjectData(
         language,
         repo,
@@ -70,7 +75,7 @@ def get_project_data(
         change,
         translators_data,
         built,
-        in_switcher=languages_built.get(language.code),
+        translated_name=languages_built.get(language.code, ''),
         uses_platform=language.code in contribute.pulling_from_transifex,
         contribution_link=contribute.get_contrib_link(language.code, repo),
     )
@@ -85,24 +90,30 @@ class LanguageProjectData:
     change: float
     translators: TranslatorsData
     built: bool
-    in_switcher: bool | None
+    translated_name: str
     uses_platform: bool
     contribution_link: str | None
 
 
 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=get_counts(Path('clones', 'cpython', 'Doc', 'build', 'gettext')),
     )
 
-    Path('index.html').write_text(output)
-    Path('index.json').write_text(
-        json.dumps(completion_progress, indent=2, default=asdict)
+    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/index.json').write_text(
+        json.dumps([asdict(project) for project in completion_progress], indent=2)
     )

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)

src/logo.png

@@ -0,0 +1,121 @@
+/* ---------------------------- Global Styles ------------------------------- */
+
+body {
+  padding-top: 4.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 3rem;
+  color: #5a5a5a;
+  background-color: rgb(245, 245, 245);
+}
+
+a {
+  color: #0d0d0d;
+}
+
+a:hover {
+  color: #1595fe;
+}
+
+/* -------------------------------- navbar ---------------------------------- */
+
+.navbar {
+  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 {
+  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;
+}
+
+/* ------------------------------ 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: 3px;
+  border-bottom-left-radius: 3px;
+}
+
+/* ------------------------------ Metadata ---------------------------------- */
+
+table {
+  border-collapse: collapse;
+}
+th, td {
+  border: 1px solid #ddd;
+  padding: 8px 12px;
+  text-align: left;
+  white-space: nowrap;
+}
+th {
+  background-color: #d6d6d6;
+}
+hr {
+  color: #f4f4f4;
+}
+td[data-label="warnings"], td[data-label="lint"] {
+  text-align: right;
+}
+
+@media screen and (max-width: 600px) {
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+  th {
+    position: absolute;
+    top: -9999px;
+    left: -9999px;
+  }
+  tr {
+    border: 1px solid #ccc;
+    margin-bottom: 5px;
+  }
+  td {
+    border: none;
+    border-bottom: 1px solid #eee;
+    padding-left: 50%;
+    position: relative;
+  }
+  td:before {
+    content: attr(data-label);
+    font-weight: bold;
+    left: 10px;
+    position: absolute;
+  }
+}