keith/Prompt_Catalog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🐞 fix: Update templates to use MainLayout and set page title via parameter

Browse Source
This commit is contained in:
Keith Solomon
2025-07-27 11:07:16 -05:00
parent 3ad0762e17
commit a28ac0b16a
4 changed files with 355 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/layouts/MainLayout.astro
View File

@@ -2,14 +2,14 @@
// MainLayout.astro
import "../styles/global.css";
const { children } = Astro.props;
const page = Astro.props.page;
---
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Prompt Catalog</title>
<title>Prompt Catalog - {page}</title>
</head>
<body class="font-sans antialiased bg-gray-800 text-gray-100">

475
src/pages/add.astro
View File

@@ -1,279 +1,274 @@
---
import "../styles/global.css";
import MainLayout from '../layouts/MainLayout.astro';
import Sidebar from "../components/SidebarAdd.astro";
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
---
<html>
<head>
<title>Prompt Catalog - Add New Prompt</title>
</head>
<MainLayout page="Add Prompt">
<div
id="supabase-env"
data-url={supabaseUrl}
data-key={supabaseKey}
hidden
></div>
<body class="font-sans antialiased bg-gray-800 text-gray-100">
<div
id="supabase-env"
data-url={supabaseUrl}
data-key={supabaseKey}
hidden
></div>
<header class="border-b p-4">
<h1 class="text-2xl font-bold"><a href="/">Prompt Catalog - Add New Prompt</a></h1>
<p class="text-sm mt-1">Add or import new AI prompts to the catalog</p>
</header>
<header class="border-b p-4">
<h1 class="text-2xl font-bold">Prompt Catalog - Add New Prompt</h1>
<p class="text-sm mt-1">Add or import new AI prompts to the catalog</p>
</header>
<main class="flex">
<Sidebar />
<main class="flex">
<Sidebar />
<div class="border-l flex-1 flex flex-col overflow-hidden">
<div class="flex-1 overflow-y-auto p-4">
<div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
Prompt added successfully!
</div>
<div id="error" class="bg-red-100 text-red-700 p-4 rounded mb-4 hidden"></div>
<form id="add-form" class="space-y-4">
<div>
<label for="title" class="block text-md font-semibold mb-1">Title<span class="text-red-600">*</span></label>
<input name="title" id="title" required class="border p-2 w-full rounded" />
<input type="hidden" name="slug" id="slug" />
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div>
<label for="type" class="block text-md font-semibold mb-1">Type<span class="text-red-600">*</span></label>
<select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
<option value="System">System</option>
<option value="Task">Task</option>
</select>
</div>
<div>
<label for="tags" class="block text-md font-semibold mb-1">Tags (comma-separated)</label>
<input name="tags" id="tags" class="border p-2 pt-1 w-full rounded" />
</div>
</div>
<div>
<label for="description" class="block text-md font-semibold mb-1">Prompt<span class="text-red-600">*</span></label>
<textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded"></textarea>
</div>
<div>
<label for="notes" class="block text-md font-semibold mb-1">Description<span class="text-red-600">*</span></label>
<textarea name="notes" id="notes" rows="3" required class="border p-2 w-full rounded"></textarea>
</div>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
Add Prompt
</button>
<hr class="my-6 border-gray-600" />
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div>
<h2 class="text-lg font-semibold mb-2">Import Prompts</h2>
<p class="text-sm text-gray-400 mb-2">Upload a JSON file to import prompts.</p>
<label for="importFile" class="block text-md font-semibold mb-1">Import Prompts from JSON</label>
<input type="file" id="importFile" accept="application/json" class="border p-2 w-full rounded bg-gray-800 text-white" />
<button type="button" id="importBtn" class="mt-2 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors duration-300 cursor-pointer">
Import Prompts
</button>
</div>
<div id="export-section">
<h2 class="text-lg font-semibold mb-2">Export Prompts</h2>
<p class="text-sm text-gray-400 mb-2">Select prompts to export, or leave all unchecked to export everything.</p>
<label class="block text-md font-semibold mb-1">Export Prompts to JSON</label>
<div id="prompt-list" class="max-h-64 overflow-y-auto mb-4 border py-1 pb-2 px-3 rounded flex flex-wrap gap-x-4 gap-y-1"></div>
<button type="button" id="exportBtn" class="bg-yellow-600 text-white px-4 py-2 rounded hover:bg-yellow-700 transition-colors duration-300 cursor-pointer">
Export All Prompts
</button>
</div>
</div>
</form>
<div class="border-l flex-1 flex flex-col overflow-hidden">
<div class="flex-1 overflow-y-auto p-4">
<div id="success" class="bg-green-100 text-green-700 p-4 rounded mb-4 hidden">
Prompt added successfully!
</div>
<div id="error" class="bg-red-100 text-red-700 p-4 rounded mb-4 hidden"></div>
<form id="add-form" class="space-y-4">
<div>
<label for="title" class="block text-md font-semibold mb-1">Title<span class="text-red-600">*</span></label>
<input name="title" id="title" required class="border p-2 w-full rounded" />
<input type="hidden" name="slug" id="slug" />
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div>
<label for="type" class="block text-md font-semibold mb-1">Type<span class="text-red-600">*</span></label>
<select name="type" id="type" required class="border border-gray-100 p-2 rounded w-full bg-gray-800">
<option value="System">System</option>
<option value="Task">Task</option>
</select>
</div>
<div>
<label for="tags" class="block text-md font-semibold mb-1">Tags (comma-separated)</label>
<input name="tags" id="tags" class="border p-2 pt-1 w-full rounded" />
</div>
</div>
<div>
<label for="description" class="block text-md font-semibold mb-1">Prompt<span class="text-red-600">*</span></label>
<textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded"></textarea>
</div>
<div>
<label for="notes" class="block text-md font-semibold mb-1">Description<span class="text-red-600">*</span></label>
<textarea name="notes" id="notes" rows="3" required class="border p-2 w-full rounded"></textarea>
</div>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
Add Prompt
</button>
<hr class="my-6 border-gray-600" />
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
<div>
<h2 class="text-lg font-semibold mb-2">Import Prompts</h2>
<p class="text-sm text-gray-400 mb-2">Upload a JSON file to import prompts.</p>
<label for="importFile" class="block text-md font-semibold mb-1">Import Prompts from JSON</label>
<input type="file" id="importFile" accept="application/json" class="border p-2 w-full rounded bg-gray-800 text-white" />
<button type="button" id="importBtn" class="mt-2 bg-green-600 text-white px-4 py-2 rounded hover:bg-green-700 transition-colors duration-300 cursor-pointer">
Import Prompts
</button>
</div>
<div id="export-section">
<h2 class="text-lg font-semibold mb-2">Export Prompts</h2>
<p class="text-sm text-gray-400 mb-2">Select prompts to export, or leave all unchecked to export everything.</p>
<label class="block text-md font-semibold mb-1">Export Prompts to JSON</label>
<div id="prompt-list" class="max-h-64 overflow-y-auto mb-4 border py-1 pb-2 px-3 rounded flex flex-wrap gap-x-4 gap-y-1"></div>
<button type="button" id="exportBtn" class="bg-yellow-600 text-white px-4 py-2 rounded hover:bg-yellow-700 transition-colors duration-300 cursor-pointer">
Export All Prompts
</button>
</div>
</div>
</form>
</div>
</main>
</div>
</main>
<footer class="border-t p-4 text-center text-sm">
&copy; {new Date().getFullYear()} Prompt Catalog
</footer>
<footer class="border-t p-4 text-center text-sm">
&copy; {new Date().getFullYear()} Prompt Catalog
</footer>
<script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
<script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
const SUPABASE_URL = document.getElementById('supabase-env').dataset.url;
const SUPABASE_ANON_KEY = document.getElementById('supabase-env').dataset.key;
const SUPABASE_URL = document.getElementById('supabase-env').dataset.url;
const SUPABASE_ANON_KEY = document.getElementById('supabase-env').dataset.key;
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
const form = document.getElementById('add-form');
const importBtn = document.getElementById('importBtn');
const exportBtn = document.getElementById('exportBtn');
const successBox = document.getElementById('success');
const errorBox = document.getElementById('error');
const form = document.getElementById('add-form');
const importBtn = document.getElementById('importBtn');
const exportBtn = document.getElementById('exportBtn');
const successBox = document.getElementById('success');
const errorBox = document.getElementById('error');
async function loadPromptCheckboxes() {
const promptList = document.getElementById('prompt-list');
const { data, error } = await supabase.from('prompts').select('id, title');
async function loadPromptCheckboxes() {
const promptList = document.getElementById('prompt-list');
const { data, error } = await supabase.from('prompts').select('id, title');
if (error) {
promptList.innerHTML = `<p class="text-red-400">Failed to load prompts: ${error.message}</p>`;
return;
}
promptList.innerHTML = data
.map(
prompt => `
<label class="block mb-0">
<input type="checkbox" value="${prompt.id}" class="mr-0" />
${prompt.title}
</label>`
)
.join('');
// After rendering, attach change listeners to checkboxes
const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
checkboxes.forEach(cb => cb.addEventListener('change', updateExportBtnText));
updateExportBtnText();
if (error) {
promptList.innerHTML = `<p class="text-red-400">Failed to load prompts: ${error.message}</p>`;
return;
}
// Load checkboxes on DOM load
loadPromptCheckboxes();
promptList.innerHTML = data
.map(
prompt => `
<label class="block mb-0">
<input type="checkbox" value="${prompt.id}" class="mr-0" />
${prompt.title}
</label>`
)
.join('');
function updateExportBtnText() {
const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
const checkedCount = checkboxes.filter(cb => cb.checked).length;
// After rendering, attach change listeners to checkboxes
const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
checkboxes.forEach(cb => cb.addEventListener('change', updateExportBtnText));
updateExportBtnText();
}
exportBtn.textContent = checkedCount > 0 ? 'Export Selected Prompts' : 'Export All Prompts';
}
// Load checkboxes on DOM load
loadPromptCheckboxes();
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('title').addEventListener('input', (e) => {
const value = e.target.value
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.trim();
document.getElementById('slug').value = value;
});
function updateExportBtnText() {
const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
const checkedCount = checkboxes.filter(cb => cb.checked).length;
form.addEventListener('submit', async (e) => {
e.preventDefault();
exportBtn.textContent = checkedCount > 0 ? 'Export Selected Prompts' : 'Export All Prompts';
}
successBox.style.display = 'none';
errorBox.style.display = 'none';
const formData = new FormData(form);
const payload = {
title: formData.get('title'),
slug: formData.get('slug'),
type: formData.get('type'),
description: formData.get('description'),
tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
notes: formData.get('notes')
};
const { error } = await supabase.from('prompts').insert([payload]);
if (error) {
errorBox.innerText = error.message;
errorBox.style.display = 'block';
} else {
successBox.style.display = 'block';
form.reset();
}
});
document.addEventListener('DOMContentLoaded', () => {
document.getElementById('title').addEventListener('input', (e) => {
const value = e.target.value
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.trim();
document.getElementById('slug').value = value;
});
importBtn.addEventListener('click', async () => {
const fileInput = document.getElementById('importFile');
const file = fileInput.files[0];
if (!file) {
alert('Please select a JSON file.');
return;
}
const successBox = document.getElementById('success');
const errorBox = document.getElementById('error');
try {
const text = await file.text();
const prompts = JSON.parse(text);
const formatted = prompts.map(p => ({
type: p.type.charAt(0).toUpperCase() + p.type.slice(1), // normalize to "System"/"Task"
title: p.title,
description: p.description,
tags: p.tags.replace(/[{}"]/g, '').split(',').map(t => t.trim()), // parse tag string
notes: p.notes,
slug: p.title
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.trim()
}));
const { error } = await supabase.from('prompts').insert(formatted);
if (error) {
errorBox.innerText = `Import failed: ${error.message}`;
errorBox.style.display = 'block';
} else {
successBox.innerText = 'Prompts imported successfully!';
successBox.style.display = 'block';
fileInput.value = '';
}
} catch (err) {
errorBox.innerText = `Error: ${err.message}`;
errorBox.style.display = 'block';
}
});
exportBtn.addEventListener('click', async () => {
const selectedIds = checkboxes.filter(cb => cb.checked).map(cb => cb.value);
const { data, error } = selectedIds.length > 0
? await supabase.from('prompts').select('*').in('id', selectedIds)
: await supabase.from('prompts').select('*');
form.addEventListener('submit', async (e) => {
e.preventDefault();
successBox.style.display = 'none';
errorBox.style.display = 'none';
if (error) {
errorBox.innerText = `Export failed: ${error.message}`;
errorBox.style.display = 'block';
return;
}
const formData = new FormData(form);
const payload = {
title: formData.get('title'),
slug: formData.get('slug'),
type: formData.get('type'),
description: formData.get('description'),
tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
notes: formData.get('notes')
};
const output = data.map(p => ({
id: p.id,
type: p.type.toLowerCase(),
const { error } = await supabase.from('prompts').insert([payload]);
if (error) {
errorBox.innerText = error.message;
errorBox.style.display = 'block';
} else {
successBox.style.display = 'block';
form.reset();
}
});
});
importBtn.addEventListener('click', async () => {
const fileInput = document.getElementById('importFile');
const file = fileInput.files[0];
if (!file) {
alert('Please select a JSON file.');
return;
}
const successBox = document.getElementById('success');
const errorBox = document.getElementById('error');
try {
const text = await file.text();
const prompts = JSON.parse(text);
const formatted = prompts.map(p => ({
type: p.type.charAt(0).toUpperCase() + p.type.slice(1), // normalize to "System"/"Task"
title: p.title,
description: p.description,
tags: `{${(p.tags || []).join(',')}}`,
createdat: p.createdat,
notes: p.notes || ''
tags: p.tags.replace(/[{}"]/g, '').split(',').map(t => t.trim()), // parse tag string
notes: p.notes,
slug: p.title
.toLowerCase()
.replace(/[^\w\s-]/g, '')
.replace(/\s+/g, '-')
.trim()
}));
const blob = new Blob([JSON.stringify(output, null, 2)], {
type: 'application/json'
});
const { error } = await supabase.from('prompts').insert(formatted);
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = selectedIds.length > 0 ? 'selected-prompts.json' : 'all-prompts.json';
link.click();
URL.revokeObjectURL(url);
if (error) {
errorBox.innerText = `Import failed: ${error.message}`;
errorBox.style.display = 'block';
} else {
successBox.innerText = 'Prompts imported successfully!';
successBox.style.display = 'block';
fileInput.value = '';
}
} catch (err) {
errorBox.innerText = `Error: ${err.message}`;
errorBox.style.display = 'block';
}
});
exportBtn.addEventListener('click', async () => {
const checkboxes = Array.from(document.querySelectorAll('#prompt-list input[type="checkbox"]'));
const selectedIds = checkboxes.filter(cb => cb.checked).map(cb => cb.value);
const { data, error } = selectedIds.length > 0
? await supabase.from('prompts').select('*').in('id', selectedIds)
: await supabase.from('prompts').select('*');
successBox.style.display = 'none';
errorBox.style.display = 'none';
if (error) {
errorBox.innerText = `Export failed: ${error.message}`;
errorBox.style.display = 'block';
return;
}
const output = data.map(p => ({
id: p.id,
type: p.type.toLowerCase(),
title: p.title,
description: p.description,
tags: `{${(p.tags || []).join(',')}}`,
createdat: p.createdat,
notes: p.notes || ''
}));
const blob = new Blob([JSON.stringify(output, null, 2)], {
type: 'application/json'
});
</script>
</body>
</html>
const url = URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
link.download = selectedIds.length > 0 ? 'selected-prompts.json' : 'all-prompts.json';
link.click();
URL.revokeObjectURL(url);
});
</script>
</MainLayout>

236
src/pages/edit.astro
View File

@@ -1,160 +1,154 @@
---
import "../styles/global.css";
import MainLayout from '../layouts/MainLayout.astro';
import Sidebar from "../components/SidebarEdit.astro";
const supabaseUrl = import.meta.env.PUBLIC_SUPABASE_URL;
const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
---
<html lang="en">
<head>
<title>Prompt Catalog - Edit Prompt</title>
</head>
<body class="font-sans antialiased bg-gray-800 text-gray-100">
<div
<MainLayout page="Edit Prompt">
<div
id="supabase-env"
data-url={supabaseUrl}
data-key={supabaseKey}
hidden
></div>
></div>
<header class="border-b p-4">
<h1 class="text-2xl font-bold">Prompt Catalog - Add New Prompt</h1>
<p class="text-sm mt-1">Add a new AI prompt to the catalog</p>
</header>
<header class="border-b p-4">
<h1 class="text-2xl font-bold"><a href="/">Prompt Catalog - Edit Prompt</a></h1>
<p class="text-sm mt-1">Edit an existing AI prompt in the catalog</p>
</header>
<main class="flex">
<Sidebar />
<main class="flex">
<Sidebar />
<div class="border-l flex-1 flex flex-col overflow-hidden">
<main class="flex-1 overflow-y-auto p-4">
<div id="edit-root">Loading...</div>
</main>
</div>
</main>
<div class="border-l flex-1 flex flex-col overflow-hidden">
<main class="flex-1 overflow-y-auto p-4">
<div id="edit-root">Loading...</div>
</main>
</div>
</main>
<footer class="border-t p-4 text-center text-sm">
&copy; {new Date().getFullYear()} Prompt Catalog
</footer>
<footer class="border-t p-4 text-center text-sm">
&copy; {new Date().getFullYear()} Prompt Catalog
</footer>
<script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
<script type="module">
import { createClient } from 'https://cdn.jsdelivr.net/npm/@supabase/supabase-js/+esm';
const env = document.getElementById('supabase-env').dataset;
const supabase = createClient(env.url, env.key);
const slug = new URLSearchParams(window.location.search).get('slug');
const env = document.getElementById('supabase-env').dataset;
const supabase = createClient(env.url, env.key);
const slug = new URLSearchParams(window.location.search).get('slug');
const root = document.getElementById('edit-root');
const root = document.getElementById('edit-root');
if (!slug) {
root.innerHTML = `<p class="text-red-600 font-medium">❌ No slug provided.</p>`;
if (!slug) {
root.innerHTML = `<p class="text-red-600 font-medium">❌ No slug provided.</p>`;
} else {
const { data, error } = await supabase
.from('prompts')
.select('*')
.eq('slug', slug)
.limit(1);
const prompt = data?.[0];
if (error || !prompt) {
root.innerHTML = `<p class="text-red-600 font-medium">❌ Prompt not found or error loading it.</p>`;
} else {
const { data, error } = await supabase
.from('prompts')
.select('*')
.eq('slug', slug)
.limit(1);
root.innerHTML = `
<form id="edit-form" class="space-y-4">
<input type="hidden" name="slug" value="${prompt.slug}" />
const prompt = data?.[0];
if (error || !prompt) {
root.innerHTML = `<p class="text-red-600 font-medium">❌ Prompt not found or error loading it.</p>`;
} else {
root.innerHTML = `
<form id="edit-form" class="space-y-4">
<input type="hidden" name="slug" value="${prompt.slug}" />
<div>
<label for="title" class="block text-md font-semibold mb-1">Title</label>
<input name="title" id="title" value="${prompt.title}" required class="border p-2 w-full rounded" />
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="title" class="block text-md font-semibold mb-1">Title</label>
<input name="title" id="title" value="${prompt.title}" required class="border p-2 w-full rounded" />
</div>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<label for="type" class="block text-md font-semibold mb-1">Type</label>
<select name="type" id="type" required class="border p-2 w-full rounded">
<option value="System" ${prompt.type === 'System' ? 'selected' : ''}>System</option>
<option value="Task" ${prompt.type === 'Task' ? 'selected' : ''}>Task</option>
</select>
</div>
<div>
<label for="tags" class="block text-md font-semibold mb-1">Tags (comma-separated)</label>
<input name="tags" id="tags" value="${(prompt.tags ?? []).join(', ')}" class="border p-2 pt-1 w-full rounded" />
</div>
<label for="type" class="block text-md font-semibold mb-1">Type</label>
<select name="type" id="type" required class="border p-2 w-full rounded">
<option value="System" ${prompt.type === 'System' ? 'selected' : ''}>System</option>
<option value="Task" ${prompt.type === 'Task' ? 'selected' : ''}>Task</option>
</select>
</div>
<div>
<label for="description" class="block text-md font-semibold mb-1">Prompt</label>
<textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded">${prompt.description}</textarea>
<label for="tags" class="block text-md font-semibold mb-1">Tags (comma-separated)</label>
<input name="tags" id="tags" value="${(prompt.tags ?? []).join(', ')}" class="border p-2 pt-1 w-full rounded" />
</div>
</div>
<div>
<label for="notes" class="block text-md font-semibold mb-1">Description</label>
<textarea name="notes" id="notes" rows="3" class="border p-2 w-full rounded">${prompt.notes ?? ''}</textarea>
</div>
<div>
<label for="description" class="block text-md font-semibold mb-1">Prompt</label>
<textarea name="description" id="description" rows="6" required class="border p-2 w-full rounded">${prompt.description}</textarea>
</div>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
Save Changes
<div>
<label for="notes" class="block text-md font-semibold mb-1">Description</label>
<textarea name="notes" id="notes" rows="3" class="border p-2 w-full rounded">${prompt.notes ?? ''}</textarea>
</div>
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700 transition-colors duration-300 cursor-pointer">
Save Changes
</button>
<div class="flex justify-between items-center pt-4 border-t mt-6">
<span class="text-lg text-red-400 font-bold">Be careful! Deletion is permanent.</span>
<button
id="delete-btn"
type="button"
class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition-colors duration-300 cursor-pointer"
>
Delete Prompt
</button>
</div>
</form>
<div class="flex justify-between items-center pt-4 border-t mt-6">
<span class="text-lg text-red-400 font-bold">Be careful! Deletion is permanent.</span>
<button
id="delete-btn"
type="button"
class="bg-red-600 text-white px-4 py-2 rounded hover:bg-red-700 transition-colors duration-300 cursor-pointer"
>
Delete Prompt
</button>
</div>
</form>
<div id="success" class="text-green-600 mt-4 hidden">Prompt Updated.</div>
<div id="error" class="text-red-600 mt-4 hidden"></div>
`;
<div id="success" class="text-green-600 mt-4 hidden">Prompt Updated.</div>
<div id="error" class="text-red-600 mt-4 hidden"></div>
`;
document.getElementById('edit-form').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const payload = {
title: formData.get('title'),
type: formData.get('type'),
description: formData.get('description'),
tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
notes: formData.get('notes')
};
document.getElementById('edit-form').addEventListener('submit', async (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const payload = {
title: formData.get('title'),
type: formData.get('type'),
description: formData.get('description'),
tags: formData.get('tags')?.split(',').map(t => t.trim()).filter(Boolean),
notes: formData.get('notes')
};
const { error: updateError } = await supabase
.from('prompts')
.update(payload)
.eq('slug', slug);
const { error: updateError } = await supabase
.from('prompts')
.update(payload)
.eq('slug', slug);
document.getElementById('success').style.display = updateError ? 'none' : 'block';
document.getElementById('error').innerText = updateError?.message || '';
document.getElementById('error').style.display = updateError ? 'block' : 'none';
});
document.getElementById('success').style.display = updateError ? 'none' : 'block';
document.getElementById('error').innerText = updateError?.message || '';
document.getElementById('error').style.display = updateError ? 'block' : 'none';
});
document.getElementById('delete-btn').addEventListener('click', async () => {
const confirmed = window.confirm("Are you sure you want to delete this prompt? This cannot be undone.");
document.getElementById('delete-btn').addEventListener('click', async () => {
const confirmed = window.confirm("Are you sure you want to delete this prompt? This cannot be undone.");
if (!confirmed) return;
if (!confirmed) return;
const { error: deleteError } = await supabase
.from('prompts')
.delete()
.eq('slug', slug);
const { error: deleteError } = await supabase
.from('prompts')
.delete()
.eq('slug', slug);
if (deleteError) {
document.getElementById('error').innerText = deleteError.message;
document.getElementById('error').style.display = 'block';
} else {
window.location.href = '/';
}
});
}
if (deleteError) {
document.getElementById('error').innerText = deleteError.message;
document.getElementById('error').style.display = 'block';
} else {
window.location.href = '/';
}
});
}
</script>
</body>
</html>
}
</script>
</MainLayout>

6
src/pages/index.astro
View File

@@ -16,10 +16,10 @@ const allTags = Array.from(
).sort();
---
<MainLayout>
<MainLayout page="Home">
<header class="border-b p-4">
<h1 class="text-2xl font-bold">Prompt Catalog</h1>
<p class="text-sm mt-1">Explore and filter AI prompts</p>
<h1 class="text-2xl font-bold"><a href="/">Prompt Catalog</a></h1>
<p class="text-sm mt-1">Save and explore AI prompts</p>
</header>
<main class="flex">