Skip to content

Commit

Permalink
chore(examples): prettier files
Browse files Browse the repository at this point in the history
  • Loading branch information
samcx committed Jul 24, 2024
1 parent 308bc14 commit bcb664e
Show file tree
Hide file tree
Showing 10 changed files with 87 additions and 68 deletions.
16 changes: 9 additions & 7 deletions examples/with-mongodb/app/actions.ts
Original file line number Diff line number Diff line change
@@ -1,17 +1,19 @@
'use server'
"use server";

import client from "@/lib/mongodb";

export async function testDatabaseConnection() {
let isConnected = false
let isConnected = false;
try {
const mongoClient = await client.connect();
// Send a ping to confirm a successful connection
await mongoClient.db("admin").command({ ping: 1 });
console.log("Pinged your deployment. You successfully connected to MongoDB!"); // because this is a server action, the console.log will be outputted to your terminal not in the browser
return !isConnected
console.log(
"Pinged your deployment. You successfully connected to MongoDB!",
); // because this is a server action, the console.log will be outputted to your terminal not in the browser
return !isConnected;
} catch (e) {
console.error(e)
return isConnected
console.error(e);
return isConnected;
}
}
}
37 changes: 23 additions & 14 deletions examples/with-mongodb/app/app-demo/page.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import Image from 'next/image'
import { testDatabaseConnection } from '../actions'
import Link from 'next/link'
import Image from "next/image";
import { testDatabaseConnection } from "../actions";
import Link from "next/link";

