fix: website bug fixes

- /unofficial-documentation as basepath
- upgrade stoplight/elements
- alter hybrids with solid-element

.github/workflows/deploy.yaml

@@ -48,7 +48,7 @@ jobs:
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: build/
+          path: build/unofficial-documentation
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v4

index.html

@@ -35,8 +35,8 @@
     />
     <meta name="twitter:card" content="summary_large_image" />
 
-    <link rel="icon" type="svg" href="favicon.svg" />
-    <script src="vendors/@stoplight/elements/web-components.min.js"></script>
+    <link rel="icon" type="svg" href="/unofficial-documentation/favicon.svg" />
+    <script src="/unofficial-documentation/vendors/@stoplight/elements/web-components.min.js"></script>
     <link
       rel="stylesheet"
       href="https://unpkg.com/@stoplight/elements/styles.min.css"
@@ -275,9 +275,9 @@
     </script>
     <elements-api
       id="elements"
-      apiDescriptionUrl="tsp-output/@typespec/openapi3/openapi.yaml"
+      apiDescriptionUrl="/unofficial-documentation/tsp-output/@typespec/openapi3/openapi.yaml"
       router="hash"
-      logo="./favicon.svg"
+      logo="/unofficial-documentation/favicon.svg"
       tryItCredentialsPolicy="include"
       layout="responsive"
       hideInternal="true"
@@ -464,38 +464,40 @@
     </script>
   </body>
   <script type="module">
-    import { define, html } from 'https://esm.sh/hybrids@^8';
+    import { createMemo } from 'https://esm.sh/solid-js@^1.8.19';
+    import { customElement } from 'https://esm.sh/solid-element@^1.8.1';
+    import html from 'https://esm.sh/[email protected]/html';
 
-    define({
-      tag: 'solved-icon',
-      type: '',
-      render: ({ type }) => {
-        const iconMap = [
-          {
-            filter: /solve-tier:(\d+|nr)/,
-            url: (match) =>
-              `https://static.solved.ac/tier_small/${match[1]}.svg`,
-          },
-          {
-            filter: /arena-tier:(\d+)/,
-            url: (match) =>
-              `https://static.solved.ac/tier_arena/${match[1]}.svg`,
-            classList: () => ['icon-arena-tier'],
-          },
-          {
-            filter: /class:(\d+[sg]?)/,
-            url: (match) => `https://static.solved.ac/class/c${match[1]}.svg`,
-            classList: () => ['class'],
-          },
-        ];
-        const got = iconMap
-          .flatMap(({ filter, url, classList }) => {
-            const match = filter.exec(type);
-            return match ? [[url(match), classList?.(match) ?? []]] : [];
-          })
-          .at(0) ?? [null, null];
-        const [src, classList] = got;
-        return html`<img src="${src}" class=${classList} />`.css`
+    const iconMap = [
+      {
+        filter: /solve-tier:(\d+|nr)/,
+        url: (match) => `https://static.solved.ac/tier_small/${match[1]}.svg`,
+      },
+      {
+        filter: /arena-tier:(\d+)/,
+        url: (match) => `https://static.solved.ac/tier_arena/${match[1]}.svg`,
+        classList: () => ['icon-arena-tier'],
+      },
+      {
+        filter: /class:(\d+[sg]?)/,
+        url: (match) => `https://static.solved.ac/class/c${match[1]}.svg`,
+        classList: () => ['class'],
+      },
+    ];
+    customElement('solved-icon', { type: '' }, (props) => {
+      const findIcon = createMemo(
+        () =>
+          iconMap
+            .flatMap(({ filter, url, classList }) => {
+              const match = filter.exec(props.type);
+              return match
+                ? [{ src: url(match), classList: classList?.(match) ?? [] }]
+                : [];
+            })
+            .at(0) ?? [null, null],
+      );
+      return html`
+        <style>
           img {
             display: inline-block;
             height: 1em;
@@ -509,8 +511,9 @@
             height: 2em;
             vertical-align: top;
           }
-        `;
-      },
+        </style>
+        <img src="${findIcon().src}" class="${findIcon().classList}" />
+      `;
     });
   </script>
 </html>

package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "dev": "concurrently npm:watch npm:serve",
     "build": "node ./scripts/build.js",
-    "watch": "nodemon --exec tsp compile src -e tsp",
-    "serve": "srr --port=8481 --ignore=node_modules/ --proxy=https://solved.ac/api/v3",
+    "watch": "nodemon --exec pnpm build -e tsp",
+    "serve": "srr --port=8481 --ignore=node_modules/ --proxy=https://solved.ac/api/v3 --root=build/",
     "format": "prettier -w src",
     "lint:format": "prettier -c src",
     "prepare": "git config core.hooksPath ./scripts/git-hooks"

patches/serve-reload-replace@4.0.3.patch

@@ -85,7 +85,7 @@ index 9c49dcdfa10772985ae3ac8230c75a6b2a72ad13..2b082beec37037ebd8d948194a7cccac
          } catch (err) {
            const error = new Error(`Error Loading Client: ${err.message}`)
 diff --git a/lib/server.js b/lib/server.js
-index 50590f6c1e4f83481a310c2b253e707ed808b3f2..383899de32a33d02474d4de8e84dcdf40a7e8c24 100644
+index 50590f6c1e4f83481a310c2b253e707ed808b3f2..9701856ccc00dbb90639d36b63f591322b2e1f19 100644
 --- a/lib/server.js
 +++ b/lib/server.js
 @@ -15,7 +15,7 @@ class SRR {
@@ -106,6 +106,15 @@ index 50590f6c1e4f83481a310c2b253e707ed808b3f2..383899de32a33d02474d4de8e84dcdf4
 
      /* istanbul ignore next */
      watcher.on('ready', () => log('%dot:green Watching files in %s:yellow', cwd))
+@@ -35,7 +35,7 @@ class SRR {
+       this.exit()
+     })
+
+-    this.#instance.on('listening', () => log('%dot:green Listening on %s:yellow %d:red', this.#instance.address().address, this.#instance.address().port))
++    this.#instance.on('listening', () => log('%dot:green Listening on http://%s:yellow:%d:red/unofficial-documentation', this.#instance.address().address, this.#instance.address().port))
+     this.#instance.on('close', async () => {
+       log('%dot:red Server Stopped')
+
 @@ -44,7 +44,7 @@ class SRR {
      })