Working with Templates

Sitepins offers a template system that allows users to jump-start their projects with pre-configured boilerplate or premium themes.

Template Architecture

Templates are categorized by:

• Framework: Next.js, Astro, Hugo, etc.
• Category: Blog, Portfolio, Landing Page, etc.
• Type: Free (local) or Premium (fetched via API).

Source of Truth

Templates are consolidated from two main sources:

1. Local Templates (src/config/templates.json): Pre-packaged templates included in the application.
2. Premium Templates: Fetched dynamically via server actions (getPremiumTemplates).

// src/app/templates/page.tsx
const templates = useMemo(() => [
  ...(localTemplates as TTemplate[]), 
  ...premiumTemplates
], [premiumTemplates]);

Filtering & Discovery

The template explorer (/templates) provides a robust filtering interface using React useMemo for performance:

• Search: Full-text search across names and tags.
• Category Filter: Dynamically generated list from available templates.
• Framework Filter: Filter templates by the technology stack they use.
• Type Filter: Toggle between Free and Premium offerings.

Template Deployment

When a user selects a template, the TemplateCard component handles the initialization process, which typically involves:

1. Associating the template with a selected Organization.
2. Provisioning the project with the template’s source repository.
3. Setting up the initial configuration for the new site.