Skip to content

Commit 3272459

Browse files
leggetterleggetter
authored
Getting started layout updates (#551)
* chore: Next.js/GS move <main> into Layout component * chore: Update <main /> styling
1 parent d302d4f commit 3272459

File tree

7 files changed

+64
-56
lines changed

7 files changed

+64
-56
lines changed

Diff for: ‎apps/getting-started-astro/src/layouts/main.astro

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ const { title } = Astro.props;
3535
</style>
3636
</head>
3737
<body>
38-
<main class="flex flex-wrap justify-center content-start p-8 lg:p-24 min-h-screen">
38+
<main class="flex flex-col items-center p-8 lg:p-24 min-h-screen">
3939
<div class="z-10 h-50 w-full max-w-5xl items-center justify-between text-xl lg:flex">
4040
<p class="fixed left-0 top-0 flex w-full justify-center pb-6 pt-8 lg:static lg:w-auto bg-gradient-to-b from-white via-white via-65% dark:from-black dark:via-black lg:bg-none">
4141
<a href="/">Get started with Xata and Astro</a>

Diff for: ‎apps/getting-started-nextjs/src/app/layout.tsx

+24-11
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,35 @@
1-
import './globals.css'
2-
import type { Metadata } from 'next'
3-
import { Inter } from 'next/font/google'
1+
import './globals.css';
2+
import type { Metadata } from 'next';
3+
import { Inter } from 'next/font/google';
44

5-
const inter = Inter({ subsets: ['latin'] })
5+
const inter = Inter({ subsets: ['latin'] });
66

77
export const metadata: Metadata = {
8-
title: 'Get started with Xata and Next.js',
9-
description: 'Generated by create next app',
10-
}
8+
title: 'Get started with Xata and Next.js'
9+
};
1110

1211
export default function RootLayout({
13-
children,
12+
children
1413
}: {
15-
children: React.ReactNode
14+
children: React.ReactNode;
1615
}) {
1716
return (
1817
<html lang="en">
19-
<body className={inter.className}>{children}</body>
18+
<body className={inter.className}>
19+
<main className="flex flex-col items-center p-8 lg:p-24 min-h-screen">
20+
<div className="z-10 h-50 w-full max-w-5xl items-center justify-between text-xl lg:flex">
21+
<p className="fixed left-0 top-0 flex w-full justify-center pb-6 pt-8 lg:static lg:w-auto bg-gradient-to-b from-white via-white via-65% dark:from-black dark:via-black lg:bg-none">
22+
<a href="/">Get started with Xata and Next.js</a>
23+
</p>
24+
<div className="fixed bottom-0 left-0 flex w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
25+
<a href="https://xata.io" className="w-20">
26+
<img src="https://raw.githubusercontent.com/xataio/examples/main/docs/app_logo.svg" />
27+
</a>
28+
</div>
29+
</div>
30+
{children}
31+
</main>
32+
</body>
2033
</html>
21-
)
34+
);
2235
}

Diff for: ‎apps/getting-started-nextjs/src/app/page.tsx

+13-16
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { getXataClient } from '@/xata';
22

33
const xata = getXataClient();
44

