feat: add certificate automation with QR code verification (#622)

feat: add certificate automation system with QR verification

Implement complete certificate generation and verification system for WCC community.

Core Features:
- Automated certificate generation from PowerPoint templates (PPTX/PDF output)
- QR code generation with unique SHA256-based certificate IDs
- Public verification page with certificate registry lookup
- Support for 4 certificate types: mentee, mentor, volunteer, leader
- Template formatting preservation (fonts, colors, styles)
- Configurable QR code positioning in centimeters
- Duplicate certificate detection

Technical Implementation:
- Python-based certificate generator with comprehensive configuration
- JSON-based certificate registry with publishing workflow
- Registry published to assets/js/certificates_registry.json for website integration
- WCAG-compliant verification UI
- Modern JavaScript with proper event handling (no deprecated jQuery methods)

Testing & Quality:
- 50+ test cases for certificate generation
- 11 passing tests for verification system
- 9 passing tests for registry publishing
- 12 passing tests for frontend verification
- GitHub Actions workflow with proper PYTHONPATH and dependency management

Documentation:
- Comprehensive README with usage guides
- Configuration examples and formatting instructions
- Publishing workflow documentation

Author: dricazenck

.github/workflows/pull_request.yml

@@ -41,10 +41,14 @@ jobs:
 
       - name: Install dependencies
         run: |
-          cd tools 
+          cd tools
           ls -lah
           python -m pip install --upgrade pip
           pip install -r requirements.txt
+          pip install -r certificate_automation/requirements.txt
 
       - name: Run pytest
-        run: pytest tools
+        run: |
+          cd tools
+          export PYTHONPATH="${PYTHONPATH}:$(pwd)"
+          pytest --ignore=_site --ignore=.venv --ignore=myenv

.gitignore

@@ -14,3 +14,9 @@ tools/blog_automation/venv
 
 # Claude Code local settings (may contain personal preferences)
 .claude/settings.local.json
+
+# Certificate automation - proprietary templates and generated files
+tools/certificate_automation/data/input/templates/
+tools/certificate_automation/data/input/*.csv
+tools/certificate_automation/data/output/
+tools/samples/

_includes/footer.html

@@ -75,6 +75,7 @@ <h2>Follow Us</h2>
 <script src="/assets/js/events.js" type="module"></script>
 <script src="/assets/js/search.js" type="module"></script>
 <script src="/assets/js/registration.js" type="module"></script>
+<script src="/assets/js/verify.js" type="module"></script>
 
 <!-- Google tag (gtag.js) -->
 <script async src="https://www.googletagmanager.com/gtag/js?id={{ site.gtagId }}"></script>

_sass/custom/_verify.scss

@@ -0,0 +1,117 @@
+.page-verify {
+    .verification-container {
+        max-width: 800px;
+        margin: 50px auto;
+        padding: 30px;
+        text-align: center;
+    }
+
+    .verification-box {
+        background: #f8f9fa;
+        border-radius: 10px;
+        padding: 40px;
+        margin: 30px 0;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    }
+
+    .certificate-info {
+        background: white;
+        border-left: 4px solid $success;
+        padding: 20px;
+        margin: 20px 0;
+        text-align: left;
+
+        &.invalid {
+            border-left: 4px solid $danger;
+        }
+
+        h3 {
+            margin-top: 0;
+            color: $success;
+        }
+
+        &.invalid h3 {
+            color: $danger;
+        }
+    }
+
+    .info-row {
+        margin: 10px 0;
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .info-label {
+        font-weight: bold;
+        color: #555;
+    }
+
+    .info-value {
+        color: #333;
+    }
+
+    .search-box {
+        display: flex;
+        gap: 10px;
+        margin: 20px 0;
+        justify-content: center;
+
+        input {
+            padding: 12px 20px;
+            font-size: 16px;
+            border: 2px solid #ddd;
+            border-radius: 5px;
+            width: 300px;
+        }
+
+        button {
+            padding: 12px 30px;
+            font-size: 16px;
+            background: $primary;
+            color: white;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background 0.3s;
+
+            &:hover {
+                background: darken($primary, 10%);
+            }
+        }
+    }
+
+    .loading {
+        display: none;
+        color: $primary;
+        margin: 20px 0;
+    }
+
+    .error-message {
+        color: $danger;
+        margin: 20px 0;
+    }
+
+    .success-icon {
+        font-size: 60px;
+        color: $success;
+        margin-bottom: 20px;
+    }
+
+    .error-icon {
+        font-size: 60px;
+        color: $danger;
+        margin-bottom: 20px;
+    }
+
+    .verification-instructions {
+        h3 {
+            margin-bottom: 20px;
+        }
+
+        ol {
+            text-align: left;
+            max-width: 500px;
+            margin: 0 auto;
+        }
+    }
+}

_sass/custom/custom.scss

@@ -19,6 +19,7 @@
 @import "breadcrumbs";
 @import "partners";
 @import "timeline";
+@import "verify";
 
 .network svg:hover {
   fill: $primary-50 !important;