chore: use nextjs to make a demo

jeasonstudio · Jun 20, 2024 · 44e6525 · 44e6525
1 parent 790e739
commit 44e6525
Show file tree

Hide file tree

Showing 18 changed files with 4,926 additions and 180 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/README.md b/README.md
@@ -46,7 +46,7 @@ $ npm i ai chrome-ai
 
 ## Enable AI in Chrome
 
-Chrome built-in AI is a preview feature, you need to use chrome version 127 or greater, now in [dev](https://www.google.com/chrome/dev/?platform=mac&extra=devchannel) or [canary](https://www.google.com/chrome/canary/?platform=mac) channel, [may release on stable chanel at Jul 17, 2024](https://chromestatus.com/roadmap), if release schedule on time.
+Chrome built-in AI is a preview feature, you need to use chrome version 127 or greater, now in [dev](https://www.google.com/chrome/dev/?extra=devchannel) or [canary](https://www.google.com/chrome/canary/) channel, [may release on stable chanel at Jul 17, 2024](https://chromestatus.com/roadmap), if release schedule on time.
 
 After then, you should turn on these flags:
 * [chrome://flags/#prompt-api-for-gemini-nano](chrome://flags/#prompt-api-for-gemini-nano): `Enabled`

diff --git a/app/favicon.ico b/app/favicon.ico
diff --git a/app/globals.css b/app/globals.css
@@ -0,0 +1,60 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: none; /*240 5.9% 10%;*/
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: none; /*240 4.9% 83.9%;*/
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-family: var(--font-inter);
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Metadata } from 'next';
+import { ThemeProvider } from 'next-themes';
+import { Inter } from 'next/font/google';
+import { cn } from './utils';
+
+import './globals.css';
+
+const inter = Inter({
+  subsets: ['latin'],
+  variable: '--font-inter',
+});
+
+export const metadata: Metadata = {
+  title: 'Chrome AI',
+  description: 'Vercel AI provider for Chrome built-in model (Gemini Nano)',
+};
+
+const RootLayout: React.FC<React.PropsWithChildren> = ({ children }) => (
+  <html suppressHydrationWarning>
+    <head />
+    <body
+      className={cn(
+        'min-h-screen bg-background text-foreground',
+        inter.variable
+      )}
+    >
+      <ThemeProvider attribute="class" defaultTheme="system">
+        {children}
+      </ThemeProvider>
+    </body>
+  </html>
+);
+
+export default RootLayout;
diff --git a/app/page.tsx b/app/page.tsx
@@ -0,0 +1,44 @@
+'use client';
+
+import { useTheme } from 'next-themes';
+import React from 'react';
+
+const HomePage: React.FC<unknown> = () => {
+  return (
+    <div className="relative flex min-h-screen flex-col">
+      <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container flex h-14 max-w-screen-2xl items-center">
+          <div className="mr-4 hidden md:flex">
+            <a className="mr-6 flex items-center space-x-2" href="/">
+              <span className="hidden font-bold sm:inline-block">
+                Chainboard
+              </span>
+            </a>
+            <nav className="flex items-center gap-4 text-sm lg:gap-6">
+              <a
+                className="transition-colors hover:text-foreground/80 text-foreground/60"
+                href="/docs"
+              >
+                Docs
+              </a>
+            </nav>
+          </div>
+          <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
+            <nav className="flex items-center">
+              {/* <ThemeSwitcher className="inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 hover:bg-accent hover:text-accent-foreground h-9 py-2 w-9 px-0" /> */}
+            </nav>
+          </div>
+        </div>
+      </header>
+
+      <main className="container mx-auto grid gap-8 grid-cols-1">
+        <p className="leading-7 [&:not(:first-child)]:mt-6">
+          The shareable on-chain notebook
+        </p>
+        <div className="h-[800px]"></div>
+      </main>
+    </div>
+  );
+};
+
+export default HomePage;
diff --git a/app/utils.ts b/app/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/components.json b/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "default",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/app/components",
+    "utils": "@/app/utils"
+  }
+}
diff --git a/next-env.d.ts b/next-env.d.ts
@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.
diff --git a/next.config.mjs b/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/package.json b/package.json
@@ -10,11 +10,16 @@
       "require": "./dist/index.js"
     }
   },
+  "sideEffects": false,
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
+    "dev": "tsup --tsconfig=tsconfig.tsup.json --watch",
+    "build": "tsup --tsconfig=tsconfig.tsup.json",
     "test": "vitest",
     "test:coverage": "vitest --coverage",
+    "ui:add": "shadcn-ui add --overwrite",
+    "demo": "next dev",
+    "demo:build": "next build",
+    "lint": "next lint",
     "prepublishOnly": "npm run build"
   },
   "files": [
@@ -28,10 +33,28 @@
   },
   "devDependencies": {
     "@types/debug": "^4.1.12",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
     "@vitest/coverage-v8": "^1.6.0",
     "ai": "^3.1.31",
+    "autoprefixer": "^10.4.19",
+    "clsx": "^2.1.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.3",
+    "postcss": "^8.4.38",
+    "lucide-react": "^0.383.0",
+    "next": "14.2.3",
+    "next-themes": "^0.3.0",
+    "react": "^18",
+    "react-dom": "^18",
+    "shadcn-ui": "^0.8.0",
+    "tailwindcss": "^3.4.3",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss-animate": "^1.0.7",
     "tsup": "^8.1.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5",
+    "vercel": "^34.2.5",
     "vitest": "^1.6.0",
     "zod": "^3.23.8"
   }