chore: base configuration

SameerJadav · Oct 31, 2023 · bf4f7ed · bf4f7ed
1 parent c42170a
commit bf4f7ed
Show file tree

Hide file tree

Showing 10 changed files with 127 additions and 139 deletions.
diff --git a/package.json b/package.json
@@ -17,6 +17,7 @@
   "dependencies": {
     "@paralleldrive/cuid2": "^2.2.2",
     "@planetscale/database": "^1.11.0",
+    "@radix-ui/colors": "^3.0.0",
     "@t3-oss/env-nextjs": "^0.7.1",
     "@tanstack/react-query": "^5.4.3",
     "@trpc/client": "^10.43.0",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/_components/create-post.tsx b/src/app/_components/create-post.tsx
diff --git a/src/app/fonts/GeistVF.woff2 b/src/app/fonts/GeistVF.woff2
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,27 +1,80 @@
-import { Inter } from "next/font/google";
+import type { Metadata } from "next";
+import localFont from "next/font/local";
 import { headers } from "next/headers";
+import { SITE } from "~/config";
 import { TRPCReactProvider } from "~/trpc/react";
 import "~/styles/globals.css";
 
-const inter = Inter({
-  subsets: ["latin"],
-  variable: "--font-sans",
+const geist = localFont({
+  src: "./fonts/GeistVF.woff2",
+  display: "swap",
+  variable: "--font-geist",
 });
 
-export const metadata = {
-  title: "Create T3 App",
-  description: "Generated by create-t3-app",
+const title = SITE.name;
+const description = SITE.description;
+const author = SITE.author;
+const twitterId = SITE.twitterId;
+const url = SITE.url;
+const image = SITE.image;
+
+export const metadata: Metadata = {
+  title: title,
+  description: description,
+  authors: [{ name: author, url: url }],
+  creator: author,
   icons: [{ rel: "icon", url: "/favicon.ico" }],
+  themeColor: [
+    { media: "(prefers-color-scheme: light)", color: "#111111" },
+    { media: "(prefers-color-scheme: dark)", color: "#111111" },
+  ],
+  openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: url,
+    title: title,
+    description: description,
+    siteName: title,
+    images: [
+      {
+        url: image,
+        width: 1200,
+        height: 630,
+        alt: title,
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: title,
+    description: description,
+    images: [image],
+    creator: twitterId,
+    site: twitterId,
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-video-preview": -1,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+    },
+  },
+  manifest: `${url}/site.webmanifest`,
+  alternates: { canonical: url },
 };
 
-export default function RootLayout({
-  children,
-}: {
+interface RootLayoutProps {
   children: React.ReactNode;
-}) {
+}
+
+export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en">
-      <body className={`font-sans ${inter.variable}`}>
+      <body className={geist.variable}>
         <TRPCReactProvider headers={headers()}>{children}</TRPCReactProvider>
       </body>
     </html>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,64 +1,7 @@
-import Link from "next/link";
-import { api } from "~/trpc/server";
-import { CreatePost } from "~/app/_components/create-post";
-
-export default async function Home() {
-  const hello = await api.post.hello.query({ text: "from tRPC" });
-
+export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c] text-white">
-      <div className="container flex flex-col items-center justify-center gap-12 px-4 py-16 ">
-        <h1 className="text-5xl font-extrabold tracking-tight sm:text-[5rem]">
-          Create <span className="text-[hsl(280,100%,70%)]">T3</span> App
-        </h1>
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:gap-8">
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-            href="https://create.t3.gg/en/usage/first-steps"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">First Steps →</h3>
-            <div className="text-lg">
-              Just the basics - Everything you need to know to set up your
-              database and authentication.
-            </div>
-          </Link>
-          <Link
-            className="flex max-w-xs flex-col gap-4 rounded-xl bg-white/10 p-4 hover:bg-white/20"
-            href="https://create.t3.gg/en/introduction"
-            target="_blank"
-          >
-            <h3 className="text-2xl font-bold">Documentation →</h3>
-            <div className="text-lg">
-              Learn more about Create T3 App, the libraries it uses, and how to
-              deploy it.
-            </div>
-          </Link>
-        </div>
-        <div className="flex flex-col items-center gap-2">
-          <p className="text-2xl text-white">
-            {hello ? hello.greeting : "Loading tRPC query..."}
-          </p>
-        </div>
-
-        <CrudShowcase />
-      </div>
+    <main>
+      <h1>Guestbook</h1>
     </main>
   );
 }
-
-async function CrudShowcase() {
-  const latestPost = await api.post.getLatest.query();
-
-  return (
-    <div className="w-full max-w-xs">
-      {latestPost ? (
-        <p className="truncate">Your most recent post: {latestPost.name}</p>
-      ) : (
-        <p>You have no posts yet.</p>
-      )}
-
-      <CreatePost />
-    </div>
-  );
-}
diff --git a/src/config.ts b/src/config.ts
@@ -0,0 +1,14 @@
+export const SITE = {
+  name: "Guestbook",
+  description: "A simple and user-friendly guestbook app.",
+  url: "https://guestbook.sameerjadav.me",
+  image: "https://guestbook.sameerjadav.me/og.png",
+  author: "Sameer Jadav",
+  authorUrl: "https://sameerjadav.me",
+  twitterId: "@SameerJadav_",
+  links: {
+    twitter: "https://twitter.com/SameerJadav_",
+    github: "https://github.com/SameerJadav/guestbook",
+    mail: "mailto:sameerjdav001@gmail.com",
+  },
+};
diff --git a/src/server/api/routers/post.ts b/src/server/api/routers/post.ts
@@ -1,29 +1,8 @@
-import { z } from "zod";
 import { createTRPCRouter, publicProcedure } from "~/server/api/trpc";
-import { posts } from "~/server/db/schema";
 
 export const postRouter = createTRPCRouter({
-  hello: publicProcedure
-    .input(z.object({ text: z.string() }))
-    .query(({ input }) => {
-      return {
-        greeting: `Hello ${input.text}`,
-      };
-    }),
-
-  create: publicProcedure
-    .input(z.object({ name: z.string().min(1) }))
-    .mutation(async ({ ctx, input }) => {
-      // simulate a slow db call
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-
-      await ctx.db.insert(posts).values({
-        name: input.name,
-      });
-    }),
-
-  getLatest: publicProcedure.query(({ ctx }) => {
-    return ctx.db.query.posts.findFirst({
+  getAll: publicProcedure.query(({ ctx }) => {
+    return ctx.db.query.posts.findMany({
       orderBy: (posts, { desc }) => [desc(posts.createdAt)],
     });
   }),

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -1,3 +1,16 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+:root {
+  color-scheme: light dark;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  @apply bg-gray-1 text-gray-12 font-geist antialiased;
+  text-rendering: optimizeLegibility;
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,14 +1,34 @@
-import { type Config } from "tailwindcss";
+import { grayDark } from "@radix-ui/colors";
+import type { Config } from "tailwindcss";
 import { fontFamily } from "tailwindcss/defaultTheme";
 
 export default {
   content: ["./src/**/*.tsx"],
   theme: {
     extend: {
       fontFamily: {
-        sans: ["var(--font-sans)", ...fontFamily.sans],
+        geist: ["var(--font-geist)", ...fontFamily.sans],
+      },
+      colors: {
+        gray: {
+          1: grayDark.gray1,
+          2: grayDark.gray2,
+          3: grayDark.gray3,
+          4: grayDark.gray4,
+          5: grayDark.gray5,
+          6: grayDark.gray6,
+          7: grayDark.gray7,
+          8: grayDark.gray8,
+          9: grayDark.gray9,
+          10: grayDark.gray10,
+          11: grayDark.gray11,
+          12: grayDark.gray12,
+        },
       },
     },
   },
+  future: {
+    hoverOnlyWhenSupported: true,
+  },
   plugins: [],
 } satisfies Config;