simple approach to docs

.github/workflows/deploy.yml

@@ -1,19 +1,37 @@
-name: Build and Deploy
+name: Deploy to GitHub Pages
+
 on:
   push:
-    branches:
-      - main
+    branches: [ main ]
+  workflow_dispatch:
+
 permissions:
-  contents: write
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
 jobs:
-  build-and-deploy:
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout 🛎️
+      - name: Checkout
         uses: actions/checkout@v4
-
-      - name: Deploy 🚀
-        uses: JamesIves/github-pages-deploy-action@v4.7.2
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          branch: gh-pages # The branch the action should deploy to.
-          folder: static
+          path: './docs'
+
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

docs/README.md

@@ -0,0 +1,38 @@
+# vLEI Credential Documentaion
+
+## Quick Start
+
+1. **Local Development:**
+
+From `./docs`
+
+   ```bash
+   python3 -m http.server 8000
+   ```
+
+Visit: <http://localhost:8000>
+
+2. **Content Changes:**
+   - Edit `.md` files in the `content/` directory
+   - Refresh browser to see changes
+
+## Content Management
+
+### Adding New Pages
+
+1. **Create content file:** Add `new-page.md` to `content/` directory
+2. **Register file:** Add `'new-page'` to the `knownFiles` array in `app.js`
+3. **Add navigation:** Update navbar in `index.html` if needed
+
+### Internal Links
+
+- **Page:** `[New Page](new-page)`
+
+### Mermaid Diagrams
+
+```content
+\`\`\`mermaid
+graph TD
+    A[Start] --> B[End]
+\`\`\`
+```

docs/app.js

@@ -0,0 +1,168 @@
+mermaid.initialize({
+  startOnLoad: true,
+  theme: 'default',
+  flowchart: {
+    useMaxWidth: true,
+    htmlLabels: true,
+    curve: 'linear'
+  },
+  elk: {
+    'elk.algorithm': 'layered',
+    'elk.direction': 'DOWN',
+    'elk.layered.spacing.nodeNodeBetweenLayers': 50,
+    'elk.layered.spacing.edgeNodeBetweenLayers': 20,
+    'elk.edge.routing': 'ORTHOGONAL', 
+    'elk.layered.edgeRouting.selfLoopDistribution': 'EQUALLY',
+    'elk.layered.nodePlacement.strategy': 'BRANDES_KOEPF',
+    'elk.layered.crossingMinimization.strategy': 'LAYER_SWEEP'
+  }
+});
+
+const contentFiles = {};
+
+const knownFiles = [
+  'index', 'credentials', 'vlei-credential-ecosystem', 'vlei-dependency-graph',
+  'qvi-credential-schema', 'legal-entity-credential-schema', 'ecr-credential-schema',
+  'oor-credential-schema', 'ecr-auth-credential-schema', 'oor-auth-credential-schema'
+];
+
+async function loadcontentFiles() {
+  console.log('Loading content files...');
+  let loadedCount = 0;
+
+  for (const file of knownFiles) {
+    try {
+      const response = await fetch(`content/${file}.md`);
+      if (response.ok) {
+        contentFiles[file] = await response.text();
+        loadedCount++;
+        console.log(`✓ Loaded ${file}.md`);
+      } else {
+        console.log(`✗ Failed to load ${file}.md (${response.status})`);
+      }
+    } catch (error) {
+      console.log(`✗ Error loading ${file}.md:`, error);
+    }
+  }
+
+  console.log(`Loaded ${loadedCount} of ${knownFiles.length} content files`);
+}
+
+async function loadPage(pageName) {
+  const content = document.getElementById('content-content');
+
+  if (!contentFiles[pageName]) {
+    content.innerHTML = `
+      <div class="loading">
+        <h2>Page Not Found</h2>
+        <p>The requested page "${pageName}" could not be loaded.</p>
+      </div>
+    `;
+    return;
+  }
+
+  content.innerHTML = '<div class="loading">Loading...</div>';
+
+  try {
+
+    let html = marked.parse(contentFiles[pageName]);
+    html = html.replace(
+      /<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/g,
+      '<div class="mermaid">$1</div>'
+    );
+
+    content.innerHTML = html;
+
+    const links = content.querySelectorAll('a[href]:not([href^="http"]):not([href^="#"])');
+    links.forEach(link => {
+      const href = link.getAttribute('href');
+      const pageName = href.replace(/^\//, '').replace(/\/$/, '');
+
+      if (contentFiles[pageName]) {
+        link.onclick = (e) => {
+          e.preventDefault();
+          loadPage(pageName);
+          return false;
+        };
+      }
+    });
+
+    const mermaidElements = content.querySelectorAll('.mermaid');
+    if (mermaidElements.length > 0) {
+      mermaid.init(undefined, mermaidElements);
+
+      mermaidElements.forEach(diagram => {
+        diagram.addEventListener('click', function(e) {
+          if (this.classList.contains('zoomed')) {
+            const rect = this.getBoundingClientRect();
+            const isCloseButton = e.clientX > rect.right - 50 && e.clientY < rect.top + 50;
+
+            if (isCloseButton) {
+              this.classList.remove('zoomed');
+              document.body.style.overflow = '';
+              return;
+            }
+
+            if (e.target.closest('svg')) return;
+
+            this.classList.remove('zoomed');
+            document.body.style.overflow = '';
+          } else {
+            if (e.target.tagName === 'A') return;
+
+            this.classList.add('zoomed');
+            document.body.style.overflow = 'hidden';
+          }
+        });
+      });
+    }
+
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+
+  } catch (error) {
+    content.innerHTML = `
+      <div class="loading">
+        <h2>Error</h2>
+        <p>Could not render the page: ${error.message}</p>
+      </div>
+    `;
+  }
+}
+
+async function init() {
+  document.getElementById('content-content').innerHTML = `
+    <div class="loading">
+      <h2>Loading Documentation...</h2>
+      <p>Please wait while we load the vLEI documentation files.</p>
+    </div>
+  `;
+
+  await loadcontentFiles();
+
+  const loadedFiles = Object.keys(contentFiles);
+  if (loadedFiles.length > 0) {
+    const startPage = contentFiles['index'] ? 'index' : loadedFiles[0];
+    loadPage(startPage);
+  } else {
+    document.getElementById('content-content').innerHTML = `
+      <div class="loading">
+        <h2>Unable to Load Documentation</h2>
+        <p>No content files could be loaded. Please check that the content files are available in the <code>content/</code> directory.</p>
+        <p><strong>Expected files:</strong> ${knownFiles.join(', ')}</p>
+      </div>
+    `;
+  }
+}
+
+// Keyboard support for zoomed diagrams
+document.addEventListener('keydown', function(e) {
+  if (e.key === 'Escape') {
+    const zoomedDiagram = document.querySelector('.mermaid.zoomed');
+    if (zoomedDiagram) {
+      zoomedDiagram.classList.remove('zoomed');
+      document.body.style.overflow = '';
+    }
+  }
+});
+
+document.addEventListener('DOMContentLoaded', init);