Merge pull request #3 from ningowood/v0.2

Merge V0.2 to main #2: Introducing the future, beyond Spreadsheet Database Community
lifetable-ai · Jun 6, 2023 · fc855eb · fc855eb · vercel · Jun 6, 2023
2 parents b824326 + 2ae1103
commit fc855eb
Show file tree

Hide file tree

Showing 106 changed files with 7,009 additions and 4,718 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
-# [Ningowood](http://ningowood) v0.2.0: Add the missing community to the spreadsheet database ecology
+# [Ningowood](http://ningowood) v0.2.0: Add the missing all-in-one community to the spreadsheet database ecology
 
-![](./public/static/showcase-20221126.webp)
+![](./public/static/showcase-20230604.webp)
 
 ## Read the newest artitle
 
-[Ningowood v0.2.0: Add the missing community to the spreadsheet database ecology](./blogs/2023-0618-ningowood-v0_2.md): in writing...
+[Ningowood v0.2.0: Add the missing all-in-one community to the spreadsheet database ecology](./blogs/2023-0618-ningowood-v0_2.md): in writing...
 
 ## Webinar resource
 

diff --git a/ningowood.com/app/api/auth/[...nextauth]/route.ts b/ningowood.com/app/api/auth/[...nextauth]/route.ts
@@ -1,7 +1,8 @@
-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";
+import NextAuth, { NextAuthOptions } from "next-auth"
+import GoogleProvider from "next-auth/providers/google"
+import { PrismaAdapter } from "@next-auth/prisma-adapter"
+
+import prisma from "@/lib/prisma"
 
 export const authOptions: NextAuthOptions = {
   adapter: PrismaAdapter(prisma),
@@ -11,8 +12,8 @@ export const authOptions: NextAuthOptions = {
       clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
     }),
   ],
-};
+}
 
-const handler = NextAuth(authOptions);
+const handler = NextAuth(authOptions)
 
-export { handler as GET, handler as POST };
+export { handler as GET, handler as POST }
diff --git a/ningowood.com/app/fonts/index.ts b/ningowood.com/app/fonts/index.ts
@@ -1,12 +1,12 @@
-import localFont from "next/font/local";
-import { Inter } from "next/font/google";
+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"],
-});
+})
diff --git a/ningowood.com/app/layout.tsx b/ningowood.com/app/layout.tsx
@@ -1,45 +1,46 @@
-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";
+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",
+  title:
+    "Ningowood - Add the missing all-in-one community to the spreadsheet database ecology",
   description:
-    "Precedent is the all-in-one solution for your Next.js project. It includes a design system, authentication, analytics, and more.",
+    "Ningowood v0.2 is focus on adding the missing community to the spreadsheet database ecology.",
   twitter: {
     card: "summary_large_image",
-    title: "Precedent - Building blocks for your Next.js project",
+    title:
+      "Ningowood - Add the missing all-in-one community to the spreadsheet database ecology",
     description:
-      "Precedent is the all-in-one solution for your Next.js project. It includes a design system, authentication, analytics, and more.",
-    creator: "@steventey",
+      "Ningowood v0.2 is focus on adding the missing community to the spreadsheet database ecology.",
+    creator: "@hylerrix",
   },
-  metadataBase: new URL("https://precedent.dev"),
+  metadataBase: new URL("http://ningowood.com"),
   themeColor: "#FFF",
-};
+}
 
 export default async function RootLayout({
   children,
 }: {
-  children: React.ReactNode;
+  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">
+        <main className="flex min-h-screen w-full flex-col items-center justify-center pt-16 py-12">
           {children}
         </main>
         <Footer />
         <Analytics />
       </body>
     </html>
-  );
+  )
 }
diff --git a/ningowood.com/app/opengraph-image.tsx b/ningowood.com/app/opengraph-image.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable @next/next/no-img-element */
-import { ImageResponse } from "next/server";
+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 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());
+  ).then((res) => res.arrayBuffer())
 
   return new ImageResponse(
     (
@@ -56,5 +56,5 @@ export default async function OG() {
         },
       ],
     },
-  );
+  )
 }
