Add pages page

src/app.tsx

@@ -10,6 +10,7 @@ import { MetaProvider } from '@solidjs/meta'
 import { loadHomePage } from './data/home.data'
 import { loadPost } from './data/post.data'
 import { loadSearchPage } from './data/search.data'
+import { loadPagesPage } from './data/pages.data'
 
 const ROUTES: RouteDefinition[] = [
   {
@@ -21,8 +22,9 @@ const ROUTES: RouteDefinition[] = [
     load: loadPost,
   },
   {
-    path: '/_debug',
-    component: lazy(() => import('~/pages/Debug')),
+    path: '/pages/:slug',
+    component: lazy(() => import('~/pages/Pages')),
+    load: loadPagesPage,
   },
   {
     path: '/search',
@@ -39,6 +41,10 @@ const ROUTES: RouteDefinition[] = [
       },
     ],
   },
+  {
+    path: '/_debug',
+    component: lazy(() => import('~/pages/Debug')),
+  },
   {
     path: '/',
     component: lazy(() => import('~/pages/Home')),

src/data/pages.data.ts

@@ -0,0 +1,39 @@
+import { gql, request } from '@solid-primitives/graphql'
+import { cache, redirect, RouteLoadFunc } from '@solidjs/router'
+import { GRAPHQL_BACKEND_URL } from '~/constants'
+import { Page } from '~/models/page'
+
+const QUERY = gql`
+  query Page($slug: String!) {
+    page(slug: $slug) {
+      id
+      template
+      name
+      title
+      content
+      extras
+    }
+  }
+`
+
+export const queryPageByID = cache(async (slug: string): Promise<Page> => {
+  type Response = {
+    page: Page
+  }
+
+  const response = await request<Response>(GRAPHQL_BACKEND_URL, QUERY, {
+    variables: {
+      slug,
+    },
+  })
+
+  if (response.page === null) {
+    throw redirect('/404')
+  }
+
+  return response.page
+}, 'Pages.queryPageByID')
+
+export const loadPagesPage: RouteLoadFunc = ({ params }) => {
+  void queryPageByID(params.slug)
+}

src/models/page.ts

@@ -0,0 +1,14 @@
+export enum PageTemplate {
+  SERVICES = 'services',
+}
+
+export type Page = {
+  id: number
+  template: PageTemplate
+  name: string
+  title: string
+  content: string
+  extras: {
+    [attr: string]: any
+  }
+}

src/pages/Pages.module.scss

@@ -0,0 +1,5 @@
+.container {
+  max-width: var(--content-page-width-wide);
+  padding-inline: var(--page-padding);
+  margin-inline: auto;
+}

src/pages/Pages.tsx

@@ -0,0 +1,25 @@
+import { Meta, Title } from '@solidjs/meta'
+import { createAsync, RouteSectionProps } from '@solidjs/router'
+import { Component, Show } from 'solid-js'
+import PageRenderer from '~/components/PageRenderer'
+import { queryPageByID } from '~/data/pages.data'
+import styles from './Pages.module.scss'
+
+const PagesPage: Component<RouteSectionProps> = ({ params }) => {
+  const data = createAsync(() => queryPageByID(params.slug), {
+    deferStream: true,
+  })
+
+  return (
+    <Show when={!!data()}>
+      <Title title="" />
+      <Meta property="og:title" content={data()!.title} />
+
+      <div class={styles.container}>
+        <PageRenderer title={data()!.title} content={data()!.content} />
+      </div>
+    </Show>
+  )
+}
+
+export default PagesPage