Skip to content
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 53 additions & 0 deletions .github/workflows/deploy-pages.yml
Original file line number Diff line number Diff line change
@@ -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
100 changes: 100 additions & 0 deletions docs/README.md
Original file line number Diff line number Diff line change
@@ -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.
46 changes: 46 additions & 0 deletions docs/_config.yml
Original file line number Diff line number Diff line change
@@ -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"
8 changes: 8 additions & 0 deletions docs/favicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Loading