diff --git a/ningowood.com/app/page.tsx b/ningowood.com/app/page.tsx
@@ -1,172 +1,18 @@
-import Card from "@/components/home/card";
-import Balancer from "react-wrap-balancer";
-import { DEPLOY_URL } from "@/lib/constants";
-import { Github, Twitter } from "@/components/shared/icons";
-import WebVitals from "@/components/home/web-vitals";
-import ComponentGrid from "@/components/home/component-grid";
-import Image from "next/image";
-import { nFormatter } from "@/lib/utils";
+import HomeIntroHeader from "@/components/home/home-Intro-header"
+import DashboardPage from "@/components/home/dashboard/page"
+import Balancer from "react-wrap-balancer"
+import FutureAppPreview from "@/components/home/future-app-preview"
 
 export default async function Home() {
-  const { stargazers_count: stars } = await fetch(
-    "https://api.github.com/repos/steven-tey/precedent",
-    {
-      ...(process.env.GITHUB_OAUTH_TOKEN && {
-        headers: {
-          Authorization: `Bearer ${process.env.GITHUB_OAUTH_TOKEN}`,
-          "Content-Type": "application/json",
-        },
-      }),
-      // data will revalidate every 60 seconds
-      next: { revalidate: 60 },
-    },
-  )
-    .then((res) => res.json())
-    .catch((e) => console.log(e));
-
   return (
     <>
-      <div className="z-10 w-full max-w-xl px-5 xl:px-0">
-        <a
-          href="https://twitter.com/steventey/status/1613928948915920896"
-          target="_blank"
-          rel="noreferrer"
-          className="mx-auto mb-5 flex max-w-fit animate-fade-up items-center justify-center space-x-2 overflow-hidden rounded-full bg-blue-100 px-7 py-2 transition-colors hover:bg-blue-200"
-        >
-          <Twitter className="h-5 w-5 text-[#1d9bf0]" />
-          <p className="text-sm font-semibold text-[#1d9bf0]">
-            Introducing Precedent
-          </p>
-        </a>
-        <h1
-          className="animate-fade-up bg-gradient-to-br from-black to-stone-500 bg-clip-text text-center font-display text-4xl font-bold tracking-[-0.02em] text-transparent opacity-0 drop-shadow-sm md:text-7xl md:leading-[5rem]"
-          style={{ animationDelay: "0.15s", animationFillMode: "forwards" }}
-        >
-          <Balancer>Building blocks for your Next project</Balancer>
-        </h1>
-        <p
-          className="mt-6 animate-fade-up text-center text-gray-500 opacity-0 md:text-xl"
-          style={{ animationDelay: "0.25s", animationFillMode: "forwards" }}
-        >
-          <Balancer>
-            An opinionated collection of components, hooks, and utilities for
-            your Next.js project.
-          </Balancer>
-        </p>
-        <div
-          className="mx-auto mt-6 flex animate-fade-up items-center justify-center space-x-5 opacity-0"
-          style={{ animationDelay: "0.3s", animationFillMode: "forwards" }}
-        >
-          <a
-            className="group flex max-w-fit items-center justify-center space-x-2 rounded-full border border-black bg-black px-5 py-2 text-sm text-white transition-colors hover:bg-white hover:text-black"
-            href={DEPLOY_URL}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <svg
-              className="h-4 w-4 group-hover:text-black"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <path
-                d="M12 4L20 20H4L12 4Z"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              />
-            </svg>
-            <p>Deploy to Vercel</p>
-          </a>
-          <a
-            className="flex max-w-fit items-center justify-center space-x-2 rounded-full border border-gray-300 bg-white px-5 py-2 text-sm text-gray-600 shadow-md transition-colors hover:border-gray-800"
-            href="https://github.com/steven-tey/precedent"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Github />
-            <p>
-              <span className="hidden sm:inline-block">Star on</span> GitHub{" "}
-              <span className="font-semibold">{nFormatter(stars)}</span>
-            </p>
-          </a>
-        </div>
-      </div>
-      <div className="my-10 grid w-full max-w-screen-xl animate-fade-up grid-cols-1 gap-5 px-5 md:grid-cols-3 xl:px-0">
-        {features.map(({ title, description, demo, large }) => (
-          <Card
-            key={title}
-            title={title}
-            description={description}
-            demo={
-              title === "Beautiful, reusable components" ? (
-                <ComponentGrid />
-              ) : (
-                demo
-              )
-            }
-            large={large}
-          />
-        ))}
-      </div>
+      {/**
+       * TODO: How to use server side components?
+       * In '../components' folder we connot use fetch?
+       */}
+      <HomeIntroHeader />
+      <DashboardPage />
+      <FutureAppPreview />
     </>
-  );
+  )
 }
