Create SPA showcase for git-artifact hosted on GitHub Pages

.github/workflows/deploy-pages.yml

@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+  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 job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+
+      - name: Build with Jekyll
+        uses: actions/jekyll-build-pages@v1
+        with:
+          source: ./docs
+          destination: ./_site
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    if: github.ref == 'refs/heads/main'
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

docs/README.md

@@ -0,0 +1,100 @@
+# git-artifact SPA Showcase
+
+This directory contains the Single Page Application (SPA) showcase for git-artifact, designed to be hosted on GitHub Pages.
+
+## 🎯 Purpose
+
+The SPA provides an interactive demonstration of git-artifact's capabilities, making it easier for users to:
+- Understand the library's functionality
+- See real command examples
+- Learn about use cases
+- Get installation guidance
+- Access complete API documentation
+
+## 🏗️ Structure
+
+```
+docs/
+├── index.html          # Main SPA file with all content
+├── styles.css          # Responsive CSS styling
+├── script.js           # Interactive JavaScript functionality
+├── _config.yml         # Jekyll configuration for GitHub Pages
+└── README.md           # This file
+```
+
+## 🚀 Features
+
+### Interactive Demo
+- Tabbed interface for different git-artifact commands
+- Copy-to-clipboard functionality
+- Real command examples with explanations
+
+### Responsive Design
+- Mobile-first approach
+- Touch-friendly navigation
+- Adaptive layouts for all screen sizes
+
+### Content Sections
+1. **Landing Page** - Overview and quick start
+2. **Interactive Demo** - Try git-artifact commands
+3. **Use Cases** - Real-world scenarios
+4. **API Reference** - Complete command documentation
+5. **Installation Guide** - Step-by-step setup
+
+## 🛠️ Development
+
+The SPA is built with vanilla HTML, CSS, and JavaScript for:
+- ✅ No build dependencies
+- ✅ Fast loading times
+- ✅ Easy maintenance
+- ✅ Direct GitHub Pages compatibility
+
+### Local Development
+
+```bash
+# Serve locally for testing
+cd docs/
+python3 -m http.server 8000
+# Visit http://localhost:8000
+```
+
+## 🌐 Deployment
+
+The SPA automatically deploys to GitHub Pages via the workflow in `.github/workflows/deploy-pages.yml`.
+
+### Manual GitHub Pages Setup
+1. Go to repository Settings > Pages
+2. Set Source to "GitHub Actions"
+3. The site will be available at: `https://praqma.github.io/git-artifact/`
+
+## 🎨 Design Principles
+
+- **Accessibility**: Semantic HTML, keyboard navigation, focus management
+- **Performance**: Optimized images, minimal dependencies, efficient CSS
+- **Mobile-First**: Responsive design tested on various screen sizes
+- **User Experience**: Smooth animations, clear navigation, helpful feedback
+
+## 🔧 Customization
+
+The SPA can be easily customized by modifying:
+- `index.html`: Content structure and sections
+- `styles.css`: Visual styling and responsive breakpoints
+- `script.js`: Interactive functionality and animations
+- `_config.yml`: Jekyll and GitHub Pages settings
+
+## 📦 Dependencies
+
+- **Prism.js** (CDN): Syntax highlighting for code blocks
+- **Modern Browser**: ES6+ features, CSS Grid, Flexbox
+
+## 🤝 Contributing
+
+When making changes to the showcase:
+1. Test locally using the development server
+2. Verify responsive design on multiple screen sizes
+3. Check all interactive features work correctly
+4. Ensure fast loading times and accessibility
+
+## 📄 License
+
+This showcase follows the same license as the git-artifact project.

docs/_config.yml

@@ -0,0 +1,46 @@
+# Jekyll configuration for GitHub Pages
+title: "git-artifact"
+description: "Interactive showcase for git-artifact - Git-based artifact management tool"
+url: "https://praqma.github.io"
+baseurl: "/git-artifact"
+
+# Build settings
+markdown: kramdown
+highlighter: rouge
+theme: null
+
+# Exclude files from processing
+exclude:
+  - README.md
+  - Gemfile
+  - Gemfile.lock
+  - node_modules
+  - vendor
+
+# Include files that start with underscore
+include:
+  - _headers
+
+# Plugin settings
+plugins:
+  - jekyll-sitemap
+  - jekyll-feed
+
+# GitHub Pages safe mode
+safe: true
+
+# Collections and defaults
+defaults:
+  - scope:
+      path: ""
+    values:
+      layout: "default"
+
+# SEO and social
+author: "Praqma"
+twitter:
+  username: "praqma"
+  card: "summary_large_image"
+
+# Logo and favicon
+logo: "/assets/images/logo.png"