feat: refactor image url function (#189)

* feat: refactor image url

* style(event-card): add back filter background

* feat: revalidate API use POST

src/components/eventCard/index.tsx

@@ -7,7 +7,7 @@ import { BsCalendar2DateFill } from "react-icons/bs";
 import Image from "@/components/image";
 import clsx from "clsx";
 import { sendTrack } from "@/utils/track";
-import { getEventCoverUrl } from "@/utils/imageLoader";
+import { getEventCoverImgPath } from "@/utils/imageLoader";
 import { format } from "date-fns";
 import { zhCN } from "date-fns/locale";
 
@@ -20,7 +20,7 @@ export default function EventCard({
   event: Event;
   sizes?: string;
 }) {
-  const finalEventCoverImage = getEventCoverUrl(event);
+  const finalEventCoverImage = getEventCoverImgPath(event);
   const isDefaultCover = finalEventCoverImage.includes(
     "fec-event-default-cover"
   );
@@ -117,7 +117,7 @@ export default function EventCard({
           <div
             className={clsx(
               styles["event-card__desc-container"],
-              "p-2 md:p-4 bg-red-100/20 group-hover:bg-red-400/90 transition duration-300 rounded-b-xl z-10 w-full",
+              "p-2 md:p-4 bg-black/20 group-hover:bg-red-400/90 transition duration-300 rounded-b-xl z-10 w-full",
               "text-white",
               !isDefaultCover && "backdrop-blur-md"
             )}

src/pages/[organization]/[slug].tsx

@@ -13,7 +13,7 @@ import { TbArrowsRightLeft } from "react-icons/tb";
 import Link from "next/link";
 import { EventScaleLabel, EventStatus, EventStatusSchema } from "@/types/event";
 import { sendTrack } from "@/utils/track";
-import { getEventCoverUrl, imageUrl } from "@/utils/imageLoader";
+import { getEventCoverImgPath, imageUrl } from "@/utils/imageLoader";
 import Script from "next/script";
 import OrganizationLinkButton, {
   BiliButton,
@@ -45,7 +45,7 @@ export default function EventDetail({ event }: { event: Event }) {
     return MapLoadingStatus.Idle;
   });
 
-  const finalEventCoverImage = getEventCoverUrl(event);
+  const finalEventCoverImage = getEventCoverImgPath(event);
 
   const initMap = () => {
     if (!window.TMap) throw new Error("TMap is not loaded");
@@ -457,11 +457,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
         }),
         des: metaDes,
         url: `https://www.furryeventchina.com/${context.params?.organization}/${event?.slug}/`,
-        cover: imageUrl(
-          event?.coverUrl ||
-            event?.posterUrl?.[0] ||
-            "https://images.furrycons.cn/fec-event-default-cover.png"
-        ),
+        cover: imageUrl(getEventCoverImgPath(event)),
       },
       structuredData: {
         breadcrumb: {
@@ -508,13 +504,7 @@ export async function getStaticProps(context: GetStaticPropsContext) {
               addressCountry: "CN",
             },
           },
-          image: [
-            imageUrl(
-              event?.coverUrl ||
-                event?.posterUrl?.[0] ||
-                "https://images.furrycons.cn/fec-event-default-cover.png"
-            ),
-          ],
+          image: [imageUrl(getEventCoverImgPath(event))],
           description: event?.detail,
           // offers: {
           //   "@type": "Offer",

src/pages/api/revalidate.ts

@@ -1,33 +1,28 @@
 import { NextApiRequest, NextApiResponse } from "next";
 
+const simpleToken = process.env.XATA_API_KEY?.slice(0, 6);
+
 export default async function handler(
   req: NextApiRequest,
   res: NextApiResponse
 ) {
-  const { secret, pathname } = req.query;
-  // Check for secret to confirm this is a valid request
-  if (
-    typeof process.env.XATA_API_KEY !== "string" ||
-    typeof secret !== "string" ||
-    typeof pathname !== "string"
-  ) {
-    return res.status(401).json({ message: "Invalid token or params." });
+  const auth = req.headers.authorization;
+
+  if (auth !== simpleToken) {
+    return res.status(401).json({ message: "Invalid token." });
   }
+  const payload = req.body;
 
-  const simpleToken = process.env.XATA_API_KEY.slice(0, 6);
+  const { pathname } = payload;
 
-  if (secret !== simpleToken) {
-    return res.status(401).json({ message: "Invalid token" });
+  if (typeof pathname !== "string") {
+    return res.status(401).json({ message: "Invalid path." });
   }
 
   try {
-    // this should be the actual path not a rewritten path
-    // e.g. for "/blog/[slug]" this should be "/blog/post-1"
     await res.revalidate(pathname);
-    return res.json({ revalidated: true });
+    return res.json({ revalidated: true, revalidatedPath: pathname });
   } catch (err) {
-    // If there was an error, Next.js will continue
-    // to show the last successfully generated page
     return res.status(500).send("Error revalidating");
   }
 }

src/pages/city.tsx

@@ -4,7 +4,7 @@ import { Event, XataClient } from "@/xata/xata";
 import groupBy from "lodash-es/groupBy";
 import Link from "next/link";
 import { useMemo, useState } from "react";
-import { getEventCoverUrl } from "@/utils/imageLoader";
+import { getEventCoverImgPath } from "@/utils/imageLoader";
 import { format } from "date-fns";
 import Image from "@/components/image";
 import { titleGenerator } from "@/utils/meta";
@@ -140,7 +140,7 @@ function CityYearSelection({ events }: { events: Event[] }) {
           <div className="rounded-xl duration-500 transition group-hover:border-gray-400 w-full h-full absolute brightness-75 hover:brightness-100">
             <Image
               alt="活动背景"
-              src={getEventCoverUrl(event)}
+              src={getEventCoverImgPath(event)}
               width={350}
               className="h-full w-full object-cover rounded-xl overflow-hidden"
               autoFormat

src/utils/imageLoader.ts

@@ -2,28 +2,20 @@ import { ImageLoaderProps } from "next/image";
 import { EventRecord } from "@/xata/xata";
 
 const GLOBAL_AUTO_CDN_IMAGE_URL = "images.furrycons.cn";
-const GLOBAL_MANUAL_CDN_IMAGE_URL = "images.furryeventchina.com";
+const NO_CDN_IMAGE_URL = "cos-proxy.furrycons.cn";
 
-export const getEventCoverUrl = (event: Partial<EventRecord>) => {
-  return imageUrl(
-    event.coverUrl ||
-      event.posterUrl?.[0] ||
-      `https://images.furrycons.cn/fec-event-default-cover.png`
+export const getEventCoverImgPath = (event: Partial<EventRecord>) => {
+  return (
+    event.coverUrl || event.posterUrl?.[0] || `fec-event-default-cover.png`
   );
 };
 
 export const imageUrl = (src: string) => {
-  const withoutDefaultHostSrc = src
-    .replace("https://cdn.furryeventchina.com/", "")
-    .replace("https://images.furryeventchina.com/", "")
-    .replace("https://images.furrycons.cn/", "")
-    .trim();
-
   if (process.env.NODE_ENV === "development") {
-    return `https://${GLOBAL_MANUAL_CDN_IMAGE_URL}/${withoutDefaultHostSrc}`;
+    return `https://${NO_CDN_IMAGE_URL}/${src}`;
   }
 
-  return `https://${GLOBAL_AUTO_CDN_IMAGE_URL}/${withoutDefaultHostSrc}`;
+  return `https://${GLOBAL_AUTO_CDN_IMAGE_URL}/${src}`;
 };
 
 const imageLoader = ({
@@ -39,17 +31,11 @@ const imageLoader = ({
   width?: number;
   height?: number;
 }) => {
-  const withoutDefaultHostSrc = src
-    .replace("https://cdn.furryeventchina.com/", "")
-    .replace("https://images.furryeventchina.com/", "")
-    .replace("https://images.furrycons.cn/", "")
-    .trim();
-
   const imageURLHost =
     process.env.NODE_ENV === "development"
-      ? `https://${GLOBAL_MANUAL_CDN_IMAGE_URL}`
+      ? `https://${NO_CDN_IMAGE_URL}`
       : `https://${GLOBAL_AUTO_CDN_IMAGE_URL}`;
-  const imageURL = new URL(`${imageURLHost}/${withoutDefaultHostSrc}`);
+  const imageURL = new URL(`${imageURLHost}/${src}`);
 
   width !== undefined && imageURL.searchParams.set("w", width.toString());
   height !== undefined && imageURL.searchParams.set("h", height.toString());