docs(site): terminal demo, workflows and security on the homepage

site/.vitepress/theme/HeroDemo.vue

@@ -57,7 +57,7 @@ function stop() {
   padding: 0;
   border-radius: 12px;
   cursor: pointer;
-  box-shadow: 0 30px 70px -28px rgb(194 65 12 / 0.55), 0 2px 10px rgb(0 0 0 / 0.25);
+  box-shadow: 0 20px 48px -24px rgb(0 0 0 / 0.45);
 }
 
 .screen img {

site/.vitepress/theme/HomeWorkflows.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useData, withBase } from 'vitepress'
+
+type Workflow = { title: string; details: string; commands: string[]; link: string }
+
+const { frontmatter } = useData()
+const workflows = computed<Workflow[]>(() => frontmatter.value.workflows ?? [])
+</script>
+
+<template>
+  <div class="workflows">
+    <article v-for="w in workflows" :key="w.title" class="workflow">
+      <h3>{{ w.title }}</h3>
+      <p>{{ w.details }}</p>
+      <pre><code><template v-for="(c, i) in w.commands" :key="i"><span class="prompt" aria-hidden="true">$ </span>{{ c }}{{ i < w.commands.length - 1 ? '\n' : '' }}</template></code></pre>
+      <a :href="withBase(w.link)">{{ frontmatter.workflowsMore }} →</a>
+    </article>
+  </div>
+</template>
+
+<style scoped>
+.workflows {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
+  gap: 16px;
+  margin-top: 24px;
+}
+
+.workflow {
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 10px;
+  background: var(--vp-c-bg-soft);
+}
+
+.vp-doc .workflow h3 {
+  margin: 0 0 8px;
+  font-size: 16px;
+  line-height: 1.4;
+}
+
+.vp-doc .workflow p {
+  flex: 1;
+  margin: 0 0 14px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--vp-c-text-2);
+}
+
+.workflow pre {
+  margin: 0 0 14px;
+  padding: 10px 12px;
+  white-space: pre-wrap;
+  border-radius: 6px;
+  background: var(--vp-code-block-bg);
+}
+
+.vp-doc .workflow pre code {
+  padding: 0;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--vp-c-text-1);
+  background: none;
+}
+
+.prompt {
+  color: var(--vp-c-brand-1);
+  user-select: none;
+}
+
+.vp-doc .workflow a {
+  font-size: 14px;
+  font-weight: 500;
+  text-decoration: none;
+}
+</style>

site/.vitepress/theme/index.ts

@@ -3,10 +3,14 @@ import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import HeroDemo from './HeroDemo.vue'
 import HeroInstall from './HeroInstall.vue'
+import HomeWorkflows from './HomeWorkflows.vue'
 import './style.css'
 
 export default {
   extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component('HomeWorkflows', HomeWorkflows)
+  },
   Layout: () =>
     h(DefaultTheme.Layout, null, {
       'home-hero-info-after': () => h(HeroInstall),

site/.vitepress/theme/style.css

@@ -10,10 +10,7 @@
   --vp-button-brand-active-bg: #9a3412;
   --vp-button-brand-text: #fff;
 
-  --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: linear-gradient(110deg, #c2410c 10%, #f59e0b 90%);
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #f59e0b 40%, #ea580c 60%);
-  --vp-home-hero-image-filter: blur(56px);
+  --vp-home-hero-name-color: var(--vp-c-brand-1);
 
   --vp-code-block-bg: #fbf7f3;
   --vp-code-line-highlight-color: rgb(234 88 12 / 0.1);
@@ -34,20 +31,13 @@
   --vp-button-brand-hover-bg: #f97316;
   --vp-button-brand-active-bg: #c2410c;
 
-  --vp-home-hero-name-background: linear-gradient(110deg, #fb923c 10%, #fcd34d 90%);
-  --vp-home-hero-image-filter: blur(64px);
-
   --vp-c-bg: #14110f;
   --vp-c-bg-alt: #0f0d0c;
   --vp-c-bg-elv: #1c1815;
   --vp-c-bg-soft: #1b1714;
   --vp-code-block-bg: #0f0d0c;
 }
 
-.dark .VPHome {
-  --vp-home-hero-image-background-image: linear-gradient(-45deg, #c2410c 40%, #b45309 60%);
-}
-
 /* Code reads better with more room than the default 1.6 line height. */
 .vp-doc div[class*='language-'] {
   border: 1px solid var(--vp-c-divider);
@@ -76,18 +66,35 @@
 }
 
 .VPHome .vp-doc h2 {
-  margin-top: 56px;
-  text-align: center;
+  margin-top: 64px;
+  padding-top: 0;
   letter-spacing: -0.01em;
 }
 
-.VPFeature {
-  transition: border-color 0.2s, transform 0.2s;
+/* Terminal tabs: long output scrolls inside the block instead of stretching the page. */
+.VPHome .vp-code-group div[class*='language-'] pre {
+  max-height: 460px;
+  overflow: auto;
+}
+
+.VPHome .vp-code-group span.lang {
+  display: none;
+}
+
+.home-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
+  gap: 8px 32px;
+}
+
+.vp-doc .home-grid h3 {
+  margin-top: 16px;
+  font-size: 17px;
 }
 
-.VPFeature:hover {
-  border-color: var(--vp-c-brand-1) !important;
-  transform: translateY(-2px);
+.vp-doc .home-grid p {
+  margin: 8px 0;
+  color: var(--vp-c-text-2);
 }
 
 .VPHero .text {
@@ -100,21 +107,14 @@
   overflow-wrap: break-word;
 }
 
-/* Hero: a tinted band in the accent colour, demo in the right column on wide screens. */
+/* Hero: a plain band set off by a rule, demo in the right column on wide screens. */
 .VPHome {
   overflow-x: clip;
 }
 
 .VPHomeHero {
-  background:
-    radial-gradient(ellipse 70% 90% at 78% 30%, rgb(234 88 12 / 0.16), transparent 70%),
-    linear-gradient(180deg, rgb(234 88 12 / 0.06), transparent 85%);
-}
-
-.dark .VPHomeHero {
-  background:
-    radial-gradient(ellipse 70% 90% at 78% 30%, rgb(234 88 12 / 0.28), transparent 70%),
-    linear-gradient(180deg, #0b0908, transparent 90%);
+  border-bottom: 1px solid var(--vp-c-divider);
+  background: var(--vp-c-bg-alt);
 }
 
 .VPHero .image,