updatr

script.js

@@ -571,6 +571,15 @@ function createPromptCards() {
                 <line x1="12" y1="19" x2="20" y2="19"></line>
                 </svg>
             </button>
+            <button class="yaml-button" title="Show prompt.yml format" onclick="showYamlModal(event, '${encodeURIComponent(title)}', '${encodeURIComponent(content)}')">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
+                <polyline points="14 2 14 8 20 8"></polyline>
+                <line x1="16" y1="13" x2="8" y2="13"></line>
+                <line x1="16" y1="17" x2="8" y2="17"></line>
+                <polyline points="10 9 9 9 8 9"></polyline>
+                </svg>
+            </button>
             <button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(
               updatePromptPreview(content.trim())
             )}')">
@@ -589,7 +598,8 @@ function createPromptCards() {
         card.addEventListener("click", (e) => {
           if (
             !e.target.closest(".copy-button") &&
-            !e.target.closest(".contributor-badge")
+            !e.target.closest(".contributor-badge") &&
+            !e.target.closest(".yaml-button")
           ) {
             showModal(title, content);
           }
@@ -650,6 +660,14 @@ function initializeModalListeners() {
 document.addEventListener("keydown", (e) => {
   if (e.key === "Escape") {
     hideModal();
+    
+    // Also hide YAML modal if it exists
+    const yamlModal = document.getElementById("yamlModalOverlay");
+    if (yamlModal) {
+      yamlModal.style.display = "none";
+      document.body.style.overflow = "";
+      yamlModal.remove();
+    }
   }
 });
 
@@ -1126,3 +1144,139 @@ function initializeLanguageAndTone() {
     localStorage.setItem('custom-tone', e.target.value);
   });
 }
+
+// Function to show a modal with YAML format and GitHub create button
+function showYamlModal(event, title, content) {
+  event.stopPropagation();
+  let modalOverlay = document.getElementById("yamlModalOverlay");
+  if (!modalOverlay) {
+    const modalHTML = `
+      <div class="modal-overlay" id="yamlModalOverlay">
+      <div class="modal">
+          <div class="modal-header">
+          <h2 class="modal-title">Prompt YAML</h2>
+          <div class="modal-actions">
+              <button class="modal-copy-button" title="Copy YAML">
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+                  <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+              </svg>
+              </button>
+              <button class="modal-close" title="Close">
+              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+              </svg>
+              </button>
+          </div>
+          </div>
+          <div class="modal-content">
+            <pre class="yaml-content"></pre>
+          </div>
+          <div class="modal-footer">
+          <div class="modal-footer-left">
+              <span class="modal-hint">You can create a new <code>.prompt.yml</code> file in your GitHub repository.</span>
+          </div>
+          <div class="modal-footer-right">
+              <div class="github-form">
+                <div class="github-inputs">
+                  <input type="text" id="github-org" class="github-input" placeholder="Organization" value="">
+                  <span>/</span>
+                  <input type="text" id="github-repo" class="github-input" placeholder="Repository" value="">
+                  <span>#</span>
+                  <input type="text" id="github-branch" class="github-input" placeholder="Branch" value="main">
+                </div>
+                <button class="create-yaml-button">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
+                </svg>
+                Create .prompt.yml
+                </button>
+              </div>
+          </div>
+          </div>
+      </div>
+      </div>
+    `;
+    document.body.insertAdjacentHTML("beforeend", modalHTML);
+    modalOverlay = document.getElementById("yamlModalOverlay");
+    
+    // Add event listeners
+    const modalClose = modalOverlay.querySelector(".modal-close");
+    modalClose.addEventListener("click", () => {
+      modalOverlay.style.display = "none";
+      document.body.style.overflow = "";
+      modalOverlay.remove();
+    });
+    
+    modalOverlay.addEventListener("click", (e) => {
+      if (e.target === modalOverlay) {
+        modalOverlay.style.display = "none";
+        document.body.style.overflow = "";
+        modalOverlay.remove();
+      }
+    });
+  }
+
+  const yamlContent = modalOverlay.querySelector(".yaml-content");
+  const modalCopyButton = modalOverlay.querySelector(".modal-copy-button");
+  const createYamlButton = modalOverlay.querySelector(".create-yaml-button");
+  
+  // Create the YAML content
+  const cleanTitle = decodeURIComponent(title).trim().replace(/^Act as an? /ig, '');
+  const cleanContent = decodeURIComponent(content).trim().replace(/\n+/g, ' ');
+  
+  const yamlText = `name: ${cleanTitle}
+model: gpt-4o-mini
+modelParameters:
+  temperature: 0.5
+messages:
+  - role: system
+    content: | 
+      ${cleanContent.replace(/\n/g, '\n      ')}`;
+  
+  // Apply basic syntax highlighting
+  const highlightedYaml = yamlText
+    .replace(/(name|model|modelParameters|temperature|messages|role|content):/g, '<span class="key">$1:</span>')
+    .replace(/(gpt-4o-mini)/g, '<span class="string">$1</span>')
+    .replace(/([0-9]\.?[0-9]*)/g, '<span class="number">$1</span>')
+    .replace(/(true|false)/g, '<span class="boolean">$1</span>');
+  
+  yamlContent.innerHTML = highlightedYaml;
+  
+  // Add copy functionality - use the plain text version for clipboard
+  modalCopyButton.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(yamlText);
+      modalCopyButton.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <polyline points="20 6 9 17 4 12"></polyline>
+        </svg>
+      `;
+      setTimeout(() => {
+        modalCopyButton.innerHTML = `
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+            <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+        </svg>
+        `;
+      }, 2000);
+    } catch (err) {
+      alert("Failed to copy YAML to clipboard");
+    }
+  });
+  
+  // Add create functionality
+  createYamlButton.addEventListener("click", () => {
+    const orgName = document.getElementById('github-org').value.trim();
+    const repoName = document.getElementById('github-repo').value.trim();
+    const branchName = document.getElementById('github-branch').value.trim();
+    const filename = cleanTitle.toLocaleLowerCase().replace(/\s+/g, '-') + '.prompt.yml';
+    const encodedYaml = encodeURIComponent(yamlText);
+    const githubUrl = `https://github.com/${orgName}/${repoName}/new/${branchName}?filename=${filename}&value=${encodedYaml}`;
+    window.open(githubUrl, '_blank');
+  });
+
+  modalOverlay.style.display = "block";
+  document.body.style.overflow = "hidden";
+}

