Add documentation page

Author: marcoroth

.github/workflows/deploy.yml

@@ -0,0 +1,64 @@
+name: Deploy docs site to GitHub Pages
+
+on:
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
+  push:
+    branches: [main]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: "yarn"
+
+      - name: Yarn install
+        run: yarn install --frozen-lockfile
+
+      - name: Build documentation site
+        run: yarn docs:build
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./docs/.vitepress/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    needs: build
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

Gemfile

@@ -5,10 +5,10 @@ source "https://rubygems.org"
 gemspec
 
 gem "actionview", "~> 8.0"
-gem "herb"
+gem "herb", path: "../herb-linter"
 gem "maxitest"
-gem "minitest", "~> 5.16"
 gem "minitest-difftastic"
+gem "minitest", "~> 5.16"
 gem "railties", "~> 8.0"
 gem "rake", "~> 13.0"
 gem "rubocop", "~> 1.80.1"

docs/.gitignore

@@ -0,0 +1,5 @@
+dist/
+cache/
+.vitepress/dist/
+.vitepress/cache/
+node_modules/

docs/.vitepress/config.mts

@@ -0,0 +1,49 @@
+import { defineConfig } from "vitepress"
+import { createMarkdownConfig } from "./config/markdown.mts"
+import { createViteConfig } from "./config/vite.mts"
+import { createThemeConfig } from "./config/theme.mts"
+
+const themeConfig = createThemeConfig()
+
+const title = "ReActionView"
+const description = "Enhanced ERB templates with Herb engine integration for Rails applications."
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title,
+  description,
+  srcDir: "./docs",
+  base: "/reactionview/",
+  head: [
+    ['link', { rel: 'icon', href: '/favicon.ico' }],
+    ['link', { rel: 'icon', href: '/favicon-16x16.png', sizes: '16x16' }],
+    ['link', { rel: 'icon', href: '/favicon-32x32.png', sizes: '32x32' }],
+    ['link', { rel: 'apple-touch-icon', href: '/apple-touch-icon.png' }],
+    ['meta', { property: 'og:image', content: '/social.png' }],
+    ['meta', { property: 'og:title', content: 'ReActionView' }],
+    ['meta', { property: 'og:description', content: 'Enhanced ERB templates with Herb engine integration for Rails applications.' }],
+    ['meta', { property: 'og:url', content: 'https://reactionview.dev' }],
+    ['meta', { property: 'og:type', content: 'website' }],
+  ],
+  cleanUrls: true,
+  markdown: createMarkdownConfig(),
+  vite: createViteConfig(),
+  themeConfig,
+  transformPageData(pageData) {
+    pageData.frontmatter.head ??= []
+
+    const pageTitle = pageData.frontmatter.title || pageData.title
+
+    pageData.frontmatter.head.push([
+      'meta',
+      {
+        property: 'og:title',
+        content: pageTitle ? `${pageTitle} | ${title}` : `${title} - ${description}`
+      }
+    ])
+  },
+
+  async buildEnd() {
+    console.log('🎉 VitePress build completed successfully')
+  }
+})

docs/.vitepress/config/markdown.mts

@@ -0,0 +1,11 @@
+import { groupIconMdPlugin } from "vitepress-plugin-group-icons"
+
+export function createMarkdownConfig() {
+  return {
+    config(md) {
+      md.use(groupIconMdPlugin)
+    },
+    // Explicitly load these languages for types highlighting
+    languages: ["js", "jsx", "ts", "tsx", "bash", "shell", "ruby", "html", "erb"],
+  }
+}

docs/.vitepress/config/theme.mts

@@ -0,0 +1,64 @@
+const defaultSidebar = [
+  {
+    text: "Getting Started",
+    collapsed: false,
+    items: [
+      { text: "Overview", link: "/overview" },
+      { text: "Installation", link: "/installation" },
+    ],
+  },
+  {
+    text: "Guides",
+    collapsed: false,
+    items: [
+      { text: "Debug Mode", link: "/guides/debug-mode" },
+      { text: "Validation Overlays", link: "/guides/validation-overlays" },
+      { text: "Development Tools", link: "/guides/development-tools" },
+    ],
+  },
+  {
+    text: "Integration",
+    collapsed: false,
+    items: [
+      { text: "Rails", link: "/integrations/rails" },
+    ],
+  },
+]
+
+export function createThemeConfig() {
+  return {
+    logo: "/reactionview.png",
+    nav: [
+      { text: "Home", link: "/" },
+      { text: "Documentation", link: "/overview" },
+      { text: "GitHub", link: "https://github.com/marcoroth/reactionview" },
+    ],
+    outline: [2, 4],
+    search: {
+      provider: "local",
+    },
+    lastUpdated: {
+      text: "Last updated",
+      formatOptions: {
+        dateStyle: "long",
+      },
+    },
+    footer: {
+      message: "Released under the MIT License.",
+      copyright: "Copyright © 2025 Marco Roth and the ReActionView Contributors.",
+    },
+    editLink: {
+      pattern: "https://github.com/marcoroth/reactionview/edit/main/docs/docs/:path",
+      text: "Edit this page on GitHub",
+    },
+    sidebar: {
+      '/': defaultSidebar
+    },
+    socialLinks: [
+      { icon: "github", link: "https://github.com/marcoroth/reactionview" },
+      { icon: "twitter", link: "https://twitter.com/marcoroth_" },
+      { icon: "mastodon", link: "https://ruby.social/@marcoroth" },
+      { icon: "bluesky", link: "https://bsky.app/profile/marcoroth.dev" },
+    ],
+  }
+}

docs/.vitepress/config/vite.mts

@@ -0,0 +1,40 @@
+import { groupIconVitePlugin } from "vitepress-plugin-group-icons"
+
+function createBuildStartPlugin() {
+  return {
+    name: 'reactionview-build-start',
+    async buildStart() {
+      console.log('🚀 Build starting - ReActionView docs...')
+    },
+    configResolved(config) {
+      console.log(`📋 Build mode: ${config.command}`)
+    }
+  }
+}
+
+export function createViteConfig() {
+  // https://vp.yuy1n.io/features.html
+  // https://github.com/vscode-icons/vscode-icons/wiki/ListOfFiles
+  const groupIconPlugin = groupIconVitePlugin({
+    customIcon: {
+      ruby: "vscode-icons:file-type-ruby",
+      ".rb": "vscode-icons:file-type-ruby",
+      ".gemspec": "vscode-icons:file-type-ruby",
+      gemfile: "vscode-icons:file-type-bundler",
+      browser: "vscode-icons:file-type-js",
+      "Node.js": "vscode-icons:file-type-js",
+      ".js": "vscode-icons:file-type-js",
+      javascript: "vscode-icons:file-type-js",
+      shell: "vscode-icons:file-type-shell",
+      ".erb": "vscode-icons:file-type-html",
+      ".html.erb": "vscode-icons:file-type-html",
+      ".herb": "vscode-icons:file-type-html",
+    },
+  })
+
+  const buildStartPlugin = createBuildStartPlugin()
+
+  return {
+    plugins: [groupIconPlugin, buildStartPlugin],
+  }
+}

docs/.vitepress/theme/index.ts

@@ -0,0 +1,8 @@
+import type { Theme } from 'vitepress'
+import DefaultTheme from 'vitepress/theme'
+
+import './style.css'
+
+export default {
+  extends: DefaultTheme,
+} satisfies Theme