Checkpoint №1 по Albireo CMS

Условный первый Checkpoint по Albireo CMS. Сделал скорее для себя, чтобы оценить текущее положение дел по системе.

Нулевая установка. Переносимость сайта

То есть просто загружаются файлы на сервер. Это позволяет переносить сайт по каталогам или доменам. Можно иметь полностью идентичные копии на локальном компьютере и на сервере. Синхронизация по ftp. Отсюда же вытекает и возможность произвольного бэкапа — это обычное копирование файлов.

Компактность

Текущее ядро — 99 функций, суммарным объемом примерно 250Кб. Админка — 25 файлов на 110Кб. PSR4 библиотеки — 12шт. на 225Кб.

Пользователь же получает просто два phar-файла на 200Кб.

В ядре ничего лишнего, только 100% функциональность. 0% мусора.

Основное назначение. Цели

Albireo CMS рассчитана на обычные блоги/сайты и лендинги. Нет задачи охватить все существующие потребности, вроде магазинов.

FlatFile CMS

Система базируется на файлах и sqlite-базе. База используется только для хранения комментариев, ведения логов, ведения статистики, хранение кэша (опционально). Всё остальное, включая сами страницы и конфигурации — обычные php-файлы.

Никаких оболочек, вроде JSON, XML и т.п.

Админ-панель

Сайт можно вести в любом текстовом редакторе, потому что это обычные текстовые файлы. Можно использовать админ-панель, которая выполнена по принципу «free admin» — то есть просто, свободно и удобно. Есть дашборд, где выводятся избранные страницы, черновики, последние редактируемые и последние комментарии (требующие модерации вверху).

Страница всех записей группирует файлы по каталогам в виде details-списка. Состояние «открытости-закрытости» каждого списка запоминается в local-storage браузера. Поэтому приватность 100%.

На странице можно создавать новые записи. Можно выбрать каталог и указать имя. Или указать имя с каталогом. Или выбрать готовый шаблон имени по датам или уникальному ID. Также можно выбрать master-шаблон — который будет использован как заготовка новой записи.

Если файл (или файлы) страницы подготовлен на компьютере, то можно просто перенести его мышкой и загрузить по выбранному каталогу. Это позволяет отказаться от использования FTP.

Страница images предназначена для работы с каталогом загрузок файлов uploads. Здесь просмотр, загрузка (включая мышкой), ссылки на галереи.

Страница комментариев выводит список комментариев. Комментарии, требующие модерации, отображаются вверху.

Страница конфигураций выводит список файлов конфигурации из каталога config. Вывод похож на вывод страниц.

Страница статистики — вся статистика по посещениям. Можно посмотреть любую страницу: кол-во просмотров всего, по датам, по периоду (месяц или неделя), referer покажет откуда на неё пришли.

Страница логов — таблица, где всякие события, например вход в систему или время редактирования записи.

Редактирование файла

Редактор файлов я хотел сделать просто удобным для использования. Идея в том, чтобы писать текст было просто, а в случае «затыка» всегда иметь подсказку под рукой.

Вверху панель меню. Выпадающие списки для вставки simpletext-разметки. Все пункты можно поменять и добавить новые в конфиг-файле.

В меню есть кнопки для увеличения, уменьшения и сброса размера шрифта редактора. Это на случай, если кто-то любит другой размер шрифта.

Рядом есть выпадающий список шрифтов для редактора: Open Sans, Tahoma и т.п. Если стандартные не устраивают, то можно подгрузить из google fonts. Мой любимый LXGW WenKai TC.

После этого есть выпадающий список, где можно поменять фон редактора. Доступны все палитры Berry CSS с градацией от 50 до 250 (больше — слишком тёмно получается). По сути это обычные классы, например я использую bg-lime100.

Под меню расположен сам текстовый редактор (textarea), а рядом справа — список последних файлов этого же каталога. Сама колонка, помимо быстрой навигации, выполняет ещё роль регулятора ширины текстового редактора. Если браузер очень широкий, то текстовое поле можно просто уменьшить до нормальных размеров. Я обычно ориентируюсь на размер А4.

Под редактором кнопка Save и подсказка для сохранения Ctrl+S. После сохранения выводится его время. После любой модификации текста мигает красный индикатор, а вверху, где ссылка на предпросмотр записи подсказка «changed!».

