updated the repo card rendering

Author: Animesh Garg

_data/repositories.yml

@@ -1,6 +1,5 @@
 github_users:
 
-
 repo_description_lines_max: 2
 
 github_repos:

_includes/repository/repo.liquid

@@ -36,12 +36,18 @@
     <img
       class="only-light w-100"
       alt="{{ include.repository }}"
+      onerror="this.style.display='none'; this.parentElement.querySelector('.repo-fallback').style.display='block';"
       src="{{ site.external_services.github_readme_stats_url }}/api/pin/?username={{ repo_url[0] }}&repo={{ repo_url[1] }}&theme={{ site.repo_theme_light }}&locale={{ lang }}&show_owner={{ show_owner }}&description_lines_count={{ max_lines }}"
     >
     <img
       class="only-dark w-100"
       alt="{{ include.repository }}"
+      onerror="this.style.display='none'; this.parentElement.querySelector('.repo-fallback').style.display='block';"
       src="{{ site.external_services.github_readme_stats_url }}/api/pin/?username={{ repo_url[0] }}&repo={{ repo_url[1] }}&theme={{ site.repo_theme_dark }}&locale={{ lang }}&show_owner={{ show_owner }}&description_lines_count={{ max_lines }}"
     >
+    <div class="repo-fallback w-100 border rounded p-3 text-left" style="display: none;">
+      <h6 class="mb-1">{{ include.repository }}</h6>
+      <small class="text-muted">Repository card is temporarily unavailable. Open on GitHub.</small>
+    </div>
   </a>
 </div>

_includes/repository/repo_trophies.liquid

@@ -4,39 +4,57 @@
       <img
         class="only-light"
         alt="{{ include.username }}"
+        onerror="this.style.display='none'; this.parentElement.querySelector('.trophy-fallback').style.display='block';"
         src="{{ site.external_services.github_profile_trophy_url }}/?username={{ include.username }}&theme={{ site.repo_trophies.theme_light }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=6"
       >
       <img
         class="only-dark"
         alt="{{ include.username }}"
+        onerror="this.style.display='none'; this.parentElement.querySelector('.trophy-fallback').style.display='block';"
         src="{{ site.external_services.github_profile_trophy_url }}/?username={{ include.username }}&theme={{ site.repo_trophies.theme_dark }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=6"
       >
+      <div class="trophy-fallback w-100 border rounded p-3 text-left" style="display: none;">
+        <h6 class="mb-1">{{ include.username }}</h6>
+        <small class="text-muted">GitHub trophies are temporarily unavailable.</small>
+      </div>
     </span>
 
     <span class="d-none d-sm-block d-md-none">
       <img
         class="only-light"
         alt="{{ include.username }}"
+        onerror="this.style.display='none'; this.parentElement.querySelector('.trophy-fallback').style.display='block';"
         src="{{ site.external_services.github_profile_trophy_url }}/?username={{ include.username }}&theme={{ site.repo_trophies.theme_light }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=4"
       >
       <img
         class="only-dark"
         alt="{{ include.username }}"
+        onerror="this.style.display='none'; this.parentElement.querySelector('.trophy-fallback').style.display='block';"
         src="{{ site.external_services.github_profile_trophy_url }}/?username={{ include.username }}&theme={{ site.repo_trophies.theme_dark }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=4"
       >
+      <div class="trophy-fallback w-100 border rounded p-3 text-left" style="display: none;">
+        <h6 class="mb-1">{{ include.username }}</h6>
+        <small class="text-muted">GitHub trophies are temporarily unavailable.</small>
+      </div>
     </span>
 
     <span class="d-block d-sm-none">
       <img
         class="only-light"
         alt="{{ include.username }}"
+        onerror="this.style.display='none'; this.parentElement.querySelector('.trophy-fallback').style.display='block';"
         src="{{ site.external_services.github_profile_trophy_url }}/?username={{ include.username }}&theme={{ site.repo_trophies.theme_light }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=3"
       >
       <img
         class="only-dark"
         alt="{{ include.username }}"
+        onerror="this.style.display='none'; this.parentElement.querySelector('.trophy-fallback').style.display='block';"
         src="{{ site.external_services.github_profile_trophy_url }}/?username={{ include.username }}&theme={{ site.repo_trophies.theme_dark }}&locale={{ site.lang }}&margin-w=15&margin-h=15&no-bg=true&rank=-C&column=3"
       >
+      <div class="trophy-fallback w-100 border rounded p-3 text-left" style="display: none;">
+        <h6 class="mb-1">{{ include.username }}</h6>
+        <small class="text-muted">GitHub trophies are temporarily unavailable.</small>
+      </div>
     </span>
   </a>
 </div>

_includes/repository/repo_user.liquid

@@ -23,12 +23,18 @@
     <img
       class="only-light w-100"
       alt="{{ include.username }}"
+      onerror="this.style.display='none'; this.parentElement.querySelector('.repo-fallback').style.display='block';"
       src="{{ site.external_services.github_readme_stats_url }}/api/?username={{ include.username }}&theme={{ site.repo_theme_light }}&locale={{ lang }}&show_icons=true"
     >
     <img
       class="only-dark w-100"
       alt="{{ include.username }}"
+      onerror="this.style.display='none'; this.parentElement.querySelector('.repo-fallback').style.display='block';"
       src="{{ site.external_services.github_readme_stats_url }}/api/?username={{ include.username }}&theme={{ site.repo_theme_dark }}&locale={{ lang }}&show_icons=true"
     >
+    <div class="repo-fallback w-100 border rounded p-3 text-left" style="display: none;">
+      <h6 class="mb-1">{{ include.username }}</h6>
+      <small class="text-muted">GitHub profile card is temporarily unavailable. Open profile.</small>
+    </div>
   </a>
 </div>