#403 use vitepress for docs

.github/workflows/build_docs.yml

@@ -10,8 +10,7 @@ on:
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:
-  # This workflow contains a single job called "build"
-  build:
+  build-api-docs:
     # The type of runner that the job will run on
     runs-on: ubuntu-latest
 
@@ -29,19 +28,11 @@ jobs:
       - run: npm install
 
       - run: npm run docs
-      
+
       - name: Install deps for Gridsome
         working-directory: ./docs
         run: npm install
-
-      - name: Deploy with gh-pages
-        working-directory: ./docs
-        run: |
-          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
-          npm run deploy -- -u "github-actions-bot <support+actions@github.com>"
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
+
       - uses: EndBug/add-and-commit@v7 # You can change this to use a specific version
         with:
           # Determines the way the action fills missing author name and email. Three options are available:
@@ -60,3 +51,30 @@ jobs:
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
           branch: master
+  deploy:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
+          cache: npm
+      - run: npm ci
+      - name: Build
+        run: npm run docs:build
+      - uses: actions/configure-pages@v2
+      - uses: actions/upload-pages-artifact@v1
+        with:
+          path: docs/.vitepress/dist
+      - name: Deploy
+        id: deployment
+        uses: actions/deploy-pages@v1

.gitignore

@@ -10,6 +10,8 @@ docs/node_modules
 docs/**/*.d.ts
 speedtests/old
 speedtests/run.js
+docs/.vitepress/dist
+docs/.vitepress/cache
 
 # stryker temp files
 .stryker-tmp

docs/.vitepress/config.js

@@ -0,0 +1,122 @@
+import { defineConfig } from 'vitepress'
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "Grid Engine Documentation",
+  base: "/grid-engine/",
+  description: "Documentation for the Grid Engine Phaser plugin. Learn how to add grid based movement to your games.",
+  head: [
+    ['link', { rel: "icon", type: "image/png", sizes: "96x96", href: "/favicon.png" }],
+  ],
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    siteTitle: false,
+    externalLinkIcon: true,
+    // logo: { light: '/img/grid-engine-logo.png', dark: 'img/grid-engine-logo-dark.png', alt: 'Grid Engine Logo' },
+    search: {
+      provider: 'local'
+    },
+    nav: [
+      { text: 'API reference', link: 'https://annoraaq.github.io/grid-engine/api' },
+      { text: 'Dev Tools Plugin', link: 'https://github.com/zewa666/grid-engine-devtools' },
+    ],
+
+    sidebar: [
+      {
+        text: 'Getting Started',
+        collapsed: false,
+        items: [
+          { text: 'Why Grid Engine?', link: '/p/why-grid-engine/index.md' },
+          { text: 'Installation', link: '/p/installation/index.md' },
+        ]
+      },
+      {
+        text: 'Usage',
+        collapsed: false,
+        items: [
+          { text: 'Execute Examples Locally', link: '/p/execute-examples-locally/index.md' },
+          { text: 'Collision', link: '/p/collision/index.md' },
+          { text: 'Collision Layers', link: '/p/collision-layers/index.md' },
+          { text: 'Tile Properties', link: '/p/tile-properties/index.md' },
+          { text: 'Layer Properties', link: '/p/layer-properties/index.md' },
+          { text: 'Height Shift', link: '/p/height-shift/index.md' },
+          { text: 'Character Layers', link: '/p/character-layers/index.md' },
+          { text: 'Layer Overlay', link: '/p/layer-overlay/index.md' },
+          { text: 'Pathfinding Performance', link: '/p/pathfinding-performance/index.md' },
+          { text: 'Tiled Project', link: '/p/tiled-project/index.md' },
+        ]
+      },
+      {
+        text: 'Examples',
+        collapsed: true,
+        items: [
+          { text: 'Basic Movement', link: '/examples/basic-movement/index.md' },
+          { text: 'Collision Groups', link: '/examples/collision-groups/index.md' },
+          { text: 'Crowd', link: '/examples/crowd/index.md' },
+          { text: 'Facing Direction', link: '/examples/facing-direction/index.md' },
+          { text: 'Height Shift', link: '/examples/height-shift/index.md' },
+          { text: 'Ice Movement', link: '/examples/ice-movement/index.md' },
+          { text: 'Is Moving', link: '/examples/is-moving/index.md' },
+          { text: 'Isometric', link: '/examples/isometric/index.md' },
+          { text: 'One-Way Collision', link: '/examples/one-way-collision/index.md' },
+          { text: 'Phaser Containers', link: '/examples/phaser-container/index.md' },
+          { text: 'Position Changed', link: '/examples/position-changed/index.md' },
+          { text: 'Radius Movement', link: '/examples/radius-movement/index.md' },
+          { text: 'Random Movement', link: '/examples/random-movement/index.md' },
+          { text: 'Queue Directions Movement', link: '/examples/queue-directions-movement/index.md' },
+          {
+            text: "Char Layers",
+            collapsed: false,
+            items: [
+              { text: 'Bridge', link: '/examples/char-layers-bridge/index.md' },
+              { text: 'Flying Chars', link: '/examples/char-layers-flying-chars/index.md' },
+              { text: 'Flying Chars with Shadows', link: '/examples/char-layers-flying-chars-shadows/index.md' },
+
+            ]
+          },
+          {
+            text: "Walking Animations",
+            collapsed: false,
+            items: [
+              { text: 'Custom Walking Animation', link: '/examples/custom-walking-animation/index.md' },
+              { text: 'Custom Walking Animation Mapping', link: '/examples/custom-walking-animation-mapping/index.md' },
+            ]
+          },
+          {
+            text: "Pathfinding",
+            collapsed: false,
+            items: [
+              { text: 'Following', link: '/examples/following/index.md' },
+              { text: 'Move To', link: '/examples/move-to/index.md' },
+              { text: 'Move To (multi-tile)', link: '/examples/mult-tile-move-to/index.md' },
+              { text: 'Pathfinding Restriction', link: '/examples/pathfinding-restriction/index.md' },
+              { text: 'Tile Costs for Pathfinding', link: '/examples/path-costs/index.md' },
+
+            ]
+          },
+          {
+            text: "8 Directions",
+            collapsed: false,
+            items: [
+              { text: 'Crowd', link: '/examples/8-dir-crowd/index.md' },
+              { text: 'Facing Directions', link: '/examples/8-dir-facing-direction/index.md' },
+              { text: 'Following', link: '/examples/8-dir-following/index.md' },
+              { text: 'Isometric', link: '/examples/8-dir-isometric/index.md' },
+              { text: 'Move To', link: '/examples/8-dir-move-to/index.md' },
+              { text: 'Movement', link: '/examples/8-dir-movement/index.md' },
+              { text: 'Move To (multi-tile)', link: '/examples/8-dir-multi-tile-move-to/index.md' },
+
+            ]
+          },
+        ]
+      },
+      { text: 'Troubleshooting', link: '/p/known-errors/index.md' },
+      { text: 'Migrate to Version 2', link: '/p/migrate-to-2/index.md' },
+    ],
+
+    socialLinks: [
+      { icon: 'github', link: 'https://github.com/Annoraaq/grid-engine', ariaLabel: "Github link" },
+      { icon: 'discord', link: 'https://discord.gg/C4jNEZJECs', ariaLabel: "Discord link" }
+    ]
+  },
+})

