Redesign the homepage and docs theme

.github/workflows/build.yml

@@ -0,0 +1,28 @@
+name: Build
+
+# a pull request is built the way a deploy is, so dead links and build errors show up before merging
+on:
+  pull_request:
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          run_install: true
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+          cache: pnpm
+
+      - name: Build with VitePress
+        run: pnpm docs:build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/deploy-sub.yml

@@ -40,6 +40,8 @@ jobs:
 
       - name: Build with VitePress
         run: pnpm docs:build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Push build
         uses: peaceiris/actions-gh-pages@v4

.github/workflows/deploy.yml

@@ -26,6 +26,8 @@ jobs:
 
       - name: Build with VitePress
         run: pnpm docs:build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Push gh-pages
         uses: peaceiris/actions-gh-pages@v4

.vitepress/config/community.ts

@@ -0,0 +1,51 @@
+import type { DefaultTheme } from 'vitepress'
+import { LINKS } from '../links'
+
+interface Words {
+  title: string
+  connect: string
+  learn: string
+  videos: string
+  contribute: string
+  guide: string
+  language: string
+  languageAnchor: string
+}
+
+const row = (text: string, link: string, icon: string, color?: string) => ({
+  text: `<span class="g-menu-row"><span class="g-menu-icon ${icon}"${color ? ` style="color:${color}"` : ''}></span>${text}</span>`,
+  link,
+  noIcon: true // the theme only drops its external arrow for links holding an svg or img
+})
+
+export function community(words: Words, prefix = '', videos: 'youtube' | 'bilibili' = 'youtube'): DefaultTheme.NavItemWithChildren {
+  return {
+    text: words.title,
+    items: [
+      {
+        text: words.connect,
+        items: [
+          row('Discord', LINKS.discord, 'icon-[simple-icons--discord]', '#5865F2'),
+          row('X', LINKS.x, 'icon-[simple-icons--x]', '#000000')
+        ]
+      },
+      {
+        text: words.learn,
+        items: [
+          videos === 'youtube'
+            ? row(words.videos, LINKS.youtube, 'icon-[simple-icons--youtube]', '#FF0000')
+            : row(words.videos, LINKS.bilibili, 'icon-[simple-icons--bilibili]', '#00A1D6'),
+          row('DevChalk', LINKS.devchalk, 'is-devchalk')
+        ]
+      },
+      {
+        text: words.contribute,
+        items: [
+          row(words.guide, `${prefix}/prologue/contributions`, 'icon-[lucide--git-pull-request]'),
+          row(words.language, `${prefix}/prologue/contributions#${words.languageAnchor}`, 'icon-[lucide--languages]'),
+          row('Open Collective', LINKS.openCollective, 'icon-[simple-icons--opencollective]', '#7FADF2')
+        ]
+      }
+    ]
+  }
+}

.vitepress/config/en.ts

@@ -1,4 +1,5 @@
 import { defineConfig, type DefaultTheme } from 'vitepress'
