How to write and update landing page YAML files
This guide explains how to write and update YAML files for landing pages in the MDC Playground.
Every landing page YAML has two main sections:
meta_info:
slug: your-page-slug
destiny_code: ["1234567"]
destiny_type: "course" # or content_piece, certificate, program_area, program_stream
name: "Your Page Name"
description: "Description for SEO and listings"
theme: "geeks"
landing_info:
components:
- id: "breadcrumb"
data: { ... }
- id: "hero_one_image"
data: { ... }
Each component has:
- id: The component type (e.g., hero_one_image, contact_form, price_cards_section)
- data: The component-specific configuration
Refer to the Components Gallery and Components Examples for valid component IDs and their structure.
You can use special functions in your YAML to pull live data from the database. These are resolved when the page loads.
Use either format:
- Jinja2 style: {{ function_name(argument) }}
- Short style: {function_name(argument)} (converted automatically to Jinja2)
| Function | Arguments | Description |
|---|---|---|
get_date_range_by_course |
destiny_code (int) |
Formatted date range (e.g., "7/12 to 8/23, 2025"). Returns HTML message if multiple schedules or none. |
get_earliest_available_start_date_by_course |
destiny_code (int) |
Start date of the soonest available section (e.g., "7/12/2025") |
get_earliest_available_end_date_by_course |
destiny_code (int) |
End date of the soonest available section |
get_course_name_by_destiny_code |
destiny_code (int) |
Course title from the database (text in parentheses removed) |
get_earliest_available_schedule_by_course |
destiny_code (int) |
Schedule days of the soonest section (e.g., "Mon, Wed, Fri") |
get_earliest_available_time_range_by_course |
destiny_code (int) |
Time range of the soonest section (e.g., "9:00AM to 12:00PM") |
get_time_range |
destiny_code (int) |
Time range for the first section of the course |
get_image_alt |
url (string) |
Alt text for an image URL from MediaGallery (fallback: "image") |
The destiny_code comes from meta_info.destiny_code in your YAML. For single-course pages, use the first value:
meta_info:
destiny_code: ["1173052"]
Then in components:
{{ get_date_range_by_course(1173052) }}
For multiple courses, use each relevant destiny code.
Image alt text (from MediaGallery):
alt: "{{ get_image_alt('https://storage.googleapis.com/mdc-website/summercamps/summer-logo.svg') }}"
Course dates and schedule:
- text: "<span class='bold-600'>Dates: </span> <span class='bold-300'>{{ get_date_range_by_course(3570986) }}</span>"
- text: "<span class='bold-600'>Classes: </span> <span class='bold-300'>{{ get_time_range(3570986) }}</span>"
Full course info block:
- "<span class='bold-600'> Course name:</span> {{ get_course_name_by_destiny_code(7295849) }}"
- "<span class='bold-600'> Start:</span> {{ get_earliest_available_start_date_by_course(7295849) }}"
- "<span class='bold-600'> End:</span> {{ get_earliest_available_end_date_by_course(7295849) }}"
- "<span class='bold-600'> Schedule:</span> {{ get_earliest_available_schedule_by_course(7295849) }}"
- "<span class='bold-600'> Class time:</span> {{ get_earliest_available_time_range_by_course(7295849) }}"
meta_info.destiny_code is an array; the file lives in apps/playground/data/<slug>.yml or in a collection folder.apps/playground/data/<collection_name>/. Each file is a separate landing with its own slug.