feat: add platform homepage and content management system with improved UI
Implemented a comprehensive CMS for managing platform homepage and content pages: - Platform homepage manager with template selection (default, minimal, modern) - Content pages CRUD with platform defaults and vendor overrides - Sidebar navigation for Content Management section - Dedicated API endpoints for creating, updating, deleting pages - Template support for customizable homepage layouts - Header/footer navigation integration for content pages - Comprehensive documentation for platform homepage setup - Migration script for creating initial platform pages UI improvements: - Fixed action buttons styling in content pages table to match design system - Added proper hover states, rounded corners, and better contrast - Increased button size and padding for better usability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
316
docs/getting-started/platform-homepage-quick-start.md
Normal file
316
docs/getting-started/platform-homepage-quick-start.md
Normal file
@@ -0,0 +1,316 @@
|
||||
# Platform Homepage - Quick Start Guide
|
||||
|
||||
Quick reference for setting up and customizing the platform homepage and content pages.
|
||||
|
||||
---
|
||||
|
||||
## 🚀 Quick Setup
|
||||
|
||||
### Step 1: Create Platform Pages
|
||||
|
||||
Run the seeder script to create all default platform pages:
|
||||
|
||||
```bash
|
||||
python scripts/create_platform_pages.py
|
||||
```
|
||||
|
||||
This creates:
|
||||
- ✅ Platform Homepage (modern template)
|
||||
- ✅ About Us
|
||||
- ✅ FAQ
|
||||
- ✅ Contact Us
|
||||
- ✅ Terms of Service
|
||||
- ✅ Privacy Policy
|
||||
|
||||
### Step 2: Verify Pages
|
||||
|
||||
Visit your platform homepage:
|
||||
```
|
||||
http://localhost:8000/
|
||||
```
|
||||
|
||||
Visit content pages:
|
||||
```
|
||||
http://localhost:8000/about
|
||||
http://localhost:8000/faq
|
||||
http://localhost:8000/contact
|
||||
http://localhost:8000/terms
|
||||
http://localhost:8000/privacy
|
||||
```
|
||||
|
||||
### Step 3: Customize (Optional)
|
||||
|
||||
**Change homepage template:**
|
||||
```sql
|
||||
UPDATE content_pages
|
||||
SET template = 'minimal' -- or 'default', 'modern'
|
||||
WHERE slug = 'platform_homepage' AND vendor_id IS NULL;
|
||||
```
|
||||
|
||||
**Update homepage content:**
|
||||
```sql
|
||||
UPDATE content_pages
|
||||
SET content = '<p>Your custom homepage content...</p>'
|
||||
WHERE slug = 'platform_homepage';
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📄 Available Templates
|
||||
|
||||
### Homepage Templates
|
||||
|
||||
| Template | Style | Best For |
|
||||
|----------|-------|----------|
|
||||
| `default` | Professional, feature-rich | Comprehensive showcase |
|
||||
| `minimal` | Clean, simple | Minimalist branding |
|
||||
| `modern` | Animated, gradient-heavy | Tech-forward platforms |
|
||||
|
||||
### Content Page Template
|
||||
|
||||
All content pages use `platform/content-page.html`:
|
||||
- Breadcrumb navigation
|
||||
- Responsive design
|
||||
- Enhanced prose styling
|
||||
- Dark mode support
|
||||
|
||||
---
|
||||
|
||||
## 🎯 Common Tasks
|
||||
|
||||
### Add New Content Page
|
||||
|
||||
```python
|
||||
from app.core.database import SessionLocal
|
||||
from app.services.content_page_service import content_page_service
|
||||
|
||||
db = SessionLocal()
|
||||
|
||||
page = content_page_service.create_page(
|
||||
db,
|
||||
slug="careers",
|
||||
title="Careers",
|
||||
content="<h1>Join Our Team</h1><p>...</p>",
|
||||
vendor_id=None, # Platform page
|
||||
is_published=True,
|
||||
show_in_header=True,
|
||||
show_in_footer=True,
|
||||
display_order=4
|
||||
)
|
||||
|
||||
db.close()
|
||||
```
|
||||
|
||||
### Update Page Content
|
||||
|
||||
```python
|
||||
content_page_service.update_page(
|
||||
db,
|
||||
page_id=page.id,
|
||||
title="New Title",
|
||||
content="<h1>Updated Content</h1>",
|
||||
meta_description="New description"
|
||||
)
|
||||
```
|
||||
|
||||
### Change Navigation Visibility
|
||||
|
||||
```python
|
||||
# Show in header menu
|
||||
content_page_service.update_page(
|
||||
db,
|
||||
page_id=page.id,
|
||||
show_in_header=True,
|
||||
display_order=2
|
||||
)
|
||||
|
||||
# Remove from footer
|
||||
content_page_service.update_page(
|
||||
db,
|
||||
page_id=page.id,
|
||||
show_in_footer=False
|
||||
)
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🔍 Verification
|
||||
|
||||
### Check Database
|
||||
|
||||
```sql
|
||||
-- List all platform pages
|
||||
SELECT id, slug, title, template, is_published, show_in_header, show_in_footer
|
||||
FROM content_pages
|
||||
WHERE vendor_id IS NULL
|
||||
ORDER BY display_order;
|
||||
```
|
||||
|
||||
### Test Navigation
|
||||
|
||||
1. Visit homepage: `http://localhost:8000/`
|
||||
2. Check header menu (should show: About, FAQ, Contact)
|
||||
3. Scroll to footer (should show all pages)
|
||||
4. Click links to verify they work
|
||||
|
||||
### Test Dark Mode
|
||||
|
||||
1. Click moon icon in header
|
||||
2. Verify all pages render correctly in dark mode
|
||||
3. Toggle back to light mode
|
||||
|
||||
---
|
||||
|
||||
## 📝 Page Content Examples
|
||||
|
||||
### Homepage Content
|
||||
|
||||
```html
|
||||
<p class="lead">
|
||||
Welcome to our multi-vendor marketplace platform.
|
||||
Connect with thousands of vendors and discover amazing products.
|
||||
</p>
|
||||
<p>
|
||||
Join our growing community of successful online businesses today.
|
||||
</p>
|
||||
```
|
||||
|
||||
### About Us Content
|
||||
|
||||
```html
|
||||
<h2>Our Mission</h2>
|
||||
<p>We're democratizing e-commerce...</p>
|
||||
|
||||
<h2>Our Values</h2>
|
||||
<ul>
|
||||
<li><strong>Innovation:</strong> Constantly improving</li>
|
||||
<li><strong>Transparency:</strong> No hidden fees</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### FAQ Content
|
||||
|
||||
```html
|
||||
<h2>Getting Started</h2>
|
||||
|
||||
<h3>How do I create an account?</h3>
|
||||
<p>Contact our sales team...</p>
|
||||
|
||||
<h3>What are your pricing plans?</h3>
|
||||
<p>We offer flexible pricing...</p>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 🎨 Customization Tips
|
||||
|
||||
### Custom Homepage Template
|
||||
|
||||
1. Create new template:
|
||||
```
|
||||
app/templates/platform/homepage-custom.html
|
||||
```
|
||||
|
||||
2. Extend base template:
|
||||
```jinja2
|
||||
{% extends "platform/base.html" %}
|
||||
|
||||
{% block content %}
|
||||
<!-- Your custom layout -->
|
||||
{% endblock %}
|
||||
```
|
||||
|
||||
3. Update database:
|
||||
```sql
|
||||
UPDATE content_pages
|
||||
SET template = 'custom'
|
||||
WHERE slug = 'platform_homepage';
|
||||
```
|
||||
|
||||
### Customize Navigation Order
|
||||
|
||||
```sql
|
||||
UPDATE content_pages
|
||||
SET display_order = 1
|
||||
WHERE slug = 'about';
|
||||
|
||||
UPDATE content_pages
|
||||
SET display_order = 2
|
||||
WHERE slug = 'faq';
|
||||
|
||||
UPDATE content_pages
|
||||
SET display_order = 3
|
||||
WHERE slug = 'contact';
|
||||
```
|
||||
|
||||
Result in header: `About | FAQ | Contact`
|
||||
|
||||
---
|
||||
|
||||
## 🐛 Troubleshooting
|
||||
|
||||
### Homepage shows 404
|
||||
|
||||
**Fix:** Run seeder script
|
||||
```bash
|
||||
python scripts/create_platform_pages.py
|
||||
```
|
||||
|
||||
### Navigation menu is empty
|
||||
|
||||
**Fix:** Update navigation flags
|
||||
```sql
|
||||
UPDATE content_pages
|
||||
SET show_in_header = true, show_in_footer = true
|
||||
WHERE slug IN ('about', 'faq', 'contact')
|
||||
AND vendor_id IS NULL;
|
||||
```
|
||||
|
||||
### Content not updating
|
||||
|
||||
**Fix:** Clear any caching and restart server
|
||||
```bash
|
||||
# If using uvicorn with reload
|
||||
# Changes should auto-reload
|
||||
|
||||
# If manual restart needed
|
||||
pkill -f uvicorn
|
||||
uvicorn main:app --reload
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 📚 Full Documentation
|
||||
|
||||
For complete details, see:
|
||||
- [Platform Homepage Documentation](../features/platform-homepage.md)
|
||||
- [CMS Feature Documentation](../features/content-management-system.md)
|
||||
- [CMS Implementation Guide](../features/cms-implementation-guide.md)
|
||||
|
||||
---
|
||||
|
||||
## ✅ Checklist
|
||||
|
||||
After setup, verify:
|
||||
|
||||
- [ ] Homepage loads at `http://localhost:8000/`
|
||||
- [ ] All content pages are accessible
|
||||
- [ ] Header navigation shows correct pages
|
||||
- [ ] Footer navigation shows all pages
|
||||
- [ ] Dark mode works
|
||||
- [ ] Mobile responsive design works
|
||||
- [ ] SEO meta tags are present
|
||||
- [ ] Links in navigation work correctly
|
||||
|
||||
---
|
||||
|
||||
## 🎉 You're Done!
|
||||
|
||||
Your platform homepage and content pages are now set up and ready to customize!
|
||||
|
||||
**Next Steps:**
|
||||
1. Customize homepage content via admin panel at `/admin/platform-homepage`
|
||||
2. Manage all content pages at `/admin/content-pages`
|
||||
3. Add your own branding and colors
|
||||
4. Create additional content pages as needed
|
||||
5. Set up analytics tracking
|
||||
Reference in New Issue
Block a user