feat: implement BlogPosts on home

app/(blog)/Header.tsx → app/(main)/Header.tsx

@@ -9,8 +9,8 @@ import {
 import { usePathname } from 'next/navigation'
 import React from 'react'
 
-import { NavigationBar } from '~/app/(blog)/NavigationBar'
-import { ThemeSwitcher } from '~/app/(blog)/ThemeSwitcher'
+import { NavigationBar } from '~/app/(main)/NavigationBar'
+import { ThemeSwitcher } from '~/app/(main)/ThemeSwitcher'
 import { Avatar } from '~/components/Avatar'
 import { Container } from '~/components/ui/Container'
 import { clamp } from '~/lib/math'

app/(blog)/Newsletter.tsx → app/(main)/Newsletter.tsx

@@ -75,9 +75,9 @@ export function Newsletter() {
  onSubmit={handleSubmit(onSubmit)}
  >
  <input type="hidden" className="hidden" {...register('formId')} />
- <h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
- <TiltedSendIcon className="h-6 w-6 flex-none" />
- <span className="ml-3">动态更新</span>
+ <h2 className="flex items-center text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+ <TiltedSendIcon className="h-5 w-5 flex-none" />
+ <span className="ml-2">动态更新</span>
  </h2>
  <p className="mt-2 text-sm text-zinc-600 dark:text-zinc-400">
  获取我最新发布的内容通知，随时可以取消订阅。

app/(blog)/Resume.tsx → app/(main)/Resume.tsx

@@ -63,9 +63,9 @@ function getRoleDate(date: Resume['start'] | Resume['end'], label = true) {
 export function Resume() {
  return (
  <div className="rounded-2xl border border-zinc-100 p-6 dark:border-zinc-700/40">
- <h2 className="flex text-sm font-semibold text-zinc-900 dark:text-zinc-100">
- <BriefcaseIcon className="h-6 w-6 flex-none" />
- <span className="ml-3">工作经历</span>
+ <h2 className="flex items-center text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+ <BriefcaseIcon className="h-5 w-5 flex-none" />
+ <span className="ml-2">工作经历</span>
  </h2>
  <ol className="mt-6 space-y-4">
  {resume.map((role, roleIndex) => (

app/(main)/blog/BlogPosts.tsx

@@ -0,0 +1,70 @@
+import Image from 'next/image'
+import Balancer from 'react-wrap-balancer'
+
+import {
+ CalendarIcon,
+ CursorClickIcon,
+ HourglassIcon,
+ ScriptIcon,
+} from '~/assets'
+
+const fakePosts = [
+ {
+ title: '陈皓：以磊落之心，点亮科技之光',
+ publishedAt: '2023-05-15',
+ readingTime: 15,
+ mainImage:
+ 'https://cdn.sanity.io/images/i81ys0da/production/a6b97145fdb5e4887ae18609b608980b5428957d-1200x630.jpg',
+ category: '随笔',
+ },
+]
+export function BlogPosts() {
+ return (
+ <>
+ {fakePosts.map(({ title, mainImage, publishedAt, category }, idx) => (
+ <div
+ key={idx}
+ className="group relative flex aspect-[240/135] w-full flex-col justify-end gap-16 rounded-3xl bg-white p-6 transition-shadow after:absolute after:inset-0 after:rounded-3xl after:bg-[linear-gradient(180deg,transparent,rgba(0,0,0,.7)_55%,#000_82.5%,#000)] after:opacity-100 after:ring-2 after:ring-zinc-200 after:transition-opacity hover:shadow-xl hover:after:opacity-70 dark:after:ring-zinc-800/70"
+ >
+ <Image
+ src={mainImage}
+ alt=""
+ className="rounded-[22px] object-cover"
+ fill
+ />
+ <span className="z-10 flex w-full flex-col gap-2">
+ <h2 className="text-xl font-bold tracking-tight text-zinc-50">
+ <Balancer>{title}</Balancer>
+ </h2>
+ <span className="flex items-center justify-between">
+ <span className="inline-flex items-center space-x-3">
+ <span className="inline-flex items-center space-x-1 text-sm font-medium text-zinc-400">
+ <CalendarIcon />
+ <span>
+ {Intl.DateTimeFormat('zh').format(new Date(publishedAt))}
+ </span>
+ </span>
+
+ <span className="inline-flex items-center space-x-1 text-sm font-medium text-zinc-400">
+ <ScriptIcon />
+ <span>{category}</span>
+ </span>
+ </span>
+ <span className="inline-flex items-center space-x-3 text-xs font-medium text-zinc-300/60">
+ <span className="inline-flex items-center space-x-1">
+ <CursorClickIcon />
+ <span>15k</span>
+ </span>
+
+ <span className="inline-flex items-center space-x-1">
+ <HourglassIcon />
+ <span>15分钟</span>
+ </span>
+ </span>
+ </span>
+ </span>
+ </div>
+ ))}
+ </>
+ )
+}

app/(blog)/layout.tsx → app/(main)/layout.tsx

@@ -1,8 +1,8 @@
 import { Analytics } from '@vercel/analytics/react'
 
-import { Footer } from '~/app/(blog)/Footer'
-import { Header } from '~/app/(blog)/Header'
-import { ThemeProvider } from '~/app/(blog)/ThemeProvider'
+import { Footer } from '~/app/(main)/Footer'
+import { Header } from '~/app/(main)/Header'
+import { ThemeProvider } from '~/app/(main)/ThemeProvider'
 
 export default function BlogLayout({
  children,

app/(main)/page.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { BlogPosts } from '~/app/(main)/blog/BlogPosts'
+import { Headline } from '~/app/(main)/Headline'
+import { Newsletter } from '~/app/(main)/Newsletter'
+import { Photos } from '~/app/(main)/Photos'
+import { Resume } from '~/app/(main)/Resume'
+import { PencilSwooshIcon } from '~/assets'
+import { Container } from '~/components/ui/Container'
+
+export default function BlogHomePage() {
+ return (
+ <>
+ <Container className="mt-10">
+ <Headline />
+ </Container>
+ <Photos />
+ <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">
+ <h2 className="flex items-center text-sm font-semibold text-zinc-900 dark:text-zinc-100">
+ <PencilSwooshIcon className="h-5 w-5 flex-none" />
+ <span className="ml-2">最新文章</span>
+ </h2>
+ <BlogPosts />
+ </div>
+ <aside className="space-y-10 lg:sticky lg:top-8 lg:h-fit lg:pl-16 xl:pl-20">
+ <Newsletter />
+ <Resume />
+ </aside>
+ </div>
+ </Container>
+ </>
+ )
+}
+
+export const runtime = 'edge'

assets/icons/CalendarIcon.tsx

@@ -0,0 +1,22 @@
+import { type IconProps } from '~/assets'
+
+export function CalendarIcon(props: IconProps = {}) {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M8 2V4.12777M8 6V4.12777M16 2V4.12777M16 6V4.12777M20.9597 10C21 10.7878 21 11.7554 21 13C21 15.7956 21 17.1935 20.5433 18.2961C19.9343 19.7663 18.7663 20.9343 17.2961 21.5433C16.1935 22 14.7956 22 12 22C9.20435 22 7.80653 22 6.7039 21.5433C5.23373 20.9343 4.06569 19.7663 3.45672 18.2961C3 17.1935 3 15.7956 3 13C3 11.7554 3 10.7878 3.0403 10M20.9597 10C20.9095 9.01824 20.7967 8.31564 20.5433 7.7039C19.9343 6.23373 18.7663 5.06569 17.2961 4.45672C16.9146 4.29871 16.4978 4.19536 16 4.12777M20.9597 10L3.0403 10M3.0403 10C3.09052 9.01824 3.20333 8.31564 3.45672 7.7039C4.06569 6.23373 5.23373 5.06569 6.7039 4.45672C7.08538 4.29871 7.50219 4.19536 8 4.12777M8 4.12777C8.94106 4 10.1716 4 12 4C13.8284 4 15.0589 4 16 4.12777"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

assets/icons/HourglassIcon.tsx

@@ -0,0 +1,22 @@
+import { type IconProps } from '~/assets'
+
+export function HourglassIcon(props: IconProps = {}) {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M10.1912 12.5508C10.3071 12.1942 10.3071 11.8058 10.1912 11.4492C9.22165 8.46673 4.40272 8.00546 4.01443 4.48436C3.93458 3.76031 4.18955 3.04013 4.69671 2.55723C5.28193 2 6.62415 2 9.30861 2H14.6914C17.3759 2 18.7181 2 19.3033 2.55723C19.8104 3.04013 20.0654 3.76031 19.9856 4.48436C19.5973 8.00546 14.7784 8.46673 13.8088 11.4492C13.6929 11.8058 13.6929 12.1942 13.8088 12.5508C14.7784 15.5333 19.5973 15.9945 19.9856 19.5156C20.0654 20.2397 19.8104 20.9599 19.3033 21.4428C18.7181 22 17.3758 22 14.6914 22L9.3086 22C6.62415 22 5.28192 22 4.69671 21.4428C4.18955 20.9599 3.93458 20.2397 4.01442 19.5156C4.40272 15.9945 9.22164 15.5333 10.1912 12.5508Z"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

assets/icons/PencilSwooshIcon.tsx

@@ -0,0 +1,22 @@
+import { type IconProps } from '~/assets'
+
+export function PencilSwooshIcon(props: IconProps = {}) {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M12 21C16.018 17.7256 16.0891 24.3574 21 19M3.06616 18.3151C3.07546 17.9381 3.08011 17.7497 3.12568 17.5726C3.16608 17.4156 3.23007 17.2658 3.31544 17.1282C3.41171 16.973 3.54444 16.8396 3.8099 16.573L16.8626 3.46297C17.3862 2.93708 18.204 2.84896 18.8267 3.25131C19.565 3.7283 20.1957 4.3551 20.6785 5.09146L20.7123 5.14307C20.7368 5.18037 20.749 5.19902 20.7594 5.21582C21.1427 5.83327 21.0616 6.63294 20.5622 7.16005C20.5486 7.17439 20.5329 7.19018 20.5014 7.22177L7.52811 20.2521C7.25274 20.5287 7.11505 20.6669 6.95435 20.7658C6.81188 20.8534 6.65654 20.9178 6.49406 20.9568C6.31079 21.0008 6.11608 21.0005 5.72665 20.9999L3 20.9955L3.06616 18.3151Z"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

assets/icons/ScriptIcon.tsx

@@ -0,0 +1,22 @@
+import { type IconProps } from '~/assets'
+
+export function ScriptIcon(props: IconProps = {}) {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M9 11L11 9L9 7M14 11H16M5 15.1707V9.4C5 7.15979 5 6.03969 5.43597 5.18404C5.81947 4.43139 6.43139 3.81947 7.18404 3.43597C8.03968 3 9.15979 3 11.4 3H13.6C15.8402 3 16.9603 3 17.816 3.43597C18.5686 3.81947 19.1805 4.43139 19.564 5.18404C20 6.03969 20 7.15979 20 9.4V14.6C20 16.8402 20 17.9603 19.564 18.816C19.1805 19.5686 18.5686 20.1805 17.816 20.564C16.9603 21 15.8402 21 13.6 21H6C4.34315 21 3 19.6569 3 18C3 16.3431 4.34315 15 6 15H16C14.3431 15 13 16.3431 13 18C13 19.6569 14.3431 21 16 21"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

assets/icons/TagIcon.tsx

@@ -0,0 +1,22 @@
+import { type IconProps } from '~/assets'
+
+export function TagIcon(props: IconProps = {}) {
+ return (
+ <svg
+ width="1em"
+ height="1em"
+ viewBox="0 0 24 24"
+ fill="none"
+ xmlns="http://www.w3.org/2000/svg"
+ {...props}
+ >
+ <path
+ d="M8 8H8.01M3.11768 7.65876L3.07447 8.47968C2.99172 10.0518 2.95035 10.8379 3.1001 11.5811C3.23281 12.2399 3.47524 12.8716 3.81725 13.45C4.20315 14.1026 4.75976 14.6593 5.87297 15.7725L8.29448 18.194C9.6106 19.5101 10.2687 20.1682 10.9743 20.5277C12.4003 21.2543 14.0881 21.2543 15.5142 20.5277C16.2198 20.1682 16.8778 19.5101 18.194 18.194C19.5101 16.8778 20.1682 16.2198 20.5277 15.5142C21.2543 14.0881 21.2543 12.4003 20.5277 10.9743C20.1682 10.2687 19.5101 9.6106 18.194 8.29448L15.7725 5.87298C14.6593 4.75976 14.1026 4.20315 13.45 3.81725C12.8716 3.47524 12.2399 3.23281 11.5811 3.1001C10.8379 2.95035 10.0518 2.99172 8.47968 3.07447L7.65876 3.11768C6.13396 3.19793 5.37156 3.23805 4.78079 3.55489C4.26041 3.83397 3.83397 4.26041 3.55489 4.78079C3.23805 5.37156 3.19793 6.13396 3.11768 7.65876ZM8.4895 7.98767C8.4895 8.26381 8.26564 8.48767 7.9895 8.48767C7.71336 8.48767 7.4895 8.26381 7.4895 7.98767C7.4895 7.71153 7.71336 7.48767 7.9895 7.48767C8.26564 7.48767 8.4895 7.71153 8.4895 7.98767Z"
+ stroke="currentColor"
+ strokeWidth="2"
+ strokeLinecap="round"
+ strokeLinejoin="round"
+ />
+ </svg>
+ )
+}

assets/index.ts

@@ -4,14 +4,19 @@ export type IconProps = React.SVGAttributes<SVGElement>
 
 export { BilibiliIcon } from './icons/BilibiliIcon'
 export { BriefcaseIcon } from './icons/BriefcaseIcon'
+export { CalendarIcon } from './icons/CalendarIcon'
 export { CursorClickIcon } from './icons/CursorClickIcon'
 export { ExternalLinkIcon } from './icons/ExternalLinkIcon'
 export { GitHubIcon } from './icons/GitHubIcon'
+export { HourglassIcon } from './icons/HourglassIcon'
 export { LightningIcon } from './icons/LightningIcon'
 export { MailIcon } from './icons/MailIcon'
 export { MoonIcon } from './icons/MoonIcon'
+export { PencilSwooshIcon } from './icons/PencilSwooshIcon'
+export { ScriptIcon } from './icons/ScriptIcon'
 export { SparkleIcon } from './icons/SparkleIcon'
 export { SunIcon } from './icons/SunIcon'
+export { TagIcon } from './icons/TagIcon'
 export { TelegramIcon } from './icons/TelegramIcon'
 export { TiltedSendIcon } from './icons/TiltedSendIcon'
 export { TwitterIcon } from './icons/TwitterIcon'

config/nav.ts

@@ -1,6 +1,6 @@
 export const navigationItems = [
  { href: '/', text: '首页' },
- { href: '/posts', text: '文章' },
+ { href: '/blog', text: '文章' },
  { href: '/projects', text: '项目' },
  // { href: '/uses', text: '工具' },
  { href: '/about', text: '关于' },

package.json

@@ -19,6 +19,7 @@
  "@radix-ui/react-select": "^1.2.1",
  "@radix-ui/react-tooltip": "^1.0.5",
  "@sanity/image-url": "^1.0.2",
+ "@sanity/ui": "^1.3.3",
  "@sanity/vision": "^3.10.3",
  "@upstash/redis": "^1.20.6",
  "@vercel/analytics": "^1.0.1",