framex/framexEngine-pro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Firts up

Browse Source
This commit is contained in:
webclubz
2026-05-13 21:17:36 +03:00
parent e43b94ba20
commit 3a6ab777c9
49 changed files with 9247 additions and 210 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
app/views/demo/blog-list.php Normal file
View File

@@ -0,0 +1,88 @@
<?php
$data['title'] = 'Blog List Demo - Framex';
$data['metaDescription'] = 'A modern blog listing page demo built as a PHP view in Framex.';
$posts = [
[
'title' => 'Designing fast content systems with plain PHP',
'category' => 'Architecture',
'date' => 'May 12, 2026',
'read' => '7 min read',
'description' => 'A practical look at keeping site structure simple while still giving editors polished pages.',
'color' => 'bg-pre-blue',
],
[
'title' => 'Markdown pages that look finished by default',
'category' => 'Content',
'date' => 'May 8, 2026',
'read' => '5 min read',
'description' => 'How automatic prose styling lets documentation and articles ship without custom templates.',
'color' => 'bg-pre-emerald',
],
[
'title' => 'A small Tailwind design system for real websites',
'category' => 'Design',
'date' => 'May 4, 2026',
'read' => '6 min read',
'description' => 'Reusable sections, cards, buttons, and preset colors keep page building consistent.',
'color' => 'bg-pre-amber',
],
[
'title' => 'Dark mode without making every page complicated',
'category' => 'Frontend',
'date' => 'April 28, 2026',
'read' => '4 min read',
'description' => 'Persisted preferences, system fallback, and theme-aware utility classes in one flow.',
'color' => 'bg-pre-rose',
],
];
?>
<main>
<section class="section">
<div class="contain">
<div class="grid gap-10 lg:grid-cols-[0.85fr_1.15fr] lg:items-end">
<div>
<p class="eyebrow">Blog list demo</p>
<h1 class="mt-4 text-4xl font-semibold leading-tight text-slate-950 sm:text-6xl dark:text-white">
Editorial cards for a modern content index.
</h1>
</div>
<p class="text-lg leading-8 text-slate-600 dark:text-slate-400">
This page is a PHP view. It uses an array of posts, loops through the data, and renders a responsive grid without needing a separate component system.
</p>
</div>
<div class="mt-10 flex flex-wrap gap-3">
<span class="btn btn-secondary">All posts</span>
<span class="btn btn-ghost">Architecture</span>
<span class="btn btn-ghost">Content</span>
<span class="btn btn-ghost">Design</span>
</div>
<div class="mt-10 grid gap-5 md:grid-cols-2">
<?php foreach ($posts as $index => $post): ?>
<article class="card overflow-hidden p-0 <?= $index === 0 ? 'md:col-span-2' : '' ?>">
<div class="<?= e($post['color']) ?> p-6">
<div class="flex flex-wrap items-center gap-3 text-sm">
<span class="font-semibold"><?= e($post['category']) ?></span>
<span class="opacity-60">/</span>
<span class="opacity-80"><?= e($post['date']) ?></span>
</div>
<h2 class="mt-8 max-w-3xl text-2xl font-semibold leading-tight <?= $index === 0 ? 'sm:text-4xl' : '' ?>">
<?= e($post['title']) ?>
</h2>
</div>
<div class="p-6">
<p class="text-sm leading-6 text-slate-600 dark:text-slate-400"><?= e($post['description']) ?></p>
<div class="mt-6 flex items-center justify-between gap-4">
<span class="text-sm text-slate-500 dark:text-slate-400"><?= e($post['read']) ?></span>
<a class="btn btn-secondary" href="/demo/blog-post">Read post</a>
</div>
</div>
</article>
<?php endforeach; ?>
</div>
</div>
</section>
</main>

98
app/views/demo/blog-post.php Normal file
View File

