UI and editing updates

This commit is contained in:
Mark Gregory
2026-07-27 13:24:42 +01:00
parent 4a32be068c
commit d297948fb9
7 changed files with 575 additions and 368 deletions
@@ -50,9 +50,13 @@ final class InstallSaaslandContent extends Command
]
);
if ((int) $document->content_type_id !== (int) $type->id) {
$document->forceFill(['content_type_id' => $type->id])->save();
}
$currentData = is_array($document->data) ? $document->data : [];
$mergedData = $this->mergeMissingDefaults($currentData, $definition['data']);
$document->forceFill([
'content_type_id' => $type->id,
'data' => $mergedData,
])->save();
[$region, $sort] = $order[$key];
PageContent::query()->updateOrCreate(
['page_key' => 'home', 'region' => $region, 'sort_order' => $sort],
@@ -65,6 +69,30 @@ final class InstallSaaslandContent extends Command
return self::SUCCESS;
}
private function mergeMissingDefaults(array $current, array $defaults): array
{
foreach ($defaults as $key => $defaultValue) {
if (! array_key_exists($key, $current)) {
$current[$key] = $defaultValue;
continue;
}
if (
is_array($defaultValue)
&& is_array($current[$key])
&& ! array_is_list($defaultValue)
&& ! array_is_list($current[$key])
) {
$current[$key] = $this->mergeMissingDefaults(
$current[$key],
$defaultValue
);
}
}
return $current;
}
private function definitions(): array
{
$field = static fn (string $key, string $label, string $type = 'text', array $extra = []): array => array_merge(compact('key', 'label', 'type'), $extra);
@@ -84,11 +112,45 @@ final class InstallSaaslandContent extends Command
'site-header' => [
'title' => 'Main website header',
'type' => $type('Site header', 'site-header', ['header'], [
...$section, $field('show_navigation', 'Show navigation', 'boolean', ['default' => true]), $field('show_login', 'Show login', 'boolean', ['default' => true]),
$field('show_registration', 'Show registration', 'boolean', ['default' => true]), $field('login_label', 'Login label'),
$field('registration_label', 'Registration label'), $field('sticky', 'Sticky header', 'boolean', ['default' => true]),
$field('enabled', 'Show header', 'boolean', ['default' => true]),
$field('brand_text', 'Brand text'),
$field('brand_url', 'Brand URL', 'url'),
$field('logo_url', 'Logo URL', 'url'),
$field('show_navigation', 'Show navigation', 'boolean', ['default' => true]),
$field('links', 'Navigation links', 'repeater', ['fields' => [
$field('enabled', 'Show link', 'boolean', ['default' => true]),
$field('label', 'Label'),
$field('url', 'URL', 'url'),
]]),
$field('show_dashboard', 'Show dashboard link', 'boolean', ['default' => true]),
$field('dashboard_label', 'Dashboard label'),
$field('show_user_name', 'Show signed-in user', 'boolean', ['default' => true]),
$field('show_login', 'Show login', 'boolean', ['default' => true]),
$field('login_label', 'Login label'),
$field('show_registration', 'Show registration', 'boolean', ['default' => true]),
$field('registration_label', 'Registration label'),
$field('show_mobile_menu', 'Show mobile menu', 'boolean', ['default' => true]),
]),
'data' => ['enabled' => true, 'show_navigation' => true, 'show_login' => true, 'show_registration' => true, 'login_label' => 'Log in', 'registration_label' => 'Get started', 'sticky' => true],
'data' => [
'enabled' => true,
'brand_text' => config('app.name'),
'brand_url' => '/',
'logo_url' => '',
'show_navigation' => true,
'links' => [
['enabled' => true, 'label' => 'Home', 'url' => '/'],
['enabled' => true, 'label' => 'Blog', 'url' => '/blog'],
['enabled' => true, 'label' => 'News', 'url' => '/news'],
],
'show_dashboard' => true,
'dashboard_label' => 'Dashboard',
'show_user_name' => true,
'show_login' => true,
'login_label' => 'Log in',
'show_registration' => true,
'registration_label' => 'Get started',
'show_mobile_menu' => true,
],
],
'hero' => [
'title' => 'Homepage hero',
@@ -140,9 +202,48 @@ final class InstallSaaslandContent extends Command
],
'site-footer' => [
'title' => 'Main website footer',
'type' => $type('Site footer', 'site-footer', ['footer'], [...$section, $field('description', 'Description', 'textarea'), $field('show_navigation', 'Show footer navigation', 'boolean'), $field('show_account_links', 'Show account links', 'boolean', ['default' => true]), $field('show_social_links', 'Show social links', 'boolean', ['default' => true]), $field('show_back_to_top', 'Show back-to-top link', 'boolean', ['default' => true]), $field('copyright', 'Copyright text')]),
'data' => ['enabled' => true, 'description' => 'One connected platform for modern teams.', 'show_navigation' => true, 'show_account_links' => true, 'show_social_links' => true, 'show_back_to_top' => true, 'copyright' => 'All rights reserved.'],
'type' => $type('Site footer', 'site-footer', ['footer'], [
$field('enabled', 'Show footer', 'boolean', ['default' => true]),
$field('brand_text', 'Brand text'),
$field('brand_url', 'Brand URL', 'url'),
$field('description', 'Description', 'textarea'),
$field('columns', 'Footer columns', 'repeater', ['fields' => [
$field('enabled', 'Show column', 'boolean', ['default' => true]),
$field('heading', 'Heading'),
$field('links', 'Links', 'repeater', ['fields' => [
$field('enabled', 'Show link', 'boolean', ['default' => true]),
$field('label', 'Label'),
$field('url', 'URL', 'url'),
]]),
]]),
$field('copyright', 'Copyright text'),
$field('show_back_to_top', 'Show back-to-top link', 'boolean', ['default' => true]),
$field('back_to_top_label', 'Back-to-top label'),
]),
'data' => [
'enabled' => true,
'brand_text' => config('app.name'),
'brand_url' => '/',
'description' => 'Software and services built for modern organisations.',
'columns' => [
['enabled' => true, 'heading' => 'Explore', 'links' => [
['enabled' => true, 'label' => 'Home', 'url' => '/'],
['enabled' => true, 'label' => 'Blog', 'url' => '/blog'],
['enabled' => true, 'label' => 'News', 'url' => '/news'],
]],
['enabled' => true, 'heading' => 'Account', 'links' => [
['enabled' => true, 'label' => 'Dashboard', 'url' => '/dashboard'],
['enabled' => true, 'label' => 'Profile', 'url' => '/settings/profile'],
]],
['enabled' => true, 'heading' => 'Connect', 'links' => [
['enabled' => true, 'label' => 'Contact', 'url' => '/contact'],
]],
],
'copyright' => '© '.date('Y').' '.config('app.name').'. All rights reserved.',
'show_back_to_top' => true,
'back_to_top_label' => 'Back to top ↑',
],
],
];
];
}
}
-148
View File
@@ -1,148 +0,0 @@
<?php
namespace Modules\Content\Console;
use Illuminate\Console\Command;
use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Schema;
use Modules\Content\Models\ContentDocument;
use Modules\Content\Models\ContentType;
use Modules\Content\Models\PageContent;
final class InstallSaaslandContent extends Command
{
protected $signature = 'content:install-saasland {--force : Replace the existing home composition}';
protected $description = 'Install editable Saasland header, body and footer content documents.';
public function handle(): int
{
$requiredTables = ['content_types', 'content_documents', 'page_content'];
$missingTables = array_values(array_filter($requiredTables, static fn (string $table): bool => ! Schema::hasTable($table)));
if ($missingTables !== []) {
$this->components->error('Content composition tables are missing: '.implode(', ', $missingTables).'.');
$this->components->info('Run php artisan migrate before installing the Saasland composition.');
return self::FAILURE;
}
DB::transaction(function (): void {
if ($this->option('force')) {
PageContent::query()->where('page_key', 'home')->delete();
}
$order = [
'site-header' => ['header', 10], 'hero' => ['body', 10], 'feature-grid' => ['body', 20],
'product-feed' => ['body', 30], 'testimonial-feed' => ['body', 40], 'team-feed' => ['body', 50],
'blog-feed' => ['body', 60], 'news-feed' => ['body', 70], 'faq-feed' => ['body', 80],
'newsletter-form' => ['body', 90], 'call-to-action' => ['body', 100], 'site-footer' => ['footer', 10],
];
foreach ($this->definitions() as $key => $definition) {
$type = ContentType::query()->updateOrCreate(['key' => $key], $definition['type']);
$document = ContentDocument::query()->firstOrCreate(
['slug' => 'saasland-'.$key],
[
'content_type_id' => $type->id,
'title' => $definition['title'],
'data' => $definition['data'],
'status' => 'published',
'published_at' => now(),
]
);
if ((int) $document->content_type_id !== (int) $type->id) {
$document->forceFill(['content_type_id' => $type->id])->save();
}
[$region, $sort] = $order[$key];
PageContent::query()->updateOrCreate(
['page_key' => 'home', 'region' => $region, 'sort_order' => $sort],
['content_document_id' => $document->id, 'is_enabled' => true]
);
}
});
$this->components->info('Saasland content composition installed with editable schemas.');
return self::SUCCESS;
}
private function definitions(): array
{
$field = static fn (string $key, string $label, string $type = 'text', array $extra = []): array => array_merge(compact('key', 'label', 'type'), $extra);
$type = static fn (string $name, string $renderer, array $regions, array $schema): array => [
'name' => $name, 'renderer' => $renderer, 'allowed_regions' => $regions,
'is_system' => true, 'is_active' => true, 'schema' => $schema,
];
$section = [$field('enabled', 'Show this section', 'boolean', ['default' => true])];
$feed = array_merge($section, [
$field('eyebrow', 'Eyebrow'), $field('heading', 'Heading'), $field('description', 'Description', 'textarea'),
$field('limit', 'Maximum items', 'number', ['min' => 1, 'max' => 50]),
$field('include_ids', 'Only show record IDs', 'csv', ['help' => 'Optional comma-separated IDs. Leave blank to use the latest records.']),
$field('exclude_ids', 'Exclude record IDs', 'csv', ['help' => 'Optional comma-separated IDs to hide from this section.']),
]);
return [
'site-header' => [
'title' => 'Main website header',
'type' => $type('Site header', 'site-header', ['header'], [
...$section, $field('show_navigation', 'Show navigation', 'boolean', ['default' => true]), $field('show_login', 'Show login', 'boolean', ['default' => true]),
$field('show_registration', 'Show registration', 'boolean', ['default' => true]), $field('login_label', 'Login label'),
$field('registration_label', 'Registration label'), $field('sticky', 'Sticky header', 'boolean', ['default' => true]),
]),
'data' => ['enabled' => true, 'show_navigation' => true, 'show_login' => true, 'show_registration' => true, 'login_label' => 'Log in', 'registration_label' => 'Get started', 'sticky' => true],
],
'hero' => [
'title' => 'Homepage hero',
'type' => $type('Hero', 'hero', ['body'], [
...$section, $field('eyebrow', 'Eyebrow'), $field('heading', 'Heading'), $field('description', 'Description', 'textarea'),
$field('primary_label', 'Primary button label'), $field('primary_url', 'Primary button URL', 'url'),
$field('secondary_label', 'Secondary button label'), $field('secondary_url', 'Secondary button URL', 'url'),
$field('show_metrics', 'Show metrics panel', 'boolean', ['default' => true]),
$field('metrics', 'Metrics', 'repeater', ['fields' => [
$field('enabled', 'Show item', 'boolean', ['default' => true]), $field('label', 'Label'), $field('value', 'Value'), $field('change', 'Change'), $field('height', 'Chart height (%)', 'number', ['min' => 0, 'max' => 100]),
]]),
]),
'data' => ['enabled' => true, 'eyebrow' => 'A better way to run your business', 'heading' => 'Transform Your Business With Our SaaS Solution', 'description' => 'Streamline operations, boost productivity, and improve customer satisfaction with one connected platform built for modern teams.', 'primary_label' => 'Get started free', 'primary_url' => '/register', 'secondary_label' => 'Book demo', 'secondary_url' => '#contact', 'show_metrics' => true, 'metrics' => [
['enabled' => true, 'label' => 'Monthly revenue', 'value' => '£48,240', 'change' => '+18.4%', 'height' => 62],
['enabled' => true, 'label' => 'Active users', 'value' => '12,842', 'change' => '+9.2%', 'height' => 78],
['enabled' => true, 'label' => 'Conversion', 'value' => '7.8%', 'change' => '+2.1%', 'height' => 92],
]],
],
'feature-grid' => [
'title' => 'Core features',
'type' => $type('Feature grid', 'feature-grid', ['body'], [
...$section, $field('eyebrow', 'Eyebrow'), $field('heading', 'Heading'), $field('description', 'Description', 'textarea'),
$field('items', 'Features', 'repeater', ['fields' => [$field('enabled', 'Show item', 'boolean', ['default' => true]), $field('title', 'Title'), $field('description', 'Description', 'textarea')]]),
]),
'data' => ['enabled' => true, 'eyebrow' => 'Powerful features', 'heading' => 'Everything your team needs to grow', 'description' => 'Planning, collaboration, reporting, publishing, commerce and customer insight in one extensible platform.', 'items' => [
['enabled' => true, 'title' => 'Smart automation', 'description' => 'Remove repetitive work and delays.'],
['enabled' => true, 'title' => 'Real-time analytics', 'description' => 'Turn activity into useful business insight.'],
['enabled' => true, 'title' => 'Content operations', 'description' => 'Create, review and publish confidently.'],
['enabled' => true, 'title' => 'Secure by design', 'description' => 'Protect users and data with dependable controls.'],
['enabled' => true, 'title' => 'Flexible integrations', 'description' => 'Connect the tools your organisation already uses.'],
['enabled' => true, 'title' => 'Modular architecture', 'description' => 'Activate only the capabilities each site needs.'],
]],
],
'product-feed' => ['title' => 'Pricing plans', 'type' => $type('Product feed', 'product-feed', ['body'], $feed), 'data' => ['enabled' => true, 'eyebrow' => 'Simple pricing', 'heading' => 'Choose a plan that fits', 'description' => 'Plans are managed from Products & Pricing in the CMS.', 'limit' => 6, 'include_ids' => '', 'exclude_ids' => '']],
'testimonial-feed' => ['title' => 'Customer stories', 'type' => $type('Testimonial feed', 'testimonial-feed', ['body'], $feed), 'data' => ['enabled' => true, 'eyebrow' => 'Customer stories', 'heading' => 'Trusted by ambitious teams', 'description' => '', 'limit' => 6, 'include_ids' => '', 'exclude_ids' => '']],
'team-feed' => ['title' => 'Team', 'type' => $type('Team feed', 'team-feed', ['body'], $feed), 'data' => ['enabled' => true, 'eyebrow' => 'Our team', 'heading' => 'People behind the platform', 'description' => '', 'limit' => 8, 'include_ids' => '', 'exclude_ids' => '']],
'blog-feed' => ['title' => 'Latest blog posts', 'type' => $type('Blog feed', 'blog-feed', ['body'], $feed), 'data' => ['enabled' => true, 'eyebrow' => 'Insights', 'heading' => 'Latest from the blog', 'description' => '', 'limit' => 3, 'include_ids' => '', 'exclude_ids' => '']],
'news-feed' => ['title' => 'Latest news', 'type' => $type('News feed', 'news-feed', ['body'], $feed), 'data' => ['enabled' => true, 'eyebrow' => 'Newsroom', 'heading' => 'Latest news', 'description' => '', 'limit' => 3, 'include_ids' => '', 'exclude_ids' => '']],
'faq-feed' => ['title' => 'Frequently asked questions', 'type' => $type('FAQ feed', 'faq-feed', ['body'], $feed), 'data' => ['enabled' => true, 'eyebrow' => 'FAQ', 'heading' => 'Answers before you begin', 'description' => '', 'limit' => 12, 'include_ids' => '', 'exclude_ids' => '']],
'newsletter-form' => [
'title' => 'Newsletter signup',
'type' => $type('Newsletter form', 'newsletter-form', ['body'], [...$section, $field('eyebrow', 'Eyebrow'), $field('heading', 'Heading'), $field('description', 'Description', 'textarea'), $field('placeholder', 'Email placeholder'), $field('button_label', 'Button label')]),
'data' => ['enabled' => true, 'eyebrow' => 'Newsletter', 'heading' => 'Useful updates, no noise', 'description' => 'Receive product news, publishing guidance, and practical platform updates.', 'placeholder' => 'you@example.com', 'button_label' => 'Subscribe'],
],
'call-to-action' => [
'title' => 'Homepage final call to action',
'type' => $type('Call to action', 'call-to-action', ['body'], [...$section, $field('anchor', 'Section anchor'), $field('heading', 'Heading'), $field('description', 'Description', 'textarea'), $field('button_label', 'Button label'), $field('button_url', 'Button URL', 'url')]),
'data' => ['enabled' => true, 'anchor' => 'contact', 'heading' => 'Ready to transform your business?', 'description' => 'Start building a faster, more connected operation today.', 'button_label' => 'Get started free', 'button_url' => '/register'],
],
'site-footer' => [
'title' => 'Main website footer',
'type' => $type('Site footer', 'site-footer', ['footer'], [...$section, $field('description', 'Description', 'textarea'), $field('show_navigation', 'Show footer navigation', 'boolean'), $field('show_account_links', 'Show account links', 'boolean', ['default' => true]), $field('show_social_links', 'Show social links', 'boolean', ['default' => true]), $field('show_back_to_top', 'Show back-to-top link', 'boolean', ['default' => true]), $field('copyright', 'Copyright text')]),
'data' => ['enabled' => true, 'description' => 'One connected platform for modern teams.', 'show_navigation' => true, 'show_account_links' => true, 'show_social_links' => true, 'show_back_to_top' => true, 'copyright' => 'All rights reserved.'],
],
];
}
}
@@ -168,10 +168,16 @@
let data = parseObject(dataField.value);
function parseObject(value) {
if (value && typeof value === 'object' && !Array.isArray(value)) return value;
if (value && typeof value === 'object' && !Array.isArray(value)) {
return value;
}
try {
const parsed = JSON.parse(value || '{}');
return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
return parsed && typeof parsed === 'object' && !Array.isArray(parsed)
? parsed
: {};
} catch (_) {
return {};
}
@@ -179,49 +185,166 @@
function normaliseSchema(raw) {
if (typeof raw === 'string') {
try { raw = JSON.parse(raw); } catch (_) { return []; }
try {
raw = JSON.parse(raw);
} catch (_) {
return [];
}
}
if (Array.isArray(raw)) return raw;
if (!raw || typeof raw !== 'object') return [];
if (Array.isArray(raw.fields)) return raw.fields;
if (Array.isArray(raw.schema)) return raw.schema;
return Object.values(raw).filter(field => field && typeof field === 'object' && field.key);
if (Array.isArray(raw)) {
return raw;
}
if (! raw || typeof raw !== 'object') {
return [];
}
if (Array.isArray(raw.fields)) {
return raw.fields;
}
if (Array.isArray(raw.schema)) {
return raw.schema;
}
return Object.values(raw).filter(
field => field && typeof field === 'object' && field.key
);
}
function escapeHtml(value) {
return String(value ?? '').replace(/[&<>"']/g, character => ({
'&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'
'&': '&amp;',
'<': '&lt;',
'>': '&gt;',
'"': '&quot;',
"'": '&#039;',
})[character]);
}
function get(path) {
return path.split('.').reduce((value, key) => value?.[key], data);
function pathParts(path) {
return String(path || '')
.split('.')
.filter(part => part !== '');
}
function set(path, value) {
const parts = path.split('.');
let target = data;
parts.slice(0, -1).forEach(key => {
if (target[key] === undefined || target[key] === null) {
target[key] = /^\d+$/.test(parts[parts.indexOf(key) + 1] ?? '') ? [] : {};
function getAtPath(path) {
return pathParts(path).reduce((value, part) => {
if (value === undefined || value === null) {
return undefined;
}
target = target[key];
});
target[parts.at(-1)] = value;
sync();
return value[part];
}, data);
}
function sync() {
dataField.value = JSON.stringify(data, null, 2);
function setAtPath(path, value) {
const parts = pathParts(path);
if (! parts.length) {
return;
}
let target = data;
parts.forEach((part, index) => {
const isLast = index === parts.length - 1;
if (isLast) {
target[part] = value;
return;
}
const nextPart = parts[index + 1];
const shouldBeArray = /^\d+$/.test(nextPart);
if (
target[part] === undefined
|| target[part] === null
|| typeof target[part] !== 'object'
) {
target[part] = shouldBeArray ? [] : {};
}
target = target[part];
});
syncJson();
}
function fieldForPath(schema, path) {
const parts = pathParts(path);
let fields = schema;
let matched = null;
for (const part of parts) {
if (/^\d+$/.test(part)) {
continue;
}
matched = (fields || []).find(field => field.key === part) ?? null;
if (! matched) {
return null;
}
fields = matched.fields || [];
}
return matched;
}
function defaultValue(field) {
if (Object.prototype.hasOwnProperty.call(field, 'default')) return field.default;
if (field.type === 'boolean') return false;
if (field.type === 'repeater') return [];
if (Object.prototype.hasOwnProperty.call(field, 'default')) {
return structuredClone(field.default);
}
if (field.type === 'boolean') {
return false;
}
if (field.type === 'repeater') {
return [];
}
return '';
}
function newRepeaterItem(field) {
const item = {};
(field.fields || []).forEach(child => {
item[child.key] = defaultValue(child);
});
return item;
}
function hydrateMissingFields(fields, target) {
(fields || []).forEach(field => {
if (! Object.prototype.hasOwnProperty.call(target, field.key)) {
target[field.key] = defaultValue(field);
}
if (field.type === 'repeater') {
if (! Array.isArray(target[field.key])) {
target[field.key] = [];
}
target[field.key].forEach(item => {
if (item && typeof item === 'object' && ! Array.isArray(item)) {
hydrateMissingFields(field.fields || [], item);
}
});
}
});
}
function syncJson() {
dataField.value = JSON.stringify(data, null, 2);
}
function fieldMarkup(field, value, path) {
const help = field.help
? `<p class="mt-1 text-xs text-zinc-500">${escapeHtml(field.help)}</p>`
@@ -229,16 +352,18 @@
if (field.type === 'boolean') {
return `
<label class="flex items-center justify-between gap-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
<label class="flex cursor-pointer items-center justify-between gap-4 rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
<span>
<strong class="block text-sm">${escapeHtml(field.label)}</strong>
${help}
</span>
<span class="relative inline-flex h-6 w-11 shrink-0 items-center">
<input class="peer sr-only" data-path="${escapeHtml(path)}" type="checkbox" ${value === true ? 'checked' : ''}>
<span class="absolute inset-0 rounded-full bg-zinc-300 transition peer-checked:bg-blue-600"></span>
<span class="absolute left-1 h-4 w-4 rounded-full bg-white transition peer-checked:translate-x-5"></span>
</span>
<input
data-path="${escapeHtml(path)}"
type="checkbox"
value="1"
${value === true || value === 1 || value === '1' ? 'checked' : ''}
class="h-5 w-5 rounded border-zinc-400 text-orange-600 focus:ring-orange-500"
>
</label>`;
}
@@ -246,153 +371,256 @@
return `
<label class="block text-sm font-medium">
${escapeHtml(field.label)}
<textarea data-path="${escapeHtml(path)}" class="mt-2 min-h-28 w-full rounded-lg border border-zinc-300 bg-white p-3 dark:border-zinc-700 dark:bg-zinc-950">${escapeHtml(value)}</textarea>
</label>${help}`;
<textarea
data-path="${escapeHtml(path)}"
class="mt-2 min-h-28 w-full rounded-lg border border-zinc-600 bg-zinc-950 p-3 text-zinc-100"
>${escapeHtml(value)}</textarea>
</label>
${help}`;
}
if (field.type === 'repeater') {
return repeaterMarkup(field, Array.isArray(value) ? value : [], path) + help;
return repeaterMarkup(
field,
Array.isArray(value) ? value : [],
path
) + help;
}
let inputType = 'text';
if (field.type === 'number') {
inputType = 'number';
} else if (field.type === 'email') {
inputType = 'email';
} else if (field.type === 'url') {
inputType = 'url';
}
const type = field.type === 'number' ? 'number' : field.type === 'email' ? 'email' : 'text';
return `
<label class="block text-sm font-medium">
${escapeHtml(field.label)}
<input
data-path="${escapeHtml(path)}"
type="${type}"
type="${inputType}"
value="${escapeHtml(value)}"
${field.min !== undefined ? `min="${escapeHtml(field.min)}"` : ''}
${field.max !== undefined ? `max="${escapeHtml(field.max)}"` : ''}
class="mt-2 w-full rounded-lg border border-zinc-300 bg-white px-3 py-2 dark:border-zinc-700 dark:bg-zinc-950"
class="mt-2 w-full rounded-lg border border-zinc-600 bg-zinc-950 px-3 py-2 text-zinc-100"
>
</label>${help}`;
</label>
${help}`;
}
function repeaterMarkup(field, items, path) {
return `
<section class="rounded-xl border border-zinc-200 p-4 dark:border-zinc-700">
<div class="mb-4 flex items-center justify-between gap-3">
<section class="rounded-xl border border-zinc-600 p-4">
<div class="mb-4 flex flex-wrap items-center justify-between gap-3">
<div>
<h3 class="font-semibold">${escapeHtml(field.label)}</h3>
<p class="text-xs text-zinc-500">Items can be reordered, hidden, or removed.</p>
<p class="text-xs text-zinc-500">
Add, edit, reorder, hide or remove items.
</p>
</div>
<button type="button" data-add="${escapeHtml(path)}" class="rounded-lg border px-3 py-1.5 text-sm">Add item</button>
<button
type="button"
data-action="add"
data-path="${escapeHtml(path)}"
class="rounded-lg border border-zinc-500 px-3 py-1.5 text-sm hover:bg-zinc-800"
>
Add item
</button>
</div>
<div class="space-y-3">
${items.length ? items.map((item, index) => `
<article class="rounded-lg border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-700 dark:bg-zinc-900">
<div class="mb-3 flex items-center justify-between gap-3">
<strong class="text-sm">Item ${index + 1}</strong>
<div class="flex gap-2">
<button type="button" data-up="${escapeHtml(path)}.${index}" class="rounded border px-2 py-1" title="Move up">↑</button>
<button type="button" data-down="${escapeHtml(path)}.${index}" class="rounded border px-2 py-1" title="Move down">↓</button>
<button type="button" data-remove="${escapeHtml(path)}.${index}" class="rounded border border-red-300 px-2 py-1 text-red-700">Remove</button>
${items.length
? items.map((item, index) => `
<article class="rounded-lg border border-zinc-700 bg-zinc-900 p-4">
<div class="mb-3 flex flex-wrap items-center justify-between gap-3">
<strong class="text-sm">Item ${index + 1}</strong>
<div class="flex gap-2">
<button
type="button"
data-action="up"
data-path="${escapeHtml(path)}"
data-index="${index}"
class="rounded border border-zinc-600 px-2 py-1"
aria-label="Move item up"
>↑</button>
<button
type="button"
data-action="down"
data-path="${escapeHtml(path)}"
data-index="${index}"
class="rounded border border-zinc-600 px-2 py-1"
aria-label="Move item down"
>↓</button>
<button
type="button"
data-action="remove"
data-path="${escapeHtml(path)}"
data-index="${index}"
class="rounded border border-red-500 px-2 py-1 text-red-300"
>
Remove
</button>
</div>
</div>
</div>
<div class="grid gap-4 md:grid-cols-2">
${(field.fields || []).map(child => `
<div class="${child.type === 'textarea' || child.type === 'richtext' ? 'md:col-span-2' : ''}">
${fieldMarkup(child, item?.[child.key] ?? defaultValue(child), `${path}.${index}.${child.key}`)}
</div>`).join('')}
</div>
</article>`).join('') : '<p class="rounded-lg border border-dashed p-6 text-center text-sm text-zinc-500">No items. Select “Add item” to create one.</p>'}
<div class="grid gap-4 md:grid-cols-2">
${(field.fields || []).map(child => `
<div class="${['textarea', 'richtext', 'repeater'].includes(child.type) ? 'md:col-span-2' : ''}">
${fieldMarkup(
child,
item?.[child.key] ?? defaultValue(child),
`${path}.${index}.${child.key}`
)}
</div>
`).join('')}
</div>
</article>
`).join('')
: `
<p class="rounded-lg border border-dashed border-zinc-600 p-6 text-center text-sm text-zinc-500">
No items. Select “Add item” to create one.
</p>
`}
</div>
</section>`;
}
function render() {
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
status.textContent = schema.length ? `${schema.length} editable field${schema.length === 1 ? '' : 's'}` : 'Schema unavailable';
function currentSchema() {
return normaliseSchema(rawSchemas[String(typeSelect.value)]);
}
if (!schema.length) {
function render() {
const schema = currentSchema();
status.textContent = schema.length
? `${schema.length} editable field${schema.length === 1 ? '' : 's'}`
: 'Schema unavailable';
if (! schema.length) {
host.innerHTML = `
<div class="rounded-xl border border-red-300 bg-red-50 p-4 text-sm text-red-800">
This content type has no usable visual schema. Run <code>php artisan content:install-saasland</code> once to refresh schemas without replacing content.
This content type has no usable visual schema.
Run <code>php artisan content:install-saasland</code> once.
</div>`;
return;
}
hydrateMissingFields(schema, data);
syncJson();
host.innerHTML = schema.map(field => fieldMarkup(
field,
Object.prototype.hasOwnProperty.call(data, field.key) ? data[field.key] : defaultValue(field),
data[field.key],
field.key
)).join('');
bind();
}
function bind() {
host.querySelectorAll('[data-path]').forEach(element => {
const eventName = element.type === 'checkbox' ? 'change' : 'input';
element.addEventListener(eventName, () => {
let value = element.type === 'checkbox' ? element.checked : element.value;
if (element.type === 'number') value = element.value === '' ? null : Number(element.value);
set(element.dataset.path, value);
});
});
host.addEventListener('input', event => {
const element = event.target.closest('[data-path]');
host.querySelectorAll('[data-add]').forEach(button => {
button.addEventListener('click', () => {
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
const field = schema.find(candidate => candidate.key === button.dataset.add);
const items = Array.isArray(get(button.dataset.add)) ? get(button.dataset.add) : [];
const newItem = {};
(field?.fields || []).forEach(child => newItem[child.key] = defaultValue(child));
items.push(newItem);
set(button.dataset.add, items);
render();
});
});
if (! element || element.type === 'checkbox') {
return;
}
host.querySelectorAll('[data-remove]').forEach(button => {
button.addEventListener('click', () => {
if (!confirm('Remove this item?')) return;
const parts = button.dataset.remove.split('.');
const index = Number(parts.pop());
const path = parts.join('.');
const items = Array.isArray(get(path)) ? get(path) : [];
items.splice(index, 1);
set(path, items);
render();
});
});
let value = element.value;
host.querySelectorAll('[data-up], [data-down]').forEach(button => {
button.addEventListener('click', () => {
const raw = button.dataset.up ?? button.dataset.down;
const parts = raw.split('.');
const index = Number(parts.pop());
const path = parts.join('.');
const items = Array.isArray(get(path)) ? get(path) : [];
const destination = button.dataset.up !== undefined ? index - 1 : index + 1;
if (destination < 0 || destination >= items.length) return;
[items[index], items[destination]] = [items[destination], items[index]];
set(path, items);
render();
});
});
}
if (element.type === 'number') {
value = element.value === '' ? null : Number(element.value);
}
setAtPath(element.dataset.path, value);
});
host.addEventListener('change', event => {
const element = event.target.closest('[data-path]');
if (! element || element.type !== 'checkbox') {
return;
}
setAtPath(element.dataset.path, element.checked);
});
host.addEventListener('click', event => {
const button = event.target.closest('button[data-action]');
if (! button) {
return;
}
event.preventDefault();
const schema = currentSchema();
const action = button.dataset.action;
const path = button.dataset.path;
const field = fieldForPath(schema, path);
const items = Array.isArray(getAtPath(path))
? [...getAtPath(path)]
: [];
if (action === 'add') {
if (! field || field.type !== 'repeater') {
return;
}
items.push(newRepeaterItem(field));
setAtPath(path, items);
render();
return;
}
const index = Number(button.dataset.index);
if (! Number.isInteger(index) || index < 0 || index >= items.length) {
return;
}
if (action === 'remove') {
if (! window.confirm('Remove this item?')) {
return;
}
items.splice(index, 1);
}
if (action === 'up' && index > 0) {
[items[index - 1], items[index]] = [items[index], items[index - 1]];
}
if (action === 'down' && index < items.length - 1) {
[items[index], items[index + 1]] = [items[index + 1], items[index]];
}
setAtPath(path, items);
render();
});
typeSelect.addEventListener('change', () => {
const schema = normaliseSchema(rawSchemas[String(typeSelect.value)]);
const nextData = {};
schema.forEach(field => nextData[field.key] = defaultValue(field));
data = nextData;
sync();
data = {};
hydrateMissingFields(currentSchema(), data);
syncJson();
render();
});
dataField.addEventListener('change', () => {
try {
data = parseObject(dataField.value);
render();
} catch (error) {
alert(`Invalid JSON: ${error.message}`);
}
data = parseObject(dataField.value);
render();
});
form.addEventListener('submit', () => {
syncJson();
});
form.addEventListener('submit', sync);
render();
});
</script>
@@ -1 +1,3 @@
@include('stylist-theme-saasland::partials.footer')
@if (filter_var($data['enabled'] ?? true, FILTER_VALIDATE_BOOL))
@include('stylist-theme-saasland::partials.footer', ['footerContent' => $data])
@endif
@@ -1 +1,3 @@
@include('stylist-theme-saasland::partials.header')
@if (filter_var($data['enabled'] ?? true, FILTER_VALIDATE_BOOL))
@include('stylist-theme-saasland::partials.header', ['headerContent' => $data])
@endif
@@ -1,36 +1,43 @@
<footer class="footer">
@php
$footerContent = $footerContent ?? [];
$columns = collect($footerContent['columns'] ?? [])->filter(
fn (array $column): bool => filter_var($column['enabled'] ?? true, FILTER_VALIDATE_BOOL)
);
@endphp
<style>
.footer.cms-editable-footer .footer-grid{display:grid;grid-template-columns:minmax(280px,1.5fr) repeat(3,minmax(160px,1fr));gap:3rem;padding-block:4rem 2rem;align-items:start;}
.cms-editable-footer .footer-brand{max-width:36rem}.cms-editable-footer .footer-brand p{max-width:34rem;line-height:1.7;}
.cms-editable-footer .footer-column h3{margin:0 0 1rem;font-size:1rem}.cms-editable-footer .footer-column ul{display:grid;gap:.75rem;list-style:none;margin:0;padding:0;}
.cms-editable-footer .footer-column a{display:inline-flex;text-decoration:none}.cms-editable-footer .copyright{padding-block:1.5rem 2rem;}
@media(max-width:900px){.footer.cms-editable-footer .footer-grid{grid-template-columns:1fr;gap:2rem;padding-block:3rem 1.5rem}}
</style>
<footer class="footer cms-editable-footer">
<div class="wrap footer-grid">
<div class="footer-brand">
<a class="logo" href="{{ url('/') }}">{{ $siteTitle }}</a>
<p>{{ $siteDescription }}</p>
</div>
<div>
<b>Explore</b>
@foreach ($footerNavigation as $item)
<a href="{{ $item['url'] }}">{{ $item['label'] }}</a>
@endforeach
</div>
<div>
<b>Account</b>
@auth
<a href="{{ route('dashboard') }}">Dashboard</a>
@if (Route::has('profile.edit'))<a href="{{ route('profile.edit') }}">Profile</a>@endif
@else
@if (Route::has('login'))<a href="{{ route('login') }}">Log in</a>@endif
@if (Route::has('register'))<a href="{{ route('register') }}">Register</a>@endif
@endauth
</div>
<div>
<b>Connect</b>
@if ($facebookUrl)<a href="{{ $facebookUrl }}" target="_blank" rel="noopener">Facebook</a>@endif
@if ($xUrl)<a href="{{ $xUrl }}" target="_blank" rel="noopener">X</a>@endif
@if ($linkedinUrl)<a href="{{ $linkedinUrl }}" target="_blank" rel="noopener">LinkedIn</a>@endif
@unless($facebookUrl || $xUrl || $linkedinUrl)<a href="mailto:{{ config('mail.from.address') }}">Contact</a>@endunless
<a class="logo" href="{{ $footerContent['brand_url'] ?? url('/') }}">{{ $footerContent['brand_text'] ?? $siteTitle }}</a>
@if (! empty($footerContent['description'] ?? $siteDescription))
<p>{{ $footerContent['description'] ?? $siteDescription }}</p>
@endif
</div>
@foreach ($columns as $column)
<div class="footer-column">
<h3>{{ $column['heading'] ?? 'Links' }}</h3>
<ul>
@foreach (collect($column['links'] ?? [])->filter(fn (array $link): bool => filter_var($link['enabled'] ?? true, FILTER_VALIDATE_BOOL)) as $link)
<li><a href="{{ $link['url'] ?? '#' }}">{{ $link['label'] ?? 'Link' }}</a></li>
@endforeach
</ul>
</div>
@endforeach
</div>
<div class="wrap copyright">
<span>© {{ date('Y') }} {{ $siteTitle }}. All rights reserved.</span>
<a href="#top">Back to top ↑</a>
<span>{{ $footerContent['copyright'] ?? ('© '.date('Y').' '.$siteTitle.'. All rights reserved.') }}</span>
@if (filter_var($footerContent['show_back_to_top'] ?? true, FILTER_VALIDATE_BOOL))
<a href="#top">{{ $footerContent['back_to_top_label'] ?? 'Back to top ↑' }}</a>
@endif
</div>
</footer>
@@ -1,68 +1,83 @@
<header class="nav">
<a href="{{ url('/') }}" class="logo" aria-label="{{ $siteTitle }} home">
@if ($logoUrl)
<img src="{{ $logoUrl }}" alt="{{ $siteTitle }}">
@php
$headerContent = $headerContent ?? [];
$configuredLinks = collect($headerContent['links'] ?? []);
$navigationLinks = $configuredLinks->isNotEmpty()
? $configuredLinks
: collect($primaryNavigation ?? [])->map(fn (array $item): array => [
'enabled' => true,
'label' => $item['label'] ?? 'Link',
'url' => $item['url'] ?? '#',
]);
$navigationLinks = $navigationLinks->filter(
fn (array $link): bool => filter_var($link['enabled'] ?? true, FILTER_VALIDATE_BOOL)
);
@endphp
<style>
.nav.cms-editable-header{display:grid;grid-template-columns:minmax(220px,1fr) auto minmax(220px,1fr);align-items:center;gap:2rem;width:100%;}
.cms-editable-header .desktop-nav{display:flex;align-items:center;justify-content:center;gap:2rem;}
.cms-editable-header .nav-actions{justify-self:end;display:flex;align-items:center;gap:1rem;}
.cms-editable-header .cms-brand{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width:900px){.nav.cms-editable-header{grid-template-columns:1fr auto}.cms-editable-header .desktop-nav{display:none}.cms-editable-header .nav-actions{grid-column:2}.cms-editable-header .account-name{display:none}}
</style>
<header class="nav cms-editable-header">
<a href="{{ $headerContent['brand_url'] ?? url('/') }}" class="logo cms-brand" aria-label="{{ $headerContent['brand_text'] ?? $siteTitle }} home">
@if (! empty($headerContent['logo_url'] ?? $logoUrl))
<img src="{{ $headerContent['logo_url'] ?? $logoUrl }}" alt="{{ $headerContent['brand_text'] ?? $siteTitle }}">
@else
{{ $siteTitle }}
{{ $headerContent['brand_text'] ?? $siteTitle }}
@endif
</a>
<nav class="desktop-nav" aria-label="Primary navigation">
@include('stylist-theme-saasland::partials.navigation-items', ['items' => $primaryNavigation])
</nav>
@if (filter_var($headerContent['show_navigation'] ?? true, FILTER_VALIDATE_BOOL) && $navigationLinks->isNotEmpty())
<nav class="desktop-nav" aria-label="Primary navigation">
@foreach ($navigationLinks as $link)
<a href="{{ $link['url'] ?? '#' }}">{{ $link['label'] ?? 'Link' }}</a>
@endforeach
</nav>
@endif
<div class="nav-actions">
@auth
<a class="nav-account" href="{{ route('dashboard') }}">Dashboard</a>
<div class="account-menu" x-data="{ accountOpen: false }">
<button type="button" class="account-trigger" @click="accountOpen = ! accountOpen" :aria-expanded="accountOpen">
<span>{{ str(auth()->user()->name)->substr(0, 1)->upper() }}</span>
<span class="account-name">{{ auth()->user()->name }}</span>
</button>
<div class="account-dropdown" x-show="accountOpen" @click.outside="accountOpen = false" x-cloak>
@if (Route::has('profile.edit'))
<a href="{{ route('profile.edit') }}">Profile</a>
@endif
@if (Route::has('settings.profile'))
<a href="{{ route('settings.profile') }}">Account settings</a>
@endif
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit">Log out</button>
</form>
</div>
</div>
@else
@if (Route::has('login'))
<a class="nav-login" href="{{ route('login') }}">Log in</a>
@if (filter_var($headerContent['show_dashboard'] ?? true, FILTER_VALIDATE_BOOL) && Route::has('dashboard'))
<a class="nav-account" href="{{ route('dashboard') }}">{{ $headerContent['dashboard_label'] ?? 'Dashboard' }}</a>
@endif
@if (Route::has('register'))
<a class="btn primary nav-register" href="{{ route('register') }}">Get started</a>
@if (filter_var($headerContent['show_user_name'] ?? true, FILTER_VALIDATE_BOOL))
<div class="account-menu" x-data="{ accountOpen: false }">
<button type="button" class="account-trigger" @click="accountOpen = ! accountOpen" :aria-expanded="accountOpen">
<span>{{ str(auth()->user()->name)->substr(0, 1)->upper() }}</span>
<span class="account-name">{{ auth()->user()->name }}</span>
</button>
<div class="account-dropdown" x-show="accountOpen" @click.outside="accountOpen = false" x-cloak>
@if (Route::has('profile.edit'))<a href="{{ route('profile.edit') }}">Profile</a>@endif
@if (Route::has('settings.profile'))<a href="{{ route('settings.profile') }}">Account settings</a>@endif
@if (Route::has('logout'))
<form method="POST" action="{{ route('logout') }}">@csrf<button type="submit">Log out</button></form>
@endif
</div>
</div>
@endif
@else
@if (filter_var($headerContent['show_login'] ?? true, FILTER_VALIDATE_BOOL) && Route::has('login'))
<a class="nav-login" href="{{ route('login') }}">{{ $headerContent['login_label'] ?? 'Log in' }}</a>
@endif
@if (filter_var($headerContent['show_registration'] ?? true, FILTER_VALIDATE_BOOL) && Route::has('register'))
<a class="btn primary nav-register" href="{{ route('register') }}">{{ $headerContent['registration_label'] ?? 'Get started' }}</a>
@endif
@endauth
<button class="menu" type="button" aria-label="Toggle navigation" :aria-expanded="menuOpen" @click="menuOpen = ! menuOpen">
<span></span><span></span><span></span>
</button>
@if (filter_var($headerContent['show_mobile_menu'] ?? true, FILTER_VALIDATE_BOOL))
<button class="menu" type="button" aria-label="Toggle navigation" :aria-expanded="menuOpen" @click="menuOpen = ! menuOpen"><span></span><span></span><span></span></button>
@endif
</div>
</header>
<div class="mobile-nav" x-show="menuOpen" x-cloak>
@include('stylist-theme-saasland::partials.navigation-items', ['items' => $primaryNavigation])
<div class="mobile-auth">
@auth
<a href="{{ route('dashboard') }}">Dashboard</a>
@if (Route::has('profile.edit'))
<a href="{{ route('profile.edit') }}">Profile</a>
@endif
<form method="POST" action="{{ route('logout') }}">
@csrf
<button type="submit">Log out</button>
</form>
@else
@if (Route::has('login'))<a href="{{ route('login') }}">Log in</a>@endif
@if (Route::has('register'))<a class="mobile-primary" href="{{ route('register') }}">Get started</a>@endif
@endauth
@if (filter_var($headerContent['show_mobile_menu'] ?? true, FILTER_VALIDATE_BOOL))
<div class="mobile-nav" x-show="menuOpen" x-cloak>
@foreach ($navigationLinks as $link)
<a href="{{ $link['url'] ?? '#' }}">{{ $link['label'] ?? 'Link' }}</a>
@endforeach
</div>
</div>
@endif