-
-const features = [
-  {
-    title: "Beautiful, reusable components",
-    description:
-      "Pre-built beautiful, a11y-first components, powered by [Tailwind CSS](https://tailwindcss.com/), [Radix UI](https://www.radix-ui.com/), and [Framer Motion](https://framer.com/motion)",
-    large: true,
-  },
-  {
-    title: "Performance first",
-    description:
-      "Built on [Next.js](https://nextjs.org/) primitives like `@next/font` and `next/image` for stellar performance.",
-    demo: <WebVitals />,
-  },
-  {
-    title: "One-click Deploy",
-    description:
-      "Jumpstart your next project by deploying Precedent to [Vercel](https://vercel.com/) in one click.",
-    demo: (
-      <a href={DEPLOY_URL}>
-        <Image
-          src="https://vercel.com/button"
-          alt="Deploy with Vercel"
-          width={120}
-          height={30}
-          unoptimized
-        />
-      </a>
-    ),
-  },
-  {
-    title: "Built-in Auth + Database",
-    description:
-      "Precedent comes with authentication and database via [Auth.js](https://authjs.dev/) + [Prisma](https://prisma.io/)",
-    demo: (
-      <div className="flex items-center justify-center space-x-20">
-        <Image alt="Auth.js logo" src="/authjs.webp" width={50} height={50} />
-        <Image alt="Prisma logo" src="/prisma.svg" width={50} height={50} />
-      </div>
-    ),
-  },
-  {
-    title: "Hooks, utilities, and more",
-    description:
-      "Precedent offers a collection of hooks, utilities, and `@vercel/og`",
-    demo: (
-      <div className="grid grid-flow-col grid-rows-3 gap-10 p-10">
-        <span className="font-mono font-semibold">useIntersectionObserver</span>
-        <span className="font-mono font-semibold">useLocalStorage</span>
-        <span className="font-mono font-semibold">useScroll</span>
-        <span className="font-mono font-semibold">nFormatter</span>
-        <span className="font-mono font-semibold">capitalize</span>
-        <span className="font-mono font-semibold">truncate</span>
-      </div>
-    ),
-  },
-];
diff --git a/ningowood.com/app/sitemap.ts b/ningowood.com/app/sitemap.ts
@@ -1,22 +1,22 @@
-import { MetadataRoute } from "next";
-import prisma from "@/lib/prisma";
+import { MetadataRoute } from "next"
+import prisma from "@/lib/prisma"
 
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const users = await prisma.user.findMany({
     select: {
       id: true,
     },
     take: 1,
-  });
+  })
 
   return [
     {
-      url: "https://precedent.dev",
+      url: "http://ningowood.com",
       lastModified: new Date(),
     },
     ...users.map((user) => ({
-      url: `https://precedent.dev/${user.id}`,
+      url: `http://ningowood.com/${user.id}`,
       lastModified: new Date(),
     })),
-  ];
+  ]
 }
diff --git a/ningowood.com/components/home/card.tsx b/ningowood.com/components/home/card.tsx
@@ -1,17 +1,17 @@
-import { ReactNode } from "react";
-import ReactMarkdown from "react-markdown";
-import Balancer from "react-wrap-balancer";
+import { ReactNode } from "react"
+import ReactMarkdown from "react-markdown"
+import Balancer from "react-wrap-balancer"
 
 export default function Card({
   title,
   description,
   demo,
   large,
 }: {
-  title: string;
-  description: string;
-  demo: ReactNode;
-  large?: boolean;
+  title: string
+  description: string
+  demo: ReactNode
+  large?: boolean
 }) {
   return (
     <div
@@ -52,5 +52,5 @@ export default function Card({
         </div>
       </div>
     </div>
-  );
+  )
 }