@@ -0,0 +1,98 @@
<?php
$data['title'] = 'Blog Post Demo - Framex';
$data['metaDescription'] = 'A modern blog post page demo built as a PHP view in Framex.';
?>
<main>
<article>
<header class="section">
<div class="contain">
<div class="mx-auto max-w-4xl text-center">
<p class="eyebrow">Architecture / 7 min read</p>
<h1 class="mt-5 text-4xl font-bold tracking-tight text-slate-950 sm:text-6xl dark:text-white">
Designing fast content systems with plain PHP.
</h1>
<p class="mt-6 text-lg leading-8 text-slate-600 dark:text-slate-400">
A modern site does not need a heavy runtime to feel polished. Framex keeps page resolution, templates, assets, and Markdown close to the filesystem.
</p>
<div class="mt-8 flex items-center justify-center gap-4 text-sm text-slate-500 dark:text-slate-400">
<span class="grid size-11 place-items-center rounded-full bg-blue-600 font-semibold text-white">Fx</span>
<div class="text-left">
<p class="font-semibold text-slate-900 dark:text-white">Framex Team</p>
<p>Published May 12, 2026</p>
</div>
</div>
</div>
</div>
</header>
<section class="contain">
<div class="bg-pre-blue rounded-lg p-8 md:p-12">
<div class="grid gap-6 md:grid-cols-3">
<div>
<p class="text-sm font-semibold uppercase tracking-widest opacity-70">Routing</p>
<p class="mt-3 text-2xl font-semibold">Files become URLs</p>
</div>
<div>
<p class="text-sm font-semibold uppercase tracking-widest opacity-70">Views</p>
<p class="mt-3 text-2xl font-semibold">PHP and Markdown</p>
</div>
<div>
<p class="text-sm font-semibold uppercase tracking-widest opacity-70">Design</p>
<p class="mt-3 text-2xl font-semibold">Tailwind CSS 4</p>
</div>
</div>
</div>
</section>
<section class="section">
<div class="contain grid gap-10 lg:grid-cols-[0.75fr_1.25fr]">
<aside class="lg:sticky lg:top-24 lg:self-start">
<div class="card">
<p class="text-sm font-semibold text-slate-950 dark:text-white">In this article</p>
<div class="mt-4 grid gap-3 text-sm text-slate-600 dark:text-slate-400">
<a href="#simple-routing" class="hover:text-blue-600 dark:hover:text-blue-400">Simple routing</a>
<a href="#shared-layouts" class="hover:text-blue-600 dark:hover:text-blue-400">Shared layouts</a>
<a href="#content-speed" class="hover:text-blue-600 dark:hover:text-blue-400">Content speed</a>
</div>
</div>
</aside>
<div class="prose">
<h2 id="simple-routing">Simple routing</h2>
<p>Framex resolves URLs by checking for matching PHP and Markdown files inside <code>app/views</code>. This keeps page creation predictable for new developers and small teams.</p>
<p>A route such as <code>/demo/blog-post</code> can be backed by <code>app/views/demo/blog-post.php</code>, while documentation can be written as Markdown in <code>app/views/docs/index.md</code>.</p>
<h2 id="shared-layouts">Shared layouts</h2>
<p>Every page is wrapped by the main template, which includes the top menu, current view content, footer, compiled CSS, and JavaScript. PHP views can set metadata through the <code>$data</code> array.</p>
<blockquote>
<p>Keep page-specific content in views, shared structure in templates, and reusable visual rules in Tailwind source CSS.</p>
</blockquote>
<h2 id="content-speed">Content speed</h2>
<p>Markdown pages are useful for documentation and simple publishing workflows. PHP views are better when a page needs custom data, cards, grids, forms, or conditional rendering.</p>
<pre><code>// PHP view route
app/views/demo/blog-post.php
// Markdown view route
app/views/demo/page.md</code></pre>
</div>
</div>
</section>
</article>
<section class="section-tight border-t border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900/40">
<div class="contain">
<div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div>
<p class="eyebrow">Next demo</p>
<h2 class="mt-2 text-2xl font-semibold text-slate-950 dark:text-white">Explore the Markdown page.</h2>
</div>
<a class="btn btn-primary" href="/demo/page">Open Markdown demo</a>
</div>
</div>
</section>
</main>

86
app/views/demo/index.php Normal file
View File

