Support custom Pages deployment

Author: fffonion

.github/workflows/pages.yml

@@ -46,11 +46,11 @@ jobs:
         working-directory: app
         env:
           RUSTSCRIPT_REPO: ${{ github.workspace }}/rustscript
-          VITE_BASE: /playground/
       - name: Deploy to gh-pages
         uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           publish_branch: gh-pages
           publish_dir: app/dist
+          cname: rustscript.org
           force_orphan: true

public/CNAME

@@ -0,0 +1 @@
+rustscript.org

src/playgroundShell.ts

@@ -203,6 +203,10 @@ export function mountPlaygroundUi(
               <span>Run or debug directly in wasm runtime with Monaco breakpoints, stepping controls, and hover variable inspect.</span>
               <span><a href="./about.html">Read more about the VM & RustScript here.</a></span>
             </p>
+            <nav class="hero-links" aria-label="project links">
+              <a href="https://github.com/rustscript-lang/playground" rel="noreferrer" target="_blank">Playground repo</a>
+              <a href="https://github.com/rustscript-lang/rustscript" rel="noreferrer" target="_blank">RustScript repo</a>
+            </nav>
           </div>
         </div>
       </section>

src/style.css

@@ -176,6 +176,32 @@ body {
   text-underline-offset: 0.18em;
 }
 
+.hero-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-top: 0.65rem;
+}
+
+.hero-links a {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
+  border-radius: 999px;
+  padding: 0.3rem 0.65rem;
+  background: color-mix(in srgb, var(--surface-elevated) 82%, var(--accent) 8%);
+  color: var(--accent);
+  font-size: 0.82rem;
+  font-weight: 700;
+  line-height: 1;
+  text-decoration: none;
+}
+
+.hero-links a:hover {
+  border-color: color-mix(in srgb, var(--accent) 52%, transparent);
+  background: color-mix(in srgb, var(--surface-elevated) 72%, var(--accent) 14%);
+}
+
 .workspace {
   min-height: 0;
   height: 100%;