feat: highlight code in new block of Sns aggregator and style (#3300)

# Motivation Follow-up of #3295. This PR propose a code highlighter for the "block of code" displayed in the Sns aggregator index web page and style the new section. It also adds a sentence to highlight the fact that the aggregator is meant for developers. ## Library Prismjs used to highlight the code is fetched from the [Juno's CDN](https://github.com/buildwithjuno/cdn) on the raw domain of the IC. # Screenshot <img width="1536" alt="Capture d’écran 2023-09-12 à 07 06 01" src="https://github.com/dfinity/nns-dapp/assets/16886711/cc2bb20e-0e71-40a8-9c37-d36088e44d42">
dfinity · Sep 12, 2023 · 49b9928 · 49b9928
1 parent 4efc9e7
commit 49b9928
Showing 1 changed file with 49 additions and 34 deletions.
diff --git a/rs/sns_aggregator/src/index.html b/rs/sns_aggregator/src/index.html
@@ -1,8 +1,15 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="utf-8" />
     <title>SNS aggregator</title>
+
+    <!-- Juno's CDN -->
+    <link
+      href="https://fmkjf-bqaaa-aaaal-acpza-cai.raw.icp0.io/libs/prism-themes/1.9.0/themes/prism-vsc-dark-plus.min.css"
+      rel="stylesheet"
+    />
+
     <style>
       @font-face {
         font-family: CircularXX;
@@ -22,9 +29,6 @@
         --blue-bolt: #00bbf9;
         --verdigris: #56a3a6;
         --sea-green: #00f5d4;
-        --grey: #ccc;
-        --dark-grey: #333;
-        --light-grey: #f5f5f5;
 
         --padding-3x: calc(var(--padding) * 3);
         --padding-2x: calc(var(--padding) * 2);
@@ -35,7 +39,6 @@
         --border-size: calc(var(--padding) / 6);
         --border-radius: var(--padding);
         --border-radius-0_5x: calc(var(--padding) / 2);
-        --border-radius-0_25x: calc(var(--padding) / 4);
       }
 
       body {
@@ -56,8 +59,11 @@
       }
 
       a {
-        transition: color 0.15s ease-out, background 0.15s ease-out,
-          transform 0.15s ease-out, box-shadow 0.25s ease-out;
+        transition:
+          color 0.15s ease-out,
+          background 0.15s ease-out,
+          transform 0.15s ease-out,
+          box-shadow 0.25s ease-out;
       }
 
       main {
@@ -100,7 +106,7 @@
         width: 100%;
         justify-content: space-between;
         border-bottom: var(--border-size) solid black;
-        margin: 0 0 var(--padding-2x);
+        margin: 0;
       }
 
       h2 span {
@@ -160,6 +166,10 @@
         }
       }
 
+      .snses {
+        margin: var(--padding-2x) 0 0;
+      }
+
       @media (min-width: 576px) {
         .snses {
           display: grid;
@@ -313,24 +323,21 @@
         background: var(--verdigris);
       }
 
-      pre {
-        display: block;
-        padding: var(--padding-0_5x);
-        margin: 0 0 var(--padding-0_5x);
-        line-height: 1.4em;
-
-        color: var(--dark-grey);
-        background-color: var(--light-grey);
-        border: 1px solid var(--grey);
-        border-radius: var(--border-radius-0_25x);
-
-        word-break: break-all;
-        /* Reference: https://css-tricks.com/snippets/css/make-pre-text-wrap/ */
-        white-space: pre-wrap;       /* css-3 */
-        white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
-        white-space: -pre-wrap;      /* Opera 4-6 */
-        white-space: -o-pre-wrap;    /* Opera 7 */
-        word-wrap: break-word;       /* Internet Explorer 5.5+ */
+      .code {
+        margin: 0 0 var(--padding-3x);
+        border: var(--padding-0_25x) dashed var(--hot-pink);
+        padding: var(--padding-0_25x);
+        border-radius: var(--border-radius);
+      }
+
+      pre[class*="language-javascript"] {
+        border-radius: var(--border-radius-0_5x);
+        padding: var(--padding);
+        margin: 0;
+      }
+
+      code[class*="language-javascript"] {
+        font-size: 11px;
       }
     </style>
   </head>
@@ -356,17 +363,23 @@ <h1>SNS aggregator</h1>
           </li>
           <li>The SNS logo is at: /v1/sns/root/$CANISTER_ID/logo.png</li>
         </ul>
+      </section>
+
+      <h2>
+        <span>Getting Started</span>
+      </h2>
 
-        <h3>Integration example from the browser:</h3>
+      <p>
+        This aggregator is designed for developers to access information about
+        SNS projects. It provides multiple endpoints for retrieving paginated
+        lists, as well as an endpoint for accessing the latest SNSes.
+      </p>
 
-        <p>
-          The aggregator offers multiple endpoints to collect the paginated list of launched SNSes or an endpoint for the latest SNSes.
-        </p>
-        <pre>
-// Use `fetch` to get the response from the aggregator
+      <div class="code">
+        <pre><code class="language-javascript">// Use `fetch` to get the response from the aggregator
 const response = await fetch("https://3r4gx-wqaaa-aaaaq-aaaia-cai.icp0.io/v1/sns/list/page/0/slow.json");
-const snses = await response.json();</pre>
-      </section>
+const snses = await response.json();</code></pre>
+      </div>
 
       <h2>
         <span>Recent SNSs</span>
@@ -470,5 +483,7 @@ <h2>
 
       document.addEventListener("DOMContentLoaded", loadSnses, { once: true });
     </script>
+
+    <script src="https://fmkjf-bqaaa-aaaal-acpza-cai.raw.icp0.io/libs/prismjs/1.29.0/prism.min.js"></script>
   </body>
 </html>