@@ -0,0 +1,86 @@
<?php
$data['title'] = 'Framex Demo Pages';
$data['metaDescription'] = 'Explore modern demo pages built with Framex PHP views, Markdown views, Tailwind CSS, and reusable UI classes.';
$data['bodyClass'] = 'bg-slate-50 text-slate-950 dark:bg-slate-950 dark:text-slate-100';
$demoPages = [
[
'title' => 'Blog List',
'description' => 'A polished editorial index with featured content, filters, and responsive cards.',
'href' => '/demo/blog-list',
'label' => 'PHP view',
'color' => 'bg-pre-blue',
],
[
'title' => 'Blog Post',
'description' => 'A long-form article layout with author metadata, hero content, and related cards.',
'href' => '/demo/blog-post',
'label' => 'PHP view',
'color' => 'bg-pre-emerald',
],
[
'title' => 'Markdown Page',
'description' => 'A content page rendered from Markdown and automatically styled by `.prose`.',
'href' => '/demo/page',
'label' => 'MD view',
'color' => 'bg-pre-amber',
],
];
?>
<main>
<section class="section">
<div class="contain">
<div class="max-w-3xl">
<p class="eyebrow">Demo library</p>
<h1 class="mt-4 text-4xl font-bold text-gradient sm:text-6xl dark:text-white">
Modern pages built with the Framex view system.
</h1>
<p class="mt-6 text-lg leading-8 text-slate-600 dark:text-slate-400">
These demos show how PHP views and Markdown views can share the same template, navigation, footer, light/dark mode, and reusable Tailwind classes.
</p>
</div>
<div class="mt-12 grid gap-5 md:grid-cols-3">
<?php foreach ($demoPages as $page): ?>
<a class="card group flex min-h-72 flex-col justify-between overflow-hidden p-0" href="<?= e($page['href']) ?>">
<div class="<?= e($page['color']) ?> p-6">
<span class="inline-flex rounded-md bg-white/70 px-3 py-1 text-xs font-semibold text-slate-700 ring-1 ring-black/5 dark:bg-black/20 dark:text-white dark:ring-white/10">
<?= e($page['label']) ?>
</span>
<h2 class="mt-8 text-2xl font-bold text-current"><?= e($page['title']) ?></h2>
</div>
<div class="p-6">
<p class="text-sm leading-6 text-slate-600 dark:text-slate-400"><?= e($page['description']) ?></p>
<div class="mt-6 inline-flex items-center gap-2 text-sm font-semibold text-blue-600 group-hover:text-blue-500 dark:text-blue-400">
Open demo
<span aria-hidden="true">-></span>
</div>
</div>
</a>
<?php endforeach; ?>
</div>
</div>
</section>
<section class="section-tight border-y border-slate-200 bg-white dark:border-slate-800 dark:bg-slate-900/40">
<div class="contain grid gap-5 md:grid-cols-4">
<div class="card">
<p class="text-3xl font-semibold text-slate-950 dark:text-white">4</p>
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Demo routes</p>
</div>
<div class="card">
<p class="text-3xl font-semibold text-slate-950 dark:text-white">2</p>
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">View types</p>
</div>
<div class="card">
<p class="text-3xl font-semibold text-slate-950 dark:text-white">4</p>
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Preset colors</p>
</div>
<div class="card">
<p class="text-3xl font-semibold text-slate-950 dark:text-white">1</p>
<p class="mt-2 text-sm text-slate-600 dark:text-slate-400">Shared layout</p>
</div>
</div>
</section>
</main>

54
app/views/demo/page.md Normal file
View File

@@ -0,0 +1,54 @@
# Markdown Page Demo
This page is rendered from `app/views/demo/page.md`. It uses the same main template, top menu, footer, CSS, JavaScript, and light/dark mode as PHP views.
Markdown pages are ideal for documentation, policies, articles, guides, landing copy drafts, and simple content pages.
## What gets styled automatically
Framex wraps Markdown output in `.prose prose-shell`, so common content elements are styled without extra markup:
- Headings
- Paragraphs
- Links
- Ordered and unordered lists
- Inline code
- Code blocks
- Blockquotes
- Tables
- Images
- Horizontal rules
## Example content
You can write ordinary Markdown:
```md
## Feature section
- Fast routes
- PHP views
- Markdown views
- Tailwind styling
```
And it becomes a fully styled content page.
## Table example
| View type | Best for | Route example |
| --- | --- | --- |
| PHP | Dynamic layouts, cards, forms | `/demo/blog-list` |
| Markdown | Docs, articles, simple pages | `/demo/page` |
## Blockquote example
> Markdown is the fastest way to add polished content when the page does not need custom PHP logic.
## Next steps
Open the other demo pages:
- [Demo index](/demo)
- [Blog list](/demo/blog-list)
- [Blog post](/demo/blog-post)