update custom

Asumz · May 29, 2024 · ed7d8ec · ed7d8ec
1 parent de14d55
commit ed7d8ec
Show file tree

Hide file tree

Showing 12 changed files with 392 additions and 300 deletions.
diff --git a/app/(default)/page.tsx b/app/(default)/page.tsx
@@ -13,10 +13,10 @@ export default function Home() {
   return (
     <>
       <Hero />
-      <Features />
-      <FeaturesBlocks />
-      <Testimonials />
-      <Newsletter />
+      {/* <Features /> */}
+      {/* <FeaturesBlocks /> */}
+      {/* <Testimonials /> */}
+      {/* <Newsletter /> */}
     </>
   )
 }
diff --git a/app/api/error.tsx b/app/api/error.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string }
+  reset: () => void
+}) {
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button onClick={() => reset()}>Try again</button>
+    </div>
+  )
+}
diff --git a/app/api/hello/route.ts b/app/api/hello/route.ts
@@ -8,6 +8,7 @@ interface hitokotoResponse {
   from_who: string
   hitokoto: string
 }
+// TODO 错误处理
 export async function hitokoto(): Promise<hitokotoResponse> {
   let res = await fetch('https://v1.hitokoto.cn/?c=i&encode=json', { cache: 'no-store' })
   if (!res.ok) {
@@ -17,3 +18,16 @@ export async function hitokoto(): Promise<hitokotoResponse> {
 
   return res.json()
 }
+
+interface bingDailyImgResponse {
+  images: { url: string; title: string; copyrightlink: string }[]
+}
+export async function bingDailyImg(): Promise<bingDailyImgResponse> {
+  let res = await fetch('https://cn.bing.com/HPImageArchive.aspx?format=js&idx=0&n=1')
+  // if (!res.ok) {
+  //   // This will activate the closest `error.js` Error Boundary
+  //   throw new Error('Failed to fetch data')
+  // }
+
+  return res.json()
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -25,7 +25,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <div className="flex min-h-screen flex-col overflow-hidden supports-[overflow:clip]:overflow-clip">
           <Header />
           {children}
-          <Banner />
+          {/* <Banner /> */}
         </div>
       </body>
     </html>

diff --git a/components/hero.tsx b/components/hero.tsx
@@ -1,10 +1,18 @@
 import VideoThumb from '@/public/images/hero-image.png'
 import ModalVideo from '@/components/modal-video'
 import Image from 'next/image'
-import { hitokoto } from '@/app/api/hello/route'
+import { bingDailyImg, hitokoto } from '@/app/api/hello/route'
+import Link from 'next/link'
+import { format, subDays } from 'date-fns'
+
+const bing = 'https://cn.bing.com'
 
 export default async function Hero() {
-  const data = await hitokoto()
+  let hitokotoRes = await hitokoto()
+  let bingDailyImgRes = await bingDailyImg()
+  let { url, title, copyrightlink } = bingDailyImgRes?.images?.[0] || {}
+  url = bing + url
+  copyrightlink += `&filters=HpDate:"${format(subDays(new Date(), 1), 'yyyyMMdd')}_1600"`
 
   return (
     <section className="relative">
@@ -46,7 +54,7 @@ export default async function Hero() {
             </h1>
             <div className="mx-auto max-w-3xl">
               <p className="mb-8 text-xl text-gray-600" data-aos="zoom-y-out" data-aos-delay="150">
-                {'「 ' + data.hitokoto + ' 」' + '—— ' + data.from}
+                {hitokotoRes && '「 ' + hitokotoRes.hitokoto + ' 」' + '—— ' + hitokotoRes.from}
               </p>
               <div className="mt-6" data-aos="zoom-y-out" data-aos-delay="300">
                 <ul className="-m-2.5 mb-0 flex flex-wrap justify-center">
@@ -106,27 +114,43 @@ export default async function Hero() {
                   </li>
                 </ul>
               </div>
-              {/* <div className="max-w-xs mx-auto sm:max-w-none sm:flex sm:justify-center" data-aos="zoom-y-out" data-aos-delay="300">
-                <div>
-                  <a className="btn text-white bg-blue-600 hover:bg-blue-700 w-full mb-4 sm:w-auto sm:mb-0" href="#0">Start free trial</a>
-                </div>
-                <div>
-                  <a className="btn text-white bg-gray-900 hover:bg-gray-800 w-full sm:w-auto sm:ml-4" href="#0">Learn more</a>
-                </div>
-              </div> */}
             </div>
           </div>
 
           {/* Hero image */}
-          <ModalVideo
+          {/* <ModalVideo
             thumb={VideoThumb}
             thumbWidth={768}
             thumbHeight={432}
             thumbAlt="Modal video thumbnail"
             video="/videos/video.mp4"
             videoWidth={1920}
             videoHeight={1080}
-          />
+          /> */}
+          <div>
+            <div
+              className="relative mb-8 flex justify-center"
+              data-aos="zoom-y-out"
+              data-aos-delay="450"
+            >
+              <div className="flex flex-col justify-center">
+                <Image src={url} width={768} height={432} alt={'thumbnail'} priority />
+              </div>
+              <button className="group absolute top-full flex -translate-y-1/2 transform items-center rounded-full bg-white p-4 font-medium shadow-lg">
+                <Link href={copyrightlink} target="_blank" className="flex">
+                  <svg
+                    className="h-6 w-6 shrink-0 fill-current text-gray-400 group-hover:text-blue-600"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10zm0 2C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12z" />
+                    <path d="M10 17l6-5-6-5z" />
+                  </svg>
+                  <span className="ml-3">{title}</span>
+                </Link>
+              </button>
+            </div>
+          </div>
         </div>
       </div>
     </section>