style.css

@@ -541,6 +541,126 @@ body.dark-mode {
     height: 16px;
 }
 
+.yaml-button {
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    padding: 2px;
+    color: var(--accent-color);
+    opacity: 0.8;
+    transition: opacity 0.2s ease;
+    z-index: 2;
+    flex-shrink: 0;
+}
+
+.yaml-button:hover {
+    opacity: 1;
+}
+
+.yaml-button svg {
+    width: 16px;
+    height: 16px;
+}
+
+.create-yaml-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.create-yaml-button:hover {
+    background-color: #0e9f71;
+}
+
+.create-yaml-button svg {
+    width: 14px;
+    height: 14px;
+}
+
+.dark-mode .create-yaml-button {
+    background-color: var(--accent-color);
+    color: white;
+}
+
+.dark-mode .create-yaml-button:hover {
+    background-color: #0e9f71;
+}
+
+.yaml-content {
+    background-color: #f5f5f5;
+    padding: 12px;
+    border-radius: 6px;
+    color: #333;
+    font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    overflow: auto;
+    white-space: pre-wrap;
+    margin: 0;
+}
+
+.dark-mode .yaml-content {
+    background-color: #2d2d2d;
+    color: #f5f5f5;
+}
+
+/* YAML syntax highlighting */
+.yaml-content .key {
+    color: #0550ae;
+    font-weight: 500;
+}
+
+.dark-mode .yaml-content .key {
+    color: #4d9eee;
+}
+
+.yaml-content .string {
+    color: #22863a;
+}
+
+.yaml-content .string .number {
+    color: #56b366 !important;
+}
+
+.dark-mode .yaml-content .string {
+    color: #56b366;
+}
+
+.yaml-content .number {
+    color: #905;
+}
+
+.dark-mode .yaml-content .number {
+    color: #e76086;
+}
+
+.yaml-content .boolean {
+    color: #0550ae;
+    font-weight: 500;
+}
+
+.dark-mode .yaml-content .boolean {
+    color: #4d9eee;
+}
+
+/* Style title as code in the yml modal */
+#yamlModalOverlay .modal-title {
+    font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", monospace;
+    font-size: 1.2rem;
+}
+
 .layout-wrapper {
     display: flex;
     flex-direction: column;
@@ -1123,28 +1243,30 @@ body.dark-mode {
 
 /* Add modal header and footer styles */
 .modal-footer {
-    margin-top: 20px;
+    margin-top: 24px;
     padding-top: 16px;
     border-top: 1px solid #e1e4e8;
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: center;
-}
+    gap: 16px;
-
-.dark-mode .modal-footer {
-    border-color: #2d2d2d;
 }
 
 .modal-footer-left {
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    gap: 8px;
+    align-items: flex-start;
+    margin-bottom: 0;
+    max-width: 50%;
 }
 
 .modal-footer-right {
     display: flex;
     align-items: center;
-    gap: 12px;
+    justify-content: flex-end;
+    flex: 0 0 auto;
+    white-space: nowrap;
 }
 
 .modal-chat-button {
@@ -1936,22 +2058,17 @@ input:checked + .slider:before {
 }
 
 .modal-hint {
-    margin-bottom: 1rem;
+    margin-bottom: 0;
-    background-color: var(--hover-color);
+    font-size: 0.75rem;
-    border-radius: 6px;
+    color: var(--text-color-light);
-    font-size: 0.9rem;
+    opacity: 0.7;
-    color: var(--text-color);
+    display: block;
     line-height: 1.4;
+    max-width: 300px;
 }
 
-.modal-hint a {
+.dark-mode .modal-hint {
-    color: var(--accent-color);
+    color: var(--text-color-dark);
-    text-decoration: none;
-    font-weight: 500;
-}
-
-.modal-hint a:hover {
-    text-decoration: underline;
 }
 
 .content-well {
@@ -2001,3 +2118,126 @@ input:checked + .slider:before {
     border-color: var(--dark-border-color);
     background-color: var(--dark-background);
 }
+
+.github-form {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-top: 0;
+    justify-content: flex-end;
+    flex-wrap: nowrap;
+}
+
+.github-inputs {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+    font-size: 13px;
+    color: var(--text-color-light);
+}
+
+.github-inputs span {
+    opacity: 0.7;
+    font-size: 12px;
+}
+
+.github-input {
+    border: 1px solid #e1e4e8;
+    border-radius: 4px;
+    padding: 4px 6px;
+    font-size: 12px;
+    width: 100px;
+    background-color: var(--bg-color-light);
+    color: var(--text-color-light);
+    transition: all 0.2s ease;
+}
+
+#github-branch {
+    width: 80px;
+}
+
+@media (max-width: 768px) {
+    .modal-footer {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 16px;
+    }
+    
+    .modal-footer-left {
+        max-width: 100%;
+        margin-bottom: 0;
+    }
+    
+    .modal-footer-right {
+        width: 100%;
+    }
+    
+    .github-form {
+        flex-direction: column;
+        align-items: stretch;
+        gap: 16px;
+        width: 100%;
+    }
+    
+    .github-inputs {
+        width: 100%;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        gap: 6px;
+    }
+    
+    .github-inputs span {
+        margin: 0 2px;
+    }
+    
+    .github-input {
+        flex: 1;
+        min-width: 60px;
+    }
+    
+    .create-yaml-button {
+        width: 100%;
+    }
+}
+
+.dark-mode .modal-footer {
+    border-color: #2d2d2d;
+}
+
+.github-input:focus {
+    outline: none;
+    border-color: var(--accent-color);
+    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
+}
+
+.dark-mode .github-inputs {
+    color: var(--text-color-dark);
+}
+
+.dark-mode .github-input {
+    background-color: var(--bg-color-dark);
+    color: var(--text-color-dark);
+    border-color: #2d2d2d;
+}
+
+.create-yaml-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    padding: 6px 12px;
+    border-radius: 4px;
+    font-size: 13px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    flex-shrink: 0;
+}
+
+.create-yaml-button:hover {
+    background-color: #0e9f71;
+}