wpengine · ahuseyn · Sep 12, 2025 · Aug 13, 2025 · Aug 13, 2025 · Aug 13, 2025
@@ -0,0 +1,25 @@
+node_modules
+
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/build
+
+# OS
+.DS_Store
+Thumbs.db
+
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+package-lock.json
@@ -0,0 +1,34 @@
+{
+	"name": "@faustjs/sveltekit-template-hierarchy-example",
+	"private": true,
+	"version": "0.1.0",
+	"license": "0BSD",
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview",
+		"prepare": "svelte-kit sync || echo ''",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+	},
+	"devDependencies": {
+		"@faustjs/sveltekit": "workspace:*",
+		"@faustjs/template-hierarchy": "workspace:*",
+		"@faustjs/data-fetching": "workspace:*",
+		"@sveltejs/adapter-auto": "^6.0.0",
+		"@sveltejs/kit": "^2.16.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"svelte": "^5.0.0",
+		"svelte-check": "^4.0.0",
+		"vite": "^6.2.6"
+	},
+	"dependencies": {
+		"@tailwindcss/vite": "^4.1.12",
+		"@urql/core": "^5.1.1",
+		"@urql/exchange-persisted": "^4.3.1",
+		"deepmerge": "^4.3.1",
+		"graphql": "^16.11.0",
+		"tailwindcss": "^4.1.12"
+	}
+}
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
@@ -0,0 +1,38 @@
+<script>
+	const { post } = $props();
+	const { title, date, excerpt, uri, featuredImage } = post ?? {};
+
+	// Format the date
+	const formatDate = (dateString) => {
+		return new Date(dateString).toLocaleDateString('en-US', {
+			year: 'numeric',
+			month: 'long',
+		});
+	};
+</script>
+
+<article class="container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm bg-gray-50 mb-4">
+	<time datetime={date} class="text-sm text-gray-600">
+		{formatDate(date)}
+	</time>
+
+	{#if featuredImage}
+		<img
+			src={featuredImage?.node?.sourceUrl}
+			alt=""
+			class="w-full h-48 object-cover rounded-t-lg mt-2 mb-4"
+		/>
+	{/if}
+
+	<h2 class="mt-3">
+		<a href={uri} class="text-2xl font-bold hover:underline">
+			{title}
+		</a>
+	</h2>
+
+	<div class="mt-2 mb-4">
+		{@html excerpt}
+	</div>
+
+	<a href={uri} class="hover:underline text-orange-600 mt-4">Read more</a>
+</article>
@@ -0,0 +1,15 @@
+<script>
+	const { data } = $props();
+</script>
+
+<header class="bg-gray-800 text-white py-4 px-8">
+	<div class="flex justify-between items-center max-w-4xl mx-auto">
+		<div class="text-3xl font-semibold">
+			<a href="/">{data?.generalSettings?.title || 'Site Title'}</a>
+		</div>
+
+		<nav class="space-x-6">
+			<a href="/" class="text-lg hover:underline">Home</a>
+		</nav>
+	</div>
+</header>
@@ -0,0 +1,14 @@
+import { dev } from '$app/environment';
+
+export const handle = async ({ event, resolve }) => {
+	if (
+		dev &&
+		event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json'
+	) {
+		return new Response(undefined, { status: 404 });
+	}
+
+	return resolve(event, {
+		filterSerializedResponseHeaders: () => true, // basically get all headers
+	});
+};
@@ -0,0 +1,68 @@
+import gql from 'graphql-tag';
+
+export const GET_ARCHIVE = gql`
+	query GetArchivePage($uri: String!) {
+		nodeByUri(uri: $uri) {
+			... on Category {
+				name
+				posts {
+					edges {
+						node {
+							id
+							title
+							content
+							date
+							uri
+							featuredImage {
+								node {
+									id
+									sourceUrl
+									altText
+									mediaDetails {
+										width
+										height
+									}
+								}
+							}
+							author {
+								node {
+									name
+								}
+							}
+						}
+					}
+				}
+			}
+			... on Tag {
+				name
+				posts {
+					edges {
+						node {
+							id
+							title
+							content
+							date
+							uri
+							featuredImage {
+								node {
+									id
+									sourceUrl
+									altText
+									mediaDetails {
+										width
+										height
+									}
+								}
+							}
+							author {
+								node {
+									name
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
@@ -0,0 +1,10 @@
+import { gql } from 'graphql-tag';
+
+export const GET_LAYOUT = gql`
+	query GetLayout {
+		generalSettings {
+			title
+			description
+		}
+	}
+`;
@@ -0,0 +1,27 @@
+import gql from 'graphql-tag';
+
+export const GET_PAGE = gql`
+	query GetPage($databaseId: ID!, $asPreview: Boolean = false) {
+		page(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
+			title
+			content
+			date
+			author {
+				node {
+					name
+				}
+			}
+			featuredImage {
+				node {
+					id
+					sourceUrl
+					altText
+					mediaDetails {
+						width
+						height
+					}
+				}
+			}
+		}
+	}
+`;
@@ -0,0 +1,27 @@
+import gql from 'graphql-tag';
+
+export const GET_POST = gql`
+	query GetPost($databaseId: ID!, $asPreview: Boolean = false) {
+		post(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
+			title
+			content
+			date
+			author {
+				node {
+					name
+				}
+			}
+			featuredImage {
+				node {
+					id
+					sourceUrl
+					altText
+					mediaDetails {
+						width
+						height
+					}
+				}
+			}
+		}
+	}
+`;
@@ -0,0 +1,33 @@
+import gql from 'graphql-tag';
+
+export const GET_POSTS = gql`
+	query GetPosts {
+		posts {
+			edges {
+				node {
+					id
+					title
+					content
+					date
+					uri
+					featuredImage {
+						node {
+							id
+							sourceUrl
+							altText
+							mediaDetails {
+								width
+								height
+							}
+						}
+					}
+					author {
+						node {
+							name
+						}
+					}
+				}
+			}
+		}
+	}
+`;
@@ -0,0 +1,11 @@
+import { GET_ARCHIVE } from '../getArchive.js';
+
+export const queries = [
+	{
+		name: 'getCategory',
+		query: GET_ARCHIVE,
+		variables: ({ uri }) => ({
+			uri,
+		}),
+	},
+];
@@ -0,0 +1,8 @@
+import { GET_POSTS } from '../getPosts.js';
+
+export const queries = [
+	{
+		name: 'getPosts',
+		query: GET_POSTS,
+	},
+];
@@ -0,0 +1,6 @@
+import { queries as single } from './single.js';
+import { queries as page } from './page.js';
+import { queries as archive } from './archive.js';
+import { queries as home } from './home.js';
+
+export default { single, page, archive, home };
@@ -0,0 +1,12 @@
+import { GET_PAGE } from '../getPage.js';
+
+export const queries = [
+	{
+		name: 'getPage',
+		query: GET_PAGE,
+		variables: ({ databaseId }, ctx) => ({
+			databaseId,
+			asPreview: ctx?.asPreview,
+		}),
+	},
+];
@@ -0,0 +1,12 @@
+import { GET_POST } from '../getPost.js';
+
+export const queries = [
+	{
+		name: 'getPost',
+		query: GET_POST,
+		variables: ({ databaseId }, ctx) => ({
+			databaseId,
+			asPreview: ctx?.asPreview,
+		}),
+	},
+];
@@ -0,0 +1,25 @@
+import { print } from 'graphql';
+import { createDefaultClient, setGraphQLClient } from '@faustjs/sveltekit';
+import { GET_LAYOUT } from '../../queries/getLayout.js';
+import { WORDPRESS_URL } from '$env/static/private';
+
+export const load = async () => {
+	const client = createDefaultClient(WORDPRESS_URL);
+	setGraphQLClient(client);
+
+	if (client) {
+		try {
+			const { data } = await client.request(print(GET_LAYOUT));
+
+			return {
+				layoutData: data,
+			};
+		} catch (error) {
+			console.error('Error fetching layout data:', error);
+		}
+	}
+
+	return {
+		layoutData: null,
+	};
+};