Skip to content

Commit a501a8d

Browse files
ahuseynahuseyn
authored
[next]: Add Sveltekit kitchen-sink example, which includes data fetching and preview (#2160)
* init preview example * update gql client, add headers param * update template-hierarchy, add id and asPreview * add preview utility to @faustjs/nextjs package * initial * new templates * add homepage * style fixes * update uri expression * rename example name, add readme * init project * update templates, add data fetching * remove logs, add comments, minor fixes * add kitchen-sink example * add seedNode to templateHierarchy * add preview * add preview to sveltekit templateHierarchy
1 parent 58cb0a0 commit a501a8d

34 files changed

+800
-32
lines changed

‎examples/sveltekit/kitchen-sink/.gitignore‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
node_modules
2+
3+
# Output
4+
.output
5+
.vercel
6+
.netlify
7+
.wrangler
8+
/.svelte-kit
9+
/build
10+
11+
# OS
12+
.DS_Store
13+
Thumbs.db
14+
15+
# Env
16+
.env
17+
.env.*
18+
!.env.example
19+
!.env.test
20+
21+
# Vite
22+
vite.config.js.timestamp-*
23+
vite.config.ts.timestamp-*
24+
25+
package-lock.json

‎examples/sveltekit/kitchen-sink/package.json‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{
2+
"name": "@faustjs/sveltekit-template-hierarchy-example",
3+
"private": true,
4+
"version": "0.1.0",
5+
"license": "0BSD",
6+
"type": "module",
7+
"scripts": {
8+
"dev": "vite dev",
9+
"build": "vite build",
10+
"preview": "vite preview",
11+
"prepare": "svelte-kit sync || echo ''",
12+
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
13+
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
14+
},
15+
"devDependencies": {
16+
"@faustjs/sveltekit": "workspace:*",
17+
"@faustjs/template-hierarchy": "workspace:*",
18+
"@faustjs/data-fetching": "workspace:*",
19+
"@sveltejs/adapter-auto": "^6.0.0",
20+
"@sveltejs/kit": "^2.16.0",
21+
"@sveltejs/vite-plugin-svelte": "^5.0.0",
22+
"svelte": "^5.0.0",
23+
"svelte-check": "^4.0.0",
24+
"vite": "^6.2.6"
25+
},
26+
"dependencies": {
27+
"@tailwindcss/vite": "^4.1.12",
28+
"@urql/core": "^5.1.1",
29+
"@urql/exchange-persisted": "^4.3.1",
30+
"deepmerge": "^4.3.1",
31+
"graphql": "^16.11.0",
32+
"tailwindcss": "^4.1.12"
33+
}
34+
}

‎examples/sveltekit/kitchen-sink/src/app.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1" />
7+
%sveltekit.head%
8+
</head>
9+
<body data-sveltekit-preload-data="hover">
10+
<div style="display: contents">%sveltekit.body%</div>
11+
</body>
12+
</html>

‎examples/sveltekit/kitchen-sink/src/components/BlogPostItem.svelte‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script>
2+
const { post } = $props();
3+
const { title, date, excerpt, uri, featuredImage } = post ?? {};
4+
5+
// Format the date
6+
const formatDate = (dateString) => {
7+
return new Date(dateString).toLocaleDateString('en-US', {
8+
year: 'numeric',
9+
month: 'long',
10+
});
11+
};
12+
</script>
13+
14+
<article class="container max-w-4xl px-10 py-6 mx-auto rounded-lg shadow-sm bg-gray-50 mb-4">
15+
<time datetime={date} class="text-sm text-gray-600">
16+
{formatDate(date)}
17+
</time>
18+
19+
{#if featuredImage}
20+
<img
21+
src={featuredImage?.node?.sourceUrl}
22+
alt=""
23+
class="w-full h-48 object-cover rounded-t-lg mt-2 mb-4"
24+
/>
25+
{/if}
26+
27+
<h2 class="mt-3">
28+
<a href={uri} class="text-2xl font-bold hover:underline">
29+
{title}
30+
</a>
31+
</h2>
32+
33+
<div class="mt-2 mb-4">
34+
{@html excerpt}
35+
</div>
36+
37+
<a href={uri} class="hover:underline text-orange-600 mt-4">Read more</a>
38+
</article>

‎examples/sveltekit/kitchen-sink/src/components/Header.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script>
2+
const { data } = $props();
3+
</script>
4+
5+
<header class="bg-gray-800 text-white py-4 px-8">
6+
<div class="flex justify-between items-center max-w-4xl mx-auto">
7+
<div class="text-3xl font-semibold">
8+
<a href="/">{data?.generalSettings?.title || 'Site Title'}</a>
9+
</div>
10+
11+
<nav class="space-x-6">
12+
<a href="/" class="text-lg hover:underline">Home</a>
13+
</nav>
14+
</div>
15+
</header>

‎examples/sveltekit/kitchen-sink/src/hooks.server.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { dev } from '$app/environment';
2+
3+
export const handle = async ({ event, resolve }) => {
4+
if (
5+
dev &&
6+
event.url.pathname === '/.well-known/appspecific/com.chrome.devtools.json'
7+
) {
8+
return new Response(undefined, { status: 404 });
9+
}
10+
11+
return resolve(event, {
12+
filterSerializedResponseHeaders: () => true, // basically get all headers
13+
});
14+
};

‎examples/sveltekit/kitchen-sink/src/queries/getArchive.js‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import gql from 'graphql-tag';
2+
3+
export const GET_ARCHIVE = gql`
4+
query GetArchivePage($uri: String!) {
5+
nodeByUri(uri: $uri) {
6+
... on Category {
7+
name
8+
posts {
9+
edges {
10+
node {
11+
id
12+
title
13+
content
14+
date
15+
uri
16+
featuredImage {
17+
node {
18+
id
19+
sourceUrl
20+
altText
21+
mediaDetails {
22+
width
23+
height
24+
}
25+
}
26+
}
27+
author {
28+
node {
29+
name
30+
}
31+
}
32+
}
33+
}
34+
}
35+
}
36+
... on Tag {
37+
name
38+
posts {
39+
edges {
40+
node {
41+
id
42+
title
43+
content
44+
date
45+
uri
46+
featuredImage {
47+
node {
48+
id
49+
sourceUrl
50+
altText
51+
mediaDetails {
52+
width
53+
height
54+
}
55+
}
56+
}
57+
author {
58+
node {
59+
name
60+
}
61+
}
62+
}
63+
}
64+
}
65+
}
66+
}
67+
}
68+
`;

‎examples/sveltekit/kitchen-sink/src/queries/getLayout.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { gql } from 'graphql-tag';
2+
3+
export const GET_LAYOUT = gql`
4+
query GetLayout {
5+
generalSettings {
6+
title
7+
description
8+
}
9+
}
10+
`;

‎examples/sveltekit/kitchen-sink/src/queries/getPage.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import gql from 'graphql-tag';
2+
3+
export const GET_PAGE = gql`
4+
query GetPage($databaseId: ID!, $asPreview: Boolean = false) {
5+
page(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
6+
title
7+
content
8+
date
9+
author {
10+
node {
11+
name
12+
}
13+
}
14+
featuredImage {
15+
node {
16+
id
17+
sourceUrl
18+
altText
19+
mediaDetails {
20+
width
21+
height
22+
}
23+
}
24+
}
25+
}
26+
}
27+
`;

‎examples/sveltekit/kitchen-sink/src/queries/getPost.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import gql from 'graphql-tag';
2+
3+
export const GET_POST = gql`
4+
query GetPost($databaseId: ID!, $asPreview: Boolean = false) {
5+
post(id: $databaseId, idType: DATABASE_ID, asPreview: $asPreview) {
6+
title
7+
content
8+
date
9+
author {
10+
node {
11+
name
12+
}
13+
}
14+
featuredImage {
15+
node {
16+
id
17+
sourceUrl
18+
altText
19+
mediaDetails {
20+
width
21+
height
22+
}
23+
}
24+
}
25+
}
26+
}
27+
`;

0 commit comments

Comments
 (0)