refactor: extract hero photos to sanity settings

app/(main)/Photos.tsx

@@ -4,24 +4,7 @@ import { motion } from 'framer-motion'
 import Image from 'next/image'
 import React from 'react'
 
-import image5 from '~/assets/highlights/highlight-cali.jpeg'
-import image1 from '~/assets/highlights/highlight-cat.jpeg'
-import image3 from '~/assets/highlights/highlight-controller.jpg'
-import image6 from '~/assets/highlights/highlight-push.png'
-import image2 from '~/assets/highlights/highlight-workshop.jpg'
-import image4 from '~/assets/highlights/highlight-zolplay.jpg'
-
-const images = [image1, image2, image3, image4, image5, image6]
-const alts = [
- '我的猫躺在我的工作台桌子上的键盘旁边',
- '我在西雅图城市大学举办的技术演讲',
- 'Xbox 团队给我专属定制的控制器',
- '佐玩的办公室大厅，背景墙挂着一个黑色的佐玩氛围布',
- '我举着酒杯看着手机',
- '我在用 Ableton Push 制作电子乐',
-]
-
-export function Photos() {
+export function Photos({ photos }: { photos: string[] }) {
  const [width, setWidth] = React.useState(0)
  const [isCompact, setIsCompact] = React.useState(false)
  const expandedWidth = React.useMemo(() => width * 1.38, [width])
@@ -34,7 +17,7 @@ export function Photos() {
  return setWidth(window.innerWidth / 2 - 64)
  }
 
- setWidth(window.innerWidth / images.length - 4 * images.length)
+ setWidth(window.innerWidth / photos.length - 4 * photos.length)
  }
 
  window.addEventListener('resize', handleResize)
@@ -43,7 +26,7 @@ export function Photos() {
  return () => {
  window.removeEventListener('resize', handleResize)
  }
- }, [])
+ }, [photos.length])
 
  return (
  <motion.div
@@ -56,9 +39,9 @@ export function Photos() {
  }}
  >
  <div className="-my-4 flex w-full snap-x snap-proximity scroll-pl-4 justify-start gap-4 overflow-x-auto px-4 py-4 sm:gap-6 md:justify-center md:overflow-x-hidden md:px-0">
- {images.map((image, idx) => (
+ {photos.map((image, idx) => (
  <motion.div
- key={image.src}
+ key={idx}
  className="relative h-40 flex-none shrink-0 snap-start overflow-hidden rounded-xl bg-zinc-100 ring-2 ring-lime-800/20 dark:bg-zinc-800 dark:ring-lime-300/10 md:h-72 md:rounded-3xl"
  animate={{
  width,
@@ -79,7 +62,9 @@ export function Photos() {
  >
  <Image
  src={image}
- alt={alts[idx] ?? ''}
+ alt=""
+ width={500}
+ height={500}
  sizes="(min-width: 640px) 18rem, 11rem"
  className="pointer-events-none absolute inset-0 h-full w-full select-none object-cover"
  priority

app/(main)/page.tsx

@@ -7,14 +7,18 @@ import { Photos } from '~/app/(main)/Photos'
 import { Resume } from '~/app/(main)/Resume'
 import { PencilSwooshIcon } from '~/assets'
 import { Container } from '~/components/ui/Container'
+import { getSettings } from '~/sanity/queries'
 
-export default function BlogHomePage() {
+export default async function BlogHomePage() {
+ const settings = await getSettings()
  return (
  <>
  <Container className="mt-10">
  <Headline />
  </Container>
- <Photos />
+
+ {settings.heroPhotos && <Photos photos={settings.heroPhotos} />}
+
  <Container className="mt-24 md:mt-28">
  <div className="mx-auto grid max-w-xl grid-cols-1 gap-y-20 lg:max-w-none lg:grid-cols-2">
  <div className="flex flex-col gap-6 pt-6">

package.json

@@ -41,7 +41,7 @@
  "@sanity/code-input": "^4.1.3",
  "@sanity/image-url": "^1.0.2",
  "@sanity/ui": "^2.0.10",
- "@sanity/vision": "^3.32.0",
+ "@sanity/vision": "^3.33.0",
  "@splinetool/react-spline": "^2.2.6",
  "@tremor/react": "^3.2.3",
  "@upstash/ratelimit": "^1.0.1",
@@ -75,7 +75,7 @@
  "remark-gfm": "^3.0.1",
  "resend": "^3.2.0",
  "rss": "^1.2.2",
- "sanity": "^3.32.0",
+ "sanity": "^3.33.0",
  "sanity-plugin-media": "^2.2.5",
  "valtio": "^1.13.2",
  "zod": "^3.22.4"