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

✨feature: Add prompt import from json

Browse Source
This commit is contained in:
Keith Solomon
2025-07-22 11:00:39 -05:00
parent eb7a65cf55
commit e028922986
3 changed files with 87 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/SidebarAdd.astro
View File

@@ -1,5 +1,18 @@
---
// Sidebar.astro
import { Code } from 'astro:components';
const code = `[
{
"type": "System or Task (ONLY one)",
"title": "Example Prompt",
"description": "This is an example prompt.",
"tags": ["example", "test"],
"notes": "The prompt description."
}
]
`;
---
<aside class="w-64 border-r h-full p-4 text-gray-100">
@@ -7,9 +20,12 @@
<p class="text-sm">Use the form to add a new AI prompt to the catalog.</p>
<p class="text-sm mt-2">Make sure to include a title, type, description, and any relevant tags.</p>
<p class="text-sm mt-2">All fields marked with <span class="text-red-600">*</span> are required.</p>
<!-- <p class="text-sm mt-2">You can also add notes for your own reference.</p> -->
<h2 class="text-lg font-semibold mt-6 mb-4">Import</h2>
<p class="text-sm">To import prompts from a JSON file, upload a JSON file formatted as below, or download a sample <a class="underline" download href="/import-sample.json">here</a>.</p>
<Code class="bg-gray-700 rounded text-sm p-2 mt-4" code={code} lang="json" wrap />
<a href="/" id="home" class="block w-fit bg-green-600 text-white px-4 py-2 mt-4 rounded hover:bg-green-700 transition-colors duration-300">
Go Back

65
src/pages/add.astro
View File

@@ -21,7 +21,7 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
<div 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>
<p class="text-sm mt-1">Add or import new AI prompts to the catalog</p>
</div>
<div class="flex h-screen">
@@ -36,14 +36,14 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
<form id="add-form" class="space-y-4">
<div>
<label for="title" class="block text-md font-semibold mb-1">Title</label>
<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 sm:grid-cols-2 gap-4">
<div>
<label for="type" class="block text-md font-semibold mb-1">Type</label>
<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>
@@ -57,18 +57,28 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
</div>
<div>
<label for="description" class="block text-md font-semibold mb-1">Prompt</label>
<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</label>
<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>
<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>
</form>
</main>
</div>
@@ -123,6 +133,51 @@ const supabaseKey = import.meta.env.PUBLIC_SUPABASE_ANON_KEY;
}
});
});
document.getElementById('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';
}
});
</script>
</body>
</html>