From a4eb7b001e6af21f1b0bbfc80034ac3389652936 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fatih=20Kadir=20Ak=C4=B1n?= Date: Mon, 16 Jun 2025 16:24:18 +0300 Subject: [PATCH] update --- _layouts/embed.html | 16 +++++++++---- _site/embed-script.js | 53 ++++++++++++++++++++++++++++++++++++++++-- _site/embed-style.css | 12 ++++++++++ _site/embed/index.html | 16 +++++++++---- embed-script.js | 53 ++++++++++++++++++++++++++++++++++++++++-- embed-style.css | 12 ++++++++++ 6 files changed, 148 insertions(+), 14 deletions(-) diff --git a/_layouts/embed.html b/_layouts/embed.html index 80e3bab..9b4207f 100644 --- a/_layouts/embed.html +++ b/_layouts/embed.html @@ -33,7 +33,7 @@

prompts.chat/embed

-

Design and share beautiful AI prompts

+

Design and share beautiful AI prompts, for your website or blog.

@@ -226,12 +229,9 @@
- -
+
+ +
+ <iframe src="..."></iframe> +
+
diff --git a/_site/embed-script.js b/_site/embed-script.js index 6146823..813f973 100644 --- a/_site/embed-script.js +++ b/_site/embed-script.js @@ -75,6 +75,7 @@ class EmbedDesigner { this.setupDesignerEvents(); this.setupDesignerColors(); this.updatePreview(); + this.updateIframeSnippet(); } setupDesignerElements() { @@ -260,8 +261,8 @@ class EmbedDesigner { // Generate embed button document.getElementById('generate-embed').addEventListener('click', () => this.showEmbedModal()); - // Copy URL button - document.getElementById('copy-url').addEventListener('click', () => this.copyShareURL()); + // Iframe snippet click to copy + document.getElementById('iframe-snippet').addEventListener('click', () => this.copyIframeCode()); // Reset settings button document.getElementById('reset-settings').addEventListener('click', () => { @@ -283,9 +284,15 @@ class EmbedDesigner { // Update UI to reflect defaults this.setupDesignerElements(); this.updatePreview(); + this.updateIframeSnippet(); } }); + // Load example button + document.getElementById('load-example').addEventListener('click', () => { + this.loadExample(); + }); + // Modal events document.getElementById('close-modal').addEventListener('click', () => this.hideEmbedModal()); document.getElementById('copy-embed-code').addEventListener('click', () => this.copyEmbedCode()); @@ -325,6 +332,17 @@ class EmbedDesigner { this.updatePreview(); this.saveToLocalStorage(); + this.updateIframeSnippet(); + } + + updateIframeSnippet() { + const snippet = document.getElementById('iframe-snippet'); + if (!snippet) return; + + const code = this.generateEmbedCode(); + // Show a shortened version in the snippet + const shortCode = code.replace(/\n/g, ' ').replace(/\s+/g, ' '); + snippet.textContent = shortCode; } setupDesignerColors() { @@ -440,6 +458,12 @@ class EmbedDesigner { this.showNotification('Share URL copied to clipboard!'); } + async copyIframeCode() { + const embedCode = this.generateEmbedCode(); + await this.copyToClipboard(embedCode); + this.showNotification('Iframe code copied to clipboard!'); + } + async copyToClipboard(text) { if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(text); @@ -471,6 +495,31 @@ class EmbedDesigner { notification.classList.add('opacity-0'); }, duration); } + + loadExample() { + // Set example data + this.config = { + prompt: 'Build an MCP server that works with Weather API. See @Web for cool weather APIs.', + context: ['@Web', 'https://modelcontextprotocol.io/full-llms.txt'], + model: 'claude-4-sonnet', + mode: 'agent', + thinking: true, + max: true, + lightColor: '#3b82f6', + darkColor: '#60a5fa', + height: '250', + themeMode: 'auto' + }; + + // Update all form elements + this.setupDesignerElements(); + this.updatePreview(); + this.updateIframeSnippet(); + this.saveToLocalStorage(); + + // Show notification + this.showNotification('Example loaded!'); + } } // Dark mode toggle function diff --git a/_site/embed-style.css b/_site/embed-style.css index 3c437a2..3d47a0c 100644 --- a/_site/embed-style.css +++ b/_site/embed-style.css @@ -374,4 +374,16 @@ input[type="color"]::-webkit-color-swatch { /* Better visual hierarchy for labels */ label { font-weight: 500; +} + +/* Dark mode iframe snippet styling */ +body.dark-mode #iframe-snippet { + background-color: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.6); +} + +body.dark-mode #iframe-snippet:hover { + background-color: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.9); } \ No newline at end of file diff --git a/_site/embed/index.html b/_site/embed/index.html index 68eb90a..873f622 100644 --- a/_site/embed/index.html +++ b/_site/embed/index.html @@ -33,7 +33,7 @@

prompts.chat/embed

-

Design and share beautiful AI prompts

+

Design and share beautiful AI prompts, for your website or blog.

@@ -226,12 +229,9 @@
- -
+
+ +
+ <iframe src="..."></iframe> +
+
diff --git a/embed-script.js b/embed-script.js index 6146823..813f973 100644 --- a/embed-script.js +++ b/embed-script.js @@ -75,6 +75,7 @@ class EmbedDesigner { this.setupDesignerEvents(); this.setupDesignerColors(); this.updatePreview(); + this.updateIframeSnippet(); } setupDesignerElements() { @@ -260,8 +261,8 @@ class EmbedDesigner { // Generate embed button document.getElementById('generate-embed').addEventListener('click', () => this.showEmbedModal()); - // Copy URL button - document.getElementById('copy-url').addEventListener('click', () => this.copyShareURL()); + // Iframe snippet click to copy + document.getElementById('iframe-snippet').addEventListener('click', () => this.copyIframeCode()); // Reset settings button document.getElementById('reset-settings').addEventListener('click', () => { @@ -283,9 +284,15 @@ class EmbedDesigner { // Update UI to reflect defaults this.setupDesignerElements(); this.updatePreview(); + this.updateIframeSnippet(); } }); + // Load example button + document.getElementById('load-example').addEventListener('click', () => { + this.loadExample(); + }); + // Modal events document.getElementById('close-modal').addEventListener('click', () => this.hideEmbedModal()); document.getElementById('copy-embed-code').addEventListener('click', () => this.copyEmbedCode()); @@ -325,6 +332,17 @@ class EmbedDesigner { this.updatePreview(); this.saveToLocalStorage(); + this.updateIframeSnippet(); + } + + updateIframeSnippet() { + const snippet = document.getElementById('iframe-snippet'); + if (!snippet) return; + + const code = this.generateEmbedCode(); + // Show a shortened version in the snippet + const shortCode = code.replace(/\n/g, ' ').replace(/\s+/g, ' '); + snippet.textContent = shortCode; } setupDesignerColors() { @@ -440,6 +458,12 @@ class EmbedDesigner { this.showNotification('Share URL copied to clipboard!'); } + async copyIframeCode() { + const embedCode = this.generateEmbedCode(); + await this.copyToClipboard(embedCode); + this.showNotification('Iframe code copied to clipboard!'); + } + async copyToClipboard(text) { if (navigator.clipboard && window.isSecureContext) { await navigator.clipboard.writeText(text); @@ -471,6 +495,31 @@ class EmbedDesigner { notification.classList.add('opacity-0'); }, duration); } + + loadExample() { + // Set example data + this.config = { + prompt: 'Build an MCP server that works with Weather API. See @Web for cool weather APIs.', + context: ['@Web', 'https://modelcontextprotocol.io/full-llms.txt'], + model: 'claude-4-sonnet', + mode: 'agent', + thinking: true, + max: true, + lightColor: '#3b82f6', + darkColor: '#60a5fa', + height: '250', + themeMode: 'auto' + }; + + // Update all form elements + this.setupDesignerElements(); + this.updatePreview(); + this.updateIframeSnippet(); + this.saveToLocalStorage(); + + // Show notification + this.showNotification('Example loaded!'); + } } // Dark mode toggle function diff --git a/embed-style.css b/embed-style.css index 3c437a2..3d47a0c 100644 --- a/embed-style.css +++ b/embed-style.css @@ -374,4 +374,16 @@ input[type="color"]::-webkit-color-swatch { /* Better visual hierarchy for labels */ label { font-weight: 500; +} + +/* Dark mode iframe snippet styling */ +body.dark-mode #iframe-snippet { + background-color: rgba(255, 255, 255, 0.05); + border-color: rgba(255, 255, 255, 0.1); + color: rgba(255, 255, 255, 0.6); +} + +body.dark-mode #iframe-snippet:hover { + background-color: rgba(255, 255, 255, 0.08); + color: rgba(255, 255, 255, 0.9); } \ No newline at end of file