update: development (#97)

Signed-off-by: Vinyl-Davyl <[email protected]>

src/content/intro.md

@@ -0,0 +1,51 @@
+# Overview
+
+The Accord Project Template Playground is an innovative web-based platform designed to empower developers and enthusiasts to explore and experiment with Accord Project functionalities in an interactive and user-friendly environment. This playground serves as your hands-on tool for working with Accord Project templates, offering a rich set of features to facilitate learning and experimentation.
+
+## What is the Accord Project?
+
+The Accord Project is an open-source, non-profit initiative dedicated to transforming contract management and automation through digital contracts. By providing a standardized format for _Smart Legal Contracts_, the Accord Project aims to modernize traditional contract practices with a digitized approach.
+
+At the core of the Accord Project are templates that blend _natural language text_ with computing logic. These templates function similarly to clauses or contract templates but are designed to be both human-readable and machine-executable. This innovative format bridges the gap between static documentation and dynamic, interactive contract management.
+
+![AP](/public/APLogo.png)
+
+## Key Components of the Template Playground
+
+The Template Playground allows you to dive into several key Accord Project technologies:
+
+1. **TemplateMark**: This feature lets you work with natural language text within templates. TemplateMark is crucial for defining the text-based structure of contracts.
+
+2. **[Concerto](https://docs.accordproject.org/docs/model-concerto.html)**: Concerto serves as the data model that bridges the natural language text and the executable logic. It outlines the structure and data types used within the templates.
+
+3. **[Markdown-Transform](https://github.com/accordproject/markdown-transform)**: This tool transforms the template output into various formats such as HTML, PDF, etc., offering flexibility in presentation.
+
+4. **[Template-Engine](https://github.com/accordproject/template-engine)**: The Template Engine converts TemplateMark and JSON data into _AgreementMark_, a standardized format for Smart Legal Contracts.
+
+## Interactive Features
+
+The Template Playground is designed to enrich your learning experience with interactive features:
+
+- **Live Template Testing and Editing**: Edit and test template samples directly in the playground. Syntax highlighting and error checking ensure your templates are accurate and functional.
+
+- **Real-Time Preview**: View the results of your code execution instantly. The playground provides a live preview of your work, allowing you to see the output in real time.
+
+- **Shareable Links**: Share your edited templates with others effortlessly. The playground generates shareable links, enabling collaboration and showcasing your work.
+
+## Getting Started
+
+To get started with the Template Playground:
+
+1. **Select a Template**: Choose from various pre-built templates available in the dropdown menu. The "Hello World" template is an excellent starting point for beginners.
+
+2. **Experiment with TemplateMark**: Begin by exploring the natural language text of the template. Modify and observe how changes affect the output.
+
+3. **Explore the Concerto Model**: Dive into the data model supporting your template. Understand how the model integrates with the template text and logic.
+
+4. **Define Template Logic**: Implement and test the business logic for your template. Use JSON data to preview how your logic interacts with the template.
+
+5. **Preview Output**: Utilize the preview feature to view the final result of your work. The playground provides an easy way to see how your template looks and functions.
+
+## What’s Next?
+
+In the upcoming module, we will delve deeply into **_TemplateMark_**—the natural language component of templates. You’ll learn how to create and experiment with templates, exploring the structure and syntax that make TemplateMark a powerful tool for defining contracts. This hands-on experience will provide you with a solid foundation for building and understanding templates in the Accord Project.

src/content/module1.md

@@ -0,0 +1,123 @@
+# Module 1: Introduction to TemplateMark
+
+The **TemplateMark** language is a crucial element of the Accord Project template system. It allows you to craft templates using a mix of _natural language text_ and _markup syntax_, making it possible to create documents that are both _human-readable_ and _machine-readable_. In this module, we will delve into the basics of TemplateMark, showcasing its key features and demonstrating its practical application within the Accord Project Template Playground.
+
+## What is TemplateMark?
+
+TemplateMark is a markup language used for defining templates in the Accord Project. It combines plain text with specific notations, enabling templates to be interpreted and processed by computers while remaining understandable to humans.
+
+![Template Text](/public/assets/content/template_text.png)
+
+Templates in Accord Project are made up of three essential elements:
+
+- **Template Text**: The natural language content of the template.
+- **Template Model**: The data model that provides the connection between the text and the executable logic.
+- **Template Logic**: The business rules and logic that define how the template is processed and used.
+
+These components work together to create a powerful tool for contract automation and management.
+
+## Example of Template Text
+
+Let's explore a TemplateMark example for a **Service Agreement** clause:
+
+```js
+## Service Agreement
+
+{{provider}} agrees to provide the following services to {{client}}:
+
+- **Service 1**: {{service1Description}}
+- **Service 2**: {{service2Description}}
+
+The services will be delivered according to the following schedule:
+
+- **Start Date**: {{startDate as "D MMMM YYYY"}}
+- **End Date**: {{endDate as "D MMMM YYYY"}}
+
+Payment terms are as follows:
+
+- **Amount**: {{paymentAmount as "0,0.00 USD"}}
+- **Due Date**: {{paymentDueDate as "D MMMM YYYY"}}
+
+Any changes to the service agreement must be documented in writing and agreed upon by both parties.
+```
+
+In this template:
+
+- `{{provider}}`, `{{client}}`, `{{service1Description}}`, `{{service2Description}}`, `{{startDate}}`, `{{endDate}}`, `{{paymentAmount}}`, and `{{paymentDueDate}}` are placeholders that will be replaced with actual values when the template is used.
+
+Here's how the same clause looks with placeholder values filled in:
+
+```md
+## Service Agreement
+
+"ABC Services Ltd." agrees to provide the following services to "XYZ Corp":
+
+- **Service 1**: Monthly IT support and maintenance
+- **Service 2**: On-site technical assistance
+
+The services will be delivered according to the following schedule:
+
+- **Start Date**: 1 September 2024
+- **End Date**: 31 August 2025
+
+Payment terms are as follows:
+
+- **Amount**: $5,000.00
+- **Due Date**: 1 September 2024
+
+Any changes to the service agreement must be documented in writing and agreed upon by both parties.
+```
+
+## Key Features of TemplateMark
+
+- **Variables**: Use `{{` and `}}` to denote placeholders in your template. These placeholders are replaced with specific values during template processing.
+- **Conditional Sections**: Incorporate or exclude sections based on conditions using `{{#clause}} ... {{/clause}}`.
+- **Formatting**: Apply formatting like bold or italics to emphasize important terms.
+- **Lists**: Organize information using ordered or unordered lists.
+
+## Practical Example in the Playground
+
+In the Template Playground, you can interact with TemplateMark templates such as:
+
+```js
+### Welcome {{username}}!
+
+![Logo](https://avatars.githubusercontent.com/u/29445438?s=64)
+
+{{#clause personalDetails}}
+#### Personal Details
+> {{firstName}} {{lastName}},
+ {{address}}, {{city}}, {{state}},
+ {{country}}
+ {{/clause}}
+
+- Your date of birth is *{{dob as "D MMMM YYYY"}}*
+- Your annual salary is {{annualSalary as "0,0.00 USD"}}
+- Your preferred contact method is {{contactMethod}}
+
+{{#clause recentActivity}}
+## Recent Activity
+You signed up on {{signupDate as "D MMMM YYYY"}} ({{% return now.diff(user.signupDate, 'day')%}} days ago).
+
+{{#ulist recentPurchases}}
+- {{quantity}}x _{{item}}_ @ ${{price as "0,0.00"}}
+{{/ulist}}
+Total spent: {{% return '£' + user.recentPurchases.map(purchase => purchase.price * purchase.quantity).reduce((sum, cur) => sum + cur).toFixed(2);%}}
+{{/clause}}
+
+Thank you for being with us!
+```
+
+In this example:
+
+- **Welcome Message**: Personalize messages with dynamic values.
+- **Personal Details Clause**: Display personal information conditionally.
+- **Recent Activity**: List recent purchases with calculations.
+
+## Summary
+
+In this module, we introduced TemplateMark, highlighting its role in creating flexible and dynamic templates. By understanding TemplateMark, you can build templates that combine natural language with computer logic, enabling sophisticated document automation and management.
+
+## What's Next?
+
+In the next module, we'll explore the **Template Model**—the data structure that supports and enhances the TemplateMark text. We'll cover how the Template Model integrates with TemplateMark to enable dynamic and functional templates. Stay tuned for a deep dive into the data modeling aspect of Accord Project templates!

src/content/module2.md

@@ -0,0 +1,78 @@
+# Module 2: Understanding the Template Model
+
+In this module, we'll explore the **Template Model**, a crucial component of the Accord Project template system. The Template Model defines the data structure that supports the natural language text in your templates, providing a bridge between the text and the executable logic. Understanding the Template Model will help you grasp how data is categorized and utilized within Accord Project templates.
+
+## What is the Template Model?
+
+Unlike standard document templates (such as those created in Word or PDF), Accord Project templates use a _Template Model_ to associate a structured data model with the natural language text. This model categorizes and defines the types of different components used in the template, enabling the computer to understand and process the information effectively.
+
+![Template Model](/public/assets/content/template_model.png)
+
+The Template Model categorizes variables into different types—such as numbers, monetary amounts, dates, or references to organizations—allowing the computer to interpret the template's data correctly.
+
+## Example of a Template Model
+
+Let's examine a Template Model for a **Service Agreement** clause:
+
+```js
+/* The template model */
+namespace service@1.0.0
+
+concept Address {
+  o String line1
+  o String city
+  o String state
+  o String country
+}
+
+concept Service {
+  o String serviceName
+  o String description
+  o DateTime serviceDate
+}
+
+concept PaymentDetails {
+  o MonetaryAmount amount
+  o DateTime dueDate
+}
+
+@template
+concept ServiceAgreementData {
+  o String clientName
+  o Address clientAddress
+  o Service[] services
+  o PaymentDetails payment
+}
+```
+
+In this model:
+
+- **`Address`** defines the structure for addresses, including line1, city, state, and country.
+- **`Service`** specifies the details of the services being provided, including the service name, description, and service date.
+- **`PaymentDetails`** outlines the payment information, including the amount and due date.
+- **`ServiceAgreementData`** is the main data concept used in the template, incorporating `clientName`, `clientAddress`, a list of `services`, and `payment`.
+
+### Key Components
+
+- **Concepts**: Define data structures and types used in the template. For instance, `Address` and `Service` are concepts that model different types of data.
+- **Attributes**: Specify the type of data each concept holds, such as `String`, `Integer`, `DateTime`, or `MonetaryAmount`.
+- **Namespaces**: Organize and manage different versions of the models, such as `[email protected]`.
+
+## Concerto
+
+The Template Model is written in **Concerto**, a language used to define data models in Accord Project templates. Concerto supports a range of modeling capabilities, including:
+
+- Primitive types (e.g., numbers, dates)
+- Nested and optional data structures
+- Enumerations and relationships
+- Object-oriented style inheritance
+
+_More information about Concerto can be found in the [Concerto Model](https://concerto.accordproject.org/docs/intro) section of this documentation._
+
+## Summary
+
+In this module, we've introduced the Template Model, showcasing its role in defining and structuring the data used in Accord Project templates. By understanding the Template Model, you can create more sophisticated and functional templates that integrate seamlessly with TemplateMark text.
+
+## What's Next?
+
+In the next module, we'll dive into **Template Logic**—the business rules and logic that govern how templates are processed and executed. You'll learn how to implement and test the logic that drives template functionality, enhancing your ability to create dynamic and interactive templates. Stay tuned for an in-depth exploration of Template Logic!

src/content/module3.md

@@ -0,0 +1,78 @@
+# Module 3: Exploring Template Logic
+
+In this module, we will dive into **Template Logic**, the component that makes Accord Project templates not just machine-readable but also machine-executable. Template Logic allows you to embed rules and functions within your templates, enabling dynamic calculations and automated processing of contract data.
+
+## What is Template Logic?
+
+While the Template Text and Template Model ensure that your templates are well-structured and machine-readable, Template Logic adds the capability to perform computations and enforce rules based on the data. This makes your templates not only executable but also interactive and adaptive to various scenarios.
+
+![Template Logic](/public/assets/content/template_logic.png)
+
+### Logic During Drafting
+
+Template Logic can be embedded directly within the template text to perform real-time calculations or transformations based on the provided data. For example, consider a **Service Cost Estimate** template that calculates the total cost of services based on hourly rates and hours worked:
+
+```js
+## Service Cost Estimate
+
+This document provides an estimate for the services requested by {{clientName}}.
+
+### Service Details
+
+- Service: {{serviceName}}
+- Hours Worked: {{hoursWorked}}
+- Hourly Rate: {{hourlyRate as "0,0.00"}}
+- Estimated Total Cost: {{% calculateTotalCost(hoursWorked, hourlyRate) %}}
+
+Thank you for considering our services.
+```
+
+In this example, `calculateTotalCost` is a function that computes the total cost based on the hours worked and the hourly rate:
+
+```js
+define function calculateTotalCost(hoursWorked: Integer, hourlyRate: Double) : Double {
+  return hoursWorked * hourlyRate;
+}
+```
+
+Here, `calculateTotalCost` takes `hoursWorked` and `hourlyRate` as inputs and returns the total cost. The function uses simple arithmetic operations to compute the result.
+
+### Logic After Signature
+
+Template Logic can also be applied to enforce rules or conditions after a contract has been signed. For instance, imagine a **Warranty Agreement** that needs to verify if a warranty claim is valid based on the date of purchase and the claim submission date:
+
+```js
+contract WarrantyAgreement over WarrantyAgreementModel {
+  clause validateClaim(request : WarrantyClaimRequest) : ClaimValidationResponse {
+
+    let claimDate = request.claimDate;
+    let purchaseDate = contract.purchaseDate;
+    let warrantyPeriod = Duration{ amount: 1, unit: ~org.accordproject.time.TemporalUnit.years };
+
+    enforce isAfter(claimDate, purchaseDate) else
+      throw ErgoErrorResponse{ message : "Claim date is before the purchase date." }
+    ;
+
+    let isValid =
+      if isBefore(claimDate, addDuration(purchaseDate, warrantyPeriod))
+      then VALID_CLAIM
+      else EXPIRED_CLAIM
+    ;
+    return ClaimValidationResponse{
+      status : isValid,
+      client : contract.client,
+      warrantyDetails : contract.warrantyDetails
+    }
+  }
+}
+```
+
+This logic ensures that a warranty claim is only accepted if it falls within the warranty period. It checks if the claim date is after the purchase date and within the warranty duration, returning a validation response accordingly.
+
+## Summary
+
+In this module, we've explored Template Logic and how it enables your templates to perform computations and enforce rules dynamically. By embedding logic into your templates, you can create more interactive and responsive documents that adapt to different data inputs and scenarios.
+
+## Share Your Work
+
+Once you’ve finished editing or using a template, you can easily share your work with others. Simply click the **Share** button to generate a shareable link. This allows you to collaborate with others or distribute your completed templates efficiently.