📄 docs: Update readme and dev checklist
🐞 fix: Clean up non-used files
This commit is contained in:
Keith Solomon
50
README.md
50
README.md
@@ -22,13 +22,44 @@ PromptBase is a centralized, searchable repository for storing and managing prom
|
||||
- User auth and profiles
|
||||
- Prompt favorites and contributions
|
||||
- Ratings, version history, and sharing
|
||||
- External API access
|
||||
|
||||
## Usage
|
||||
|
||||
You'll need a .env file with your Supabase credentials. See `supabase.env.example`.
|
||||
|
||||
### Docker
|
||||
|
||||
To run the app using Docker, you can use the provided `docker-compose.yml` file.
|
||||
|
||||
```yaml
|
||||
services:
|
||||
frontend:
|
||||
container_name: PromptBase
|
||||
image: git.keithsolomon.net/keith/promptbase:main
|
||||
restart: unless-stopped
|
||||
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
|
||||
ports:
|
||||
- "4321:4321"
|
||||
|
||||
volumes:
|
||||
- ./.env:/app/.env:ro # Bind-mount .env as read-only
|
||||
```
|
||||
|
||||
### To run locally (for development)
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
## Tech Stack
|
||||
|
||||
- **Frontend**: Astro + HTMX + Alpine.js (AHA Stack)
|
||||
- **Frontend**: Astro js, Tailwind CSS
|
||||
- **Backend**: Supabase (self-hosted)
|
||||
- **Deployment**: Vercel or Netlify (frontend), Supabase (backend)
|
||||
- **Deployment**: Docker (frontend), Supabase (backend)
|
||||
|
||||
## Database Schema
|
||||
|
||||
@@ -48,7 +79,7 @@ PromptBase is a centralized, searchable repository for storing and managing prom
|
||||
|
||||
## Development Roadmap
|
||||
|
||||
Development is organized into phases. For details, see `Development Checklist.md`.
|
||||
Development is organized into phases. For details, see `checklist.md`.
|
||||
|
||||
### MVP Phases
|
||||
|
||||
@@ -66,17 +97,6 @@ Development is organized into phases. For details, see `Development Checklist.md
|
||||
- Ratings, version control, external API
|
||||
- Shareable links and embeds
|
||||
|
||||
## Usage
|
||||
|
||||
To run locally:
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
```
|
||||
|
||||
You'll need a .env file with your Supabase credentials. See `supabase.env.example`.
|
||||
|
||||
## Contributing
|
||||
|
||||
Pull requests are welcome! Please keep contributions focused on core functionality and usability improvements.
|
||||
|
||||
@@ -1,71 +0,0 @@
|
||||
---
|
||||
import PromptCard from './PromptCard.astro';
|
||||
|
||||
const { prompts = [] } = Astro.props;
|
||||
|
||||
type Prompt = {
|
||||
slug: string;
|
||||
title: string;
|
||||
type: string;
|
||||
description: string;
|
||||
tags?: string[];
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
notes?: string;
|
||||
};
|
||||
---
|
||||
|
||||
<div class="border-b mb-4 flex justify-between items-center">
|
||||
<h2 id="prompt-count" class="text-xl font-semibold text-gray-300 mb-2"></h2>
|
||||
<a href="#filters" class="block lg:hidden bg-blue-600 text-white px-2 py-0 pb-1 mb-2 rounded cursor-pointer hover:bg-blue-700 transition-colors duration-300">Filters ↓</a>
|
||||
</div>
|
||||
|
||||
<div id="prompt-grid" class="grid grid-cols-1 gap-4 md:grid-cols-2 xl:grid-cols-3">
|
||||
{prompts.map((p: Prompt) => (
|
||||
<div class="prompt-card" data-type={p.type} data-tags={(p.tags ?? []).join(',')}>
|
||||
<PromptCard {...p} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<script is:inline>
|
||||
const form = document.getElementById('filter-form');
|
||||
const cards = document.querySelectorAll('.prompt-card');
|
||||
|
||||
const clearBtn = document.getElementById('clear-filters');
|
||||
clearBtn?.addEventListener('click', () => {
|
||||
form.reset();
|
||||
filterCards();
|
||||
});
|
||||
|
||||
function filterCards() {
|
||||
const params = new URLSearchParams(new FormData(form));
|
||||
const type = params.get('type');
|
||||
const query = params.get('q')?.toLowerCase() || '';
|
||||
const tagParams = params.getAll('tag');
|
||||
|
||||
cards.forEach(card => {
|
||||
const cardType = card.dataset.type;
|
||||
const cardTags = card.dataset.tags.split(',');
|
||||
const cardText = card.innerText.toLowerCase();
|
||||
|
||||
const matchesType = !type || type === cardType;
|
||||
const matchesTags = tagParams.length === 0 || tagParams.some(t => cardTags.includes(t));
|
||||
const matchesSearch = !query || cardText.includes(query);
|
||||
|
||||
card.style.display = matchesType && matchesTags && matchesSearch ? 'block' : 'none';
|
||||
|
||||
const visibleCount = Array.from(cards).filter(c => c.style.display !== 'none').length;
|
||||
|
||||
document.getElementById('prompt-count').textContent =
|
||||
visibleCount === 1
|
||||
? "1 prompt shown"
|
||||
: `${visibleCount} prompts shown`;
|
||||
});
|
||||
}
|
||||
|
||||
form.addEventListener('input', filterCards);
|
||||
|
||||
// Trigger filter once on page load
|
||||
filterCards();
|
||||
</script>
|
||||
@@ -1,59 +0,0 @@
|
||||
---
|
||||
const {
|
||||
slug,
|
||||
title,
|
||||
type,
|
||||
description,
|
||||
tags = [],
|
||||
created_at,
|
||||
updated_at,
|
||||
notes,
|
||||
} = Astro.props;
|
||||
|
||||
const formatDate = (dateStr: string | undefined) => {
|
||||
if (!dateStr) return "–";
|
||||
const date = new Date(dateStr);
|
||||
return isNaN(date.getTime())
|
||||
? "Invalid date"
|
||||
: date.toLocaleDateString('en-US', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
year: 'numeric',
|
||||
});
|
||||
};
|
||||
---
|
||||
|
||||
<div class="border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem]">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-xl font-semibold">{title}</h3>
|
||||
<span class={`text-sm font-medium px-2 py-1 rounded ${
|
||||
type === 'System' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'
|
||||
}`}>
|
||||
{type}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="text-md">{notes}</p>
|
||||
|
||||
<div class="flex flex-wrap gap-2 mt-2">
|
||||
{tags.map((tag: string) => (
|
||||
<span class="text-sm bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">{tag}</span>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<details name="prompt-details">
|
||||
<summary class="cursor-pointer font-semibold mt-2 text-lg">View Details</summary>
|
||||
<div class="text-md border-t mt-2 pt-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<h3 class="text-xl font-semibold px-2">Prompt</h3>
|
||||
|
||||
<a class="bg-green-600 text-white px-2 py-0 rounded text-sm hover:bg-green-700 transition-colors duration-300" href={`/edit?slug=${slug}`}->Edit</a>
|
||||
</div>
|
||||
|
||||
<p class="my-2 px-2 text-balance" set:html={description.replace(/\n/g, '<br />')} />
|
||||
|
||||
<hr class="my-2" />
|
||||
<p class="text-sm"><strong>Created:</strong> {formatDate(created_at)} • <strong>Updated:</strong> {formatDate(updated_at)}</p>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
@@ -1,70 +0,0 @@
|
||||
---
|
||||
import PromptCard from './PromptCard.astro';
|
||||
|
||||
const { prompts, error } = Astro.props;
|
||||
|
||||
const typeFilter = typeof window !== "undefined"
|
||||
? new URLSearchParams(window.location.search).get("type")
|
||||
: null;
|
||||
|
||||
const tagFilter = typeof window !== "undefined"
|
||||
? new URLSearchParams(window.location.search).get("tag")
|
||||
: null;
|
||||
|
||||
console.log("🔍 searchParams:", typeFilter, tagFilter);
|
||||
|
||||
type Prompt = {
|
||||
slug: string;
|
||||
title: string;
|
||||
type: string;
|
||||
description: string;
|
||||
tags?: string[];
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
notes?: string;
|
||||
};
|
||||
|
||||
const filtered = prompts?.filter((p: Prompt) => {
|
||||
return (!typeFilter || p.type === typeFilter) &&
|
||||
(!tagFilter || p.tags?.includes(tagFilter));
|
||||
});
|
||||
---
|
||||
|
||||
{error ? (
|
||||
<p class="text-red-500">Failed to load prompts: {error.message}</p>
|
||||
) : (
|
||||
<form class="mb-4 flex gap-4 items-end" method="GET">
|
||||
<div>
|
||||
<label for="type" class="block text-sm font-medium">Type</label>
|
||||
<select name="type" id="type" class="border p-2 rounded w-full bg-gray-800">
|
||||
<option value="">All</option>
|
||||
<option value="System" selected={typeFilter === 'System'}>System</option>
|
||||
<option value="Task" selected={typeFilter === 'Task'}>Task</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="tag" class="block text-sm font-medium">Tag</label>
|
||||
<input type="text" name="tag" id="tag" class="border p-2 rounded w-full" value={tagFilter || ''} />
|
||||
</div>
|
||||
|
||||
<button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded">
|
||||
Filter
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{filtered?.map((prompt: Prompt) => (
|
||||
<PromptCard
|
||||
slug={prompt.slug}
|
||||
title={prompt.title}
|
||||
type={prompt.type}
|
||||
description={prompt.description}
|
||||
tags={prompt.tags}
|
||||
createdAt={prompt.created_at}
|
||||
updatedAt={prompt.updated_at}
|
||||
notes={prompt.notes}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
88
checklist.md
88
checklist.md
@@ -1,6 +1,10 @@
|
||||
# ✅ Prompt Catalog Development Checklist
|
||||
# Prompt Catalog Development Checklist
|
||||
|
||||
## 🔧 Phase 1: Planning & Setup
|
||||
## MVP Phases
|
||||
|
||||
This checklist outlines the phases for developing the Prompt Catalog MVP. Each phase includes specific tasks to complete.
|
||||
|
||||
### Phase 1: Planning & Setup
|
||||
|
||||
- [x] Review and finalize requirements from `Prompt Catalog Features.md`
|
||||
- [x] Choose JavaScript framework (React, Vue, etc.)
|
||||
@@ -13,7 +17,7 @@
|
||||
|
||||
---
|
||||
|
||||
## 🧱 Phase 2: Database & API
|
||||
### Phase 2: Database & API
|
||||
|
||||
- [x] Define and implement Supabase schema
|
||||
- [x] Set up Supabase RLS rules (if applicable)
|
||||
@@ -21,30 +25,52 @@
|
||||
|
||||
---
|
||||
|
||||
## 🖼 Phase 3: Front-End Interface
|
||||
### Phase 3: Front-End Interface
|
||||
|
||||
- [ ] Build static UI from `Front End Interface.png`
|
||||
- [ ] Sidebar navigation (System / Task)
|
||||
- [ ] Search bar with filters
|
||||
- [ ] Prompt list display
|
||||
- [ ] Prompt detail view
|
||||
- [ ] Tags display and interaction
|
||||
- [ ] Integrate UI with Supabase for live data
|
||||
- [ ] Implement CRUD operations for prompts
|
||||
- [x] Build static UI from `Front End Interface.png`
|
||||
- [x] Sidebar navigation (System / Task)
|
||||
- [x] Search bar with filters
|
||||
- [x] Prompt list display
|
||||
- [x] Prompt detail view
|
||||
- [x] Tags display and interaction
|
||||
- [x] Integrate UI with Supabase for live data
|
||||
- [x] Implement CRUD operations for prompts
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Phase 4: Search & Tagging
|
||||
### Phase 4: Search & Tagging
|
||||
|
||||
- [ ] Implement keyword and full-text search
|
||||
- [ ] Add filter by:
|
||||
- [ ] Type (System, Task)
|
||||
- [ ] Tags (multi-select)
|
||||
- [ ] Create tag suggestion/autocomplete
|
||||
- [x] Implement keyword and full-text search
|
||||
- [x] Add filter by:
|
||||
- [x] Type (System, Task)
|
||||
- [x] Tags (multi-select)
|
||||
- [x] Create tag suggestion/autocomplete
|
||||
|
||||
---
|
||||
|
||||
## 🤖 Phase 5: AI Integration
|
||||
### Phase 5: Import/Export
|
||||
|
||||
- [x] Implement prompt export to JSON
|
||||
- [x] Implement prompt import from JSON with validation
|
||||
|
||||
---
|
||||
|
||||
### Phase 6: Deployment & QA
|
||||
|
||||
- [x] Set up frontend docker image and deployment compose file
|
||||
- [x] Set up Supabase production environment
|
||||
- [x] QA Testing:
|
||||
- [x] UI functionality
|
||||
- [x] Prompt CRUD operations
|
||||
- [x] Search and filtering
|
||||
- [x] Import/export behavior
|
||||
- [ ] Write usage documentation
|
||||
|
||||
---
|
||||
|
||||
## Post-MVP Phases
|
||||
|
||||
### Phase 7: AI Integration
|
||||
|
||||
- [ ] Set up API key management (e.g., OpenAI, Together, Ollama)
|
||||
- [ ] Add prompt suggestion UI for user input
|
||||
@@ -52,14 +78,7 @@
|
||||
|
||||
---
|
||||
|
||||
## 📦 Phase 6: Import/Export
|
||||
|
||||
- [ ] Implement prompt export to JSON
|
||||
- [ ] Implement prompt import from JSON with validation
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Phase 7: Authentication & User Features (Future)
|
||||
### Phase 8: Authentication & User Features (Future)
|
||||
|
||||
- [ ] Add Supabase Auth for login/register
|
||||
- [ ] Create user profile UI
|
||||
@@ -68,20 +87,7 @@
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Phase 8: Deployment & QA
|
||||
|
||||
- [ ] Deploy frontend to hosting platform
|
||||
- [ ] Set up Supabase production environment
|
||||
- [ ] QA Testing:
|
||||
- [ ] UI functionality
|
||||
- [ ] Prompt CRUD operations
|
||||
- [ ] Search and filtering
|
||||
- [ ] Import/export behavior
|
||||
- [ ] Write usage documentation
|
||||
|
||||
---
|
||||
|
||||
## 🌱 Phase 9: Post-MVP Enhancements
|
||||
### Phase 9: Future Enhancements
|
||||
|
||||
- [ ] Add prompt rating system
|
||||
- [ ] Implement version history tracking
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
services:
|
||||
frontend:
|
||||
container_name: PromptBase
|
||||
image: promptbase
|
||||
image: git.keithsolomon.net/keith/promptbase:main
|
||||
restart: unless-stopped
|
||||
|
||||
environment:
|
||||
|
||||
@@ -1,90 +0,0 @@
|
||||
# ✅ Prompt Catalog Development Checklist
|
||||
|
||||
## 🔧 Phase 1: Planning & Setup
|
||||
|
||||
- [x] Review and finalize requirements from `Prompt Catalog Features.md`
|
||||
- [x] Choose JavaScript framework (React, Vue, etc.)
|
||||
- [x] Set up Supabase project
|
||||
- [x] Create `prompts` table
|
||||
- [x] Create `users` table (future)
|
||||
- [x] Create `user_prompts` table (future)
|
||||
- [x] Define JSON structure for import/export
|
||||
- [x] Choose hosting platform (Vercel, Netlify, etc.)
|
||||
|
||||
---
|
||||
|
||||
## 🧱 Phase 2: Database & API
|
||||
|
||||
- [x] Define and implement Supabase schema
|
||||
- [x] Set up Supabase RLS rules (if applicable)
|
||||
- [x] Connect frontend to Supabase using client API
|
||||
|
||||
---
|
||||
|
||||
## 🖼 Phase 3: Front-End Interface
|
||||
|
||||
- [ ] Build static UI from `Front End Interface.png`
|
||||
- [ ] Sidebar navigation (System / Task)
|
||||
- [ ] Search bar with filters
|
||||
- [ ] Prompt list display
|
||||
- [ ] Prompt detail view
|
||||
- [ ] Tags display and interaction
|
||||
- [ ] Integrate UI with Supabase for live data
|
||||
- [ ] Implement CRUD operations for prompts
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Phase 4: Search & Tagging
|
||||
|
||||
- [ ] Implement keyword and full-text search
|
||||
- [ ] Add filter by:
|
||||
- [ ] Type (System, Task)
|
||||
- [ ] Tags (multi-select)
|
||||
- [ ] Create tag suggestion/autocomplete
|
||||
|
||||
---
|
||||
|
||||
## 🤖 Phase 5: AI Integration
|
||||
|
||||
- [ ] Set up API key management (e.g., OpenAI, Together, Ollama)
|
||||
- [ ] Add prompt suggestion UI for user input
|
||||
- [ ] Integrate with AI API to return prompt suggestions
|
||||
|
||||
---
|
||||
|
||||
## 📦 Phase 6: Import/Export
|
||||
|
||||
- [ ] Implement prompt export to JSON
|
||||
- [ ] Implement prompt import from JSON with validation
|
||||
|
||||
---
|
||||
|
||||
## 🔐 Phase 7: Authentication & User Features (Future)
|
||||
|
||||
- [ ] Add Supabase Auth for login/register
|
||||
- [ ] Create user profile UI
|
||||
- [ ] Track user-owned prompts
|
||||
- [ ] Enable user favorites system
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Phase 8: Deployment & QA
|
||||
|
||||
- [ ] Deploy frontend to hosting platform
|
||||
- [ ] Set up Supabase production environment
|
||||
- [ ] QA Testing:
|
||||
- [ ] UI functionality
|
||||
- [ ] Prompt CRUD operations
|
||||
- [ ] Search and filtering
|
||||
- [ ] Import/export behavior
|
||||
- [ ] Write usage documentation
|
||||
|
||||
---
|
||||
|
||||
## 🌱 Phase 9: Post-MVP Enhancements
|
||||
|
||||
- [ ] Add prompt rating system
|
||||
- [ ] Implement version history tracking
|
||||
- [ ] Add social sharing (links, embed)
|
||||
- [ ] Provide external API for prompt access
|
||||
- [ ] Improve AI integration with context-aware suggestions
|
||||
@@ -1,51 +0,0 @@
|
||||
# Prompt Catalog
|
||||
|
||||
- June 21, 2025: Initial planning
|
||||
|
||||
## Overview & Purpose
|
||||
|
||||
The Prompt Catalog is a centralized repository for prompts used in various applications, such as AI models or chatbots. It aims to provide a structured way to store, search, and categorize prompts for easy access and management. It will serve as a comprehensive and user-friendly catalog of prompts that can be easily searched, categorized, and tagged, enhancing the usability and discoverability of prompts for developers and users alike.
|
||||
|
||||
## Features
|
||||
|
||||
- **Storage**: Store prompts, metadata, and (future) users in Supabase (self-hosted or cloud).
|
||||
- **Prompt Metadata**: Include metadata for each prompt:
|
||||
- Type (System, Task)
|
||||
- Title
|
||||
- Description
|
||||
- Tags
|
||||
- Creation date
|
||||
- Last modified date
|
||||
- **Categorization**: Organize prompts into types (System, Tasks) for easier navigation.
|
||||
- **Tagging System**: Use tags to describe prompts for better filtering.
|
||||
- **Search Functionality**: Quickly find prompts by keywords, tags, or text search.
|
||||
- **AI Integration**: Connect to AI models via API (OpenAI, Together, Ollama, etc.) to suggest prompts based on user input or context.
|
||||
- **Export/Import**: Allow users to export prompts in JSON format and import them back.
|
||||
|
||||
## Technical Details
|
||||
|
||||
- **Web Interface**: A user-friendly web interface to view, search, and manage prompts.
|
||||
- See `notes/Front End Interface.png` for mockup.
|
||||
- **Database**: Use Supabase for storing prompts and metadata.
|
||||
- Tables:
|
||||
- `prompts`: Stores prompt details (id, type, title, description, tags, created_at, updated_at).
|
||||
- `users`: (Future) Stores user information (id, username, email, created_at).
|
||||
- `user_prompts`: (Future) Stores user contributions and favorites (user_id, prompt_id, created_at).
|
||||
- **Authentication**: Implement user authentication for future features (e.g., user profiles, contributions).
|
||||
- **Deployment**: Host the application on a platform like Vercel or Netlify for the front end, and Supabase for the backend.
|
||||
- **Front End**: Use AHA Stack (Astro, HTMX and Alpine.js) for a modern, responsive user interface.
|
||||
- **Astro**: For static site generation and routing.
|
||||
- **HTMX**: For dynamic content loading and interactions without full page reloads.
|
||||
- **Alpine.js**: For lightweight interactivity and state management.
|
||||
- **Back End**: Use Supabase's built-in API for database interactions.
|
||||
- **AI Integration**: Use OpenAI or other AI APIs to suggest prompts based on user input.
|
||||
|
||||
## Future Enhancements
|
||||
|
||||
- **User Profiles**: Create profiles for users to manage their contributions and favorites.
|
||||
- **User Contributions**: Allow users to submit their own prompts to the catalog.
|
||||
- **Favorites**: Users can mark prompts as favorites for easy access later.
|
||||
- **Rating System**: Rate prompts to help others find the best ones.
|
||||
- **Version Control**: Track changes to prompts over time.
|
||||
- **API Access**: Provide an API for external applications to access the catalog.
|
||||
- **Sharing**: Enable sharing of prompts via links or social media.
|
||||
@@ -1,32 +0,0 @@
|
||||
const prompts = [
|
||||
{
|
||||
slug: "summarize-document",
|
||||
title: "Summarize Document",
|
||||
type: "System",
|
||||
description: "Summarizes a document or long input using GPT-4.",
|
||||
tags: ["summary", "long-form", "NLP"],
|
||||
createdAt: "2025-06-01",
|
||||
updatedAt: "2025-07-10",
|
||||
notes: "Summarizes input using GPT-4 with smart chunking."
|
||||
},
|
||||
{
|
||||
slug: "translate-text",
|
||||
title: "Translate Text",
|
||||
type: "Task",
|
||||
description: "Translate English text into French, Spanish, or Japanese.",
|
||||
tags: ["translate", "language"],
|
||||
createdAt: "2025-05-15",
|
||||
updatedAt: "2025-06-22",
|
||||
notes: "Uses multilingual model for more accurate translation."
|
||||
},
|
||||
{
|
||||
slug: "generate-code",
|
||||
title: "Generate Code",
|
||||
type: "Task",
|
||||
description: "Generate Python or JavaScript functions from descriptions.",
|
||||
tags: ["code", "generation", "devtools"],
|
||||
createdAt: "2025-06-05",
|
||||
updatedAt: "2025-07-01",
|
||||
notes: "Includes language detection and function wrapping."
|
||||
}
|
||||
];
|
||||
Reference in New Issue
Block a user