From d68d780a0081c9c0e455408c32188610d859c0e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marko=20Markovi=C4=87?= <okram@civokram.com>
Date: Thu, 23 Apr 2026 21:11:47 +0400
Subject: [PATCH] Add home and CMS page routes

---
 frontend/src/components/page-view.tsx | 13 ++++++++++++
 frontend/src/routes/$slug.tsx         | 30 +++++++++++++++++++++++++++
 frontend/src/routes/index.tsx         | 26 +++++++++++++++++------
 3 files changed, 63 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/components/page-view.tsx
 create mode 100644 frontend/src/routes/$slug.tsx

diff --git a/frontend/src/components/page-view.tsx b/frontend/src/components/page-view.tsx
new file mode 100644
index 0000000..e48c97b
--- /dev/null
+++ b/frontend/src/components/page-view.tsx
@@ -0,0 +1,13 @@
+type Props = {
+  title: string
+  content: string
+}
+
+export function PageView({ title, content }: Props) {
+  return (
+    <article className="page">
+      <h1 className="text-3xl font-bold mb-4">{title}</h1>
+      <div className="prose-cms" dangerouslySetInnerHTML={{ __html: content }} />
+    </article>
+  )
+}
diff --git a/frontend/src/routes/$slug.tsx b/frontend/src/routes/$slug.tsx
new file mode 100644
index 0000000..5c083b0
--- /dev/null
+++ b/frontend/src/routes/$slug.tsx
@@ -0,0 +1,30 @@
+import { createFileRoute, notFound } from '@tanstack/react-router'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { Helmet } from 'react-helmet-async'
+import { pageBySlugQuery } from '@/lib/queries'
+import { PageView } from '@/components/page-view'
+
+export const Route = createFileRoute('/$slug')({
+  loader: async ({ context: { queryClient }, params: { slug } }) => {
+    const page = await queryClient.ensureQueryData(pageBySlugQuery(slug))
+    if (!page) throw notFound()
+  },
+  component: CmsPage,
+})
+
+function CmsPage() {
+  const { slug } = Route.useParams()
+  const { data: page } = useSuspenseQuery(pageBySlugQuery(slug))
+  if (!page) return null
+
+  return (
+    <>
+      {page.title && (
+        <Helmet>
+          <title>{page.title}</title>
+        </Helmet>
+      )}
+      <PageView title={page.title} content={page.content} />
+    </>
+  )
+}
diff --git a/frontend/src/routes/index.tsx b/frontend/src/routes/index.tsx
index 9446c5b..3bc8928 100644
--- a/frontend/src/routes/index.tsx
+++ b/frontend/src/routes/index.tsx
@@ -1,10 +1,24 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { useSuspenseQuery } from '@tanstack/react-query'
+import { pageBySlugQuery } from '@/lib/queries'
+import { PageView } from '@/components/page-view'
 
 export const Route = createFileRoute('/')({
-  component: () => (
-    <div className="p-8">
-      <h1 className="text-3xl font-bold">Home</h1>
-      <p className="text-muted-foreground">Routing placeholder — CMS page will render here.</p>
-    </div>
-  ),
+  loader: async ({ context: { queryClient } }) => {
+    await queryClient.ensureQueryData(pageBySlugQuery('home'))
+  },
+  component: HomePage,
 })
+
+function HomePage() {
+  const { data: page } = useSuspenseQuery(pageBySlugQuery('home'))
+  if (!page) {
+    return (
+      <div className="py-10">
+        <h1 className="text-3xl font-bold">Welcome</h1>
+        <p className="text-muted-foreground mt-2">No home page content configured in Directus.</p>
+      </div>
+    )
+  }
+  return <PageView title={page.title} content={page.content} />
+}