+ Share your creative prompts with the community! Submit a pull request to add your prompts to the collection. +
+ Contribute Now + +`; + promptsGrid.appendChild(contributeCard); + + // Fetch prompts.csv to get for_devs information + fetch("/prompts.csv") + .then((response) => response.text()) + .then((csvText) => { + const prompts = parseCSV(csvText); + const isDevMode = document.getElementById("devModeToggle").checked; + + const promptElements = document.querySelectorAll( + "h2[id^=act] + p + blockquote", + ); + + promptElements.forEach((blockquote) => { + const title = blockquote.previousElementSibling.previousElementSibling + .textContent.trim(); + const content = blockquote.textContent.trim(); + + // Find matching prompt in CSV + const matchingPrompt = prompts.find((p) => { + const csvTitle = p.act.replace(/\s+/g, " ").replace(/[\n\r]/g, "") + .trim(); + const elementTitle = title.replace(/\s+/g, " ").replace(/[\n\r]/g, "") + .trim(); + return csvTitle.toLowerCase() === elementTitle.toLowerCase() || + csvTitle.toLowerCase().includes(elementTitle.toLowerCase()) || + elementTitle.toLowerCase().includes(csvTitle.toLowerCase()); + }); + + // Extract contributor from the paragraph element + const contributorParagraph = blockquote.previousElementSibling; + const contributorText = contributorParagraph.textContent; + let contributor = null; + + // Try different contributor formats + const formats = [ + /Contributed by: \[([^\]]+)\]/i, + /Contributed by \[([^\]]+)\]/i, + /Contributed by: @([^\s]+)/i, + /Contributed by @([^\s]+)/i, + /Contributed by: \[@([^\]]+)\]/i, + /Contributed by \[@([^\]]+)\]/i, + ]; + + for (const format of formats) { + const match = contributorText.match(format); + if (match) { + contributor = match[1]; + // Remove @ if it exists at the start + contributor = contributor.replace(/^@/, ""); + break; + } + } + + // Set default contributor to 'f' if none found + if (!contributor) { + contributor = "f"; + } + + const card = document.createElement("div"); + card.className = "prompt-card"; + + // Set initial visibility based on dev mode + if (isDevMode && (!matchingPrompt || !matchingPrompt.for_devs)) { + card.style.display = "none"; + } + + card.innerHTML = ` +${content}
+ @${contributor} + `; + + // Add click event for showing modal + card.addEventListener("click", (e) => { + if ( + !e.target.closest(".copy-button") && + !e.target.closest(".contributor-badge") + ) { + showModal(title, content); + } + }); + + const copyButton = card.querySelector(".copy-button"); + copyButton.addEventListener("click", async (e) => { + e.stopPropagation(); + try { + await navigator.clipboard.writeText(content); + copyButton.innerHTML = ` + + `; + setTimeout(() => { + copyButton.innerHTML = ` + + `; + }, 2000); + } catch (err) { + alert("Failed to copy prompt to clipboard"); + } + }); + + promptsGrid.appendChild(card); + }); + + container.innerHTML = ""; + container.appendChild(promptsGrid); + + // Initialize modal event listeners + initializeModalListeners(); + }) + .catch((error) => { + console.error("Error loading prompts:", error); + }); +} + +function initializeModalListeners() { + const modalOverlay = document.getElementById("modalOverlay"); + const modalClose = document.querySelector(".modal-close"); + + if (!modalOverlay || !modalClose) return; + + modalClose.addEventListener("click", hideModal); + modalOverlay.addEventListener("click", (e) => { + if (e.target === modalOverlay) { + hideModal(); + } + }); +} + +// Add global event listener for Escape key +document.addEventListener("keydown", (e) => { + if (e.key === "Escape") { + hideModal(); + } +}); + +function createModal() { + const modalHTML = ` + +`; + document.body.insertAdjacentHTML("beforeend", modalHTML); + initializeModalListeners(); +} + +function showModal(title, content) { + let modalOverlay = document.getElementById("modalOverlay"); + if (!modalOverlay) { + createModal(); + modalOverlay = document.getElementById("modalOverlay"); + } + + const modalTitle = modalOverlay.querySelector(".modal-title"); + const modalContent = modalOverlay.querySelector(".modal-content"); + const modalCopyButton = modalOverlay.querySelector(".modal-copy-button"); + const modalContributor = modalOverlay.querySelector(".modal-contributor"); + const modalChatButton = modalOverlay.querySelector(".modal-chat-button"); + + if (!modalTitle || !modalContent) return; + + modalTitle.textContent = title; + modalContent.textContent = content; + + // Update chat button text with platform name and handle visibility + const platform = document.querySelector(".platform-tag.active"); + const isDevMode = document.getElementById("devModeToggle").checked; + + if (platform) { + const shouldHideChat = ["gemini", "llama"].includes( + platform.dataset.platform, + ); + modalChatButton.style.display = shouldHideChat ? "none" : "flex"; + + if (!shouldHideChat) { + const chatIcon = modalChatButton.querySelector(".chat-icon"); + const terminalIcon = modalChatButton.querySelector(".terminal-icon"); + + if (chatIcon && terminalIcon) { + chatIcon.style.display = isDevMode ? "none" : "block"; + terminalIcon.style.display = isDevMode ? "block" : "none"; + } + + modalChatButton.innerHTML = ` + + + Chat with ${platform.textContent} + `; + } + } + + // Store content for chat button + modalChatButton.dataset.content = content; + + // Find the contributor for this prompt + const promptCard = Array.from(document.querySelectorAll(".prompt-card")).find( + (card) => + card.querySelector(".prompt-title").textContent.trim() === title.trim(), + ); + + if (promptCard) { + const contributorBadge = promptCard.querySelector(".contributor-badge"); + if (contributorBadge) { + modalContributor.href = contributorBadge.href; + modalContributor.textContent = + `Contributed by ${contributorBadge.textContent}`; + } + } + + // Add copy functionality + modalCopyButton.addEventListener("click", async () => { + try { + await navigator.clipboard.writeText(content); + modalCopyButton.innerHTML = ` + + `; + setTimeout(() => { + modalCopyButton.innerHTML = ` + + `; + }, 2000); + } catch (err) { + alert("Failed to copy prompt to clipboard"); + } + }); + + modalOverlay.style.display = "block"; + document.body.style.overflow = "hidden"; +} + +function hideModal() { + const modalOverlay = document.getElementById("modalOverlay"); + if (!modalOverlay) return; + + modalOverlay.style.display = "none"; + document.body.style.overflow = ""; + + // Optional: Remove modal from DOM when hidden + modalOverlay.remove(); +} + +let selectedPlatform = localStorage.getItem("selected-platform") || + "github-copilot"; // Get from localStorage or default to github + +// Platform toggle functionality +document.querySelectorAll(".platform-tag").forEach((button) => { + button.addEventListener("click", () => { + document.querySelectorAll(".platform-tag").forEach((btn) => + btn.classList.remove("active") + ); + button.classList.add("active"); + selectedPlatform = button.dataset.platform; + localStorage.setItem("selected-platform", selectedPlatform); + + // Hide/show chat buttons based on platform + const chatButtons = document.querySelectorAll( + ".chat-button, .modal-chat-button", + ); + const shouldHideChat = ["gemini", "llama"].includes(selectedPlatform); + chatButtons.forEach((btn) => { + btn.style.display = shouldHideChat ? "none" : "flex"; + }); + }); +}); + +// Set active platform from localStorage and handle initial button visibility +const platformToActivate = + document.querySelector(`[data-platform="${selectedPlatform}"]`) || + document.querySelector('[data-platform="github-copilot"]'); +platformToActivate.classList.add("active"); + +// Set initial chat button visibility +const shouldHideChat = ["gemini", "llama"].includes(selectedPlatform); +document.querySelectorAll(".chat-button, .modal-chat-button").forEach((btn) => { + btn.style.display = shouldHideChat ? "none" : "flex"; +}); + +// Function to open prompt in selected AI chat platform +function openInChat(button, encodedPrompt) { + const promptText = decodeURIComponent(encodedPrompt); + const platform = document.querySelector(".platform-tag.active"); + + if (!platform) return; + + const baseUrl = platform.dataset.url; + let url; + + switch (platform.dataset.platform) { + case "github-copilot": + url = `${baseUrl}?prompt=${encodeURIComponent(promptText)}`; + break; + case "chatgpt": + url = `${baseUrl}?prompt=${encodeURIComponent(promptText)}`; + break; + case "claude": + url = `${baseUrl}?q=${encodeURIComponent(promptText)}`; + break; + case "perplexity": + url = `${baseUrl}/search?q=${encodeURIComponent(promptText)}`; + break; + case "mistral": + url = `${baseUrl}?q=${encodeURIComponent(promptText)}`; + break; + default: + url = `${baseUrl}?q=${encodeURIComponent(promptText)}`; + } + + window.open(url, "_blank"); +} + +// Existing copy function +async function copyPrompt(button, encodedPrompt) { + const promptText = decodeURIComponent(encodedPrompt); + try { + await navigator.clipboard.writeText(promptText); + const originalHTML = button.innerHTML; + button.innerHTML = + ''; + setTimeout(() => { + button.innerHTML = originalHTML; + }, 1000); + } catch (err) { + console.error("Failed to copy text: ", err); + } +} + +// Function to handle chat button click in modal +function openModalChat() { + const modalContent = document.querySelector(".modal-content"); + if (modalContent) { + const content = modalContent.textContent; + openInChat(null, encodeURIComponent(content.trim())); + } +} + +// Add these functions before the closing script tag +function showCopilotSuggestion() { + const modal = document.getElementById("copilotSuggestionModal"); + const backdrop = document.querySelector(".copilot-suggestion-backdrop"); + if (modal) { + if (!backdrop) { + const backdropDiv = document.createElement("div"); + backdropDiv.className = "copilot-suggestion-backdrop"; + document.body.appendChild(backdropDiv); + } + modal.style.display = "block"; + backdrop.style.display = "block"; + document.body.style.overflow = "hidden"; + } +} + +function hideCopilotSuggestion(switchToCopilot) { + const modal = document.getElementById("copilotSuggestionModal"); + const backdrop = document.querySelector(".copilot-suggestion-backdrop"); + const doNotShowCheckbox = document.getElementById("doNotShowAgain"); + + if (doNotShowCheckbox && doNotShowCheckbox.checked) { + localStorage.setItem("copilot-suggestion-hidden", "true"); + } + + if (switchToCopilot) { + const copilotButton = document.querySelector( + '[data-platform="github-copilot"]', + ); + if (copilotButton) { + copilotButton.click(); + } + } + + if (modal) { + modal.style.display = "none"; + if (backdrop) { + backdrop.style.display = "none"; + } + document.body.style.overflow = ""; + } +} + +// Function to update chat button icons based on dev mode +function updateChatButtonIcons(isDevMode) { + document.querySelectorAll(".chat-button, .modal-chat-button").forEach( + (button) => { + const chatIcon = button.querySelector(".chat-icon"); + const terminalIcon = button.querySelector(".terminal-icon"); + if (chatIcon && terminalIcon) { + chatIcon.style.display = isDevMode ? "none" : "block"; + terminalIcon.style.display = isDevMode ? "block" : "none"; + } + }, + ); +}