Задание 1. Список новостей (MODx, PHP)

<aside> ⚠️ При работе с большинством проектов на MODx мы используем шаблонизатор Fenom, входящий в комплект пакета pdoTools. По этой причине, при выполнении заданий рекомендуется применять его синтаксис и возможности, когда это обосновано.

</aside>

Имеется простой сайт на MODx с двумя шаблонами: Список новостей (3) и Новость (4) .

В дереве ресурсов есть ресурс Новости (54) с дочерними ресурсами:

-- Новости (54)
---- Новость1 (55)
---- Новость2 (56)
---- Новость3 (57)
---- Новость4 (58)
---- .............
---- Новость99 (104)

У каждой новости есть следующие поля - заголовок pagetitle, дата публикации publishedon, ссылка на изображение-превью в ТВ-поле preview_image и длинный текст в поле content.

Нужно вывести список новостей на страницу Новости (54) в соответствии с следующей вёрсткой:

<div class="page">
	...
	...

	<div class="news">
		<div class="news-item">
			<img class="news-item-preview" src="(url изображения)">
			<div class="news-item-title">(заголовок)</div>
			<div class="news-item-text">(обрезанный до 200 символов текст)</div>
			<div class="news-item-pubdate">(дата публикации в читаемом формате)</div>
		</div>
		...
		...
		...
		<div class="news-item">
			<img class="news-item-preview" src="(url изображения)">
			<div class="news-item-title">(заголовок)</div>
			<div class="news-item-text">(обрезанный до 200 символов текст)</div>
			<div class="news-item-pubdate">(дата публикации в читаемом формате)</div>
		</div>
	</div>

	...
	...
</div>

Решение содержит как минимум один сниппет getNews.php, но может состоять и из нескольких файлов.

Задание 2. Генерация мобильного меню (HTML, CSS, JS)

Необходимо создать на сайте мобильное меню, работающее следующим образом:

• Показать анимацию

На сервере существует адрес (к примеру, /api/getMenu), при обращении на который отдаётся структура мобильного меню в формате JSON следующего вида:

[
	{
		"title": "Заголовок пункта меню",
		"url": "<https://test.site/item1>"
	},
	{
		"title": "Заголовок пункта меню1",
		"url": "<https://test.site/item2>",
		"children": [{
				"title": "Заголовок пункта меню2",
				"url": "<https://test.site/item3>"
			},
			{
				"title": "Заголовок пункта меню3",
				"url": "<https://test.site/item3>",
				"children": [{
						"title": "Заголовок пункта меню4",
						"url": "<https://test.site/item4>"
					},
					{
						"title": "Заголовок пункта меню6",
						"url": "<https://test.site/item6>"
					}
				]
			}
		]
	},
	{
		"title": "Заголовок пункта меню5",
		"url": "<https://test.site/item5>"
	}
]

Каждый пункт меню может содержать дочерние ресурсы, вложенность неограниченна. Наличие или отсутствие детей определяется полем children в каждом объекте.

Необходимо сверстать меню и написать файл menu.js, который при загрузке страницы запрашивает мобильное меню с сервера и строит его.