На нижней панели есть ссылка «Images...», которая выводит панель всех файлов из каталога, который указан у страницы в параметре images-dir. По клику на изображение, появляется всплывающий лайтбокс для предпросмотра файла и там же можно скопировать адрес для вставки в текст.

Вверху есть кнопка «Quick View», которая горизонтально разделяет страницу примерно пополам, где вверху в отдельном iframe выводится редактируемая страница. При этом после Ctrl+S она автоматом обновляется, сохраняя своё положение скроллинга. Это удобная штука для визуального контроля того, что делаешь.

Страницу можно удалить, но также есть возможность переименовать. Это нужно если хочется поменять имя редактируемого файла. После удаления файл сохраняется в отдельном каталоге бэкапа.

Главное, что я хотел получить — это работу с текстом без любых отвлекающих факторов. Здесь нет ненужных массивных панелей и огромного количества опций. Здесь ничто не отвлекает от текста.

Кэширование

Кэшируется список файлов. Для этого используется база sqlite. Для пользователя вообще ничего делать не нужно, но этот вариант позволяет выдерживать очень высокие нагрузки. Если они совсем уже высокие, то можно включить кэширование L2, что дает снижение нагрузки и увеличение скорости еще на несколько порядков.

Тесты показывают, что система может без проблем работать с 10 тыс. записями.

Архитектурные концепции шаблона

В качестве основных библиотек используется атомный дизайн Berry CSS и AlpineJS для ява-скрипта. Формально можно от них отказаться, но в мире нет других библиотек по удобству и возможностям. Поэтому просто нет смысла.

Страница содержит все необходимые опции, которые я называю полями. Формат как в Albireo Framework, но этот же самый вариант используется в сотне других систем и стандартов.

Шаблон использует страницу для вывода. Сам шаблон базируется на layout-файле, который определяет модульную сетку сайта, а также берёт на себя всю служебную часть, вроде секции HEAD. Модульных сеток может быть сколько угодно, на текущий момент их 9 шт. под разные задачи.

Части шаблона, которыми можно управлять опционально, вынесены отдельно в parts. Например если мне нужен шрифт FontAwesome 5, то мне достаточно на странице указать use.fontawesome5: +. Сейчас таких файлов 33 шт.

Сайт может использовать сниппеты — короткие вставки, например код счетчика. Сниппет может быть как на уровне шаблона, так и общим для всех сайтов. Система сама разберется, что подключать.

Каталог modules хранит модули шапки, подвала, да и вообще что угодно и то, что можно подключить как через поля страницы, через конфигурацию или напрямую через функцию module(). Сейчас есть 7 шапок, 2 подвала и 6 cover (как шапка, только большая с изображением).

Формирование сложного вывода можно вынести в tpl-файл. Его возможности близки к ларавеловскому blade, только намного быстрее и компактнее. Там же есть возможности, которых нет в других парсерах, например подключение контента файла, math, loop-циклы и т.п. Его функциональность я определял по потребностям. Код tpl-файлов получается очень компактным и вполне себе читаемый. Сейчас это вывод записей в блоговом стиле, колонками, ячейками и т.д.

С помощью tpl-файла можно оформить вывод виджетов, форм, модуле, то есть всего того, что работает в цикле вывода. Если же цикл не нужен, то используется extras— это такие же tpl-файлы. Например вывод заголовка страницы я делаю через extras('info1-header.php'). Это близко по назначению к info-top-файлам MaxSite CMS, только намного проще и удобней.

Дизайн шаблона определяется через CSS. Используется theme-файл — по умолчанию это berry.css (примерно 170Кб), а дополнительно подключаются любые другие css-файла. Всё через конфиг или поля страницы, поэтому каждая страница может использовать произвольный дизайн или шаблон.

Сейчас в комплекте 20 (woff2) шрифтов и два основных дизайна: первый на всю ширину браузера, а второй с полями, как на этом сайте. Кстати модули могут отслеживать используемый дизайн (css-файл) и менять вывод под него.

Каталог _resources находится выше шаблонов, и каждый шаблон может использовать эти ресурсы. Этот разделяемый каталог хранит файлы, которые могут использоваться разными шаблонами. Это позволяет делать каталог шаблона компактным: сейчас default-шаблон весит примерно 500Кб, где 210Кб — это scss-файлы Berry CSS. Вся программная php-часть шаблона это примерно 100Кб. А отдельные ресурсы примерно 6Мб, в основном это конечно woff-шрифты.