docs/.vitepress/theme/custom.css

@@ -0,0 +1,34 @@
+:root {
+  --vp-nav-height: 80px;
+
+  --brand-light: #D8E9A8;
+  --brand-medium: #4E9F3D;
+  --brand-medium-bright: #9ae78b;
+  --brand-dark: #1E5128;
+  --brand-black: #191A19;
+
+  --vp-c-brand: var(--brand-medium);
+  --vp-c-brand-light: var(--brand-medium-bright);
+  --vp-c-brand-lighter: var(--brand-medium-light);
+  --vp-c-brand-dark: var(--brand-medium-dark);
+  --vp-c-brand-darker: var(--brand-medium-black);
+
+  --vp-c-text-code: var(--brand-dark);
+
+  --vp-button-brand-hover-bg: var(--brand-dark);
+
+  --vp-home-hero-name-background: linear-gradient( 120deg, #4E9F3D 30%, #1E5128 );
+  --vp-home-hero-image-background-image: none;
+
+  .has-sidebar .title {
+    background-color: var(--vp-sidebar-bg-color);
+  }
+
+}
+
+.dark {
+  --vp-c-text-code: var(--brand-light);
+  --vp-button-brand-hover-bg: var(--brand-black);
+  --vp-button-alt-hover-bg: hsl(240, 5%, 30%);
+  --vp-home-hero-name-background: linear-gradient( 120deg, #D8E9A8 30%, #4E9F3D );
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,23 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from 'vue'
+import Theme from 'vitepress/theme'
+import './style.css'
+import './custom.css'
+import Logo from '../../components/Logo.vue'
+import Grid from '../../components/Grid.vue'
+
+export default {
+  extends: Theme,
+  Layout: () => {
+    return h(Theme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+      'nav-bar-title-before': () => h(Logo),
+      // 'doc-top': () => h(Logo),
+      'home-hero-image': () => h(Grid)
+      // 'home-hero-image': () => h(Logo)
+    })
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  }
+}

docs/.vitepress/theme/style.css

@@ -0,0 +1,91 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+ :root {
+  --vp-c-brand: #646cff;
+  --vp-c-brand-light: #747bff;
+  --vp-c-brand-lighter: #9499ff;
+  --vp-c-brand-lightest: #bcc0ff;
+  --vp-c-brand-dark: #535bf2;
+  --vp-c-brand-darker: #454ce1;
+  --vp-c-brand-dimm: rgba(100, 108, 255, 0.08);
+}
+
+/**
+ * Component: Button
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-button-brand-border: var(--vp-c-brand-light);
+  --vp-button-brand-text: var(--vp-c-white);
+  --vp-button-brand-bg: var(--vp-c-brand);
+  --vp-button-brand-hover-border: var(--vp-c-brand-light);
+  --vp-button-brand-hover-text: var(--vp-c-white);
+  --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+  --vp-button-brand-active-border: var(--vp-c-brand-light);
+  --vp-button-brand-active-text: var(--vp-c-white);
+  --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+}
+
+/**
+ * Component: Home
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-home-hero-name-color: transparent;
+  --vp-home-hero-name-background: -webkit-linear-gradient(
+    120deg,
+    #bd34fe 30%,
+    #41d1ff
+  );
+
+  --vp-home-hero-image-background-image: linear-gradient(
+    -45deg,
+    #bd34fe 50%,
+    #47caff 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);
+  }
+}
+
+/**
+ * Component: Custom Block
+ * -------------------------------------------------------------------------- */
+
+:root {
+  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+.dark {
+  --vp-custom-block-tip-border: var(--vp-c-brand);
+  --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+  --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+}
+
+/**
+ * Component: Algolia
+ * -------------------------------------------------------------------------- */
+
+.DocSearch {
+  --docsearch-primary-color: var(--vp-c-brand) !important;
+}
+