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());