steve
/
awesome-chatgpt-prompts
mirror of https://github.com/f/awesome-chatgpt-prompts
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

prettier and making updating simple one and simple

This commit is contained in:
Burak 2025-02-11 19:42:01 +03:00
parent 0e910b6dbc
commit b281587684
1 changed files with 174 additions and 157 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

331
script.js
View File

@ -18,88 +18,88 @@ function extractVariables(text) {
const regex = /\${([^}]+)}/g;
const variables = [];
let match;
while ((match = regex.exec(text)) !== null) {
const [variable, defaultValue] = match[1].split(':').map(s => s.trim());
variables.push({ name: variable, default: defaultValue || '' });
const [variable, defaultValue] = match[1].split(":").map((s) => s.trim());
variables.push({ name: variable, default: defaultValue || "" });
}
return [...new Set(variables.map(v => JSON.stringify(v)))].map(v => JSON.parse(v)); // Remove duplicates
return [...new Set(variables.map((v) => JSON.stringify(v)))].map((v) =>
JSON.parse(v)
); // Remove duplicates
}
function createVariableInputs(variables, container) {
const form = document.createElement('div');
form.className = 'variable-form';
variables.forEach(variable => {
const wrapper = document.createElement('div');
wrapper.className = 'variable-input-wrapper';
const label = document.createElement('label');
const form = document.createElement("div");
form.className = "variable-form";
variables.forEach((variable) => {
const wrapper = document.createElement("div");
wrapper.className = "variable-input-wrapper";
const label = document.createElement("label");
label.textContent = variable.name;
label.style.fontWeight = '600';
const input = document.createElement('input');
input.type = 'text';
input.className = 'variable-input';
label.style.fontWeight = "600";
const input = document.createElement("input");
input.type = "text";
input.className = "variable-input";
input.placeholder = variable.default || `Enter ${variable.name}`;
input.dataset.variable = variable.name;
input.dataset.default = variable.default || '';
input.dataset.default = variable.default || "";
wrapper.appendChild(label);
wrapper.appendChild(input);
form.appendChild(wrapper);
});
container.appendChild(form);
return form;
}
// Function to update the prompt preview with user input
function updatePromptPreview(promptText, form) {
let previewText = promptText;
const inputs = form.querySelectorAll('.variable-input');
inputs.forEach(input => {
const value = input.value.trim();
const variable = input.dataset.variable;
const defaultValue = input.dataset.default;
const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, 'g');
let replacement;
if (value) {
// User entered value
replacement = value;
} else if (defaultValue) {
// Show default value with highlight
replacement = defaultValue;
} else {
// No value or default, show variable name
replacement = variable;
}
replacement = `<b>${replacement}</b>`;
previewText = previewText.replace(pattern,replacement);
});
return previewText;
}
function updatedContent(promptText) {
// Check if content has variables
// Function to update the prompt preview with user input or default values
function updatePromptPreview(promptText, form) {
const variables = extractVariables(promptText);
if (variables.length === 0) {
return promptText; // Return original text if no variables found
}
// Replace variables with their default values if they exist
let updatedText = promptText;
variables.forEach(variable => {
const pattern = new RegExp(`\\$\{${variable.name}[^}]*\}`, 'g');
const replacement = variable.default || `<b>${variable.name}</b>`;
updatedText = updatedText.replace(pattern, replacement);
});
return updatedText;
let previewText = promptText;
// Replace variables with their default values without editting (for prompt cards, copy buttons, chat)
if (!form) {
variables.forEach(variable => {
const pattern = new RegExp(`\\$\{${variable.name}[^}]*\}`, 'g');
const replacement = variable.default || `<b>${variable.name}</b>`;
previewText = previewText.replace(pattern, replacement);
});
}
// Replace variables according to the user inputs.
else {
const inputs = form.querySelectorAll(".variable-input");
inputs.forEach((input) => {
const value = input.value.trim();
const variable = input.dataset.variable;
const defaultValue = input.dataset.default;
const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, 'g');
let replacement;
if (value) {
// User entered value
replacement = value;
} else if (defaultValue) {
// Show default value with highlight
replacement = defaultValue;
} else {
// No value or default, show variable name
replacement = variable;
}
replacement = `<b>${replacement}</b>`;
previewText = previewText.replace(pattern, replacement);
});
}
return previewText;
}
// Initialize everything after DOM loads
@ -216,11 +216,12 @@ async function initializeSearch() {
const searchTerm = e.target.value.toLowerCase();
const filteredPrompts = prompts.filter((prompt) => {
const matchesSearch = prompt.act.toLowerCase().includes(searchTerm) ||
const matchesSearch =
prompt.act.toLowerCase().includes(searchTerm) ||
prompt.prompt.toLowerCase().includes(searchTerm);
return isDevMode
? (matchesSearch && prompt.for_devs === true)
? matchesSearch && prompt.for_devs === true
: matchesSearch;
});
@ -254,29 +255,32 @@ function updatePromptCount(filteredCount, totalCount) {
function parseCSV(csv) {
const lines = csv.split("\n");
const headers = lines[0].split(",").map((header) =>
header.replace(/"/g, "").trim()
);
const headers = lines[0]
.split(",")
.map((header) => header.replace(/"/g, "").trim());
return lines.slice(1).map((line) => {
const values = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
const entry = {};
return lines
.slice(1)
.map((line) => {
const values = line.match(/(".*?"|[^",\s]+)(?=\s*,|\s*$)/g) || [];
const entry = {};
headers.forEach((header, index) => {
let value = values[index] ? values[index].replace(/"/g, "").trim() : "";
// Remove backticks from the act/title
if (header === "act") {
value = value.replace(/`/g, "");
}
// Convert 'TRUE'/'FALSE' strings to boolean for for_devs
if (header === "for_devs") {
value = value.toUpperCase() === "TRUE";
}
entry[header] = value;
});
headers.forEach((header, index) => {
let value = values[index] ? values[index].replace(/"/g, "").trim() : "";
// Remove backticks from the act/title
if (header === "act") {
value = value.replace(/`/g, "");
}
// Convert 'TRUE'/'FALSE' strings to boolean for for_devs
if (header === "for_devs") {
value = value.toUpperCase() === "TRUE";
}
entry[header] = value;
});
return entry;
}).filter((entry) => entry.act && entry.prompt);
return entry;
})
.filter((entry) => entry.act && entry.prompt);
}
function displaySearchResults(results) {
@ -320,8 +324,9 @@ function displaySearchResults(results) {
// Find the prompt card with matching title
const cards = document.querySelectorAll(".prompt-card");
const targetCard = Array.from(cards).find((card) => {
const cardTitle = card.querySelector(".prompt-title").textContent
.replace(/\s+/g, " ") // Normalize whitespace
const cardTitle = card
.querySelector(".prompt-title")
.textContent.replace(/\s+/g, " ") // Normalize whitespace
.replace(/[\n\r]/g, "") // Remove newlines
.trim();
@ -330,8 +335,10 @@ function displaySearchResults(results) {
.replace(/[\n\r]/g, "") // Remove newlines
.trim();
return cardTitle.toLowerCase().includes(searchTitle.toLowerCase()) ||
searchTitle.toLowerCase().includes(cardTitle.toLowerCase());
return (
cardTitle.toLowerCase().includes(searchTitle.toLowerCase()) ||
searchTitle.toLowerCase().includes(cardTitle.toLowerCase())
);
});
if (targetCard) {
@ -351,8 +358,8 @@ function displaySearchResults(results) {
if (isMobile) {
// On mobile, scroll the window
const cardRect = targetCard.getBoundingClientRect();
const scrollTop = window.pageYOffset + cardRect.top - headerHeight -
20;
const scrollTop =
window.pageYOffset + cardRect.top - headerHeight - 20;
window.scrollTo({
top: scrollTop,
@ -362,8 +369,8 @@ function displaySearchResults(results) {
// On desktop, scroll the main-content container
const mainContent = document.querySelector(".main-content");
const cardRect = targetCard.getBoundingClientRect();
const scrollTop = mainContent.scrollTop + cardRect.top -
headerHeight - 20;
const scrollTop =
mainContent.scrollTop + cardRect.top - headerHeight - 20;
mainContent.scrollTo({
top: scrollTop,
@ -404,12 +411,13 @@ function filterPrompts() {
.then((csvText) => {
const prompts = parseCSV(csvText);
const filteredPrompts = prompts.filter((prompt) => {
const matchesSearch = !searchTerm ||
const matchesSearch =
!searchTerm ||
prompt.act.toLowerCase().includes(searchTerm) ||
prompt.prompt.toLowerCase().includes(searchTerm);
return isDevMode
? (matchesSearch && prompt.for_devs === true)
? matchesSearch && prompt.for_devs === true
: matchesSearch;
});
@ -418,7 +426,7 @@ function filterPrompts() {
filteredPrompts.length,
isDevMode
? prompts.filter((p) => p.for_devs === true).length
: prompts.length,
: prompts.length
);
displaySearchResults(filteredPrompts);
@ -426,23 +434,29 @@ function filterPrompts() {
const promptsGrid = document.querySelector(".prompts-grid");
if (promptsGrid) {
const cards = promptsGrid.querySelectorAll(
".prompt-card:not(.contribute-card)",
".prompt-card:not(.contribute-card)"
);
cards.forEach((card) => {
const title = card.querySelector(".prompt-title").textContent.trim();
const matchingPrompt = prompts.find((p) => {
const pTitle = p.act.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
const pTitle = p.act
.replace(/\s+/g, " ")
.replace(/[\n\r]/g, "")
.trim();
const cardTitle = title.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
const cardTitle = title
.replace(/\s+/g, " ")
.replace(/[\n\r]/g, "")
.trim();
return pTitle.toLowerCase() === cardTitle.toLowerCase() ||
return (
pTitle.toLowerCase() === cardTitle.toLowerCase() ||
pTitle.toLowerCase().includes(cardTitle.toLowerCase()) ||
cardTitle.toLowerCase().includes(pTitle.toLowerCase());
cardTitle.toLowerCase().includes(pTitle.toLowerCase())
);
});
// Show card if not in dev mode or if it's a dev prompt in dev mode
card.style.display =
(!isDevMode || (matchingPrompt && matchingPrompt.for_devs === true))
!isDevMode || (matchingPrompt && matchingPrompt.for_devs === true)
? ""
: "none";
});
@ -485,23 +499,29 @@ function createPromptCards() {
const isDevMode = document.getElementById("devModeToggle").checked;
const promptElements = document.querySelectorAll(
"h2[id^=act] + p + blockquote",
"h2[id^=act] + p + blockquote"
);
promptElements.forEach((blockquote) => {
const title = blockquote.previousElementSibling.previousElementSibling
.textContent.trim();
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, "")
const csvTitle = p.act
.replace(/\s+/g, " ")
.replace(/[\n\r]/g, "")
.trim();
const elementTitle = title.replace(/\s+/g, " ").replace(/[\n\r]/g, "")
const elementTitle = title
.replace(/\s+/g, " ")
.replace(/[\n\r]/g, "")
.trim();
return csvTitle.toLowerCase() === elementTitle.toLowerCase() ||
return (
csvTitle.toLowerCase() === elementTitle.toLowerCase() ||
csvTitle.toLowerCase().includes(elementTitle.toLowerCase()) ||
elementTitle.toLowerCase().includes(csvTitle.toLowerCase());
elementTitle.toLowerCase().includes(csvTitle.toLowerCase())
);
});
// Extract contributor from the paragraph element
@ -546,9 +566,9 @@ function createPromptCards() {
<div class="prompt-title">
${title}
<div class="action-buttons">
<button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${
encodeURIComponent(updatedContent(content.trim()))
}')">
<button class="chat-button" title="Open in AI Chat" onclick="openInChat(this, '${encodeURIComponent(
updatePromptPreview(content.trim())
)}')">
<svg class="chat-icon" 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="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
@ -557,9 +577,9 @@ function createPromptCards() {
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
</button>
<button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${
encodeURIComponent(updatedContent(content.trim()))
}')">
<button class="copy-button" title="Copy prompt" onclick="copyPrompt(this, '${encodeURIComponent(
updatePromptPreview(content.trim())
)}')">
<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="M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2"></path>
<rect x="8" y="2" width="8" height="4" rx="1" ry="1"></rect>
@ -567,7 +587,7 @@ function createPromptCards() {
</button>
</div>
</div>
<p class="prompt-content">${updatedContent(content)}</p>
<p class="prompt-content">${updatePromptPreview(content)}</p>
<a href="https://github.com/${contributor}" class="contributor-badge" target="_blank" rel="noopener">@${contributor}</a>
`;
@ -585,7 +605,7 @@ function createPromptCards() {
copyButton.addEventListener("click", async (e) => {
e.stopPropagation();
try {
await navigator.clipboard.writeText(updatedContent(content));
await navigator.clipboard.writeText(updatePromptPreview(content));
copyButton.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>
@ -695,36 +715,36 @@ function showModal(title, content) {
const modalTitle = modalOverlay.querySelector(".modal-title");
const modalContent = modalOverlay.querySelector(".modal-content");
// Extract variables from content
const variables = extractVariables(content);
// Create variable inputs container if variables exist
if (variables.length > 0) {
const variableContainer = document.createElement('div');
variableContainer.className = 'variable-container';
const variableContainer = document.createElement("div");
variableContainer.className = "variable-container";
const form = createVariableInputs(variables, variableContainer);
// Initialize the modal content with updated prompt preview if variables exist
// Initialize the modal content with updated prompt preview if variables exist
const previewText = updatePromptPreview(content, form);
modalContent.innerHTML = previewText;
// Add event listeners for real-time updates
form.addEventListener('input', () => {
form.addEventListener("input", () => {
const previewText = updatePromptPreview(content, form);
modalContent.innerHTML = previewText;
// Update chat button data
const modalChatButton = modalOverlay.querySelector(".modal-chat-button");
if (modalChatButton) {
modalChatButton.dataset.content = previewText;
}
});
// Insert variable container before content
modalContent.parentElement.insertBefore(variableContainer, modalContent);
}else{
} else {
modalTitle.textContent = title;
modalContent.textContent = content;
}
@ -735,15 +755,13 @@ function showModal(title, content) {
if (!modalTitle || !modalContent) return;
// 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,
platform.dataset.platform
);
modalChatButton.style.display = shouldHideChat ? "none" : "flex";
@ -758,13 +776,13 @@ function showModal(title, content) {
modalChatButton.innerHTML = `
<svg class="chat-icon" 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" style="display: ${
isDevMode ? "none" : "block"
}">
isDevMode ? "none" : "block"
}">
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"></path>
</svg>
<svg class="terminal-icon" 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" style="display: ${
isDevMode ? "block" : "none"
}">
isDevMode ? "block" : "none"
}">
<polyline points="4 17 10 11 4 5"></polyline>
<line x1="12" y1="19" x2="20" y2="19"></line>
</svg>
@ -779,15 +797,14 @@ function showModal(title, 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(),
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}`;
modalContributor.textContent = `Contributed by ${contributorBadge.textContent}`;
}
}
@ -828,22 +845,22 @@ function hideModal() {
modalOverlay.remove();
}
let selectedPlatform = localStorage.getItem("selected-platform") ||
"github-copilot"; // Get from localStorage or default to github
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")
);
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",
".chat-button, .modal-chat-button"
);
const shouldHideChat = ["gemini", "llama"].includes(selectedPlatform);
chatButtons.forEach((btn) => {
@ -900,20 +917,20 @@ function openInChat(button, encodedPrompt) {
// Existing copy function
async function copyPrompt(button, encodedPrompt) {
let promptText = decodeURIComponent(encodedPrompt);
// If there's a modal open, use the current state of variables
const modalContent = document.querySelector('.modal-content');
const modalContent = document.querySelector(".modal-content");
if (modalContent) {
// Get all variable inputs
const form = document.querySelector('.variable-form');
const form = document.querySelector(".variable-form");
if (form) {
const inputs = form.querySelectorAll('.variable-input');
inputs.forEach(input => {
const inputs = form.querySelectorAll(".variable-input");
inputs.forEach((input) => {
const value = input.value.trim();
const variable = input.dataset.variable;
const defaultValue = input.dataset.default;
const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, 'g');
const pattern = new RegExp(`\\$\{${variable}[^}]*\}`, "g");
// Use value or default value
const replacement = value || defaultValue || variable;
promptText = promptText.replace(pattern, replacement);
@ -922,7 +939,7 @@ async function copyPrompt(button, encodedPrompt) {
}
try {
await navigator.clipboard.writeText(updatedContent(promptText));
await navigator.clipboard.writeText(updatePromptPreview(promptText));
const originalHTML = button.innerHTML;
button.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">
@ -973,7 +990,7 @@ function hideCopilotSuggestion(switchToCopilot) {
if (switchToCopilot) {
const copilotButton = document.querySelector(
'[data-platform="github-copilot"]',
'[data-platform="github-copilot"]'
);
if (copilotButton) {
copilotButton.click();
@ -991,14 +1008,14 @@ function hideCopilotSuggestion(switchToCopilot) {
// Function to update chat button icons based on dev mode
function updateChatButtonIcons(isDevMode) {
document.querySelectorAll(".chat-button, .modal-chat-button").forEach(
(button) => {
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";
}
},
);
});
}