chore: upgrade Next.js app to Precedent template

ningowood.com/.env.example

@@ -0,0 +1,16 @@
+### These env vars are for authentication & database to work. If you don't require them, feel free to enter dummy values for all these.
+
+# Create a free PostgreSQL database: https://vercel.com/postgres
+# If you're deploying this template with a Vercel Deploy Button, these will be configured automatically for you.
+POSTGRES_PRISMA_URL=
+POSTGRES_URL_NON_POOLING=
+
+# Follow the instructions here to create a Google OAuth app: https://refine.dev/blog/nextauth-google-github-authentication-nextjs/#for-googleprovider-make-sure-you-have-a-google-account
+GOOGLE_CLIENT_ID=
+GOOGLE_CLIENT_SECRET=
+
+# Only for production – generate one here: https://generate-secret.vercel.app/32
+NEXTAUTH_SECRET=
+
+## Only required for localhost
+NEXTAUTH_URL=http://localhost:3000

ningowood.com/.gitignore

@@ -23,13 +23,18 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# misc
+.vscode

ningowood.com/.prettierignore

@@ -0,0 +1,3 @@
+yarn.lock
+node_modules
+.next

ningowood.com/LICENSE.md

@@ -0,0 +1,5 @@
+We are in development now. Every folder would change any time.
+
+Each folder may have different LICENSE.
+
+Now feel free to take any code as you wish with no concerned, but we guarantee no responsibility either.

ningowood.com/README.md

@@ -1,34 +1,90 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+<a href="https://precedent.dev">
+  <img alt="Precedent – Building blocks for your Next project" src="https://precedent.dev/opengraph-image">
+  <h1 align="center">Precedent</h1>
+</a>
 
-## Getting Started
+<p align="center">
+  Building blocks for your Next project
+</p>
 
