Add WorldVM homepage banner and remove prerelease warning

docs/.vitepress/theme/custom.css

@@ -16,7 +16,7 @@
   --vp-code-tab-hover-text-color: #f3f5ff;
   --vp-code-tab-active-text-color: #f3f5ff;
   --vp-nav-height: 72px;
-  --vp-layout-top-height: 32px;
+  --vp-layout-top-height: 0px;
 }
 
 .dark {
@@ -38,28 +38,60 @@ body {
   letter-spacing: -0.008em;
 }
 
-.triplex-prerelease {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: var(--vp-z-index-layout-top);
-  box-sizing: border-box;
+.worldvm-incubation {
   width: 100%;
-  height: var(--vp-layout-top-height);
-  border-bottom: 1px solid color-mix(in srgb, var(--vp-c-warning-1) 28%, var(--vp-c-divider));
-  background: color-mix(in srgb, #eab308 15%, var(--vp-c-bg));
-  color: var(--vp-c-text-1);
-  padding: 7px 16px;
-  overflow: hidden;
+  padding: 10px 16px;
+  border-bottom: 1px solid #e7e5e4;
+  background: #f5f5f4;
+  color: #44403c;
+  font-family:
+    ui-sans-serif,
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
   font-size: 13px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: normal;
   text-align: center;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
-.triplex-prerelease a {
-  color: var(--vp-c-warning-1);
+.worldvm-incubation p {
+  margin: 0;
+}
+
+.worldvm-incubation a {
+  color: inherit;
   font-weight: 600;
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+.worldvm-incubation a:focus-visible {
+  outline: 2px solid currentColor;
+  outline-offset: 3px;
+}
+
+/* Let the homepage banner scroll away without overlapping the navigation. */
+.triplex-index .VPNav {
+  position: sticky;
+  top: 0;
+}
+
+.triplex-index .VPNavBar .content-body {
+  margin-right: 0;
+  padding-right: 0;
+}
+
+.triplex-index .VPContent {
+  padding-top: 0;
+}
+
+/* The mobile menu fills the viewport beneath its navigation controls. */
+.triplex-index .VPNav:has(.screen-open) {
+  position: fixed;
 }
 
 .VPNavBar {

docs/.vitepress/theme/index.ts

@@ -1,23 +1,33 @@
 import "@fontsource-variable/ibm-plex-sans";
 import "@fontsource/ibm-plex-mono/400.css";
-import type { Theme } from "vitepress";
+import { type Theme, useData } from "vitepress";
 import DefaultTheme from "vitepress/theme-without-fonts";
-import { h } from "vue";
+import { defineComponent, h } from "vue";
 
 import "./custom.css";
 import Playground from "./Playground.vue";
 import TriplexExplorer from "./TriplexExplorer.vue";
 
 export default {
   extends: DefaultTheme,
-  Layout: () =>
-    h(DefaultTheme.Layout, null, {
-      "layout-top": () =>
-        h("div", { class: "triplex-prerelease", role: "status" }, [
-          "Pre-1.0 · seven public packages available on npm · ",
-          h("a", { href: "/current-state" }, "current state"),
-        ]),
-    }),
+  Layout: defineComponent({
+    setup() {
+      const { frontmatter } = useData();
+      return () =>
+        h(DefaultTheme.Layout, null, {
+          "layout-top": () =>
+            frontmatter.value.pageClass === "triplex-index"
+              ? h("div", { class: "worldvm-incubation" }, [
+                  h("p", null, [
+                    "Triplex is an incubation project within ",
+                    h("a", { href: "https://worldvm.com/" }, "WorldVM"),
+                    ".",
+                  ]),
+                ])
+              : null,
+        });
+    },
+  }),
   enhanceApp({ app }) {
     app.component("TriplexPlayground", Playground);
     app.component("TriplexExplorer", TriplexExplorer);