5-
export default async function Home({ searchParams }: { searchParams: { q: string } }) {
5+
export default async function Home({
6+
searchParams
7+
}: {
8+
searchParams: { q: string };
9+
}) {
610
let posts = null;
711
if (searchParams.q) {
812
posts = await xata.db.Posts.search(searchParams.q, { fuzziness: 2 });
@@ -11,18 +15,7 @@ export default async function Home({ searchParams }: { searchParams: { q: string
1115
}
1216

1317
return (
14-
<main className="flex flex-wrap justify-center content-start p-8 lg:p-24 min-h-screen">
15-
<div className="z-10 h-50 w-full max-w-5xl items-center justify-between text-xl lg:flex">
16-
<p className="fixed left-0 top-0 flex w-full justify-center pb-6 pt-8 lg:static lg:w-auto bg-gradient-to-b from-white via-white via-65% dark:from-black dark:via-black lg:bg-none">
17-
<a href="/">Get started with Xata and Next.js</a>
18-
</p>
19-
<div className="fixed bottom-0 left-0 flex w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
20-
<a href="https://xata.io" className="w-20">
21-
<img src="https://raw.githubusercontent.com/xataio/examples/main/docs/app_logo.svg" />
22-
</a>
23-
</div>
24-
</div>
25-
18+
<>
2619
<div className="w-full max-w-5xl mt-16">
2720
<form>
2821
<input
@@ -38,11 +31,15 @@ export default async function Home({ searchParams }: { searchParams: { q: string
3831
{posts.length === 0 && <p>No blog posts found</p>}
3932
{posts.map((post) => (
4033
<div key={post.id} className="mb-16">
41-
<p className="text-xs mb-2 text-purple-950 dark:text-purple-200">{post.pubDate?.toDateString()}</p>
34+
<p className="text-xs mb-2 text-purple-950 dark:text-purple-200">
35+
{post.pubDate?.toDateString()}
36+
</p>
4237
<h2 className="text-2xl mb-2">
4338
<a href={`posts/${post.slug}`}>{post.title}</a>
4439
</h2>
45-
<p className="text-purple-950 dark:text-purple-200 mb-5">{post.description}</p>
40+
<p className="text-purple-950 dark:text-purple-200 mb-5">
41+
{post.description}
42+
</p>
4643
<a
4744
href={`posts/${post.slug}`}
4845
className="px-4 py-2 font-semibold text-sm bg-purple-700 text-white rounded-lg shadow-sm w-fit"
@@ -52,6 +49,6 @@ export default async function Home({ searchParams }: { searchParams: { q: string
5249
</div>
5350
))}
5451
</div>
55-
</main>
52+
</>
5653
);
5754
}

Diff for: ‎apps/getting-started-nextjs/src/app/posts/[slug]/page.tsx

+12-23
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,17 @@ export default async function Post({ params }: { params: { slug: string } }) {
66
const post = await xata.db.Posts.filter({ slug: params.slug }).getFirst();
77

88
return (
9-
<main className="flex flex-wrap justify-center content-start p-8 lg:p-24 min-h-screen">
10-
<div className="z-10 h-50 w-full max-w-5xl items-center justify-between text-xl lg:flex">
11-
<p className="fixed left-0 top-0 flex w-full justify-center pb-6 pt-8 lg:static lg:w-auto bg-gradient-to-b from-white via-white via-65% dark:from-black dark:via-black lg:bg-none">
12-
<a href="/">Get started with Xata and Next.js</a>
13-
</p>
14-
<div className="fixed bottom-0 left-0 flex w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
15-
<a href="https://xata.io" className="w-20">
16-
<img src="https://raw.githubusercontent.com/xataio/examples/main/docs/app_logo.svg" />
17-
</a>
18-
</div>
19-
</div>
20-
21-
<div className="w-full max-w-5xl mt-16">
22-
<p className="mb-2">
23-
<a href="/" className="text-purple-600">
24-
&larr; Back to blog
25-
</a>
26-
</p>
27-
<h1 className="text-3xl mb-2">{post?.title}</h1>
28-
<p className="text-sm mb-4 text-purple-950 dark:text-purple-200">{post?.pubDate?.toDateString()}</p>
29-
<p className="text-xl">{post?.description}</p>
30-
</div>
31-
</main>
9+
<div className="w-full max-w-5xl mt-16">
10+
<p className="mb-2">
11+
<a href="/" className="text-purple-600">
12+
&larr; Back to blog
13+
</a>
14+
</p>
15+
<h1 className="text-3xl mb-2">{post?.title}</h1>
16+
<p className="text-sm mb-4 text-purple-950 dark:text-purple-200">
17+
{post?.pubDate?.toDateString()}
18+
</p>
19+
<p className="text-xl">{post?.description}</p>
20+
</div>
3221
);
3322
}

Diff for: ‎apps/getting-started-remix/app/root.tsx

+12-3
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
import type { LinksFunction } from '@remix-run/node';
2-
import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration } from '@remix-run/react';
2+
import {
3+
Links,
4+
LiveReload,
5+
Meta,
6+
Outlet,
7+
Scripts,
8+
ScrollRestoration
9+
} from '@remix-run/react';
310

411
import stylesheet from '~/tailwind.css';
512

6-
export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }];
13+
export const links: LinksFunction = () => [
14+
{ rel: 'stylesheet', href: stylesheet }
15+
];
716

817
export default function App() {
918
return (
@@ -15,7 +24,7 @@ export default function App() {
1524
<Links />
1625
</head>
1726
<body>
18-
<main className="flex flex-wrap justify-center content-start p-8 lg:p-24 min-h-screen">
27+
<main className="flex flex-col items-center p-8 lg:p-24 min-h-screen">
1928
<div className="z-10 h-50 w-full max-w-5xl items-center justify-between text-xl lg:flex">
2029
<p className="fixed left-0 top-0 flex w-full justify-center pb-6 pt-8 lg:static lg:w-auto bg-gradient-to-b from-white via-white via-65% dark:from-black dark:via-black lg:bg-none">
2130
<a href="/">Get started with Xata</a>

Diff for: ‎apps/getting-started-solidstart/src/root.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export default function Root() {
2222
<Meta name="viewport" content="width=device-width, initial-scale=1" />
2323
</Head>
2424
<Body>
25-
<main class="flex flex-col justify-center items-center p-8 lg:p-24 min-h-screen">
25+
<main class="flex flex-col items-center p-8 lg:p-24 min-h-screen">
2626
<div class="z-10 h-50 w-full max-w-5xl items-center justify-between text-xl lg:flex">
2727
<p class="fixed left-0 top-0 flex w-full justify-center pb-6 pt-8 lg:static lg:w-auto bg-gradient-to-b from-white via-white via-65% dark:from-black dark:via-black lg:bg-none">
2828
<a href="/">Get started with Xata and SolidStart</a>

Diff for: ‎apps/getting-started-sveltekit/src/routes/+layout.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
<title>Get started with Xata and SvelteKit</title>
66
</svelte:head>
77

8-
<main class="flex flex-wrap justify-center content-start p-8 lg:p-24 min-h-screen">
8+
<main class="flex flex-col items-center p-8 lg:p-24 min-h-screen">
99
<div class="z-10 h-50 w-full max-w-5xl items-center justify-between text-xl lg:flex">
1010
<p class="fixed left-0 top-0 flex w-full justify-center pb-6 pt-8 lg:static lg:w-auto bg-gradient-to-b from-white via-white via-65% dark:from-black dark:via-black lg:bg-none">
1111
<a href="/" data-sveltekit-reload>Get started with Xata and SvelteKit</a>

0 commit comments

Comments
 (0)