Improvements in template handling and loading
This commit is contained in:
Nathan Schneider
117
README.md
117
README.md
@@ -7,11 +7,12 @@ Created as a prototype by Nathan Schneider with Claude Code.
|
||||
## Features
|
||||
|
||||
- Interactive protocol builder with multi-stage process
|
||||
- Complete protocol templates for different facilitation styles
|
||||
- Simple template system with direct content application
|
||||
- 8 complete protocol templates for different facilitation styles
|
||||
- YAML-based template system for easy content management
|
||||
- Server-side template rendering for reliable cross-platform compatibility
|
||||
- Export protocols as Markdown, PDF, or JSON
|
||||
- Import previously created protocols (JSON format)
|
||||
- Markdown support for rich text formatting
|
||||
- Markdown support for rich text formatting in preview mode and exports
|
||||
- Responsive design for desktop and mobile
|
||||
|
||||
## Setup and Installation
|
||||
@@ -21,7 +22,7 @@ Created as a prototype by Nathan Schneider with Claude Code.
|
||||
3. Run the local development server:
|
||||
|
||||
```bash
|
||||
cd dispute-protocol
|
||||
cd builder-prototype
|
||||
hugo server -D
|
||||
```
|
||||
|
||||
@@ -29,85 +30,68 @@ hugo server -D
|
||||
|
||||
## Customizing the Dispute Protocol
|
||||
|
||||
### Adding or Modifying Stages
|
||||
### Adding or Modifying Stages and Components
|
||||
|
||||
Edit the file `data/stages/stages.yaml` to modify the stages of the dispute resolution process.
|
||||
The UI structure is defined in `data/stages_array.yaml`, which contains all stages, components, and fields in a consolidated format:
|
||||
|
||||
```yaml
|
||||
- id: new-stage
|
||||
title: New Stage Name
|
||||
description: Description of this stage
|
||||
title: "New Stage Name"
|
||||
description: "Description of this stage"
|
||||
order: 7 # This determines the order in which stages appear
|
||||
```
|
||||
|
||||
### Adding or Modifying Components
|
||||
|
||||
Components are grouped by stage. Create or edit files in the `data/components/` directory, naming the file after the stage ID.
|
||||
|
||||
For example, to add components to a stage with ID "new-stage", create `data/components/new-stage.yaml`:
|
||||
|
||||
```yaml
|
||||
- id: new-component
|
||||
title: New Component Title
|
||||
description: Description of what this component addresses
|
||||
stageId: new-stage
|
||||
order: 1
|
||||
fields:
|
||||
- id: newComponentField
|
||||
type: text
|
||||
label: Field Label
|
||||
placeholder: Placeholder text...
|
||||
required: true
|
||||
components:
|
||||
- id: new-component
|
||||
title: "New Component Title"
|
||||
description: "Description of what this component addresses"
|
||||
order: 1
|
||||
fields:
|
||||
- id: newComponentField
|
||||
type: text
|
||||
label: "Field Label"
|
||||
placeholder: "Placeholder text..."
|
||||
required: true
|
||||
```
|
||||
|
||||
### Using Protocol Templates
|
||||
|
||||
The application includes complete protocol templates that pre-fill all components with consistent content. Several templates are provided:
|
||||
The application includes 8 complete protocol templates that pre-fill all components with consistent content:
|
||||
|
||||
1. **Shalish Mediation**: A process based on the traditional shalish process for village-level mediation in Bangladesh, with modernizing improvements.
|
||||
1. **Shalish Mediation**: Traditional mediation process from Bangladesh with modern adaptations
|
||||
2. **Restorative Justice Circle**: Community-based approach focusing on healing relationships
|
||||
3. **Transformative Justice Process**: Addresses systemic issues and power dynamics
|
||||
4. **Community Jury**: Formal adjudication process with community jurors
|
||||
5. **Community Referee**: Neutral third party makes binding decisions
|
||||
6. **Peer-to-Peer Resolution**: Direct negotiation with minimal third-party intervention
|
||||
7. **Chosen Facilitator**: Participants mutually select a facilitator
|
||||
8. **Facilitation Council**: Group of trained facilitators support resolution
|
||||
|
||||
2. **Restorative Justice**: A collaborative process that focuses on healing relationships and repairing harm rather than punitive measures.
|
||||
|
||||
3. **Transformative Justice**: A process that addresses immediate harm while working to transform the conditions that allowed harm to occur.
|
||||
|
||||
Users can select a template from the dropdown at the top of the builder page to automatically populate all fields. They can then customize the content as needed for their community's specific requirements.
|
||||
Users can select a template from the Templates section to automatically populate all fields. Templates support full markdown formatting including links, bold text, and lists.
|
||||
|
||||
#### Adding New Protocol Templates
|
||||
|
||||
To add a new protocol template:
|
||||
|
||||
1. Create a new JavaScript file in the `static/js/templates/` directory
|
||||
2. Define your template with the following structure:
|
||||
1. Create a new YAML file in the `data/templates/` directory (e.g., `my-new-template.yaml`)
|
||||
2. Define your template with this structure:
|
||||
|
||||
```javascript
|
||||
const newTemplate = {
|
||||
id: "template-id",
|
||||
title: "Template Name",
|
||||
description: "Brief description of this template approach",
|
||||
data: {
|
||||
stages: {
|
||||
// Full protocol data structure with content for all stages and components
|
||||
}
|
||||
}
|
||||
};
|
||||
```yaml
|
||||
id: "my-new-template"
|
||||
title: "My New Template"
|
||||
description: "Brief description of this template approach"
|
||||
|
||||
export default newTemplate;
|
||||
data:
|
||||
stages:
|
||||
basics:
|
||||
community_rules:
|
||||
communityRulesText: "Your content here with **markdown** support and [links](https://example.com)"
|
||||
shared_values:
|
||||
sharedValuesText: "Content for shared values..."
|
||||
# Continue with all stages and components
|
||||
```
|
||||
|
||||
3. Register the template in `static/js/templates/index.js`:
|
||||
3. The template will automatically appear in the Templates section - no code changes needed!
|
||||
|
||||
```javascript
|
||||
import newTemplate from './template-id.js';
|
||||
|
||||
const templates = [
|
||||
// existing templates...
|
||||
newTemplate,
|
||||
];
|
||||
|
||||
export default templates;
|
||||
```
|
||||
|
||||
The builder will automatically load all templates registered in the index.js file at startup.
|
||||
Templates are rendered server-side by Hugo and embedded directly in the HTML, ensuring reliable loading across all deployment environments.
|
||||
|
||||
## Deployment
|
||||
|
||||
@@ -173,11 +157,12 @@ RewriteRule ^(.*)$ /index.html [L]
|
||||
|
||||
## Technologies Used
|
||||
|
||||
- Hugo static site generator
|
||||
- Modern JavaScript (ES Modules) for template management
|
||||
- Modular template architecture with simplified importing
|
||||
- Hugo static site generator with YAML data files
|
||||
- Server-side template rendering for cross-platform compatibility
|
||||
- Modern JavaScript for form interactions and export functionality
|
||||
- YAML-based template system for easy content management
|
||||
- jsPDF for PDF generation
|
||||
- Marked.js for Markdown rendering
|
||||
- Marked.js for Markdown rendering in preview mode and exports
|
||||
|
||||
## License
|
||||
|
||||
|
||||
Reference in New Issue
Block a user