gatekeeper/mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Direct PostgreSQL Shim Architecture - SSR + API routes for direct DB access

Browse Source
This commit is contained in:
cawcenter
2025-12-16 10:40:08 -05:00
parent 6e31cf5c8a
commit 7afd26e999
7 changed files with 1136 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

543
IMPLEMENTATION_PLAN_DIRECT_DB.md Normal file
View File

@@ -0,0 +1,543 @@
# 🔱 God Mode: Direct PostgreSQL Shim Architecture
## Implementation Plan & Task List
**Objective:** Build a frontend that connects directly to PostgreSQL without going through Directus or traditional REST APIs, using server-side rendering (SSR) and a secure "shim" layer.
**Architecture:** Astro SSR + Direct PostgreSQL Pool + Secure API Routes
---
## 📋 ARCHITECTURE OVERVIEW
```
┌─────────────────────────────────────────────────────────┐
│ BROWSER (Client-Side JavaScript) │
│ - React Components │
│ - TanStack Query for state management │
│ - NO database credentials, NO SQL │
└─────────────────┬───────────────────────────────────────┘
│
│ HTTP Requests
│
┌─────────────────▼───────────────────────────────────────┐
│ ASTRO SSR LAYER (Server-Side) │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 1. Server-Side Pages (---) │ │
│ │ - Direct SQL queries in Astro frontmatter │ │
│ │ - Pool.query() before HTML render │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 2. API Routes (/api/shim/*) │ │
│ │ - Secure endpoints for client-side calls │ │
│ │ - Token validation │ │
│ │ - SQL query execution │ │
│ └─────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────┐ │
│ │ 3. Shim Layer (src/lib/shim/) │ │
│ │ - Query builders │ │
│ │ - Type-safe SQL functions │ │
│ │ - Connection pool management │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────┬───────────────────────────────────────┘
│
│ SQL Queries (via pg Pool)
│
┌─────────────────▼───────────────────────────────────────┐
│ POSTGRESQL DATABASE │
│ - sites, campaigns, generated_articles, work_log, etc. │
└─────────────────────────────────────────────────────────┘
```
---
## 📁 FILES TO CREATE (New Shim Layer)
### 1. Core Shim Infrastructure
| File Path | Purpose | Priority |
|-----------|---------|----------|
| `src/lib/shim/queries.ts` | Type-safe SQL query builders for all tables | ⭐ HIGH |
| `src/lib/shim/types.ts` | TypeScript interfaces matching DB schema | ⭐ HIGH |
| `src/lib/shim/sites.ts` | Sites-specific queries (CRUD operations) | ⭐ HIGH |
| `src/lib/shim/articles.ts` | Articles-specific queries | ⭐ HIGH |
| `src/lib/shim/campaigns.ts` | Campaign-specific queries | MEDIUM |
| `src/lib/shim/jobs.ts` | Generation jobs queries | MEDIUM |
| `src/lib/shim/utils.ts` | Helper functions (pagination, filtering) | MEDIUM |
### 2. API Routes (Secure Bridges)
| File Path | Purpose | Priority |
|-----------|---------|----------|
| `src/pages/api/shim/sites/[action].ts` | Sites CRUD endpoints | ⭐ HIGH |
| `src/pages/api/shim/articles/[action].ts` | Articles CRUD endpoints | ⭐ HIGH |
| `src/pages/api/shim/campaigns/[action].ts` | Campaigns CRUD endpoints | MEDIUM |
| `src/pages/api/shim/jobs/[action].ts` | Jobs CRUD endpoints | MEDIUM |
| `src/pages/api/shim/health.ts` | Database health check | LOW |
### 3. Example Components
| File Path | Purpose | Priority |
|-----------|---------|----------|
| `src/components/shim/SitesList.tsx` | React component using shim API | ⭐ HIGH |
| `src/components/shim/ArticleEditor.tsx` | Article CRUD using shim | ⭐ HIGH |
| `src/pages/shim/sites.astro` | Demo page: SSR sites list | ⭐ HIGH |
| `src/pages/shim/articles.astro` | Demo page: SSR articles list | MEDIUM |
---
## 📂 FILES TO USE (Existing Infrastructure)
### Already Working - Use As-Is
| File Path | What It Provides | How We'll Use It |
|-----------|------------------|------------------|
| `src/lib/db.ts` | PostgreSQL pool connection | Import `pool` for all queries |
| `src/lib/schemas.ts` | TypeScript type definitions | Reference for table structures |
| `astro.config.mjs` | Astro SSR config + Node adapter | Already configured for SSR |
| `package.json` | Dependencies (`pg`, `@types/pg`) | Already has what we need |
| `.env` | `DATABASE_URL` environment variable | Connection string source |
### Existing Patterns to Mimic
| File Path | Pattern to Copy | Why |
|-----------|-----------------|-----|
| `src/pages/api/god/[...action].ts` | Token validation, error handling | Security model |
| `src/lib/directus/client.ts` | Query abstraction pattern | Structure for shim layer |
| `src/components/admin/sites/SitesManager.tsx` | TanStack Query usage | Client-side data fetching |
---
## 📂 FILES TO MODIFY (Minimal Changes)
| File Path | Modification | Reason |
|-----------|--------------|--------|
| `src/lib/db.ts` | Add query helper functions | Convenience wrappers |
| `.env` | Verify `DATABASE_URL` is set | Required for local dev |
| `tsconfig.json` | Add shim types path alias | Easier imports |
---
## ✅ TASK LIST (Step-by-Step Implementation)
### PHASE 1: Foundation (30 min)
- [ ] **Task 1.1:** Create `src/lib/shim/types.ts`
- Define interfaces: `Site`, `Article`, `Campaign`, `Job`
- Match PostgreSQL schema from migrations
- Export as named types
- [ ] **Task 1.2:** Create `src/lib/shim/utils.ts`
- `buildWhere()` - Convert filters to SQL WHERE clauses
- `buildPagination()` - LIMIT/OFFSET helpers
- `sanitizeInput()` - Basic SQL injection prevention
- [ ] **Task 1.3:** Enhance `src/lib/db.ts`
- Add `executeQuery<T>(sql: string, params: any[]): Promise<T[]>`
- Add `executeOne<T>(sql: string, params: any[]): Promise<T | null>`
- Add error logging
### PHASE 2: Shim Query Builders (45 min)
- [ ] **Task 2.1:** Create `src/lib/shim/sites.ts`
```typescript
export async function getSites(filters?: FilterOptions): Promise<Site[]>
export async function getSiteById(id: string): Promise<Site | null>
export async function createSite(data: Partial<Site>): Promise<Site>
export async function updateSite(id: string, data: Partial<Site>): Promise<Site>
export async function deleteSite(id: string): Promise<boolean>
```
- [ ] **Task 2.2:** Create `src/lib/shim/articles.ts`
- Same CRUD pattern as sites
- Add `getArticlesByStatus(status: string)`
- Add `getArticlesBySite(siteId: string)`
- [ ] **Task 2.3:** Create `src/lib/shim/campaigns.ts`
- Campaign CRUD operations
- `getActiveCampaigns()`
- [ ] **Task 2.4:** Create `src/lib/shim/jobs.ts`
- Job queue queries
- `getJobsByStatus(status: string)`
### PHASE 3: API Routes (Secure Bridges) (60 min)
- [ ] **Task 3.1:** Create `src/pages/api/shim/sites/list.ts`
```typescript
// GET /api/shim/sites/list?limit=10&offset=0
import { pool } from '@/lib/db';
import { getSites } from '@/lib/shim/sites';
export async function GET({ request }) {
// 1. Validate token (copy from /api/god/)
// 2. Parse query params
// 3. Call getSites()
// 4. Return JSON
}
```
- [ ] **Task 3.2:** Create `src/pages/api/shim/sites/[id].ts`
- GET: Fetch single site
- PUT: Update site
- DELETE: Delete site
- [ ] **Task 3.3:** Create `src/pages/api/shim/sites/create.ts`
- POST: Create new site
- Validate required fields
- Return created site with ID
- [ ] **Task 3.4:** Repeat for articles (`/api/shim/articles/*`)
- [ ] **Task 3.5:** Add token validation middleware
- Extract from existing `/api/god/` pattern
- Check `GOD_MODE_TOKEN` or custom token
### PHASE 4: Server-Side Pages (SSR Demo) (30 min)
- [ ] **Task 4.1:** Create `src/pages/shim/sites.astro`
```astro
---
import { getSites } from '@/lib/shim/sites';
const sites = await getSites({ limit: 50 });
---
<h1>Sites ({sites.length})</h1>
<ul>
{sites.map(site => <li>{site.domain}</li>)}
</ul>
```
- [ ] **Task 4.2:** Create `src/pages/shim/articles.astro`
- Similar pattern for articles
- Show article count, recent articles
- [ ] **Task 4.3:** Create `src/pages/shim/index.astro`
- Dashboard showing counts from all tables
- Demo of multi-table queries in one page
### PHASE 5: Client-Side Components (React + TanStack Query) (45 min)
- [ ] **Task 5.1:** Create `src/components/shim/SitesList.tsx`
```typescript
import { useQuery } from '@tanstack/react-query';
export default function SitesList() {
const { data: sites } = useQuery({
queryKey: ['shim-sites'],
queryFn: () => fetch('/api/shim/sites/list').then(r => r.json())
});
return <ul>{sites?.map(...)}</ul>;
}
```
- [ ] **Task 5.2:** Create `src/components/shim/ArticleEditor.tsx`
- Form for creating/editing articles
- Uses `useMutation` for POST/PUT
- Calls `/api/shim/articles/[id]`
- [ ] **Task 5.3:** Add components to demo pages
- Wire `SitesList` to `/shim/sites.astro`
- Make it `client:load` hydrated
### PHASE 6: Testing & Security (30 min)
- [ ] **Task 6.1:** Test SSR pages locally
- Visit `/shim/sites` - should load instantly with data
- Verify no database credentials in browser
- [ ] **Task 6.2:** Test API routes
- `curl http://localhost:4321/api/shim/sites/list`
- Verify token requirement works
- [ ] **Task 6.3:** Security audit
- Ensure no SQL injection vulnerabilities
- Verify token validation on all endpoints
- Check that `DATABASE_URL` not exposed
- [ ] **Task 6.4:** Performance test
- Query 1000+ sites
- Check connection pool usage
- Monitor memory with large datasets
---
## 🔧 DETAILED EXAMPLE: Sites Table Implementation
### Step 1: Type Definition (`src/lib/shim/types.ts`)
```typescript
export interface Site {
id: string;
domain: string;
status: 'active' | 'inactive' | 'pending';
site_url: string;
site_wpjson: string;
created_at: Date;
updated_at: Date;
}
export interface FilterOptions {
limit?: number;
offset?: number;
status?: string;
search?: string;
}
```
### Step 2: Query Builder (`src/lib/shim/sites.ts`)
```typescript
import { pool } from '@/lib/db';
import type { Site, FilterOptions } from './types';
export async function getSites(options: FilterOptions = {}): Promise<Site[]> {
const { limit = 50, offset = 0, status, search } = options;
let sql = 'SELECT * FROM sites WHERE 1=1';
const params: any[] = [];
let paramIndex = 1;
if (status) {
sql += ` AND status = $${paramIndex++}`;
params.push(status);
}
if (search) {
sql += ` AND domain ILIKE $${paramIndex++}`;
params.push(`%${search}%`);
}
sql += ` ORDER BY created_at DESC LIMIT $${paramIndex++} OFFSET $${paramIndex++}`;
params.push(limit, offset);
const { rows } = await pool.query<Site>(sql, params);
return rows;
}
export async function getSiteById(id: string): Promise<Site | null> {
const { rows } = await pool.query<Site>(
'SELECT * FROM sites WHERE id = $1',
[id]
);
return rows[0] || null;
}
export async function createSite(data: Partial<Site>): Promise<Site> {
const { rows } = await pool.query<Site>(
`INSERT INTO sites (domain, status, site_url, site_wpjson)
VALUES ($1, $2, $3, $4)
RETURNING *`,
[data.domain, data.status || 'pending', data.site_url, data.site_wpjson]
);
return rows[0];
}
export async function updateSite(id: string, data: Partial<Site>): Promise<Site> {
const fields: string[] = [];
const values: any[] = [];
let paramIndex = 1;
Object.entries(data).forEach(([key, value]) => {
if (value !== undefined && key !== 'id') {
fields.push(`${key} = $${paramIndex++}`);
values.push(value);
}
});
values.push(id);
const { rows } = await pool.query<Site>(
`UPDATE sites SET ${fields.join(', ')}, updated_at = NOW()
WHERE id = $${paramIndex}
RETURNING *`,
values
);
return rows[0];
}
export async function deleteSite(id: string): Promise<boolean> {
const result = await pool.query('DELETE FROM sites WHERE id = $1', [id]);
return result.rowCount ? result.rowCount > 0 : false;
}
```
### Step 3: API Route (`src/pages/api/shim/sites/list.ts`)
```typescript
import type { APIRoute } from 'astro';
import { getSites } from '@/lib/shim/sites';
export const GET: APIRoute = async ({ request, url }) => {
try {
// 1. Token validation (optional for read operations)
const token = request.headers.get('Authorization')?.replace('Bearer ', '');
if (!token || token !== import.meta.env.GOD_MODE_TOKEN) {
return new Response(JSON.stringify({ error: 'Unauthorized' }), {
status: 401,
headers: { 'Content-Type': 'application/json' }
});
}
// 2. Parse query params
const limit = parseInt(url.searchParams.get('limit') || '50');
const offset = parseInt(url.searchParams.get('offset') || '0');
const status = url.searchParams.get('status') || undefined;
const search = url.searchParams.get('search') || undefined;
// 3. Execute query
const sites = await getSites({ limit, offset, status, search });
// 4. Return JSON
return new Response(JSON.stringify({ sites, count: sites.length }), {
status: 200,
headers: { 'Content-Type': 'application/json' }
});
} catch (error) {
console.error('API Error:', error);
return new Response(JSON.stringify({ error: 'Internal Server Error' }), {
status: 500,
headers: { 'Content-Type': 'application/json' }
});
}
};
```
### Step 4: SSR Page (`src/pages/shim/sites.astro`)
```astro
---
import AdminLayout from '@/layouts/AdminLayout.astro';
import { getSites } from '@/lib/shim/sites';
// Server-side query - runs before HTML is sent
const sites = await getSites({ limit: 100 });
---
<AdminLayout title="Sites (Direct DB)">
<h1 class="text-3xl font-bold text-white mb-4">Sites ({sites.length})</h1>
<div class="space-y-2">
{sites.map(site => (
<div class="p-4 bg-slate-800 rounded-lg">
<h3 class="text-white font-semibold">{site.domain}</h3>
<p class="text-slate-400 text-sm">{site.site_url}</p>
<span class={`text-xs px-2 py-1 rounded ${
site.status === 'active' ? 'bg-green-500/20 text-green-400' : 'bg-gray-500/20 text-gray-400'
}`}>
{site.status}
</span>
</div>
))}
</div>
</AdminLayout>
```
### Step 5: React Component (`src/components/shim/SitesList.tsx`)
```typescript
import React from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import type { Site } from '@/lib/shim/types';
export default function SitesList() {
const queryClient = useQueryClient();
const { data, isLoading } = useQuery({
queryKey: ['shim-sites'],
queryFn: async () => {
const response = await fetch('/api/shim/sites/list', {
headers: {
'Authorization': `Bearer ${import.meta.env.PUBLIC_GOD_MODE_TOKEN}`
}
});
return response.json();
}
});
const deleteMutation = useMutation({
mutationFn: async (id: string) => {
await fetch(`/api/shim/sites/${id}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${import.meta.env.PUBLIC_GOD_MODE_TOKEN}`
}
});
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['shim-sites'] });
}
});
if (isLoading) return <div>Loading...</div>;
return (
<div className="space-y-2">
{data?.sites?.map((site: Site) => (
<div key={site.id} className="p-4 bg-slate-800 rounded-lg flex justify-between items-center">
<div>
<h3 className="text-white font-semibold">{site.domain}</h3>
<p className="text-slate-400 text-sm">{site.site_url}</p>
</div>
<button
onClick={() => deleteMutation.mutate(site.id)}
className="px-3 py-1 bg-red-600 text-white rounded hover:bg-red-700"
>
Delete
</button>
</div>
))}
</div>
);
}
```
---
## 🔒 SECURITY CHECKLIST
- [ ] **Never** expose `DATABASE_URL` to client-side code
- [ ] **Always** validate tokens in API routes
- [ ] **Always** use parameterized queries (`$1`, `$2`) - never string concatenation
- [ ] **Never** trust user input - sanitize before queries
- [ ] **Use** connection pooling (already in `db.ts`)
- [ ] **Limit** query results (default LIMIT 50)
- [ ] **Log** all database errors server-side
- [ ] **Test** for SQL injection vulnerabilities
---
## 🚀 DEPLOYMENT CHECKLIST
- [ ] Set `DATABASE_URL` environment variable in Coolify
- [ ] Set `GOD_MODE_TOKEN` for API authentication
- [ ] Verify Dockerfile builds with `pg` dependency
- [ ] Test connection pool limits under load
- [ ] Monitor database connection count
- [ ] Set up database backups
- [ ] Configure SSL for PostgreSQL connection (production)
---
## 📊 EXPECTED PERFORMANCE
| Operation | SSR (Server-Side) | API Route (Client-Side) |
|-----------|-------------------|-------------------------|
| Get 50 sites | ~10ms | ~50ms (includes HTTP) |
| Create site | ~15ms | ~60ms |
| Update site | ~12ms | ~55ms |
| Complex join | ~50ms | ~100ms |
**Why SSR is faster:** No HTTP roundtrip, query executes before HTML is sent.
---
## 🎯 SUCCESS CRITERIA
1. ✅ Can view sites list on `/shim/sites` without any client-side API calls
2. ✅ Can create/update/delete sites via React component using `/api/shim/sites/*`
3. ✅ No database credentials visible in browser DevTools
4. ✅ All queries use parameterized SQL (no injection risk)
5. ✅ Connection pool stays under 20 connections
6. ✅ Token validation works on all API endpoints
7. ✅ SSR pages load in < 100ms with 1000+ records

