Refactor Templates for DRYness and Maintainability

[anlu85]

Summary

Refactor HTML templates to improve DRYness, maintainability, and consistency across the web application.

Motivation

As the application has grown, the HTML templates have become more complex and contain repeated code blocks (e.g., badges, section headers, cards, tables, meta tags). Refactoring will make it easier to maintain, extend, and onboard new contributors, while reducing the risk of inconsistencies and errors.

Detailed Description

• Move repeated elements (such as badges, section cards, and tables) into {% include %} partials.
• Move more common logic and blocks (e.g., meta tags, scripts, styles) into base.html.
• Use template inheritance and includes to avoid duplication.
• Add an example template as a scaffold for new views.
• Consider adding custom template filters or tags for repeated logic.
• Add comments and documentation to guide contributors.

Possible Implementation

• Identify repeated code blocks in existing templates and extract them into includes.
• Refactor templates to use these includes and reduce duplication.
• Update base.html to centralize common logic and assets.
• Provide a well-documented example template.
• Update documentation to reference the example template and new includes.

Tasks

• Extract repeated elements into {% include %} partials
• Move more common logic to base.html
• Refactor templates to use inheritance and includes
• Add an example template for new views
• Add comments and documentation for contributors

Acceptance Criteria

• Templates are DRY, easier to maintain, and consistent in structure.
• Example template is available and referenced in documentation.
• Contributors can easily create new views following best practices.
• No loss of functionality or regressions in the UI.

Additional Context

This refactor will improve maintainability and scalability as the project continues to grow.