feat: init sanity

Chaoslyons · May 8, 2023 · fd3162d · fd3162d
1 parent 28c5693
commit fd3162d
Show file tree

Hide file tree

Showing 30 changed files with 869 additions and 353 deletions.
diff --git a/components/layouts/Footer.tsx → app/(blog)/Footer.tsx b/components/layouts/Footer.tsx → app/(blog)/Footer.tsx
@@ -1,5 +1,5 @@
 import Link from 'next/link'
-import React, { Suspense } from 'react'
+import React from 'react'
 
 import { CursorClickIcon } from '~/components/icons/CursorClickIcon'
 import { UsersIcon } from '~/components/icons/UsersIcon'
@@ -127,12 +127,14 @@ export function Footer() {
  </Container.Inner>
  <Container.Inner className="mt-6">
  <div className="flex flex-col items-center justify-start gap-2 sm:flex-row">
- <Suspense>
+ <React.Suspense>
+ {/* @ts-expect-error Async Server Component */}
  <TotalPageViews />
- </Suspense>
- <Suspense>
+ </React.Suspense>
+ <React.Suspense>
+ {/* @ts-expect-error Async Server Component */}
  <LastVisitorInfo />
- </Suspense>
+ </React.Suspense>
  </div>
  </Container.Inner>
  </div>

diff --git a/components/layouts/Header.tsx → app/(blog)/Header.tsx b/components/layouts/Header.tsx → app/(blog)/Header.tsx
@@ -9,9 +9,9 @@ import {
 import { usePathname } from 'next/navigation'
 import React from 'react'
 
-import { ThemeSwitcher } from '~/app/ThemeSwitcher'
+import { NavigationBar } from '~/app/(blog)/NavigationBar'
+import { ThemeSwitcher } from '~/app/(blog)/ThemeSwitcher'
 import { Avatar } from '~/components/Avatar'
-import { NavigationBar } from '~/components/layouts/NavigationBar'
 import { Container } from '~/components/ui/Container'
 import { clamp } from '~/lib/math'
 

diff --git a/app/Headline.tsx → app/(blog)/Headline.tsx b/app/Headline.tsx → app/(blog)/Headline.tsx
diff --git a/components/layouts/NavigationBar.tsx → app/(blog)/NavigationBar.tsx b/components/layouts/NavigationBar.tsx → app/(blog)/NavigationBar.tsx
diff --git a/app/Newsletter.tsx → app/(blog)/Newsletter.tsx b/app/Newsletter.tsx → app/(blog)/Newsletter.tsx
diff --git a/app/Photos.tsx → app/(blog)/Photos.tsx b/app/Photos.tsx → app/(blog)/Photos.tsx
diff --git a/app/Resume.tsx → app/(blog)/Resume.tsx b/app/Resume.tsx → app/(blog)/Resume.tsx
diff --git a/app/ThemeProvider.tsx → app/(blog)/ThemeProvider.tsx b/app/ThemeProvider.tsx → app/(blog)/ThemeProvider.tsx
diff --git a/app/ThemeSwitcher.tsx → app/(blog)/ThemeSwitcher.tsx b/app/ThemeSwitcher.tsx → app/(blog)/ThemeSwitcher.tsx
diff --git a/app/_actions.ts → app/(blog)/_actions.ts b/app/_actions.ts → app/(blog)/_actions.ts
diff --git a/app/about/page.tsx → app/(blog)/about/page.tsx b/app/about/page.tsx → app/(blog)/about/page.tsx
diff --git a/app/(blog)/layout.tsx b/app/(blog)/layout.tsx
@@ -0,0 +1,38 @@
+import { Analytics } from '@vercel/analytics/react'
+
+import { Footer } from '~/app/(blog)/Footer'
+import { Header } from '~/app/(blog)/Header'
+import { ThemeProvider } from '~/app/(blog)/ThemeProvider'
+
+export default function BlogLayout({
+ children,
+}: {
+ children: React.ReactNode
+}) {
+ return (
+ <>
+ <div className="pointer-events-none fixed inset-0 select-none bg-[url('/grid-black.svg')] bg-top bg-repeat dark:bg-[url('/grid.svg')]" />
+ <span className="pointer-events-none fixed top-0 block h-[800px] w-full select-none bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(5,5,5,0.045)_0%,rgba(0,0,0,0)_100%)] dark:bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(255,255,255,0.09)_0%,rgba(255,255,255,0)_100%)]" />
+ <ThemeProvider
+ attribute="class"
+ defaultTheme="system"
+ enableSystem
+ disableTransitionOnChange
+ >
+ <div className="fixed inset-0 flex justify-center sm:px-8">
+ <div className="flex w-full max-w-7xl lg:px-8">
+ <div className="w-full bg-zinc-50/90 ring-1 ring-zinc-100 dark:bg-zinc-900/80 dark:ring-zinc-400/20" />
+ </div>
+ </div>
+
+ <div className="relative text-zinc-800 dark:text-zinc-200">
+ <Header />
+ <main>{children}</main>
+ <Footer />
+ </div>
+ </ThemeProvider>
+
+ <Analytics />
+ </>
+ )
+}
diff --git a/app/page.tsx → app/(blog)/page.tsx b/app/page.tsx → app/(blog)/page.tsx
@@ -1,10 +1,10 @@
-import { Headline } from '~/app/Headline'
-import { Newsletter } from '~/app/Newsletter'
-import { Photos } from '~/app/Photos'
-import { Resume } from '~/app/Resume'
+import { Headline } from '~/app/(blog)/Headline'
+import { Newsletter } from '~/app/(blog)/Newsletter'
+import { Photos } from '~/app/(blog)/Photos'
+import { Resume } from '~/app/(blog)/Resume'
 import { Container } from '~/components/ui/Container'
 
-export default function HomePage() {
+export default function BlogHomePage() {
  return (
  <>
  <Container className="mt-10">

diff --git a/app/projects/page.tsx → app/(blog)/projects/page.tsx b/app/projects/page.tsx → app/(blog)/projects/page.tsx
diff --git a/app/app.d.ts b/app/app.d.ts
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,11 +1,7 @@
 import '~/app/globals.css'
 
-import { Analytics } from '@vercel/analytics/react'
 import { type Metadata } from 'next'
 
-import { ThemeProvider } from '~/app/ThemeProvider'
-import { Footer } from '~/components/layouts/Footer'
-import { Header } from '~/components/layouts/Header'
 import { sansFont } from '~/lib/font'
 
 const title = 'Cali Castle | 开发者、设计师、细节控、创始人'
@@ -77,30 +73,7 @@ export default function RootLayout({
  className={`${sansFont.variable} m-0 h-full p-0 font-sans antialiased`}
  suppressHydrationWarning
  >
- <body className="flex h-full flex-col">
- <div className="pointer-events-none fixed inset-0 select-none bg-[url('/grid-black.svg')] bg-top bg-repeat dark:bg-[url('/grid.svg')]" />
- <span className="pointer-events-none fixed top-0 block h-[800px] w-full select-none bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(5,5,5,0.045)_0%,rgba(0,0,0,0)_100%)] dark:bg-[radial-gradient(103.72%_46.58%_at_50%_0%,rgba(255,255,255,0.09)_0%,rgba(255,255,255,0)_100%)]" />
- <ThemeProvider
- attribute="class"
- defaultTheme="system"
- enableSystem
- disableTransitionOnChange
- >
- <div className="fixed inset-0 flex justify-center sm:px-8">
- <div className="flex w-full max-w-7xl lg:px-8">
- <div className="w-full bg-zinc-50/90 ring-1 ring-zinc-100 dark:bg-zinc-900/80 dark:ring-zinc-400/20" />
- </div>
- </div>
-
- <div className="relative text-zinc-800 dark:text-zinc-200">
- <Header />
- <main>{children}</main>
- <Footer />
- </div>
- </ThemeProvider>
-
- <Analytics />
- </body>
+ <body className="flex h-full flex-col">{children}</body>
  </html>
  )
 }
diff --git a/app/studio/[[...index]]/page.tsx b/app/studio/[[...index]]/page.tsx
@@ -0,0 +1,18 @@
+'use client'
+
+/**
+ * This route is responsible for the built-in authoring environment using Sanity Studio.
+ * All routes under your studio path is handled by this file using Next.js' catch-all routes:
+ * https://nextjs.org/docs/routing/dynamic-routes#catch-all-routes
+ *
+ * You can learn more about the next-sanity package here:
+ * https://github.com/sanity-io/next-sanity
+ */
+
+import { NextStudio } from 'next-sanity/studio'
+
+import config from '~/sanity.config'
+
+export default function StudioPage() {
+ return <NextStudio config={config} />
+}
diff --git a/env.mjs b/env.mjs
@@ -17,6 +17,8 @@ const server = z.object({
 
 const client = z.object({
  NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: z.string().min(1),
+ NEXT_PUBLIC_SANITY_PROJECT_ID: z.string().min(1),
+ NEXT_PUBLIC_SANITY_DATASET: z.string().min(1),
 })
 
 /**
@@ -37,6 +39,8 @@ const processEnv = {
  VERCEL_ENV: process.env.VERCEL_ENV,
  UPSTASH_REDIS_REST_URL: process.env.UPSTASH_REDIS_REST_URL,
  UPSTASH_REDIS_REST_TOKEN: process.env.UPSTASH_REDIS_REST_TOKEN,
+ NEXT_PUBLIC_SANITY_PROJECT_ID: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
+ NEXT_PUBLIC_SANITY_DATASET: process.env.NEXT_PUBLIC_SANITY_DATASET,
 }
 
 // Don't touch the part below

diff --git a/middleware.ts b/middleware.ts
@@ -6,7 +6,7 @@ import countries from '~/lib/countries.json'
 import { redis } from '~/lib/redis'
 
 export const config = {
- matcher: ['/((?!api|_next|.*\\..*).*)'],
+ matcher: ['/((?!api|_next|studio|.*\\..*).*)'],
 }
 
 export async function middleware(req: NextRequest) {

diff --git a/package.json b/package.json
@@ -4,6 +4,7 @@
  "private": true,
  "scripts": {
  "dev": "next dev",
+ "dev:turbo": "next dev --turbo",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
@@ -17,14 +18,15 @@
  "@radix-ui/react-select": "^1.2.1",
  "@radix-ui/react-tooltip": "^1.0.5",
  "@sanity/image-url": "^1.0.2",
+ "@sanity/vision": "3",
  "@upstash/redis": "^1.20.6",
  "@vercel/analytics": "^1.0.1",
  "@vercel/edge-config": "^0.1.9",
  "@zolplay/react": "^0.5.1",
  "@zolplay/utils": "^1.3.4",
  "dayjs": "^1.11.7",
- "framer-motion": "^10.12.7",
- "next": "^13.4.0",
+ "framer-motion": "^10.12.8",
+ "next": "^13.4.1",
  "next-sanity": "^4.3.2",
  "next-themes": "^0.2.1",
  "react": "^18.2.0",
@@ -38,20 +40,21 @@
  "rehype-pretty-code": "^0.9.5",
  "rehype-slug": "^5.1.0",
  "remark-gfm": "^3.0.1",
+ "sanity": "3",
  "zod": "^3.21.4"
  },
  "devDependencies": {
  "@tailwindcss/typography": "^0.5.9",
  "@types/eslint": "^8.37.0",
- "@types/node": "^18.16.3",
+ "@types/node": "^18.16.5",
  "@types/prettier": "^2.7.2",
- "@types/react": "^18.2.5",
- "@types/react-dom": "^18.2.3",
+ "@types/react": "^18.2.6",
+ "@types/react-dom": "^18.2.4",
  "@typescript-eslint/eslint-plugin": "^5.59.2",
  "@typescript-eslint/parser": "^5.59.2",
  "autoprefixer": "^10.4.14",
- "eslint": "^8.39.0",
- "eslint-config-next": "^13.4.0",
+ "eslint": "^8.40.0",
+ "eslint-config-next": "^13.4.1",
  "eslint-config-turbo": "^1.9.3",
  "eslint-plugin-prettier": "^4.2.1",
  "eslint-plugin-simple-import-sort": "^10.0.0",
@@ -62,6 +65,6 @@
  "prettier-plugin-tailwindcss": "^0.2.8",
  "tailwindcss": "^3.3.2",
  "turbo": "^1.9.3",
- "typescript": "5.1.0-beta"
+ "typescript": "^5.0.4"
  }
 }