Main

.github/workflows/deploy.yml

@@ -11,12 +11,12 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'npm'
 
       - name: Install dependencies

README.md

@@ -1,14 +1,47 @@
-# Jira Email Template Designer
+# Jira Email Template Generator
 
-A modern Single Page Application (SPA) for designing and generating beautiful Jira notification email templates.
+[![Deploy to GitHub Pages](https://github.com/codevalve/jira-email-template/actions/workflows/deploy.yml/badge.svg)](https://github.com/codevalve/jira-email-template/actions/workflows/deploy.yml)
+
+A modern Single Page Application (SPA) for generating professional Jira notification email templates with dynamic customization options.
+
+## Live Demo
+
+Visit the live application: [Jira Email Template Generator](https://codevalve.github.io/jira-email-template/)
 
 ## Features
 
-- Live preview of email templates
-- Customizable colors for different sections
+### Product Type Support
+- Jira Software templates
+- Service Desk templates
+- Core templates
+- Dynamic field rendering based on product type
+
+### Template Styles
+- Full template with comprehensive issue details
+- Compact template for concise notifications
+- Consistent styling across all templates
+
+### Smart Values Integration
+- Toggle between mock data and Jira smart values
+- Uses `{{issue.field}}` syntax
+- Dynamic field rendering
+- HTML support in comments
+
+### Comments Customization
+- Toggle comments visibility
+- Three display modes:
+  - All comments
+  - Latest comment only
+  - Last 5 comments
+- Smart values support in comments
+- HTML formatting and user mentions
+
+### UI/UX Features
+- Live preview
+- Color picker for header customization
 - Responsive design
+- Modern interface with Tailwind CSS
 - Generates minified HTML output
-- Modern UI with Tailwind CSS
 
 ## Development
 
@@ -23,7 +56,7 @@ This project uses Vite for development and building.
 
 1. Clone the repository:
 ```bash
-git clone [repository-url]
+git clone https://github.com/codevalve/jira-email-template.git
 cd jira-email-template
 ```
 
@@ -51,6 +84,7 @@ jira-email-template/
 │   ├── main.js       # Main JavaScript file
 │   └── style.css     # Styles
 ├── dist/             # Production build output
+├── .github/          # GitHub Actions workflows
 ├── node_modules/     # Dependencies
 ├── package.json      # Project configuration
 └── vite.config.js    # Vite configuration
@@ -59,10 +93,16 @@ jira-email-template/
 ## Contributing
 
 1. Create a feature branch (`git checkout -b feature/amazing-feature`)
-2. Commit your changes (`git commit -m 'Add some amazing feature'`)
+2. Commit your changes (`git commit -m 'feat: add some amazing feature'`)
 3. Push to the branch (`git push origin feature/amazing-feature`)
 4. Open a Pull Request
 
 ## License
 
 This project is licensed under the ISC License.
+
+## Acknowledgments
+
+- Built with [Vite](https://vitejs.dev/)
+- Styled with [Tailwind CSS](https://tailwindcss.com/)
+- Hosted on [GitHub Pages](https://pages.github.com/)

src/index.html

@@ -138,11 +138,22 @@ <h2 class="text-xl font-semibold text-gray-900 mb-4">Template Controls</h2>
 
           <div>
             <h3 class="text-lg font-semibold text-gray-900 mb-4">Generated HTML</h3>
-            <button
-              id="generateHTML"
-              class="w-full px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
-              Generate Minified HTML
-            </button>
+            <div class="flex space-x-2">
+              <button
+                id="generateHTML"
+                class="flex-1 px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200">
+                Generate HTML
+              </button>
+              <button
+                id="copyHTML"
+                class="px-3 py-2 bg-gray-100 text-gray-700 rounded-lg hover:bg-gray-200 transition-colors duration-200 flex items-center justify-center"
+                title="Copy HTML">
+                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+                  <path d="M8 3a1 1 0 011-1h2a1 1 0 110 2H9a1 1 0 01-1-1z" />
+                  <path d="M6 3a2 2 0 00-2 2v11a2 2 0 002 2h8a2 2 0 002-2V5a2 2 0 00-2-2 3 3 0 01-3 3H9a3 3 0 01-3-3z" />
+                </svg>
+              </button>
+            </div>
             <div class="mt-4">
               <textarea
                 id="htmlOutput"