export default async function Home() {
const isConnected = await testDatabaseConnection()
const isConnected = await testDatabaseConnection();

return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
Expand All @@ -19,7 +19,7 @@ export default async function Home() {
target="_blank"
rel="noopener noreferrer"
>
By{' '}
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"
Expand All @@ -32,7 +32,7 @@ export default async function Home() {
</div>
</div>

<div className='flex flex-col place-items-center gap-12'>
<div className="flex flex-col place-items-center gap-12">
<div className="relative flex place-items-center gap-6 before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
Expand All @@ -42,7 +42,7 @@ export default async function Home() {
height={37}
priority
/>
{' + '}
{" + "}
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] saturate-0 brightness-0 dark:saturate-100 dark:brightness-100"
src="/mongodb.svg"
Expand All @@ -53,15 +53,24 @@ export default async function Home() {
/>
</div>
{isConnected ? (
<h2 className="text-lg text-green-500">You are connected to MongoDB!</h2>
<h2 className="text-lg text-green-500">
You are connected to MongoDB!
</h2>
) : (
<h2 className="text-lg text-red-500">
You are NOT connected to MongoDB. Check the <code>README.md</code>{" "}
for instructions.
</h2>
)}
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
This page uses the&nbsp;<strong>App Router</strong>. Check out the Pages Router version here:&nbsp;<Link href='/' className='underline transition-colors ease-in-out hover:text-green-500'><code>pages/index.tsx</code></Link>
This page uses the&nbsp;<strong>App Router</strong>. Check out the
Pages Router version here:&nbsp;
<Link
href="/"
className="underline transition-colors ease-in-out hover:text-green-500"
>
<code>pages/index.tsx</code>
</Link>
</p>
</div>

Expand All @@ -73,7 +82,7 @@ export default async function Home() {
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
Docs{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
Expand All @@ -90,7 +99,7 @@ export default async function Home() {
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
Learn{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
Expand All @@ -107,7 +116,7 @@ export default async function Home() {
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
Templates{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
Expand All @@ -124,7 +133,7 @@ export default async function Home() {
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
Deploy{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
Expand All @@ -135,5 +144,5 @@ export default async function Home() {
</a>
</div>
</main>
)
);
}
18 changes: 9 additions & 9 deletions examples/with-mongodb/app/layout.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import '@/styles/globals.css'
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "@/styles/globals.css";

const inter = Inter({ subsets: ['latin'] })
const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
title: "Create Next App",
description: "Generated by create next app",
};

export default function RootLayout({
children,
}: {
children: React.ReactNode
children: React.ReactNode;
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
);
}
2 changes: 1 addition & 1 deletion examples/with-mongodb/lib/mongodb.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ if (!process.env.MONGODB_URI) {
}

const uri = process.env.MONGODB_URI;
const options = { appName: 'devrel.template.nextjs' };
const options = { appName: "devrel.template.nextjs" };

let client: MongoClient;

Expand Down
4 changes: 2 additions & 2 deletions examples/with-mongodb/next.config.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
/** @type {import('next').NextConfig} */
const nextConfig = {}
const nextConfig = {};

module.exports = nextConfig
module.exports = nextConfig;
6 changes: 3 additions & 3 deletions examples/with-mongodb/pages/_app.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import '@/styles/globals.css'
import type { AppProps } from 'next/app'
import "@/styles/globals.css";
import type { AppProps } from "next/app";

export default function App({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />
return <Component {...pageProps} />;
}
4 changes: 2 additions & 2 deletions examples/with-mongodb/pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Html, Head, Main, NextScript } from 'next/document'
import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
return (
Expand All @@ -9,5 +9,5 @@ export default function Document() {
<NextScript />
</body>
</Html>
)
);
}
48 changes: 28 additions & 20 deletions examples/with-mongodb/pages/index.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import Image from 'next/image'
import Link from 'next/link'
import { Inter } from 'next/font/google'
import client from '@/lib/mongodb'
import type { InferGetServerSidePropsType, GetServerSideProps } from 'next'
import Image from "next/image";
import Link from "next/link";
import { Inter } from "next/font/google";
import client from "@/lib/mongodb";
import type { InferGetServerSidePropsType, GetServerSideProps } from "next";

type ConnectionStatus = {
isConnected: boolean
}
isConnected: boolean;
};

const inter = Inter({ subsets: ['latin'] })
const inter = Inter({ subsets: ["latin"] });

export const getServerSideProps: GetServerSideProps<
ConnectionStatus
Expand Down Expand Up @@ -45,7 +45,7 @@ export default function Home({
target="_blank"
rel="noopener noreferrer"
>
By{' '}
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"
Expand All @@ -58,7 +58,7 @@ export default function Home({
</div>
</div>

<div className='flex flex-col place-items-center gap-12'>
<div className="flex flex-col place-items-center gap-12">
<div className="relative flex place-items-center gap-6 before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
Expand All @@ -68,7 +68,7 @@ export default function Home({
height={37}
priority
/>
{' + '}
{" + "}
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] saturate-0 brightness-0 dark:saturate-100 dark:brightness-100"
src="/mongodb.svg"
Expand All @@ -79,19 +79,27 @@ export default function Home({
/>
</div>
{isConnected ? (
<h2 className="text-lg text-green-500">You are connected to MongoDB!</h2>
<h2 className="text-lg text-green-500">
You are connected to MongoDB!
</h2>
) : (
<h2 className="text-lg text-red-500">
You are NOT connected to MongoDB. Check the <code>README.md</code>{" "}
for instructions.
</h2>
)}
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
This page uses the&nbsp;<strong>Pages Router</strong>. Check out the App Router version here:&nbsp;<Link href='/app-demo' className='underline transition-colors ease-in-out hover:text-green-500'><code>app/app-demo/page.tsx</code></Link>
This page uses the&nbsp;<strong>Pages Router</strong>. Check out the
App Router version here:&nbsp;
<Link
href="/app-demo"
className="underline transition-colors ease-in-out hover:text-green-500"
>
<code>app/app-demo/page.tsx</code>
</Link>
</p>
</div>


<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=default-template-tw&utm_campaign=create-next-app"
Expand All @@ -100,7 +108,7 @@ export default function Home({
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
Docs{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
Expand All @@ -117,7 +125,7 @@ export default function Home({
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
Learn{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
Expand All @@ -134,13 +142,13 @@ export default function Home({
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
Templates{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore starter templates for Next.js + MongoDB.
Explore starter templates for Next.js + MongoDB.
</p>
</a>

Expand All @@ -151,7 +159,7 @@ export default function Home({
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
Deploy{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
Expand All @@ -162,5 +170,5 @@ export default function Home({
</a>
</div>
</main>
)
);
}
2 changes: 1 addition & 1 deletion examples/with-mongodb/postcss.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,4 @@ module.exports = {
tailwindcss: {},
autoprefixer: {},
},
}
};
18 changes: 9 additions & 9 deletions examples/with-mongodb/tailwind.config.ts
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
import type { Config } from 'tailwindcss'
import type { Config } from "tailwindcss";

const config: Config = {
content: [
'./pages/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
'./app/**/*.{js,ts,jsx,tsx,mdx}',
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./app/**/*.{js,ts,jsx,tsx,mdx}",
],
theme: {
extend: {
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
'gradient-conic':
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
"gradient-conic":
"conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
},
},
},
plugins: [],
}
export default config
};
export default config;

0 comments on commit bcb664e

Please sign in to comment.