framexEngine-pro/app/views/demo/blog-post.php

<?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>