Такое устройство шаблона позволяет охватить все потребности вёрстки и вывода данных. Поскольку используется atomic design от Berry CSS, то 99% используемого css-кода — это оформление текстов (страниц, модулей, виджетов и т.п.). Лишь малая часть используется на уровне модульной сетки шаблона, что позволяет без проблем использовать существующий php-код шаблона под другие css-фреймворки.

Использование раздельных ресурсов, позволяет отделить массивный код сторонней библиотеки от его непосредственное подключение к Albireo CMS. Также если сторонняя библиотека обновилась, то достаточно обновить её в каталоге ресурсов, не трогая сам шаблон.

Загрузки

Для изображений используется формат webp, хотя можно работать с jpg, png, svg.

При загрузке любого файла можно сразу его конвертировать в webp с указанием нужных размеров и качества. Поэтому система очень экономно подходит к использованию свободного места диска.

При необходимости можно конвертировать любые файлы в webp скопом — для этого Albireo CMS предлагает готовые функции.

Создание миниатюр также автоматически. Причём есть возможность работать с любым форматом изображений. Есть генерация тэга IMG или просто получить адрес нового файла.

Страница имеет поле image-large, где указывается изображение записи, например у этой записи:

image-large: [UPLOADS_URL]2024/checkpoint-first.webp

Соответственно, когда нужно вывести миниатюру, например для главной, то она будет создана автоматом.

Все миниатюры создаются в том же каталоге, где и исходный файл, но с суффиксом thumb и текущими размерами изображения. Таким образом есть возможность получить данные прямо по имени файла. Если вывод поменялся, то миниатюры можно удалить по простой маске файлов. Система создаст новые. Это позволяет не создавать лишние сущности и держать только актуальные версии файлов.

Кроме этого есть возможно автоматически генерировать изображения на основе фонового изображения (115 ш.) и текста (как на этом сайте). Всё что нужно это просто указать текст и выбрать фоновое изображение (размеры, шрифты и т.п. — всё есть). Это актуально для тех кому лень постоянно подбирать картинки к записям.

Галереи и т.п.

В комплекте галерея grid-gallery, слайдер tiny-slider, лайтбокс glightbox, анимация animejs, работа с клипбордом clipboard, эффекты изображений cssgram, эффекты наведения hover-css, эффеты wow. Шрифты woff (20 шт.), ImFonts (это мой из MaxSite CMS), FontAwesome 5 и bootstrap-icons для иконок. Доступна подсветка кода highlightjs.

Есть возможность подключить навигацию по странице (в нескольких вариантах). Для примера кинул её здесь в начале статьи: она строит ссылки по H2-тэгам. JS-код написал Chat GPT.

Типовое для сайтов

RSS записей, RSS комментариев, sitemap.xml (всё это генерируется на лету без реального файла), страницы комментариев, входа/выхода, рубрики, метки и контактная форма, страница условий.

Shorts

Это моя новая разработка, которая позволяет создавать короткие заметки, вроде todo или просто когда нужно записать свои мысли. Эти коротыши создаются как обычные страницы, только для них уже заготовлены все параметры в отдельном файле. Нужно только ограничить просмотр вне админа, поэтому нужна php-строчка:

/**
title: TODO
date: 2024-08-21 13:02
file-page-data: short.php
**/

if (noUserAccess(message: 'Access denied!')) return; 

Шорты выводятся в своём дизайне — чистом, без шапок, подвалов и т.п. Но есть отдельная страница, где все они выводятся скопом — это если нужно посмотреть все записи сразу.

Документация

Это два layout-файла, где два разных дизайна. Первый похож на DOC из Albireo Framework, где вывод полностью самостоятелен и не зависит от шаблона сайта, а второй, наоборот как часть сайта. Пример MaxSite CMS Основы и Документация.

Сами файлы документации — это обычные страницы, только указываются специфичные данные:

layout: doc1.php
type: doc
css.fstyle: doc.css

doc.config: doc1.php
doc.menu.title: Поля страницы
doc.menu.path: 01_Основы.01

# doc.menu.icon: bi-check
# doc.menu.add: <span class="b-inline b-right bi-bookmark icon0"></span>
# doc.menu.add.active: <span class="b-inline b-right bi-bookmark-fill icon0"></span>

То есть управление выводом страницы полностью лежит на самой странице. Можно лепить что угодно, для доков такая вольность важна.

Слава Украине! Смерть рашистам!