Blog

The Blog app provides a content publishing system for writing and managing blog articles. It supports categories, draft/published status filtering, and cover images. Articles are displayed in a filterable list with inline category and date metadata.

Key features

• Article management with create, edit, and list views
• Category system for organizing content
• Status filtering with pill-style tabs (All, Draft, Published)
• Cover image support with thumbnail display in the article list
• URL-based filter state — status filters update the URL query string

Page structure

Route	Purpose
/business/apps/blog	Dashboard with status filter tabs and article list
/business/apps/blog/new	Create a new article
/business/apps/blog/[id]	Edit an individual article
/business/apps/blog/categories	Category management

Data model overview

The server load function calls two service functions from $lib/apps/blog/services/index.js:

Function	Parameters	Description
listMyArticles(userId, { status })	User ID, optional status filter	Returns articles filtered by status if provided
listCategories(userId)	User ID	Returns all categories for building the category lookup map

Each article record includes: id, title, cover_image_url, category_id, status (draft or published), and created_at.

Categories are loaded into a Map<string, BlogCategory> on the client for O(1) lookups when rendering article metadata.

Key components

The page is organized into three main sections:

• Header with “Categories” button and “New Article” button
• Status filter tabs — pill-shaped buttons that call applyFilter("status", value), which updates the URL search params and triggers a SvelteKit navigation with goto and replaceState: true
• Article list — a Card containing clickable rows, each showing a cover image thumbnail (or placeholder icon), title, category name, date, and status badge

Status badges

• draft — secondary variant
• published — default variant

Tip

The status filter uses URL search parameters rather than client state. This means filter state survives page refreshes and can be shared via URL. The server load function reads url.searchParams.get("status") and passes it to the service layer.

Notable integrations

• Category lookup map — a $derived Map is built from the categories array so each article’s category_id can be resolved to a name without re-querying
• SvelteKit navigation — goto with replaceState: true is used for filter changes to avoid polluting browser history
• BlogCategory type — imported from $lib/apps/blog/types/index.js for type-safe category handling