AI4Managers — SvelteKit Migration + Blog System Design Spec

Date: 2026-03-28 Status: Approved Author: Roberto + Claude Code

Purpose

Migrate ai4managers.net from Astro to SvelteKit, then add a full blog system (ported from mha-public-site) for publishing BoFu content that feeds the Content Intelligence Flywheel.

Two Sub-Projects

Sub-project	Scope	Talla	Depends on
A: Landing Migration	Rewrite Astro landing in SvelteKit. Same visual identity.	M	—
B: Blog System	Port blog from MHA. Supabase + ProseMirror + admin.	M	A

Sequential execution: A first, then B on top.

Sub-Project A: Landing Migration

Goal

Rewrite ai4managers.net landing page from Astro 5 to SvelteKit 2, maintaining identical visual design (obsidian/champagne/ivory theme, GSAP animations, same sections).

Tech Stack

Component	Technology
Framework	SvelteKit 2 + Svelte 5 (runes)
CSS	TailwindCSS 4
UI Components	Skeleton UI 2 (or Svelte 5 compatible successor)
Animations	GSAP 3.14
Fonts	Inter, Playfair Display, JetBrains Mono (Google Fonts)
Deployment	Vercel (adapter-auto)
Domain	ai4managers.net

Components to Migrate

Astro Source	Svelte Target	Notes
`Layout.astro`	`+layout.svelte`	SEO meta, OG tags, JSON-LD Organization schema
`Navbar.astro`	`Navbar.svelte`	Add "Blog" link (for sub-project B)
`Hero.astro`	`Hero.svelte`	GSAP entrance animations
`Features.astro`	`Features.svelte`	"Programa" section
`Philosophy.astro`	`Philosophy.svelte`
`Protocol.astro`	`Protocol.svelte`	"Proceso" section
`FAQ.astro`	`FAQ.svelte`	Accordion
`Footer.astro`	`Footer.svelte`
`global.css`	Tailwind config + `app.css`	Theme tokens: obsidian, champagne, ivory, slate
`index.astro`	`+page.svelte`	Compose all sections

Design Tokens (from current Astro site)

--obsidian: #0a0a0a;     /* bg principal */
--champagne: #c9a96e;    /* acento dorado */
--ivory: #f5f0e8;        /* texto claro */
--slate: #1a1a2e;        /* superficie secundaria */

Routes

Route	Type	Content
`/`	SSG (prerender)	Landing page
`/blog`	SSR	Blog listing (sub-project B)
`/blog/[slug]`	SSR	Article (sub-project B)

Deployment

Same Vercel project as current (swap adapter)
Same domain: ai4managers.net
prerender = true for landing page

Done When

Landing at ai4managers.net looks identical to current Astro version
All sections render correctly (Hero, Features, Philosophy, Protocol, FAQ, Footer)
GSAP animations work
Lighthouse performance score >= 90
Vercel deploy succeeds

Sub-Project B: Blog System

Goal

Add a full blog system to ai4managers.net/blog, ported from mha-public-site (MedicalHubAssist). Admin panel with ProseMirror editor, draft/publish workflow, image upload. Spanish only.

Source Reference

Repository: github.com/aguirrerjg/mha-public-site Key directories to port from:

src/lib/server/db/ — Drizzle schema + CRUD queries
src/lib/components/blog/ — Article, PlainText, RichText editors
src/lib/editor/ — ProseMirror schemas, keymap, input rules
src/routes/api/ — create/update/delete article, upload asset
src/routes/[...lang]/blog/ — blog listing + article pages
src/routes/[...lang]/admin/ — login/logout

Tech Stack (additions to Sub-Project A)

Component	Technology
Database	PostgreSQL via Supabase (new project)
ORM	Drizzle ORM
Auth	Supabase Auth (@supabase/ssr for SvelteKit 2)
Rich Text Editor	ProseMirror (adapted to Svelte 5)
Image Storage	ImageKit
Image Crop	cropperjs

Database Schema (Supabase PostgreSQL)

Table: articles

CREATE TABLE articles (
    article_id SERIAL PRIMARY KEY,
    slug TEXT UNIQUE NOT NULL,
    created_at TIMESTAMP DEFAULT NOW(),
    published_at TIMESTAMP,          -- null = draft
    updated_at TIMESTAMP DEFAULT NOW(),
    thumbnail TEXT,                   -- ImageKit URL
    thumbnail_id TEXT                 -- ImageKit file ID
);

Table: article_translations