+import { community } from './community'
 
 export const config = defineConfig({
   lang: 'en-US',
@@ -10,56 +11,67 @@ export const config = defineConfig({
       {
         text: 'Prologue',
         base: '/prologue/',
+        collapsed: true,
         items: sidebarPrologue()
       },
       {
         text: 'Upgrade',
         base: '/upgrade/',
+        collapsed: true,
         items: sidebarUpgrade()
       },
       {
         text: 'Getting Started',
         base: '/getting-started/',
+        collapsed: true,
         items: sidebarGettingStarted()
       },
       {
         text: 'Architecture Concepts',
         base: '/architecture-concepts/',
+        collapsed: true,
         items: sidebarFoundation()
       },
       {
         text: 'The Basics',
         base: '/the-basics/',
+        collapsed: true,
         items: sidebarBasic()
       },
       {
         text: 'Digging Deeper',
         base: '/digging-deeper/',
+        collapsed: true,
         items: sidebarAdvanced()
       },
       {
         text: 'AI',
         base: '/ai/',
+        collapsed: true,
         items: sidebarAI()
       },
       {
         text: 'Security',
         base: '/security/',
+        collapsed: true,
         items: sidebarSecurity()
       },
       {
         text: 'Database',
         base: '/database/',
+        collapsed: true,
         items: sidebarDatabase()
       },
       {
         text: 'ORM',
         base: '/orm/',
+        collapsed: true,
         items: sidebarOrm()
       },
       {
         text: 'Testing',
         base: '/testing/',
+        collapsed: true,
         items: sidebarTesting()
       }
     ],
@@ -99,44 +111,32 @@ export const config = defineConfig({
 function nav(): DefaultTheme.NavItem[] {
   return [
     {
-      text: 'Quickstart',
+      text: 'Docs',
       link: '/getting-started/installation',
-      activeMatch: '/getting-started/'
-    },
-    {
-      text: 'Video Tutorials',
-      items: [
-        {
-          text: '<span style="display:inline-flex;align-items:center;gap:6px;"><img src="https://www.youtube.com/favicon.ico" alt="" aria-hidden="true" style="width:14px;height:14px;display:block;" /><span>YouTube</span></span>',
-          link: 'https://www.youtube.com/playlist?list=PL40Xne4u-oXJ0Z5uFiPWHqIMvzZaG_BDf'
-        },
-        {
-          text: '<span style="display:inline-flex;align-items:center;gap:6px;"><img src="https://devchalk.com/mark-480.webp" alt="" aria-hidden="true" style="width:14px;height:14px;border-radius:3px;display:block;" /><span>DevChalk</span></span>',
-          link: 'https://devchalk.com/goravel'
-        },
-      ]
-    },
-    {
-      text: 'Versions',
-      items: [
-        {
-          text: 'v1.18 (Latest)',
-          link: 'https://www.goravel.dev/'
-        },
-        {
-          text: 'v1.17',
-          link: 'https://v117.goravel.dev/'
-        },
-        {
-          text: 'v1.16',
-          link: 'https://v116.goravel.dev/'
-        },
-      ]
-    },
-    {
-      text: 'Translate',
-      link: '/prologue/contributions#add-a-new-language'
-    }
+      activeMatch: '^/(?!getting-started/packages)(getting-started|architecture-concepts|the-basics|digging-deeper|database|orm|testing|security|ai)/'
+    },
+    {
+      text: 'Packages',
+      link: '/getting-started/packages',
+      activeMatch: '^/getting-started/packages'
+    },
+    {
+      text: 'Releases',
+      link: '/prologue/releases',
+      activeMatch: '^/(prologue/releases|upgrade/)'
+    },
+    community(
+      {
+        title: 'Community',
+        connect: 'Connect',
+        learn: 'Learn',
+        videos: 'Video Tutorials',
+        contribute: 'Contribute',
+        guide: 'Contribution Guide',
+        language: 'Add a Language',
+        languageAnchor: 'add-a-new-language'
+      }
+    )
   ]
 }
 

.vitepress/config/goravel-code.ts

@@ -0,0 +1,36 @@
+import type { ThemeOptions } from 'vitepress'
+
+const INK = '#101820'
+const GREY = '#68747d'
+const CYAN = '#0077b3'
+const RED = '#b02b2b'
+
+const rule = (scope: string[], foreground: string) => ({ scope, settings: { foreground } })
+
+export const goravelCode: ThemeOptions = {
+  name: 'goravel',
+  type: 'light',
+  // transparent, so a callout's lighter ground shows through
+  colors: { 'editor.background': '#00000000', 'editor.foreground': INK },
+  tokenColors: [
+    { settings: { foreground: INK } },
+    rule(['comment', 'punctuation.definition.comment', 'string.comment'], GREY),
+    rule(['keyword', 'storage', 'constant.language', 'variable.language'], INK),
+    rule(['entity.name.function', 'support.function', 'entity.name.command'], CYAN),
+    rule(['string', 'constant.numeric', 'constant.character'], GREY),
+    rule(['punctuation', 'keyword.operator', 'meta.brace'], GREY),
+    rule(['markup.inserted', 'meta.diff.header.to-file'], CYAN),
+    rule(['markup.deleted', 'meta.diff.header.from-file'], RED),
+    // narrower scopes that override the grey and cyan rules above
+    rule(
+      [
+        'entity.name.type', 'entity.name.class', 'entity.name.package', 'entity.name.import.go',
+        'support.type', 'support.class', 'storage.type.numeric.go', 'storage.type.string.go',
+        'storage.type.boolean.go', 'storage.type.byte.go', 'storage.type.error.go',
+        'variable', 'meta.definition.variable', 'punctuation.definition.variable.php',
+        'string.unquoted.argument.shell', 'constant.other.option'
+      ],
+      INK
+    )
+  ]
+}