From 1de47b265745d724a2a36d3936b831b29c474b19 Mon Sep 17 00:00:00 2001 From: JiPai <3956400+PaiJi@users.noreply.github.com> Date: Sun, 2 Jun 2024 22:15:23 +0800 Subject: [PATCH] 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 | 6 +++--- src/pages/[organization]/[slug].tsx | 18 ++++------------- src/pages/api/revalidate.ts | 27 +++++++++++--------------- src/pages/city.tsx | 4 ++-- src/utils/imageLoader.ts | 30 ++++++++--------------------- 5 files changed, 28 insertions(+), 57 deletions(-) diff --git a/src/components/eventCard/index.tsx b/src/components/eventCard/index.tsx index c2da72b..85a089e 100644 --- a/src/components/eventCard/index.tsx +++ b/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({
{ 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", diff --git a/src/pages/api/revalidate.ts b/src/pages/api/revalidate.ts index 028261a..40e658f 100644 --- a/src/pages/api/revalidate.ts +++ b/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"); } } diff --git a/src/pages/city.tsx b/src/pages/city.tsx index 04b1ae6..0fd2c38 100644 --- a/src/pages/city.tsx +++ b/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[] }) {
活动背景) => { - return imageUrl( - event.coverUrl || - event.posterUrl?.[0] || - `https://images.furrycons.cn/fec-event-default-cover.png` +export const getEventCoverImgPath = (event: Partial) => { + 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());