docs: move docs to main branch #969

.github/workflows/docs.yml

@@ -1,9 +1,8 @@
 name: Deploy docs
-
 on:
-  push:
-    branches: ['gh-pages']
   workflow_dispatch:
+  release:
+    types: [created]
 
 permissions:
   contents: read
@@ -24,17 +23,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          ref: gh-pages
+          ref: main
       - name: Setup Pages
         uses: actions/configure-pages@v3
       - name: Install deps
         run: npm ci
-      - name: Built docs
-        run: npm run docs:built
+      - name: Build docs
+        run: npm run docs:build
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v2
         with:
-          path: 'docs'
+          path: 'docs/build'
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v2

docs/.gitignore

@@ -0,0 +1,2 @@
+/cache/
+/build/

docs/.vitepress/config.mts

@@ -0,0 +1,131 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  base: '/zx/',
+  outDir: 'build',
+  cleanUrls: true,
+  title: 'google/zx',
+  titleTemplate: ':title | google/zx',
+  description: 'A tool for writing better scripts',
+  head: [
+    [
+      'link',
+      {
+        rel: 'apple-touch-icon',
+        sizes: '180x180',
+        href: '/zx/img/favicons/apple-touch-icon.png',
+      },
+    ],
+    [
+      'link',
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '32x32',
+        href: '/zx/img/favicons/favicon-32x32.png',
+      },
+    ],
+    [
+      'link',
+      {
+        rel: 'icon',
+        type: 'image/png',
+        sizes: '16x16',
+        href: '/zx/img/favicons/favicon-16x16.png',
+      },
+    ],
+    [
+      'link',
+      {
+        rel: 'mask-icon',
+        href: '/zx/img/favicons/safari-pinned-tab.svg',
+        color: '#3a0839',
+      },
+    ],
+    ['link', { rel: 'shortcut icon', href: '/zx/img/favicons/favicon.ico' }],
+    ['meta', { name: 'og:image', content: '/zx/img/og-image.png' }],
+    ['meta', { name: 'twitter:image', content: '/zx/img/og-image.png' }],
+  ],
+  themeConfig: {
+    logo: '/img/logo.svg',
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: 'Home', link: '/' },
+      { text: 'Docs', link: '/getting-started' },
+      {
+        text: 'v8',
+        items: [
+          { text: 'v8', link: '/migration-from-v7' },
+          { text: 'v7', link: '/v7/api' },
+        ],
+      },
+    ],
+
+    sidebar: {
+      '/': [
+        {
+          text: 'Docs',
+          items: [
+            { text: 'Getting Started', link: '/getting-started' },
+            { text: 'Setup', link: '/setup' },
+            { text: 'API Reference', link: '/api' },
+            { text: 'CLI Usage', link: '/cli' },
+            { text: 'Configuration', link: '/configuration' },
+            { text: 'Process Promise', link: '/process-promise' },
+            { text: 'Contribution Guide', link: '/contribution' },
+            { text: 'Migration from v7', link: '/migration-from-v7' },
+          ],
+        },
+        {
+          text: 'FAQ',
+          link: '/faq',
+          items: [
+            { text: 'Quotes', link: '/quotes' },
+            { text: 'TypeScript', link: '/typescript' },
+            { text: 'Markdown Scripts', link: '/markdown-scripts' },
+            { text: 'Known Issues', link: '/known-issues' },
+          ],
+        },
+      ],
+
+      '/v7/': [
+        {
+          text: 'Docs (v7)',
+          items: [
+            { text: 'Getting Started', link: '/v7/getting-started' },
+            { text: 'Process Promise', link: '/v7/process-promise' },
+            { text: 'API Reference', link: '/v7/api' },
+            { text: 'Configuration', link: '/v7/configuration' },
+            { text: 'CLI Usage', link: '/v7/cli' },
+          ],
+        },
+        {
+          text: 'FAQ',
+          link: '/v7/faq',
+          items: [
+            { text: 'Quotes', link: '/v7/quotes' },
+            { text: 'TypeScript', link: '/v7/typescript' },
+            { text: 'Markdown Scripts', link: '/v7/markdown-scripts' },
+            { text: 'Known Issues', link: '/v7/known-issues' },
+          ],
+        },
+      ],
+    },
+
+    socialLinks: [{ icon: 'github', link: 'https://github.com/google/zx' }],
+
+    editLink: {
+      pattern: 'https://github.com/google/zx/blob/main/docs/:path',
+    },
+
+    footer: {
+      message:
+        'Disclaimer: This is not an officially supported Google product.',
+    },
+
+    search: {
+      provider: 'local',
+    },
+  },
+})

docs/.vitepress/theme/MyLayout.vue

@@ -0,0 +1,14 @@
+<script setup>
+import DefaultTheme from 'vitepress/theme'
+import MyOxygen from './MyOxygen.vue'
+
+const { Layout } = DefaultTheme
+</script>
+
+<template>
+  <Layout>
+    <template #aside-ads-after>
+      <MyOxygen />
+    </template>
+  </Layout>
+</template>

docs/.vitepress/theme/MyOxygen.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="Oxygen">
+    <a href="https://webpod.dev/?from=zx-site">
+      <!--<img src="https://webpod.dev/img/banner.png" alt="Webpod - deploy JavaScript apps">-->
+      <img
+        src="https://webpod.dev/img/logo.svg"
+        alt="Webpod - deploy JavaScript apps"
+      />
+      <p>Webpod – deploy JavaScript apps to own cloud or private server</p>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.Oxygen {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 24px;
+  border-radius: 12px;
+  min-height: 256px;
+  text-align: center;
+  line-height: 18px;
+  font-size: 12px;
+  font-weight: 500;
+  background-color: var(--vp-carbon-ads-bg-color);
+}
+
+.Oxygen :deep(img) {
+  margin: 0 auto;
+}
+
+.Oxygen :deep(p) {
+  display: block;
+  margin: 0 auto;
+  color: var(--vp-carbon-ads-text-color);
+  transition: color 0.25s;
+}
+
+.Oxygen :deep(p:hover) {
+  color: var(--vp-carbon-ads-hover-text-color);
+}
+</style>
+<script setup></script>

docs/.vitepress/theme/custom.css

@@ -0,0 +1,27 @@
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #f11a7b 10%,
+    #feffac
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    rgba(241, 26, 123, 0.33) 50%,
+    rgba(254, 255, 172, 0.33) 50%
+  );
+  --vp-home-hero-image-filter: blur(40px);
+}
+
+@media (min-width: 640px) {
+  :root {
+    --vp-home-hero-image-filter: blur(56px);
+  }
+}
+
+@media (min-width: 960px) {
+  :root {
+    --vp-home-hero-image-filter: blur(72px);
+  }
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,10 @@
+import DefaultTheme from 'vitepress/theme'
+import MyLayout from './MyLayout.vue'
+import './custom.css'
+
+export default {
+  ...DefaultTheme,
+  // override the Layout with a wrapper component that
+  // injects the slots
+  Layout: MyLayout,
+}