Skip to content

Commit bb8966a

Browse files
ahuseynahuseyn
committed
update templates, add data fetching
1 parent d3003d4 commit bb8966a

20 files changed

Lines changed: 453 additions & 668 deletions

‎examples/astro/kitchen-sink/astro.config.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { defineConfig } from 'astro/config';
2+
import tailwindcss from '@tailwindcss/vite';
23

34
export default defineConfig({
45
output: 'server',
@@ -27,5 +28,6 @@ export default defineConfig({
2728
'@faustjs/graphql',
2829
],
2930
},
31+
plugins: [tailwindcss()],
3032
},
3133
});

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,11 +13,13 @@
1313
},
1414
"dependencies": {
1515
"@faustjs/astro": "workspace:*",
16-
"@faustjs/template-hierarchy": "workspace:*",
1716
"@faustjs/data-fetching": "workspace:*",
17+
"@faustjs/template-hierarchy": "workspace:*",
18+
"@tailwindcss/vite": "^4.1.12",
1819
"astro": "^5.1.1",
1920
"graphql": "^16.9.0",
20-
"graphql-tag": "^2.12.6"
21+
"graphql-tag": "^2.12.6",
22+
"tailwindcss": "^4.1.11"
2123
},
2224
"devDependencies": {
2325
"typescript": "^5.6.3"

‎examples/astro/kitchen-sink/src/components/BlogPostItem.astro‎

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

‎examples/astro/kitchen-sink/src/components/Header.astro‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
import { GET_LAYOUT } from '@/queries/getLayout';
3+
import { print } from 'graphql';
4+
5+
const { data } = await Astro.locals.client?.request(print(GET_LAYOUT));
6+
---
7+
8+
<header class='bg-gray-800 text-white py-4 px-8'>
9+
<div class='flex justify-between items-center max-w-4xl mx-auto'>
10+
<div class='text-3xl font-semibold'>
11+
<a href='/'>{data?.generalSettings?.title}</a>
12+
</div>
13+
14+
<nav class='space-x-6'>
15+
<a href='/' class='text-lg hover:underline'> Home</a>
16+
</nav>
17+
</div>
18+
</header>

‎examples/astro/kitchen-sink/src/components/Layout.astro‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
import Header from './Header.astro';
3+
import '../styles/globals.css';
4+
5+
const pageTitle = Astro.props.pageTitle;
6+
---
7+
8+
<!doctype html>
9+
<html lang='en'>
10+
<head>
11+
<meta charset='UTF-8' />
12+
<meta name='viewport' content='width=device-width' />
13+
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
14+
<meta name='generator' content={Astro.generator} />
15+
<title>{pageTitle}</title>
16+
</head>
17+
<body>
18+
<Header />
19+
<main class='bg-stone-100 text-gray-800 pb-16 pt-8 min-h-screen'>
20+
<slot />
21+
</main>
22+
</body>
23+
</html>

‎examples/astro/kitchen-sink/src/components/Nav.astro‎

Lines changed: 0 additions & 50 deletions
This file was deleted.

‎examples/astro/kitchen-sink/src/components/TemplateHierarchyInfo.astro‎

Lines changed: 0 additions & 52 deletions
This file was deleted.

‎examples/astro/kitchen-sink/src/layouts/Layout.astro‎

Lines changed: 0 additions & 36 deletions
This file was deleted.

‎examples/astro/kitchen-sink/src/layouts/WordPressLayout.astro‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎examples/astro/kitchen-sink/src/pages/404.astro‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
---
2-
import WordPressLayout from '@/layouts/WordPressLayout.astro';
2+
import Layout from '@/components/Layout.astro';
33
44
// Set the response status to 404
55
Astro.response.status = 404;
66
---
77

8-
<WordPressLayout title="Page Not Found">
9-
<h1>404 - Page Not Found</h1>
10-
<p>Sorry, the page you're looking for doesn't exist.</p>
11-
<div class="content-area">
12-
<p>This could happen if:</p>
13-
<ul>
14-
<li>The page has been moved or deleted</li>
15-
<li>You typed the URL incorrectly</li>
16-
<li>The WordPress content couldn't be found</li>
17-
</ul>
18-
<p>
19-
<a href="/" style="color: #3b82f6; text-decoration: underline;">
8+
<Layout title='Page Not Found'>
9+
<div class='max-w-4xl mx-auto px-8 py-16'>
10+
<div class='text-center mb-12'>
11+
<h1 class='text-6xl font-bold text-gray-900 mb-4'>404</h1>
12+
<h2 class='text-2xl font-semibold text-gray-700 mb-6'>Page Not Found</h2>
13+
<p class='text-lg text-gray-600 mb-8'>
14+
Sorry, the page you're looking for doesn't exist.
15+
</p>
16+
</div>
17+
18+
<div class='text-center'>
19+
<a
20+
href='/'
21+
class='inline-flex items-center px-6 py-3 bg-gray-800 text-white font-medium rounded-lg hover:bg-gray-700 transition-colors duration-200'>
2022
← Go back to the homepage
2123
</a>
22-
</p>
24+
</div>
2325
</div>
24-
</WordPressLayout>
26+
</Layout>

0 commit comments

Comments
 (0)