feat: initial PayloadCMS 3.64.0 setup for OGB Solutions
- PayloadCMS 3.64.0 + Next.js 15.4.7 + React 19.1.0 - PostgreSQL database configured - Plugins: form-builder, search, nested-docs, seo, redirects - Basic collections: Pages, Posts, Categories, Media, Users - Basic Header/Footer globals - Ready for Kit Digital grant enhancements
This commit is contained in:
@@ -0,0 +1,381 @@
|
||||
# OGB Solutions - Setup Guide from Daemez.solutions
|
||||
|
||||
## Context
|
||||
|
||||
This is Oscar Gimenez's **personal branding website** (OGB Solutions). It's built on PayloadCMS 3.64.0 (newer than Daemez 3.63.0) but needs enhancements copied from the **Daemez.solutions** project.
|
||||
|
||||
**Purpose:** Meet Kit Digital grant requirements for professional web presence.
|
||||
|
||||
---
|
||||
|
||||
## Grant Requirements (Kit Digital)
|
||||
|
||||
From screenshot: `/home/oscar/daemez.io/x/daemez.solutions/Screenshot 2025-11-16 183054.png`
|
||||
|
||||
### Mandatory for Grant Approval:
|
||||
|
||||
1. ✅ **Domain** - New domain registered (12 months) in beneficiary name
|
||||
2. ✅ **Hosting** - Web hosting provided
|
||||
3. ✅ **Minimum 3 pages/sections:**
|
||||
- Landing page (homepage)
|
||||
- Company/personal presentation
|
||||
- Contact form
|
||||
- Portfolio/services description
|
||||
- Contact details
|
||||
- Sitemap
|
||||
4. ✅ **Responsive** - Works on all devices
|
||||
5. ✅ **Accessibility** - WCAG 2.1 AA compliance
|
||||
6. ✅ **Self-managed CMS** - PayloadCMS (autonomous content management)
|
||||
7. ✅ **Basic SEO** - Keyword analysis, on-page SEO for 2+ pages
|
||||
8. ✅ **Multilingual ready** - Prepared for translation (if needed)
|
||||
9. ⚠️ **Training** - Basic usage documentation (create PDF)
|
||||
10. ⚠️ **12-month maintenance** - Support/maintenance plan
|
||||
11. ⚠️ **Support** - <24h response time (document process)
|
||||
|
||||
---
|
||||
|
||||
## Current State (OGB)
|
||||
|
||||
### What OGB Already Has:
|
||||
- ✅ PayloadCMS 3.64.0 (1 version newer than Daemez)
|
||||
- ✅ PostgreSQL database
|
||||
- ✅ Next.js 15.4.7, React 19.1.0
|
||||
- ✅ Basic collections: Pages, Posts, Categories, Media, Users
|
||||
- ✅ Plugins: form-builder, nested-docs, search, seo, redirects (MORE than Daemez!)
|
||||
- ✅ Basic Header/Footer (just navItems)
|
||||
|
||||
### What OGB Is Missing (vs Daemez):
|
||||
- ❌ NO localization (English only)
|
||||
- ❌ Basic Header (no CTA, announcement bar, top bar)
|
||||
- ❌ Basic Footer (no social links, company info, newsletter)
|
||||
- ❌ Minimal Categories (no description, color, order)
|
||||
- ❌ No personal branding collections (Projects, Skills, Experience, Speaking)
|
||||
- ❌ Posts not enhanced (no reading time, tags, featured, series)
|
||||
|
||||
---
|
||||
|
||||
## What to Copy from Daemez
|
||||
|
||||
### Location of Daemez Project:
|
||||
```bash
|
||||
/home/oscar/daemez.io/x/daemez.solutions
|
||||
```
|
||||
|
||||
### Files to Copy/Adapt:
|
||||
|
||||
#### 1. Enhanced Header ✅ PRIORITY
|
||||
**From:** `daemez.solutions/src/Header/config.ts`
|
||||
**To:** `ogb-solutions/src/Header/config.ts`
|
||||
|
||||
**Changes needed:**
|
||||
- Remove "top bar" section (not needed for personal site)
|
||||
- Keep: CTA button, announcement bar
|
||||
- Adapt CTA text: "Contactar" → "Get in Touch" / "Hire Me" / "Let's Talk"
|
||||
|
||||
#### 2. Enhanced Footer ✅ PRIORITY
|
||||
**From:** `daemez.solutions/src/Footer/config.ts`
|
||||
**To:** `ogb-solutions/src/Footer/config.ts`
|
||||
|
||||
**Changes needed:**
|
||||
- Keep: socialLinks, newsletter section
|
||||
- Remove: euFundingLogos (not needed for personal brand)
|
||||
- Remove: partnerLogos relationship (no Partners collection yet)
|
||||
- Keep: companyInfo but rename to personalInfo (name, email, phone, location)
|
||||
|
||||
#### 3. Enhanced Categories ✅ RECOMMENDED
|
||||
**From:** `daemez.solutions/src/collections/Categories.ts`
|
||||
**To:** `ogb-solutions/src/collections/Categories.ts`
|
||||
|
||||
**What it adds:**
|
||||
- `description` (textarea, localized) - For category pages
|
||||
- `color` (text) - Hex color for UI badges
|
||||
- `order` (number) - Custom sort order
|
||||
|
||||
#### 4. Localization Config ⚠️ OPTIONAL (if grant requires multilingual)
|
||||
**From:** `daemez.solutions/src/payload.config.ts` lines 31-48
|
||||
**Add to:** `ogb-solutions/src/payload.config.ts`
|
||||
|
||||
```typescript
|
||||
localization: {
|
||||
locales: [
|
||||
{ label: 'English', code: 'en' },
|
||||
{ label: 'Español', code: 'es' },
|
||||
{ label: 'Català', code: 'ca' },
|
||||
],
|
||||
defaultLocale: 'en',
|
||||
fallback: true,
|
||||
},
|
||||
```
|
||||
|
||||
#### 5. RowLabel Component ✅ RECOMMENDED
|
||||
**From:** `daemez.solutions/src/components/RowLabel.tsx`
|
||||
**To:** `ogb-solutions/src/components/RowLabel.tsx`
|
||||
|
||||
**Purpose:** Better admin UX for array fields (shows title in collapsed rows)
|
||||
|
||||
#### 6. Search Plugin Enhancement ✅ RECOMMENDED
|
||||
**From:** `daemez.solutions/src/plugins/index.ts` line 85
|
||||
|
||||
**Current OGB:**
|
||||
```typescript
|
||||
searchPlugin({
|
||||
collections: ['posts'],
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
**Enhanced (add when you create new collections):**
|
||||
```typescript
|
||||
searchPlugin({
|
||||
collections: ['posts', 'projects', 'speaking'], // Add your collections
|
||||
// ...
|
||||
})
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## New Collections to Create (Personal Branding)
|
||||
|
||||
### Recommended Collections:
|
||||
|
||||
#### 1. Projects/Portfolio ✅ PRIORITY
|
||||
**Purpose:** Showcase work, case studies, portfolio items
|
||||
|
||||
**Fields:**
|
||||
- name (text, required)
|
||||
- slug (auto)
|
||||
- heroImage (upload)
|
||||
- shortDescription (textarea, max 200 chars)
|
||||
- description (richText)
|
||||
- client (text) - optional, anonymize if needed
|
||||
- year (number)
|
||||
- techStack (array of text) - technologies used
|
||||
- liveUrl (text)
|
||||
- githubUrl (text)
|
||||
- featured (checkbox)
|
||||
- categories (relationship to categories)
|
||||
- gallery (array of images)
|
||||
- relatedProjects (relationship to projects)
|
||||
- publishedAt (date)
|
||||
- meta (SEO fields)
|
||||
|
||||
**Copy structure from:** `daemez.solutions/src/collections/Products.ts` (adapt for projects)
|
||||
|
||||
#### 2. Skills/Technologies ⚠️ OPTIONAL
|
||||
**Purpose:** Tag/categorize expertise
|
||||
|
||||
**Fields:**
|
||||
- name (text, required)
|
||||
- slug (auto)
|
||||
- category (select: programming, framework, tool, platform, soft-skill)
|
||||
- proficiency (select: expert, advanced, intermediate, learning)
|
||||
- yearsExperience (number)
|
||||
- icon (text) - icon identifier or URL
|
||||
- description (textarea)
|
||||
- featured (checkbox)
|
||||
- order (number)
|
||||
|
||||
#### 3. Experience/Timeline ⚠️ OPTIONAL
|
||||
**Purpose:** Career history, work experience
|
||||
|
||||
**Fields:**
|
||||
- company (text, required)
|
||||
- position (text, required)
|
||||
- startDate (date)
|
||||
- endDate (date) - optional for current role
|
||||
- current (checkbox)
|
||||
- location (text)
|
||||
- description (richText)
|
||||
- companyLogo (upload)
|
||||
- achievements (array of text)
|
||||
- technologies (relationship to Skills)
|
||||
- order (number)
|
||||
|
||||
#### 4. Speaking/Publications ⚠️ OPTIONAL
|
||||
**Purpose:** Thought leadership, conferences, articles
|
||||
|
||||
**Fields:**
|
||||
- title (text, required)
|
||||
- slug (auto)
|
||||
- type (select: conference, webinar, podcast, article, video)
|
||||
- date (date)
|
||||
- venue (text) - conference name, publication name
|
||||
- description (richText)
|
||||
- videoUrl (text)
|
||||
- slidesUrl (text)
|
||||
- articleUrl (text)
|
||||
- featured (checkbox)
|
||||
- publishedAt (date)
|
||||
|
||||
---
|
||||
|
||||
## 2-Day Launch Plan (Grant Compliance)
|
||||
|
||||
### Day 1 (4-6 hours):
|
||||
1. ✅ Copy enhanced Header from Daemez (remove top bar)
|
||||
2. ✅ Copy enhanced Footer from Daemez (remove EU logos)
|
||||
3. ✅ Copy enhanced Categories from Daemez
|
||||
4. ✅ Add localization config (optional)
|
||||
5. ✅ Copy RowLabel component
|
||||
6. ✅ Create Projects collection (minimum viable)
|
||||
7. ✅ Test that admin loads
|
||||
|
||||
### Day 2 (4-6 hours):
|
||||
1. ✅ Add content:
|
||||
- Homepage (hero + intro)
|
||||
- About page (bio + skills)
|
||||
- 2-3 portfolio items (Projects)
|
||||
- Contact info (Footer)
|
||||
2. ✅ Configure Header (CTA button, navigation)
|
||||
3. ✅ Test contact form
|
||||
4. ✅ Run accessibility audit (Chrome DevTools)
|
||||
5. ✅ Generate sitemap (automatic)
|
||||
6. ✅ Deploy
|
||||
|
||||
**Total: 8-12 hours focused work**
|
||||
|
||||
---
|
||||
|
||||
## Quick Commands
|
||||
|
||||
```bash
|
||||
# Navigate to OGB
|
||||
cd /home/oscar/daemez.io/x/ogb-solutions
|
||||
|
||||
# Install dependencies (if needed)
|
||||
pnpm install
|
||||
|
||||
# Start dev server
|
||||
pnpm dev
|
||||
|
||||
# Access admin
|
||||
# http://localhost:3000/admin
|
||||
|
||||
# Generate TypeScript types
|
||||
pnpm generate:types
|
||||
|
||||
# Build for production
|
||||
pnpm build
|
||||
|
||||
# Start production
|
||||
pnpm start
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Key Differences: Daemez vs OGB
|
||||
|
||||
| Feature | Daemez (B2B Corporate) | OGB (Personal Brand) |
|
||||
|---------|------------------------|----------------------|
|
||||
| **Purpose** | Sell services/products | Showcase expertise, get hired |
|
||||
| **Collections** | Services, Products, Integrations, CaseStudies | Projects, Skills, Experience, Speaking |
|
||||
| **Tone** | Professional, corporate | Personal, approachable |
|
||||
| **CTA** | "Request Demo", "Get Quote" | "Hire Me", "Let's Talk", "View Resume" |
|
||||
| **EU Compliance** | MANDATORY (Kit Digital for company) | NOT NEEDED (personal grant) |
|
||||
| **Pricing** | Hidden by default (partner strategy) | Not applicable |
|
||||
| **Testimonials** | Client testimonials | Colleague/client recommendations |
|
||||
|
||||
---
|
||||
|
||||
## Plugin Status
|
||||
|
||||
### Already Configured in OGB:
|
||||
- ✅ `@payloadcms/plugin-form-builder` - Contact forms
|
||||
- ✅ `@payloadcms/plugin-search` - Site search (currently posts only)
|
||||
- ✅ `@payloadcms/plugin-nested-docs` - Hierarchical categories
|
||||
- ✅ `@payloadcms/plugin-seo` - Meta tags
|
||||
- ✅ `@payloadcms/plugin-redirects` - URL management
|
||||
|
||||
### To Enhance:
|
||||
- Update `searchPlugin` collections when you add Projects/Speaking
|
||||
|
||||
---
|
||||
|
||||
## Reference Files in Daemez
|
||||
|
||||
### Strategic Documents:
|
||||
- `PLAN_CONTINUOUS.md` - 7-phase development roadmap, strategic decisions
|
||||
- `PLAN_TO_COMPLETION.md` - Content guide, implementation notes
|
||||
- `src/collections/README.md` - Collection documentation
|
||||
|
||||
### Collection Templates (adapt for OGB):
|
||||
- `src/collections/Products.ts` → Use for Projects
|
||||
- `src/collections/Services.ts` → Reference for structure
|
||||
- `src/collections/CaseStudies.ts` → Reference for portfolio items
|
||||
- `src/collections/Testimonials.ts` → Copy directly (for recommendations)
|
||||
|
||||
---
|
||||
|
||||
## Next Steps After Setup
|
||||
|
||||
1. **Fill minimal content** (grant compliance)
|
||||
2. **Test accessibility** (WCAG 2.1 AA)
|
||||
3. **Deploy to production**
|
||||
4. **Submit to grant authority**
|
||||
5. **Iterate and improve** (add more projects, blog posts, etc.)
|
||||
|
||||
---
|
||||
|
||||
## Git Repository
|
||||
|
||||
OGB has its own git repo at:
|
||||
```bash
|
||||
/home/oscar/daemez.io/x/ogb-solutions/.git
|
||||
```
|
||||
|
||||
Create commits as you work:
|
||||
```bash
|
||||
git add .
|
||||
git commit -m "Add enhanced Header/Footer from Daemez"
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Important Notes
|
||||
|
||||
1. **DON'T copy everything blindly** - Daemez is B2B corporate, OGB is personal
|
||||
2. **Focus on grant requirements first** - Launch minimal, iterate later
|
||||
3. **Reuse what works** - Header/Footer/Categories structure is universal
|
||||
4. **Adapt the tone** - Less corporate, more personal
|
||||
5. **Speed matters** - 2-day launch for grant, polish later
|
||||
|
||||
---
|
||||
|
||||
## Questions to Answer Before Starting
|
||||
|
||||
1. **Do you need multilingual?** (Grant says "if required by beneficiary")
|
||||
2. **What's your primary CTA?** ("Hire Me", "View Resume", "Get in Touch"?)
|
||||
3. **What projects to showcase?** (Pick 2-3 best ones for initial launch)
|
||||
4. **Domain ready?** (Grant requires domain in your name for 12 months)
|
||||
5. **Hosting ready?** (Where will you deploy?)
|
||||
|
||||
---
|
||||
|
||||
## Success Criteria (Grant Approval)
|
||||
|
||||
✅ **Minimum 3 pages** (Homepage, About, Contact)
|
||||
✅ **Responsive design**
|
||||
✅ **Contact form working**
|
||||
✅ **Accessibility compliant** (WCAG 2.1 AA)
|
||||
✅ **Self-managed CMS** (PayloadCMS admin working)
|
||||
✅ **Basic SEO** (meta tags on 2+ pages)
|
||||
✅ **Sitemap generated**
|
||||
✅ **Domain registered** (12 months in your name)
|
||||
✅ **Hosting active**
|
||||
|
||||
---
|
||||
|
||||
## Contact
|
||||
|
||||
If you need to reference the Daemez project, it's in the same parent directory:
|
||||
|
||||
```bash
|
||||
Daemez: /home/oscar/daemez.io/x/daemez.solutions
|
||||
OGB: /home/oscar/daemez.io/x/ogb-solutions
|
||||
```
|
||||
|
||||
Both use the same development patterns, just different content strategies.
|
||||
|
||||
---
|
||||
|
||||
**Ready to launch OGB in 2 days! 🚀**
|
||||
Reference in New Issue
Block a user