Interact revamp docs app (#26)

* Regenerate docs app to use the docs in interact/docs package

* Fixed links in content to do proper navigation

* Renamed rules

* update yarn.lock

* Add a /rules route to the docs app the exposes the rules files as raw  markdown

* Fixed issues from reviews

* Update and fix Interact root README

* Created new workflow interactdocs

Author: ydaniv

.github/workflows/interactdocs.yml

@@ -0,0 +1,66 @@
+name: Deploy Docs to GitHub Pages
+
+on:
+  push:
+    branches:
+      - master
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        with:
+          node-version: 24
+
+      - name: Enable Corepack
+        run: corepack enable
+        run: corepack prepare yarn@4.10.3 --activate
+        run: yarn set version 4.10.3
+        run: NPQ_PKG_MGR=yarn npx npq install
+
+      - name: Build interact package
+        run: yarn workspace @wix/interact build
+
+      - name: Build docs app
+        run: yarn workspace @wix/interact-docs build
+        env:
+          # Set base path for GitHub Pages deployment under /docs
+          VITE_BASE: /docs/
+
+      - name: Prepare deployment directory
+        run: |
+          mkdir -p _site/docs
+          cp -r apps/docs/dist/* _site/docs/
+
+      - name: Setup Pages
+        uses: actions/configure-pages@6509e525a06f43847064050610066357391e6390 # v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@3a27866f6480871542049080632d70930d695383 # v3
+        with:
+          path: _site
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}docs/
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@939173330191535487491557568637540315448 # v4

apps/docs/package.json

@@ -5,15 +5,19 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc && vite build && node scripts/copy-docs.js",
     "preview": "vite preview",
     "lint": "tsc --noEmit",
     "test": "echo 'No tests yet'"
   },
   "dependencies": {
     "@wix/interact": "*",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-markdown": "^9.0.1",
+    "react-router-dom": "^7.1.1",
+    "rehype-highlight": "^7.0.1",
+    "remark-gfm": "^4.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",

apps/docs/scripts/copy-docs.js

@@ -0,0 +1,28 @@
+import { cpSync, mkdirSync, existsSync } from 'node:fs';
+import { resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const srcDocs = resolve(__dirname, '../../../packages/interact/docs');
+const destDocs = resolve(__dirname, '../dist/docs');
+
+const srcRules = resolve(__dirname, '../../../packages/interact/rules');
+const destRules = resolve(__dirname, '../dist/rules');
+
+// Create dest directory if it doesn't exist
+if (!existsSync(dirname(destDocs))) {
+  mkdirSync(dirname(destDocs), { recursive: true });
+}
+
+// Copy docs to dist
+cpSync(srcDocs, destDocs, { recursive: true, force: true });
+
+console.log('✓ Docs copied to dist/docs');
+
+// Copy rules to dist
+cpSync(srcRules, destRules, { recursive: true, force: true });
+
+console.log('✓ Rules copied to dist/rules');
+

apps/docs/src/App.tsx

@@ -1,17 +1,17 @@
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
 import { Layout } from './components/Layout';
-import { Introduction } from './pages/Introduction';
-import { ComponentExamples } from './pages/ComponentExamples';
-import { ApiCheatsheet } from './pages/ApiCheatsheet';
+import { MarkdownPage } from './components/MarkdownPage';
 
 function App() {
   return (
-    <Layout>
-      <Introduction />
-      <ComponentExamples />
-      <ApiCheatsheet />
-    </Layout>
+    <BrowserRouter>
+      <Layout>
+        <Routes>
+          <Route path="*" element={<MarkdownPage />} />
+        </Routes>
+      </Layout>
+    </BrowserRouter>
   );
 }
 
 export default App;
-

apps/docs/src/components/InteractShowcase.tsx

@@ -1,12 +1,15 @@
 import type { PropsWithChildren } from 'react';
-import { DocsSidebar } from './Sidebar';
+import { Sidebar } from './Sidebar';
 
-export const Layout = ({ children }: PropsWithChildren) => {
+export function Layout({ children }: PropsWithChildren) {
   return (
-    <div className="docs-layout">
-      <DocsSidebar />
-      <main className="docs-content">{children}</main>
+    <div className="layout">
+      <Sidebar />
+      <main className="main-content">
+        <div className="content-container">
+          {children}
+        </div>
+      </main>
     </div>
   );
-};
-
+}