Show type checker info on UI, fixed laike9m#30

Author: laike9m

templates/components/badge.html

@@ -6,24 +6,29 @@
             align-items: center;
             justify-content: center;
             padding: 2px 4px;
+            margin-right: 4px;
             height: 30px;
             border-radius: 5px;
             background-color: #6cb8d4;
             color: white;
-            font-size: 15px;
+            font-size: 14px;
             font-weight: bold;
         }
 
+        .badge a {
+          color: white;
+        }
+
+        .badge span:nth-child(2),
+        .badge span a {
+            font-weight: lighter;
+        }
+
         .badge span:nth-child(1) svg {
             width: 16px;
             height: 16px;
             margin-right: 5px;
         }
-
-        .badge span:nth-child(2) {
-            font-size: 14px;
-            font-weight: lighter;
-        }
     </style>
 </head>
 
@@ -33,4 +38,12 @@
         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 256 255"><defs><linearGradient id="logosPython0" x1="12.959%" x2="79.639%" y1="12.039%" y2="78.201%"><stop offset="0%" stop-color="#387EB8"/><stop offset="100%" stop-color="#366994"/></linearGradient><linearGradient id="logosPython1" x1="19.128%" x2="90.742%" y1="20.579%" y2="88.429%"><stop offset="0%" stop-color="#FFE052"/><stop offset="100%" stop-color="#FFC331"/></linearGradient></defs><path fill="url(#logosPython0)" d="M126.916.072c-64.832 0-60.784 28.115-60.784 28.115l.072 29.128h61.868v8.745H41.631S.145 61.355.145 126.77c0 65.417 36.21 63.097 36.21 63.097h21.61v-30.356s-1.165-36.21 35.632-36.21h61.362s34.475.557 34.475-33.319V33.97S194.67.072 126.916.072ZM92.802 19.66a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.13Z"/><path fill="url(#logosPython1)" d="M128.757 254.126c64.832 0 60.784-28.115 60.784-28.115l-.072-29.127H127.6v-8.745h86.441s41.486 4.705 41.486-60.712c0-65.416-36.21-63.096-36.21-63.096h-21.61v30.355s1.165 36.21-35.632 36.21h-61.362s-34.475-.557-34.475 33.32v56.013s-5.235 33.897 62.518 33.897Zm34.114-19.586a11.12 11.12 0 0 1-11.13-11.13a11.12 11.12 0 0 1 11.13-11.131a11.12 11.12 0 0 1 11.13 11.13a11.12 11.12 0 0 1-11.13 11.13Z"/></svg>
     </span>
     <span>{{ python_info }}</span>
-</div>
+</div>
+<div class="badge">
+  <span>type checker:&nbsp;<span>
+  <span>
+    <a target="_blank" rel="noopener noreferrer" href="https://github.com/microsoft/pyright">
+     pyright
+    </a>
+  </span>
+</div>