CREATE TABLE article_translations (
    translation_id SERIAL PRIMARY KEY,
    article_id INTEGER REFERENCES articles(article_id) ON DELETE CASCADE,
    language_code VARCHAR(2) DEFAULT 'es',
    slug TEXT UNIQUE NOT NULL,
    title TEXT NOT NULL,
    teaser TEXT,
    content TEXT,                     -- HTML from ProseMirror
    created_at TIMESTAMP DEFAULT NOW(),
    published_at TIMESTAMP,
    updated_at TIMESTAMP DEFAULT NOW()
);

Table: profiles

CREATE TABLE profiles (
    id UUID PRIMARY KEY REFERENCES auth.users(id),
    email TEXT UNIQUE,
    is_admin BOOLEAN DEFAULT FALSE
);

Auth Flow

Admin navigates to /admin/blog-login
Email/password form → Supabase signInWithPassword()
Session managed via @supabase/ssr (cookies, SvelteKit 2 compatible)
Admin status checked via profiles.is_admin
Logout at /admin/blog-logout

ProseMirror Editor (adapted to Svelte 5)

Port from MHA with Svelte 5 runes adaptation:

PlainText.svelte — single-line editor for title/teaser (use $state instead of let)
RichText.svelte — multi-line editor for content body
Schema: h2-h4, paragraphs, ordered/unordered lists, blockquotes, images, links, bold, italic
EditorToolbar.svelte — Save/Cancel bar
UploadImageModal.svelte — Crop + resize + upload to ImageKit

API Routes

Route	Method	Auth Required	Purpose
`/api/create-article`	POST	Yes	Create article + translation
`/api/update-article`	POST	Yes	Update article/translation
`/api/delete-article`	POST	Yes	Delete article + translations + ImageKit asset
`/api/upload-asset`	PUT	Yes	Upload image to ImageKit

Blog Pages

Route	Auth	Content
`/blog`	Public	Article listing (only published). Admin sees drafts too.
`/blog/[slug]`	Public	Article view. Admin sees edit/delete buttons.
`/blog/new`	Admin only	New article editor

Article Listing

Grid of ArticleTeaser cards (thumbnail, title, teaser, date)
Public: only published_at IS NOT NULL
Admin: all articles, drafts marked with badge
Sorted by published_at DESC

Article View

Full article render (HTML from ProseMirror content)
"Read next" — previous article by publish date
SEO: meta title, description (from teaser), OG image (from thumbnail)
JSON-LD Article schema
Admin: inline "Edit Article" button activates ProseMirror editor on same page

Image Handling

Thumbnail: upload modal with crop (cropperjs) → resize max 1440x1440, quality 0.8 → WebP → PUT /api/upload-asset → ImageKit
Inline images: same flow, inserted as <img> node in ProseMirror
ImageKit folder: /ai4managers-blog/images/

SEO/GEO Optimization (per article)

<title> = article title + " | AI4Managers"
<meta name="description"> = teaser
OG tags: title, description, image (thumbnail), type=article
Twitter card: summary_large_image
JSON-LD: Article schema with author, datePublished, dateModified
Semantic HTML: article content preserves H2→H3→H4 hierarchy from editor
Clean URLs: /blog/inteligencia-artificial-en-los-negocios

Sitemap

Dynamic sitemap.xml that includes:
- / (landing)
- /blog (listing)
- /blog/[slug] for each published article

Simplifications vs MHA

No i18n routing (no /{lang}/ prefix — Spanish only)
No search endpoint
No contact form (already exists in landing)
No marketing campaign endpoints
@supabase/ssr instead of @supabase/auth-helpers-sveltekit (SvelteKit 2 compatible)

Env Vars Required

# Supabase (new project for AI4Managers)
PUBLIC_SUPABASE_URL=https://xxx.supabase.co
PUBLIC_SUPABASE_ANON_KEY=eyJ...
DATABASE_URL=postgresql://...

# ImageKit
IMAGEKIT_PUBLIC_KEY=public_xxx
IMAGEKIT_PRIVATE_KEY=private_xxx
PUBLIC_IMAGEKIT_URL_ENDPOINT=https://ik.imagekit.io/xxx

# Vercel (auto-configured)

Done When

/blog shows list of published articles
Admin can login, create article with ProseMirror editor, upload thumbnail, publish
Admin can edit and delete existing articles
Published articles are SSR with full SEO meta tags
sitemap.xml includes all published articles
Article pages score >= 90 on Lighthouse

Execution Order

Sub-Project A: Landing Migration (SvelteKit scaffold + migrate components)
Sub-Project B: Blog System (Supabase setup + port blog from MHA)
DataForSEO integration test with first real BoFu article
Update flywheel dashboard

Out of Scope

English translations (phase 2)
Search functionality
Comments on articles
RSS feed
Newsletter signup
Analytics integration (use existing analytics loop)