2.9 KiB

Landing Page Models

Overview

The Landing Page module provides a WYSIWYG page builder with GrapesJS editor integration, reusable block library, and MkDocs export functionality.

Models (2):

  • LandingPage — GrapesJS editor output with MkDocs export
  • PageBlock — Reusable block library

Key Features:

  • GrapesJS WYSIWYG editor (desktop only)
  • Visual + code editor modes
  • MkDocs export (THEMED vs STANDALONE modes)
  • SEO metadata (title, description, image)
  • Reusable block library (6 default blocks)
  • Jinja2 Material theme integration

See Schema Reference for complete field listings.


Editor Modes

enum EditorMode {
  VISUAL  // GrapesJS visual editor (default)
  CODE    // Raw HTML/CSS code editor
}

MkDocs Export Modes

enum MkdocsExportMode {
  THEMED      // Extends main.html, content block only (default)
  STANDALONE  // Full HTML document, no Jinja2 inheritance
}

THEMED Mode:

{% extends "main.html" %}
{% block content %}
  <div class="landing-page">
    <!-- Page HTML here -->
  </div>
{% endblock %}

STANDALONE Mode:

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <!-- Full HTML document -->
</head>
<body>
  <!-- Page HTML here -->
</body>
</html>

Page Blocks (6 default)

1. Hero Section (Headers)

  • Schema: title, subtitle, backgroundImage, ctaText, ctaUrl
  • Defaults: "Welcome to Our Campaign", "Get Involved"

2. Text Block (Content)

  • Schema: heading, body
  • Defaults: "About Us", "Tell your story here..."

3. Features Grid (Content)

  • Schema: features[] (title, description, icon)
  • Defaults: 3 features (Community Action, Advocacy, Volunteer)

4. Call to Action (Actions)

  • Schema: heading, description, buttonText, buttonUrl
  • Defaults: "Ready to Take Action?", "Join Now"

5. Testimonials (Content)

  • Schema: quotes[] (text, author, role)
  • Defaults: 2 quotes

6. Contact Form (Actions)

  • Schema: heading, fields[] (name, type, required)
  • Defaults: Name, Email, Message fields

GrapesJS JSON Format

blocks Field:

{
  "pages": [
    {
      "id": "page-main",
      "component": {
        "type": "wrapper",
        "components": [
          {
            "tagName": "section",
            "classes": ["hero"],
            "components": [
              {
                "tagName": "h1",
                "content": "Welcome to Our Campaign"
              }
            ]
          }
        ]
      }
    }
  ]
}