MathJax kata preview fixes (#1508)

This fixes an issue with `\braket` where it was doubling up the entries. The preview today shows: <img width="782" alt="image" src="https://github.com/microsoft/qsharp/assets/993909/4adcfbd9-6660-42f6-8943-623d7e0d488a"> The fix was to replace physics with braket package. (Not sure why, will log a MathJax bug for that also). The below two items I was playing with a week ago, but including here: - Made the page render one kata at a time, and supports linking to a kata via the URL and forward/back navigation between katas without a page reload. (As on slow machines putting every kata on the one page was too slow) - Converted to Preact to match the rest of our code, instead of manipulating DOM elements directly.
microsoft · May 13, 2024 · 6322628 · 6322628
1 parent b01fe50
commit 6322628
Show file tree

Hide file tree

Showing 4 changed files with 249 additions and 158 deletions.
diff --git a/playground/build.js b/playground/build.js
@@ -35,7 +35,7 @@ const buildOptions = {
     join(thisDir, "src/main.tsx"),
     join(thisDir, "src/compiler-worker.ts"),
     join(thisDir, "src/language-service-worker.ts"),
-    join(thisDir, "src/kataViewer.ts"),
+    join(thisDir, "src/kataViewer.tsx"),
   ],
   outdir,
   bundle: true,

diff --git a/playground/public/katas.html b/playground/public/katas.html
@@ -4,9 +4,18 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Katas MathJax review</title>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/github-markdown-css@5.5.1/github-markdown-light.css"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/default.min.css"
+    />
     <style>
       body {
         font-family: system-ui, "Segoe UI", sans-serif;
+        margin: 0;
       }
       table {
         border-spacing: 0;
@@ -21,22 +30,42 @@
         border: 0.5px solid gray;
         padding: 8px;
       }
+      .nav {
+        /* background: lightblue; */
+        width: 320px;
+        height: 100vh;
+        padding-top: 16px;
+        position: fixed;
+        overflow-y: auto;
+        background-color: #eee;
+      }
+      .content {
+        margin-left: 330px;
+        padding: 16px;
+        width: calc(100% - 362px);
+        /* height: 100vh; */
+        overflow-y: auto;
+        /* background: lightcyan; */
+      }
+      .nav-item {
+        font-size: 1.1em;
+        padding: 8px;
+        color: #444;
+      }
+      .nav-item:hover {
+        background-color: #ddd;
+      }
+      .nav-selected {
+        font-weight: 600;
+        background-color: #ccc;
+      }
     </style>
-    <link
-      rel="stylesheet"
-      href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/default.min.css"
-    />
   </head>
   <body>
-    <div id="errors"></div>
-    <h1>Azure Quantum Katas</h1>
-    <p>
-      This is a very basic rendering of the Azure Quantum Katas using MathJax
-      for content review purposes
-    </p>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
-    <script src="https://unpkg.com/highlightjs-qsharp/dist/qsharp.min.js"></script>
+    <div id="app"></div>
     <script src="libs/kataViewer.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
+    <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/highlight.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/highlightjs-qsharp@1.0.2/dist/qsharp.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/mathjax@3.2.2/es5/tex-mml-chtml.js"></script>
   </body>
 </html>
diff --git a/playground/src/kataViewer.ts b/playground/src/kataViewer.ts