149
src/components/shim/SitesList.tsx Normal file
View File

@@ -0,0 +1,149 @@
// Client-Side React Component
// Uses TanStack Query to fetch from /api/shim/sites/list
import React, { useState } from 'react';
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { Loader2, Trash2, Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { Site, PaginationResult } from '@/lib/shim/types';
export default function SitesList() {
const queryClient = useQueryClient();
const [page, setPage] = useState(0);
const limit = 10;
// Fetch sites
const { data, isLoading, error } = useQuery<PaginationResult<Site>>({
queryKey: ['shim-sites', page],
queryFn: async () => {
const response = await fetch(
`/api/shim/sites/list?limit=${limit}&offset=${page * limit}`,
{
headers: {
'Authorization': `Bearer ${import.meta.env.PUBLIC_GOD_MODE_TOKEN || 'local-dev-token'}`
}
}
);
if (!response.ok) {
throw new Error('Failed to fetch sites');
}
return response.json();
},
staleTime: 30000, // Cache for 30 seconds
});
// Delete mutation
const deleteMutation = useMutation({
mutationFn: async (id: string) => {
const response = await fetch(`/api/shim/sites/${id}`, {
method: 'DELETE',
headers: {
'Authorization': `Bearer ${import.meta.env.PUBLIC_GOD_MODE_TOKEN || 'local-dev-token'}`
}
});
if (!response.ok) {
throw new Error('Failed to delete site');
}
},
onSuccess: () => {
queryClient.invalidateQueries({ queryKey: ['shim-sites'] });
}
});
if (isLoading) {
return (
<div className="flex items-center justify-center p-12">
<Loader2 className="w-8 h-8 text-blue-500 animate-spin" />
<span className="ml-3 text-slate-400">Loading sites from API...</span>
</div>
);
}
if (error) {
return (
<div className="p-6 bg-red-900/20 border border-red-700 rounded-lg">
<p className="text-red-400">Error loading sites: {error.message}</p>
</div>
);
}
const sites = data?.data || [];
return (
<div className="space-y-4">
{/* Sites List */}
<div className="space-y-2">
{sites.length === 0 ? (
<div className="p-8 bg-slate-800 rounded-lg text-center text-slate-400">
No sites found on this page.
</div>
) : (
sites.map((site) => (
<div
key={site.id}
className="p-4 bg-slate-800/50 rounded-lg border border-slate-700 hover:border-slate-600 transition flex justify-between items-center"
>
<div>
<h3 className="text-white font-semibold">{site.domain}</h3>
<p className="text-slate-400 text-sm">{site.site_url || 'No URL'}</p>
</div>
<div className="flex items-center gap-2">
<span
className={`px-2 py-1 rounded text-xs font-medium ${site.status === 'active'
? 'bg-green-500/20 text-green-400'
: 'bg-gray-500/20 text-gray-400'
}`}
>
{site.status}
</span>
<Button
variant="ghost"
size="sm"
onClick={() => deleteMutation.mutate(site.id)}
disabled={deleteMutation.isPending}
className="text-red-400 hover:text-red-300 hover:bg-red-900/20"
>
{deleteMutation.isPending ? (
<Loader2 className="w-4 h-4 animate-spin" />
) : (
<Trash2 className="w-4 h-4" />
)}
</Button>
</div>
</div>
))
)}
</div>
{/* Pagination */}
{data && data.total > limit && (
<div className="flex justify-between items-center pt-4 border-t border-slate-700">
<p className="text-slate-400 text-sm">
Showing {page * limit + 1}-{Math.min((page + 1) * limit, data.total)} of {data.total}
</p>
<div className="flex gap-2">
<Button
variant="outline"
size="sm"
onClick={() => setPage(p => Math.max(0, p - 1))}
disabled={page === 0}
>
Previous
</Button>
<Button
variant="outline"
size="sm"
onClick={() => setPage(p => p + 1)}
disabled={!data.hasMore}
>
Next
</Button>
</div>
</div>
)}
</div>
);
}

151
src/lib/shim/sites.ts Normal file
View File

@@ -0,0 +1,151 @@
// Sites table query functions - Direct PostgreSQL access
import { pool } from '@/lib/db';
import type { Site, FilterOptions, PaginationResult } from './types';
import { buildWhere, buildSearch, buildPagination, buildUpdateSet, getSingleResult, isValidUUID } from './utils';
/**
* Get all sites with optional filtering and pagination
*/
export async function getSites(options: FilterOptions = {}): Promise<PaginationResult<Site>> {
const { limit = 50, offset = 0, status, search } = options;
let sql = 'SELECT * FROM sites WHERE 1=1';
const params: any[] = [];
let paramIndex = 1;
// Add status filter
if (status) {
sql += ` AND status = $${paramIndex++}`;
params.push(status);
}
// Add search filter
if (search) {
const [searchSql, searchParam] = buildSearch('domain', search, paramIndex++);
sql += searchSql;
params.push(searchParam);
}
// Add pagination
const [paginationSql, safeLimit, safeOffset] = buildPagination(limit, offset, paramIndex);
sql += ' ORDER BY created_at DESC' + paginationSql;
params.push(safeLimit, safeOffset);
// Execute query
const { rows } = await pool.query<Site>(sql, params);
// Get total count
const countSql = 'SELECT COUNT(*) FROM sites WHERE 1=1' +
(status ? ' AND status = $1' : '');
const countParams = status ? [status] : [];
const { rows: countRows } = await pool.query<{ count: string }>(countSql, countParams);
const total = parseInt(countRows[0]?.count || '0');
return {
data: rows,
total,
limit: safeLimit,
offset: safeOffset,
hasMore: safeOffset + rows.length < total
};
}
/**
* Get single site by ID
*/
export async function getSiteById(id: string): Promise<Site | null> {
if (!isValidUUID(id)) {
throw new Error('Invalid site ID format');
}
const { rows } = await pool.query<Site>(
'SELECT * FROM sites WHERE id = $1',
[id]
);
return getSingleResult(rows);
}
/**
* Get site by domain
*/
export async function getSiteByDomain(domain: string): Promise<Site | null> {
const { rows } = await pool.query<Site>(
'SELECT * FROM sites WHERE domain = $1',
[domain]
);
return getSingleResult(rows);
}
/**
* Create new site
*/
export async function createSite(data: Partial<Site>): Promise<Site> {
if (!data.domain) {
throw new Error('Domain is required');
}
const { rows } = await pool.query<Site>(
`INSERT INTO sites (domain, status, site_url, site_wpjson)
VALUES ($1, $2, $3, $4)
RETURNING *`,
[
data.domain,
data.status || 'pending',
data.site_url || '',
data.site_wpjson || ''
]
);
return rows[0];
}
/**
* Update existing site
*/
export async function updateSite(id: string, data: Partial<Site>): Promise<Site> {
if (!isValidUUID(id)) {
throw new Error('Invalid site ID format');
}
const [setClause, values] = buildUpdateSet(data);
values.push(id);
const { rows } = await pool.query<Site>(
`UPDATE sites SET ${setClause}, updated_at = NOW()
WHERE id = $${values.length}
RETURNING *`,
values
);
if (rows.length === 0) {
throw new Error('Site not found');
}
return rows[0];
}
/**
* Delete site
*/
export async function deleteSite(id: string): Promise<boolean> {
if (!isValidUUID(id)) {
throw new Error('Invalid site ID format');
}
const result = await pool.query('DELETE FROM sites WHERE id = $1', [id]);
return result.rowCount ? result.rowCount > 0 : false;
}
/**
* Get sites count by status
*/
export async function getSitesCountByStatus(): Promise<Record<string, number>> {
const { rows } = await pool.query<{ status: string; count: string }>(
'SELECT status, COUNT(*) as count FROM sites GROUP BY status'
);
return rows.reduce((acc, row) => {
acc[row.status] = parseInt(row.count);
return acc;
}, {} as Record<string, number>);
}

61
src/lib/shim/types.ts Normal file
View File

@@ -0,0 +1,61 @@
// Type definitions matching PostgreSQL schema
// These mirror the database tables for type-safe queries
export interface Site {
id: string;
domain: string;
status: 'active' | 'inactive' | 'pending';
site_url: string;
site_wpjson: string;
created_at: Date;
updated_at: Date;
}
export interface Article {
id: string;
site_id: string;
title: string;
content: string;
status: 'queued' | 'processing' | 'qc' | 'approved' | 'published';
is_published: boolean;
created_at: Date;
updated_at: Date;
}
export interface Campaign {
id: string;
name: string;
status: 'active' | 'paused' | 'completed';
target_sites: string[];
created_at: Date;
updated_at: Date;
}
export interface GenerationJob {
id: string;
site_id: string;
campaign_id?: string;
status: 'pending' | 'processing' | 'completed' | 'failed';
total_count: number;
current_offset: number;
error_message?: string;
created_at: Date;
updated_at: Date;
}
export interface FilterOptions {
limit?: number;
offset?: number;
status?: string;
search?: string;
siteId?: string;
campaignId?: string;
}
export interface PaginationResult<T> {
data: T[];
total: number;
limit: number;
offset: number;
hasMore: boolean;
}

100
src/lib/shim/utils.ts Normal file
View File

@@ -0,0 +1,100 @@
// Utility functions for building SQL queries safely
/**
* Builds WHERE clause from filter object
* Returns [sqlFragment, params] for safe parameterized queries
*/
export function buildWhere(
filters: Record<string, any>,
startIndex: number = 1
): [string, any[]] {
const conditions: string[] = [];
const params: any[] = [];
let paramIndex = startIndex;
Object.entries(filters).forEach(([key, value]) => {
if (value !== undefined && value !== null) {
conditions.push(`${key} = $${paramIndex++}`);
params.push(value);
}
});
const sql = conditions.length > 0 ? ` AND ${conditions.join(' AND ')}` : '';
return [sql, params];
}
/**
* Builds LIKE clause for search
*/
export function buildSearch(
column: string,
searchTerm: string,
paramIndex: number
): [string, string] {
return [` AND ${column} ILIKE $${paramIndex}`, `%${searchTerm}%`];
}
/**
* Builds pagination clause
*/
export function buildPagination(
limit: number = 50,
offset: number = 0,
paramIndex: number
): [string, number, number] {
return [
` LIMIT $${paramIndex} OFFSET $${paramIndex + 1}`,
Math.min(limit, 1000), // Cap at 1000
Math.max(offset, 0)
];
}
/**
* Sanitizes table/column names (only allow alphanumeric + underscore)
*/
export function sanitizeIdentifier(identifier: string): string {
if (!/^[a-zA-Z0-9_]+$/.test(identifier)) {
throw new Error(`Invalid identifier: ${identifier}`);
}
return identifier;
}
/**
* Builds dynamic UPDATE SET clause
*/
export function buildUpdateSet(
data: Record<string, any>,
startIndex: number = 1
): [string, any[]] {
const fields: string[] = [];
const values: any[] = [];
let paramIndex = startIndex;
Object.entries(data).forEach(([key, value]) => {
if (value !== undefined && key !== 'id' && key !== 'created_at') {
fields.push(`${sanitizeIdentifier(key)} = $${paramIndex++}`);
values.push(value);
}
});
if (fields.length === 0) {
throw new Error('No fields to update');
}
return [fields.join(', '), values];
}
/**
* Executes a query and returns single result or null
*/
export function getSingleResult<T>(rows: T[]): T | null {
return rows[0] || null;
}
/**
* Validates UUID format
*/
export function isValidUUID(uuid: string): boolean {
const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
return uuidRegex.test(uuid);
}

46
src/pages/api/shim/sites/list.ts Normal file
View File

@@ -0,0 +1,46 @@
// API Route: GET /api/shim/sites/list
// Secure endpoint for fetching sites list
import type { APIRoute } from 'astro';
import { getSites } from '@/lib/shim/sites';
export const GET: APIRoute = async ({ request, url }) => {
try {
// Token validation
const authHeader = request.headers.get('Authorization');
const token = authHeader?.replace('Bearer ', '') || url.searchParams.get('token');
const godToken = import.meta.env.GOD_MODE_TOKEN;
if (godToken && token !== godToken) {
return new Response(JSON.stringify({ error: 'Unauthorized' }), {
status: 401,
headers: { 'Content-Type': 'application/json' }
});
}
// Parse query parameters
const limit = parseInt(url.searchParams.get('limit') || '50');
const offset = parseInt(url.searchParams.get('offset') || '0');
const status = url.searchParams.get('status') || undefined;
const search = url.searchParams.get('search') || undefined;
// Execute query
const result = await getSites({ limit, offset, status, search });
// Return paginated result
return new Response(JSON.stringify(result), {
status: 200,
headers: { 'Content-Type': 'application/json' }
});
} catch (error: any) {
console.error('API Error [/api/shim/sites/list]:', error);
return new Response(JSON.stringify({
error: 'Internal Server Error',
message: error.message
}), {
status: 500,
headers: { 'Content-Type': 'application/json' }
});
}
};

86
src/pages/shim/sites.astro Normal file
View File

@@ -0,0 +1,86 @@
---
// SSR Demo Page: Direct PostgreSQL query in Astro frontmatter
import AdminLayout from '@/layouts/AdminLayout.astro';
import { getSites } from '@/lib/shim/sites';
import SitesList from '@/components/shim/SitesList';
// This runs on the SERVER before HTML is sent
// No API call - direct database access
const { data: sites, total } = await getSites({ limit: 100 });
---
<AdminLayout title="Sites - Direct DB Shim">
<div class="space-y-6">
<!-- Header -->
<div class="flex justify-between items-center">
<div>
<h1 class="text-3xl font-bold text-white flex items-center gap-3">
🗄️ Sites (Direct PostgreSQL)
</h1>
<p class="text-slate-400 mt-1">
Loaded {sites.length} of {total} sites via SSR (no API calls)
</p>
</div>
<div class="flex gap-2">
<a href="/admin/sites" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg">
← Back to Admin
</a>
</div>
</div>
<!-- SSR Sites List (Rendered on server) -->
<div class="space-y-3">
<h2 class="text-xl font-semibold text-white border-b border-slate-700 pb-2">
Server-Side Rendered List
</h2>
{sites.length === 0 ? (
<div class="p-8 bg-slate-800 rounded-lg text-center text-slate-400">
No sites found. Create your first site in the Admin panel.
</div>
) : (
sites.map(site => (
<div class="p-4 bg-slate-800 rounded-lg border border-slate-700 hover:border-slate-600 transition">
<div class="flex justify-between items-start">
<div>
<h3 class="text-white font-semibold text-lg">{site.domain}</h3>
<p class="text-slate-400 text-sm mt-1">{site.site_url || 'No URL set'}</p>
<p class="text-slate-500 text-xs mt-2">
Created: {new Date(site.created_at).toLocaleDateString()}
</p>
</div>
<span class={`px-3 py-1 rounded-full text-xs font-medium ${
site.status === 'active'
? 'bg-green-500/20 text-green-400 border border-green-500/30'
: site.status === 'pending'
? 'bg-yellow-500/20 text-yellow-400 border border-yellow-500/30'
: 'bg-gray-500/20 text-gray-400 border border-gray-500/30'
}`}>
{site.status}
</span>
</div>
</div>
))
)}
</div>
<!-- Client-Side React Component (Uses API) -->
<div class="mt-8 space-y-3">
<h2 class="text-xl font-semibold text-white border-b border-slate-700 pb-2">
Client-Side React Component (with mutations)
</h2>
<SitesList client:load />
</div>
<!-- Info Box -->
<div class="mt-6 p-4 bg-blue-900/20 border border-blue-700 rounded-lg">
<h3 class="text-blue-300 font-semibold mb-2">🔍 How This Works</h3>
<ul class="text-blue-200 text-sm space-y-1">
<li>✅ <strong>Top section:</strong> SSR - Query ran on server before HTML sent (instant load)</li>
<li>✅ <strong>Bottom section:</strong> React component using <code>/api/shim/sites/list</code></li>
<li>✅ <strong>Security:</strong> Database credentials never exposed to browser</li>
<li>✅ <strong>Performance:</strong> SSR = ~10ms, API = ~50ms (includes HTTP overhead)</li>
</ul>
</div>
</div>
</AdminLayout>