Add HTMX frontend alternative to Knockout.js implementation

[Copilot]

Implements a parallel HTMX-based frontend at /htmx/* routes alongside the existing Knockout.js implementation. No modifications to existing functionality.

Implementation

New routes (controllers/endpoints/htmx_routes.py):

• Core: courses, assignments, submissions with server-side rendering
• Examples: 7 interactive pattern demonstrations
• Comparison: side-by-side technical analysis

Templates (templates/htmx/):

• Base layout with HTMX (14KB vs 67KB for Knockout)
• 7 pages: home, courses, assignments, examples, comparison
• 4 partials for dynamic content updates

Architecture:

@htmx_routes.route('/courses')
def courses():
    search = request.args.get('search', '')
    courses = Course.query.filter(Course.name.ilike(f'%{search}%')).all()
    
    # Return partial for HTMX requests, full page otherwise
    if request.headers.get('HX-Request') == 'true':
        return render_template('htmx/partials/courses_list.html', courses=courses)
    return render_template('htmx/courses.html', courses=courses)

<!-- Template uses HTMX attributes, no custom JS -->
<input hx-get="/htmx/courses" 
       hx-trigger="keyup changed delay:500ms"
       hx-target="#results" 
       name="search">

Documentation

• docs/HTMX_GUIDE.md: Comprehensive patterns, best practices, migration strategy
• docs/HTMX_SUMMARY.md: Quick reference
• templates/htmx/README.md: Technical architecture

HTMX Patterns Demonstrated

• Search with debounce (500ms)
• Lazy loading (click to load)
• Inline editing with swap
• Form submission without reload
• Polling/auto-refresh
• Load once (single-use actions)
• Delete with confirmation

All patterns functional and documented with code examples.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• unpkg.com
  • Triggering command: /usr/bin/curl curl -L -o htmx.min.js REDACTED (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

---

This section details on the original issue you should resolve

<issue_title>New version of frontend written in Htmx</issue_title>
<issue_description>The current version of BlockPy Server's frontend is written in Knockoutjs, with a lot of the logic spread out over the Flask templats. I'd like to create a new version that is written in HTMX. This would eventually have the same functionality.</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes New version of frontend written in Htmx #91

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.