Add page/post management UI: editors, admin pages, and preview routes
This commit is contained in:
cawcenter
220
src/components/shim/PageEditor.tsx
Normal file
220
src/components/shim/PageEditor.tsx
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
// Simple Page Editor Component
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
interface PageEditorProps {
|
||||||
|
siteId: string;
|
||||||
|
pageId?: string;
|
||||||
|
initialData?: {
|
||||||
|
name: string;
|
||||||
|
route: string;
|
||||||
|
html_content: string;
|
||||||
|
meta_title?: string;
|
||||||
|
meta_description?: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
onSave?: (page: any) => void;
|
||||||
|
onCancel?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PageEditor({ siteId, pageId, initialData, onSave, onCancel }: PageEditorProps) {
|
||||||
|
const [formData, setFormData] = useState(initialData || {
|
||||||
|
name: '',
|
||||||
|
route: '/',
|
||||||
|
html_content: '',
|
||||||
|
meta_title: '',
|
||||||
|
meta_description: '',
|
||||||
|
status: 'draft'
|
||||||
|
});
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: async (data: typeof formData) => {
|
||||||
|
const url = pageId
|
||||||
|
? `/api/shim/pages/${pageId}`
|
||||||
|
: `/api/shim/pages/create`;
|
||||||
|
|
||||||
|
const method = pageId ? 'PUT' : 'POST';
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${import.meta.env.PUBLIC_GOD_MODE_TOKEN || 'local-dev-token'}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ ...data, site_id: siteId })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
throw new Error(error.message || 'Failed to save page');
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
},
|
||||||
|
onSuccess: (page) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['pages'] });
|
||||||
|
if (onSave) onSave(page);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
saveMutation.mutate(formData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePreview = () => {
|
||||||
|
if (pageId) {
|
||||||
|
window.open(`/preview/page/${pageId}`, '_blank');
|
||||||
|
} else {
|
||||||
|
alert('Please save the page first to preview it');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6 max-w-4xl">
|
||||||
|
|
||||||
|
{/* Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Page Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Route */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Route (must start with /)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.route}
|
||||||
|
onChange={(e) => setFormData({ ...formData, route: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
pattern="^\/[a-z0-9-\/]*$"
|
||||||
|
placeholder="/about"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-slate-500">Example: /about, /contact, /services/web</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* HTML Content */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
HTML Content
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.html_content}
|
||||||
|
onChange={(e) => setFormData({ ...formData, html_content: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 font-mono text-sm"
|
||||||
|
rows={15}
|
||||||
|
placeholder="<h1>Welcome</h1><p>Your content here...</p>"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SEO Section */}
|
||||||
|
<div className="border-t border-slate-700 pt-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4">SEO (Optional)</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Meta Title (max 70 chars)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.meta_title}
|
||||||
|
onChange={(e) => setFormData({ ...formData, meta_title: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
maxLength={70}
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-slate-500">{formData.meta_title?.length || 0}/70</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Meta Description (max 160 chars)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.meta_description}
|
||||||
|
onChange={(e) => setFormData({ ...formData, meta_description: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
rows={3}
|
||||||
|
maxLength={160}
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-slate-500">{formData.meta_description?.length || 0}/160</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Status
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={formData.status}
|
||||||
|
onChange={(e) => setFormData({ ...formData, status: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
>
|
||||||
|
<option value="draft">Draft</option>
|
||||||
|
<option value="published">Published</option>
|
||||||
|
<option value="archived">Archived</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saveMutation.isPending}
|
||||||
|
className="px-6 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-slate-600 text-white rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
{saveMutation.isPending ? 'Saving...' : (pageId ? 'Update Page' : 'Create Page')}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{pageId && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handlePreview}
|
||||||
|
className="px-6 py-2 bg-slate-600 hover:bg-slate-500 text-white rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
Preview
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{onCancel && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
className="px-6 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error Display */}
|
||||||
|
{saveMutation.isError && (
|
||||||
|
<div className="p-4 bg-red-900/20 border border-red-700 rounded-lg text-red-400">
|
||||||
|
Error: {saveMutation.error.message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Success Display */}
|
||||||
|
{saveMutation.isSuccess && (
|
||||||
|
<div className="p-4 bg-green-900/20 border border-green-700 rounded-lg text-green-400">
|
||||||
|
✅ Page saved successfully!
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
220
src/components/shim/PostEditor.tsx
Normal file
220
src/components/shim/PostEditor.tsx
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
// Simple Post Editor Component
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useMutation, useQueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
interface PostEditorProps {
|
||||||
|
siteId: string;
|
||||||
|
postId?: string;
|
||||||
|
initialData?: {
|
||||||
|
name: string;
|
||||||
|
slug: string;
|
||||||
|
html_content: string;
|
||||||
|
meta_title?: string;
|
||||||
|
meta_description?: string;
|
||||||
|
status: string;
|
||||||
|
};
|
||||||
|
onSave?: (post: any) => void;
|
||||||
|
onCancel?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function PostEditor({ siteId, postId, initialData, onSave, onCancel }: PostEditorProps) {
|
||||||
|
const [formData, setFormData] = useState(initialData || {
|
||||||
|
name: '',
|
||||||
|
slug: '/',
|
||||||
|
html_content: '',
|
||||||
|
meta_title: '',
|
||||||
|
meta_description: '',
|
||||||
|
status: 'draft'
|
||||||
|
});
|
||||||
|
|
||||||
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
|
const saveMutation = useMutation({
|
||||||
|
mutationFn: async (data: typeof formData) => {
|
||||||
|
const url = postId
|
||||||
|
? `/api/shim/posts/${postId}`
|
||||||
|
: `/api/shim/posts/create`;
|
||||||
|
|
||||||
|
const method = postId ? 'PUT' : 'POST';
|
||||||
|
|
||||||
|
const response = await fetch(url, {
|
||||||
|
method,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Authorization': `Bearer ${import.meta.env.PUBLIC_GOD_MODE_TOKEN || 'local-dev-token'}`
|
||||||
|
},
|
||||||
|
body: JSON.stringify({ ...data, site_id: siteId })
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
const error = await response.json();
|
||||||
|
throw new Error(error.message || 'Failed to save post');
|
||||||
|
}
|
||||||
|
|
||||||
|
return response.json();
|
||||||
|
},
|
||||||
|
onSuccess: (post) => {
|
||||||
|
queryClient.invalidateQueries({ queryKey: ['posts'] });
|
||||||
|
if (onSave) onSave(post);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleSubmit = (e: React.FormEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
saveMutation.mutate(formData);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlePreview = () => {
|
||||||
|
if (postId) {
|
||||||
|
window.open(`/preview/post/${postId}`, '_blank');
|
||||||
|
} else {
|
||||||
|
alert('Please save the post first to preview it');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-6 max-w-4xl">
|
||||||
|
|
||||||
|
{/* Name */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Post Name
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.name}
|
||||||
|
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Slug */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Slug (must start with /)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.slug}
|
||||||
|
onChange={(e) => setFormData({ ...formData, slug: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
pattern="^\/[a-z0-9-\/]*$"
|
||||||
|
placeholder="/about"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-slate-500">Example: /about, /contact, /services/web</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Content (HTML or Markdown) */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Content (HTML or Markdown)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.html_content}
|
||||||
|
onChange={(e) => setFormData({ ...formData, html_content: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500 font-mono text-sm"
|
||||||
|
rows={15}
|
||||||
|
placeholder="<h1>Welcome</h1><p>Your content here...</p>"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* SEO Section */}
|
||||||
|
<div className="border-t border-slate-700 pt-6">
|
||||||
|
<h3 className="text-lg font-semibold text-white mb-4">SEO (Optional)</h3>
|
||||||
|
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Meta Title (max 70 chars)
|
||||||
|
</label>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={formData.meta_title}
|
||||||
|
onChange={(e) => setFormData({ ...formData, meta_title: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
maxLength={70}
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-slate-500">{formData.meta_title?.length || 0}/70</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Meta Description (max 160 chars)
|
||||||
|
</label>
|
||||||
|
<textarea
|
||||||
|
value={formData.meta_description}
|
||||||
|
onChange={(e) => setFormData({ ...formData, meta_description: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
rows={3}
|
||||||
|
maxLength={160}
|
||||||
|
/>
|
||||||
|
<p className="mt-1 text-xs text-slate-500">{formData.meta_description?.length || 0}/160</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Status */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-slate-300 mb-2">
|
||||||
|
Status
|
||||||
|
</label>
|
||||||
|
<select
|
||||||
|
value={formData.status}
|
||||||
|
onChange={(e) => setFormData({ ...formData, status: e.target.value })}
|
||||||
|
className="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded-lg text-white focus:outline-none focus:border-blue-500"
|
||||||
|
>
|
||||||
|
<option value="draft">Draft</option>
|
||||||
|
<option value="published">Published</option>
|
||||||
|
<option value="archived">Archived</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Actions */}
|
||||||
|
<div className="flex gap-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={saveMutation.isPending}
|
||||||
|
className="px-6 py-2 bg-blue-600 hover:bg-blue-500 disabled:bg-slate-600 text-white rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
{saveMutation.isPending ? 'Saving...' : (postId ? 'Update Post' : 'Create Post')}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{postId && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={handlePreview}
|
||||||
|
className="px-6 py-2 bg-slate-600 hover:bg-slate-500 text-white rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
Preview
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{onCancel && (
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onCancel}
|
||||||
|
className="px-6 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg font-medium transition"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Error Display */}
|
||||||
|
{saveMutation.isError && (
|
||||||
|
<div className="p-4 bg-red-900/20 border border-red-700 rounded-lg text-red-400">
|
||||||
|
Error: {saveMutation.error.message}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Success Display */}
|
||||||
|
{saveMutation.isSuccess && (
|
||||||
|
<div className="p-4 bg-green-900/20 border border-green-700 rounded-lg text-green-400">
|
||||||
|
✅ Post saved successfully!
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
src/pages/admin/pages/new.astro
Normal file
39
src/pages/admin/pages/new.astro
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
// Admin: Create New Page
|
||||||
|
import AdminLayout from '@/layouts/AdminLayout.astro';
|
||||||
|
import PageEditor from '@/components/shim/PageEditor';
|
||||||
|
|
||||||
|
// Get first site ID (for demo, you'd select from a dropdown)
|
||||||
|
const { rows: sites } = await (await import('@/lib/db')).pool.query<{id: string}>('SELECT id FROM sites LIMIT 1');
|
||||||
|
const siteId = sites[0]?.id;
|
||||||
|
|
||||||
|
if (!siteId) {
|
||||||
|
return Astro.redirect('/admin/sites');
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<AdminLayout title="Create New Page">
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-3xl font-bold text-white">Create New Page</h1>
|
||||||
|
<p class="text-slate-400 mt-1">Add a new static page to your site</p>
|
||||||
|
</div>
|
||||||
|
<a href="/admin/pages" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg">
|
||||||
|
← Back to Pages
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-slate-800 rounded-lg border border-slate-700 p-6">
|
||||||
|
<PageEditor
|
||||||
|
client:load
|
||||||
|
siteId={siteId}
|
||||||
|
onSave={(page) => {
|
||||||
|
window.location.href = `/admin/pages/${page.id}/edit`;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</AdminLayout>
|
||||||
39
src/pages/admin/posts/new.astro
Normal file
39
src/pages/admin/posts/new.astro
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
---
|
||||||
|
// Admin: Create New Post
|
||||||
|
import AdminLayout from '@/layouts/AdminLayout.astro';
|
||||||
|
import PostEditor from '@/components/shim/PostEditor';
|
||||||
|
|
||||||
|
// Get first site ID
|
||||||
|
const { rows: sites } = await (await import('@/lib/db')).pool.query<{id: string}>('SELECT id FROM sites LIMIT 1');
|
||||||
|
const siteId = sites[0]?.id;
|
||||||
|
|
||||||
|
if (!siteId) {
|
||||||
|
return Astro.redirect('/admin/sites');
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<AdminLayout title="Create New Post">
|
||||||
|
<div class="space-y-6">
|
||||||
|
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-3xl font-bold text-white">Create New Post</h1>
|
||||||
|
<p class="text-slate-400 mt-1">Add a new blog post</p>
|
||||||
|
</div>
|
||||||
|
<a href="/admin/posts" class="px-4 py-2 bg-slate-700 hover:bg-slate-600 text-white rounded-lg">
|
||||||
|
← Back to Posts
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-slate-800 rounded-lg border border-slate-700 p-6">
|
||||||
|
<PostEditor
|
||||||
|
client:load
|
||||||
|
siteId={siteId}
|
||||||
|
onSave={(post) => {
|
||||||
|
window.location.href = `/admin/posts/${post.id}/edit`;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</AdminLayout>
|
||||||
49
src/pages/preview/page/[id].astro
Normal file
49
src/pages/preview/page/[id].astro
Normal file
@@ -0,0 +1,49 @@
|
|||||||
|
---
|
||||||
|
// Preview Page by ID
|
||||||
|
import { getPageById } from '@/lib/shim/pages';
|
||||||
|
|
||||||
|
const { id } = Astro.params;
|
||||||
|
const page = await getPageById(id!);
|
||||||
|
|
||||||
|
if (!page) {
|
||||||
|
return Astro.redirect('/404');
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>{page.meta_title || page.name}</title>
|
||||||
|
<meta name="description" content={page.meta_description || ''} />
|
||||||
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; }
|
||||||
|
.preview-banner {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 9999;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.content { margin-top: 60px; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="preview-banner">
|
||||||
|
🔍 PREVIEW MODE - Page: {page.name} - Status: {page.status}
|
||||||
|
</div>
|
||||||
|
<div class="content">
|
||||||
|
<Fragment set:html={page.html_content || '<p>No content yet</p>'} />
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
53
src/pages/preview/post/[id].astro
Normal file
53
src/pages/preview/post/[id].astro
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
---
|
||||||
|
// Preview Post by ID
|
||||||
|
import { getPostById } from '@/lib/shim/posts';
|
||||||
|
|
||||||
|
const { id } = Astro.params;
|
||||||
|
const post = await getPostById(id!);
|
||||||
|
|
||||||
|
if (!post) {
|
||||||
|
return Astro.redirect('/404');
|
||||||
|
}
|
||||||
|
---
|
||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>{post.meta_title || post.title}</title>
|
||||||
|
<meta name="description" content={post.meta_description || post.excerpt || ''} />
|
||||||
|
<meta name="robots" content="noindex, nofollow" />
|
||||||
|
<style>
|
||||||
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||||
|
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6; }
|
||||||
|
.preview-banner {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||||
|
color: white;
|
||||||
|
padding: 12px 20px;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 14px;
|
||||||
|
z-index: 9999;
|
||||||
|
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
.content { max-width: 800px; margin: 80px auto 40px; padding: 0 20px; }
|
||||||
|
.content h1 { font-size: 2.5rem; margin-bottom: 1rem; color: #1a1a1a; }
|
||||||
|
.content p { margin-bottom: 1rem; color: #4a4a4a; }
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="preview-banner">
|
||||||
|
🔍 PREVIEW MODE - Post: {post.title} - Status: {post.status}
|
||||||
|
</div>
|
||||||
|
<article class="content">
|
||||||
|
<h1>{post.title}</h1>
|
||||||
|
{post.excerpt && <p class="excerpt" style="font-size: 1.2rem; color: #666;">{post.excerpt}</p>}
|
||||||
|
<div set:html={post.content || '<p>No content yet</p>'} />
|
||||||
|
</article>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user