improve script amount

Author: randomairborne

assets/api.js

@@ -1,3 +1,8 @@
+import hljs from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/highlight.min.js";
+import json from "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/es/languages/json.min.js";
+
+hljs.registerLanguage("json", json);
+
 async function loadExampleResponses() {
   const servicesElement = document.getElementById("exampleServicesResponse");
   const pingResponseElement = document.getElementById("examplePingResponse");
@@ -20,3 +25,5 @@ async function loadExampleResponses() {
       hljs.highlightElement(servicesElement);
     });
 }
+
+loadExampleResponses().then(() => {});

assets/api/index.html

@@ -33,21 +33,19 @@ <h1>MCping API</h1>
     <p>
       The MCping API is very simple. There is a Java API at /api/java/, and a
       bedrock api at /api/bedrock/. To specify what server to ping, you append
-      that server to the end of the URL, like so.
+      that server to the end of the URL, like so:
+      <a href="/api/java/mcping.me">/api/java/mcping.me</a>.
     </p>
-    <a href="/api/java/mcping.me">/api/java/mcping.me</a>
-    <br />
     <p>
-      The response will look like so, with an "icon" base64 PNG field added if
-      the server has an icon. The latency is in mlliseconds, from Toronto,
+      The response will look as below, with an "icon" base64 PNG field added if
+      the server has an icon. The latency is in milliseconds, from Toronto,
       Canada. Keep in mind that some servers may use signcode colors for the
       MOTD and player sample. Your application should handle this. The player
       sample is often used for advertising, so take it with a grain of salt. The
       Bedrock API response is the same, with the caveat of never returning the
       icon. The bedrock player list may also be synthetic.
     </p>
     <pre><code id="examplePingResponse" class="language-json"></code></pre>
-    <br />
     <p>
       There is also a Mojang Services API, at
       <a href="/api/services">/api/services</a>. This is useful for checking if
@@ -57,7 +55,6 @@ <h1>MCping API</h1>
       <code>Operational</code>.
     </p>
     <pre><code id="exampleServicesResponse" class="language-json"></code></pre>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <script src="/api.js"></script>
+    <script src="/api.js" type="module"></script>
   </body>
 </html>

src/main.rs

@@ -90,7 +90,7 @@ static CSP_VALUE: HeaderValue = HeaderValue::from_static(
     connect-src 'self' https://*.giveip.io; \
     script-src 'self' https://cdnjs.cloudflare.com/ajax/libs/highlight.js/ \
     https://static.cloudflareinsights.com; \
-    style-src 'self'; \
+    style-src 'self' https://cdnjs.cloudflare.com/ajax/libs/highlight.js/; \
     object-src 'none'; \
     base-uri 'none'; \
     require-trusted-types-for 'script';",