-First, run the development server:
+<p align="center">
+  <a href="https://twitter.com/steventey">
+    <img src="https://img.shields.io/twitter/follow/steventey?style=flat&label=steventey&logo=twitter&color=0bf&logoColor=fff" alt="Steven Tey Twitter follower count" />
+  </a>
+  <a href="https://github.com/steven-tey/precedent">
+    <img src="https://img.shields.io/github/stars/steven-tey/precedent?label=steven-tey%2Fprecedent" alt="Precedent repo star count" />
+  </a>
+</p>
+
+<p align="center">
+  <a href="#introduction"><strong>Introduction</strong></a> ·
+  <a href="#one-click-deploy"><strong>One-click Deploy</strong></a> ·
+  <a href="#tech-stack--features"><strong>Tech Stack + Features</strong></a> ·
+  <a href="#author"><strong>Author</strong></a>
+</p>
+<br/>
+
+## Introduction
+
+Precedent is an opinionated collection of components, hooks, and utilities for your Next.js project.
+
+## One-click Deploy
+
+You can deploy this template to Vercel with the button below:
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent&project-name=precedent&repository-name=precedent&demo-title=Precedent&demo-description=An%20opinionated%20collection%20of%20components%2C%20hooks%2C%20and%20utilities%20for%20your%20Next%20project.&demo-url=https%3A%2F%2Fprecedent.dev&demo-image=https%3A%2F%2Fprecedent.dev%2Fopengraph-image&env=GOOGLE_CLIENT_ID,GOOGLE_CLIENT_SECRET,NEXTAUTH_SECRET&envDescription=How%20to%20get%20these%20env%20variables%3A&envLink=https%3A%2F%2Fgithub.com%2Fsteven-tey%2Fprecedent%2Fblob%2Fmain%2F.env.example&stores=%5B%7B"type"%3A"postgres"%7D%5D)
+
+You can also clone & create this repo locally with the following command:
 
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
+npx create-next-app precedent --example "https://github.com/steven-tey/precedent"
 ```
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+## Tech Stack + Features
+
+https://user-images.githubusercontent.com/28986134/212368288-12f41e37-aa8c-4e0a-a542-cf6d23410a65.mp4
+
+### Frameworks
+
+- [Next.js](https://nextjs.org/) – React framework for building performant apps with the best developer experience
+- [Auth.js](https://authjs.dev/) – Handle user authentication with ease with providers like Google, Twitter, GitHub, etc.
+- [Prisma](https://www.prisma.io/) – Typescript-first ORM for Node.js
+
+### Platforms
+
+- [Vercel](https://vercel.com/) – Easily preview & deploy changes with git
+- [Vercel Postgres](https://vercel.com/postgres) – Serverless Postgres at the Edge
+
+### UI
 
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+- [Tailwind CSS](https://tailwindcss.com/) – Utility-first CSS framework for rapid UI development
+- [Radix](https://www.radix-ui.com/) – Primitives like modal, popover, etc. to build a stellar user experience
+- [Framer Motion](https://framer.com/motion) – Motion library for React to animate components with ease
+- [Lucide](https://lucide.dev/) – Beautifully simple, pixel-perfect icons
+- [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) – Optimize custom fonts and remove external network requests for improved performance
+- [`ImageResponse`](https://beta.nextjs.org/docs/api-reference/image-response) – Generate dynamic Open Graph images at the edge
+- [`react-wrap-balancer`](https://github.com/shuding/react-wrap-balancer) – Simple React component that makes titles more readable
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+### Hooks and Utilities
 
-## Learn More
+- `useIntersectionObserver` –  React hook to observe when an element enters or leaves the viewport
+- `useLocalStorage` – Persist data in the browser's local storage
+- `useScroll` – React hook to observe scroll position ([example](https://github.com/steven-tey/precedent/blob/main/components/layout/navbar.tsx#L12))
+- `nFormatter` – Format numbers with suffixes like `1.2k` or `1.2M`
+- `capitalize` – Capitalize the first letter of a string
+- `truncate` – Truncate a string to a specified length
+- [`use-debounce`](https://www.npmjs.com/package/use-debounce) – Debounce a function call / state update
 
-To learn more about Next.js, take a look at the following resources:
+### Code Quality
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+- [TypeScript](https://www.typescriptlang.org/) – Static type checker for end-to-end typesafety
+- [Prettier](https://prettier.io/) – Opinionated code formatter for consistent code style
+- [ESLint](https://eslint.org/) – Pluggable linter for Next.js and TypeScript
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+### Miscellaneous
 
-## Deploy on Vercel
+- [Vercel Analytics](https://vercel.com/analytics) – Track unique visitors, pageviews, and more in a privacy-friendly way
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+## Author
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+- Steven Tey ([@steventey](https://twitter.com/steventey))

ningowood.com/app/api/auth/[...nextauth]/route.ts

@@ -0,0 +1,18 @@
+import NextAuth, { NextAuthOptions } from "next-auth";
+import { PrismaAdapter } from "@next-auth/prisma-adapter";
+import prisma from "@/lib/prisma";
+import GoogleProvider from "next-auth/providers/google";
+
+export const authOptions: NextAuthOptions = {
+  adapter: PrismaAdapter(prisma),
+  providers: [
+    GoogleProvider({
+      clientId: process.env.GOOGLE_CLIENT_ID as string,
+      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
+    }),
+  ],
+};
+
+const handler = NextAuth(authOptions);
+
+export { handler as GET, handler as POST };

ningowood.com/app/fonts/index.ts

@@ -0,0 +1,12 @@
+import localFont from "next/font/local";
+import { Inter } from "next/font/google";
+
+export const sfPro = localFont({
+  src: "./SF-Pro-Display-Medium.otf",
+  variable: "--font-sf",
+});
+
+export const inter = Inter({
+  variable: "--font-inter",
+  subsets: ["latin"],
+});

ningowood.com/app/globals.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

ningowood.com/app/layout.tsx

@@ -0,0 +1,45 @@
+import "./globals.css";
+import { Analytics } from "@vercel/analytics/react";
+import cx from "classnames";
+import { sfPro, inter } from "./fonts";
+import Nav from "@/components/layout/nav";
+import Footer from "@/components/layout/footer";
+import { Suspense } from "react";
+
+export const metadata = {
+  title: "Precedent - Building blocks for your Next.js project",
+  description:
+    "Precedent is the all-in-one solution for your Next.js project. It includes a design system, authentication, analytics, and more.",
+  twitter: {
+    card: "summary_large_image",
+    title: "Precedent - Building blocks for your Next.js project",
+    description:
+      "Precedent is the all-in-one solution for your Next.js project. It includes a design system, authentication, analytics, and more.",
+    creator: "@steventey",
+  },
+  metadataBase: new URL("https://precedent.dev"),
+  themeColor: "#FFF",
+};
+
+export default async function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body className={cx(sfPro.variable, inter.variable)}>
+        <div className="fixed h-screen w-full bg-gradient-to-br from-indigo-50 via-white to-cyan-100" />
+        <Suspense fallback="...">
+          {/* @ts-expect-error Server Component */}
+          <Nav />
+        </Suspense>
+        <main className="flex min-h-screen w-full flex-col items-center justify-center py-32">
+          {children}
+        </main>
+        <Footer />
+        <Analytics />
+      </body>
+    </html>
+  );
+}

ningowood.com/app/opengraph-image.tsx

@@ -0,0 +1,60 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from "next/server";
+
+export const runtime = "edge";
+export const alt = "Precedent - Building blocks for your Next.js project";
+export const contentType = "image/png";
+
+export default async function OG() {
+  const sfPro = await fetch(
+    new URL("./fonts/SF-Pro-Display-Medium.otf", import.meta.url),
+  ).then((res) => res.arrayBuffer());
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "white",
+          backgroundImage:
+            "linear-gradient(to bottom right, #E0E7FF 25%, #ffffff 50%, #CFFAFE 75%)",
+        }}
+      >
+        <img
+          src={new URL("../public/logo.png", import.meta.url).toString()}
+          alt="Precedent Logo"
+          tw="w-20 h-20 mb-4 opacity-95"
+        />
+        <h1
+          style={{
+            fontSize: "100px",
+            fontFamily: "SF Pro",
+            background:
+              "linear-gradient(to bottom right, #000000 21.66%, #78716c 86.47%)",
+            backgroundClip: "text",
+            color: "transparent",
+            lineHeight: "5rem",
+            letterSpacing: "-0.02em",
+          }}
+        >
+          Precedent
+        </h1>
+      </div>
+    ),
+    {
+      width: 1200,
+      height: 630,
+      fonts: [
+        {
+          name: "SF Pro",
+          data: sfPro,
+        },
+      ],
+    },
+  );
+}