feat: display multi organization in event detail

.github/workflows/deploy-prod-cn.yml

@@ -45,7 +45,7 @@ jobs:
           docker load -i image.tar
 
       - name: Login to Qcloud Hongkong Container Registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@v4
         with:
           registry: hkccr.ccs.tencentyun.com
           username: "${{ vars.QCLOUD_REGISTRY_USERNAME }}"

.github/workflows/reusable-docker-build.yml

@@ -31,7 +31,7 @@ jobs:
         uses: actions/checkout@v6
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@v4
 
       - name: Create Env
         run: |
@@ -47,7 +47,7 @@ jobs:
           echo "Created .env file with provided secrets and variables"
 
       - name: Build Docker image
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v7
         timeout-minutes: 10
         with:
           context: .

public/locales/en/common.json

@@ -61,6 +61,10 @@
   "event.mapLoading": "Loading map",
   "event.gotoGaoDe": "View on Gaode Map",
   "event.gotoOrganization": "View Organizer details",
+  "event.hostSwitchGroupAria": "Switch host organization",
+  "event.prevHostOrganization": "Previous organizer",
+  "event.nextHostOrganization": "Next organizer",
+  "event.hostOrganizationCounter": "Organizer {{index}}/{{total}}",
   "event.dateFormat": "MMMM DD, YYYY",
   "organization.active": "Active Organizers",
   "organization.inactive": "Inactive Organizers",

public/locales/ru/common.json

@@ -61,6 +61,10 @@
   "event.mapLoading": "Открыть в Gaode Map...",
   "event.gotoGaoDe": "Открыть в Gaode Map",
   "event.gotoOrganization": "Участники и стенды",
+  "event.hostSwitchGroupAria": "Переключить организатора",
+  "event.prevHostOrganization": "Предыдущий организатор",
+  "event.nextHostOrganization": "Следующий организатор",
+  "event.hostOrganizationCounter": "Организатор {{index}}/{{total}}",
   "event.dateFormat": "MMMM DD, YYYY",
   "organization.active": "Активные организаторы",
   "organization.inactive": "Неактивные организаторы",

public/locales/zh-Hans/common.json

@@ -63,6 +63,10 @@
   "event.retryLoadMap": "尝试重新加载地图",
   "event.gotoGaoDe": "去高德地图查看",
   "event.gotoOrganization": "看看展商详情",
+  "event.hostSwitchGroupAria": "切换主办/展商",
+  "event.prevHostOrganization": "上一个主办",
+  "event.nextHostOrganization": "下一个主办",
+  "event.hostOrganizationCounter": "主办方 {{index}}/{{total}}",
   "event.dateFormat": "YYYY年MM月DD日",
   "organization.active": "活跃展商",
   "organization.inactive": "停止活动展商",

public/locales/zh-Hant/common.json

@@ -63,6 +63,10 @@
   "event.retryLoadMap": "重新載入地圖",
   "event.gotoGaoDe": "用高德地圖查看",
   "event.gotoOrganization": "查看主辦單位",
+  "event.hostSwitchGroupAria": "切換主辦/展商",
+  "event.prevHostOrganization": "上一個主辦",
+  "event.nextHostOrganization": "下一個主辦",
+  "event.hostOrganizationCounter": "主辦方 {{index}}/{{total}}",
   "event.dateFormat": "YYYY年MM月DD日",
   "organization.active": "營運中",
   "organization.inactive": "已停辦",

src/components/event/EventOrganizationCard.tsx

@@ -0,0 +1,155 @@
+import NextImage from "@/components/image";
+import {
+  BiliButton,
+  EmailButton,
+  FacebookButton,
+  PlurkButton,
+  QQGroupButton,
+  RednoteButton,
+  TwitterButton,
+  WebsiteButton,
+  WeiboButton,
+} from "@/components/OrganizationLinkButton";
+import OrganizationStatus from "@/components/organizationStatus";
+import type { EventItem } from "@/types/event";
+import { sendTrack } from "@/utils/track";
+import clsx from "clsx";
+import { useTranslation } from "next-i18next/pages";
+import Link from "next/link";
+import { useState } from "react";
+import { IoChevronBack, IoChevronForward } from "react-icons/io5";
+
+type EventOrganizationCardProps = {
+  event: EventItem;
+  showDescriptionContainer: boolean;
+};
+
+export default function EventOrganizationCard(props: EventOrganizationCardProps) {
+  const { t } = useTranslation();
+  const orgList = [props.event.organization, ...props.event.organizations];
+  const [activeIndex, setActiveIndex] = useState(0);
+  const showOrgSwitcher = orgList.length > 1;
+
+  const organization = orgList[activeIndex] ?? orgList[0]!;
+  const organizationProfileHref = `/${organization.slug}`;
+  const trackOrganizationProfileClick = () => {
+    sendTrack({
+      eventName: "click-event-portal",
+      eventValue: {
+        link: organizationProfileHref,
+      },
+    });
+  };
+
+  const goToPrev = () => {
+    setActiveIndex((i) => (i - 1 + orgList.length) % orgList.length);
+  };
+  const goToNext = () => {
+    setActiveIndex((i) => (i + 1) % orgList.length);
+  };
+
+  return (
+    <div
+      id="event-detail__right"
+      className={clsx(
+        "bg-white rounded-xl mb-4 lg:mb-0",
+        !props.showDescriptionContainer && "w-full",
+        props.showDescriptionContainer && "md:w-4/12",
+      )}
+    >
+      <div className="p-4">
+        {showOrgSwitcher && (
+          <div className="flex justify-between items-center mb-1">
+            <span className="text-lg font-bold text-gray-600">
+              {t("event.hostOrganizationCounter", { index: activeIndex + 1, total: orgList.length })}
+            </span>
+            <div
+              className="inline-flex p-1.5 gap-1 items-stretch rounded-xl bg-slate-100/95"
+              role="group"
+              aria-label={t("event.hostSwitchGroupAria")}
+            >
+              <button
+                type="button"
+                onClick={goToPrev}
+                className="rounded-lg px-2.5 py-1.5 text-slate-600 bg-white hover:shadow-sm transition-[color,box-shadow] duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-300/80 focus-visible:ring-offset-1"
+                aria-label={t("event.prevHostOrganization")}
+              >
+                <IoChevronBack className="text-lg" aria-hidden />
+              </button>
+              <button
+                type="button"
+                onClick={goToNext}
+                className="rounded-lg px-2.5 py-1.5 text-slate-600 bg-white hover:shadow-sm transition-[color,box-shadow] duration-150 focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-300/80 focus-visible:ring-offset-1"
+                aria-label={t("event.nextHostOrganization")}
+              >
+                <IoChevronForward className="text-lg" aria-hidden />
+              </button>
+            </div>
+          </div>
+        )}
+        <div className="flex">
+          {organization.logoUrl && (
+            <div className="border rounded flex justify-center items-center p-2 w-[100px] h-[100px]">
+              <NextImage
+                className="object-contain"
+                alt={t("organization.logoAlt", { name: organization.name })}
+                width={200}
+                height={200}
+                src={organization.logoUrl}
+                autoFormat
+              />
+            </div>
+          )}
+          <div className="ml-4 flex flex-col justify-between">
+            <div>
+              <Link
+                className="text-2xl font-bold text-gray-600"
+                href={organizationProfileHref}
+                onClick={trackOrganizationProfileClick}
+              >
+                {organization.name}
+              </Link>
+              <div className="flex items-center text-gray-500 mb-4">
+                <span className="text-sm">
+                  <OrganizationStatus status={organization.status || ""} />
+                </span>
+              </div>
+            </div>
+
+            <Link href={organizationProfileHref} onClick={trackOrganizationProfileClick}>
+              <button
+                type="button"
+                className="border rounded px-2 py-1 text-sm text-gray-500 hover:border-slate-400 hover:drop-shadow transition duration-200"
+              >
+                {t("event.gotoOrganization")}
+              </button>
+            </Link>
+          </div>
+        </div>
+
+        <div
+          className={clsx(
+            "items-center text-gray-500 grid gap-4 mt-4",
+            !props.showDescriptionContainer && "lg:grid-cols-2",
+          )}
+        >
+          {organization.website && <WebsiteButton t={t} href={organization.website} />}
+          {organization.qqGroup && <QQGroupButton t={t} text={organization.qqGroup} />}
+          {organization.bilibili && <BiliButton t={t} href={organization.bilibili} />}
+
+          {organization.weibo && <WeiboButton t={t} href={organization.weibo} />}
+
+          {organization.twitter && <TwitterButton t={t} href={organization.twitter} />}
+
+          {organization.contactMail && <EmailButton t={t} mail={organization.contactMail} />}
+
+          {organization.plurk && <PlurkButton t={t} href={organization.plurk} />}
+
+          {organization.facebook && <FacebookButton t={t} href={organization.facebook} />}
+
+          {organization.rednote && <RednoteButton t={t} href={organization.rednote} />}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,33 +1,20 @@
 import { EventsAPI } from "@/api/events";
 import EventMapCard from "@/components/event/EventMapCard";
+import EventOrganizationCard from "@/components/event/EventOrganizationCard";
 import EventSourceButton from "@/components/event/EventSourceButton";
 import { EventDate } from "@/components/eventCard";
 import NextImage from "@/components/image";
-import {
-  BiliButton,
-  EmailButton,
-  FacebookButton,
-  PlurkButton,
-  QQGroupButton,
-  RednoteButton,
-  TwitterButton,
-  WebsiteButton,
-  WeiboButton,
-} from "@/components/OrganizationLinkButton";
-import OrganizationStatus from "@/components/organizationStatus";
 import { EventStatus } from "@/constants/event";
 import type { EventItem } from "@/types/event";
 import { getEventCoverImgPath, imageUrl } from "@/utils/imageLoader";
 import { currentSupportLocale, formatLocale } from "@/utils/locale";
 import { eventDescriptionGenerator, keywordGenerator } from "@/utils/meta";
 import { generateEventDetailStructuredData } from "@/utils/structuredData";
-import { sendTrack } from "@/utils/track";
 import { getEventDetailUrl } from "@/utils/url";
 import clsx from "clsx";
 import { GetServerSidePropsContext } from "next";
 import { useTranslation } from "next-i18next/pages";
 import { serverSideTranslations } from "next-i18next/pages/serverSideTranslations";
-import Link from "next/link";
 import { BsCalendar2DateFill } from "react-icons/bs";
 import { FaHotel, FaPeoplePulling } from "react-icons/fa6";
 import { IoLocation } from "react-icons/io5";
@@ -84,7 +71,14 @@ export default function EventDetail({ event }: { event: EventItem }) {
               {event.name}
             </h2>
             <h2 className="text-gray-600 text-sm flex">
-              {t("event.hostBy", { hostName: event.organization?.name })}
+              {t("event.hostBy", {
+                hostName: event.organizations.length
+                  ? [
+                      event.organization?.name ?? "",
+                      ...event.organizations.map((organization) => organization.name),
+                    ].filter(Boolean).join("、")
+                  : event.organization?.name,
+              })}
               {/* <EventStatusBar className="ml-2" pageviews="0" fav="2" /> */}
             </h2>
 
@@ -162,86 +156,7 @@ export default function EventDetail({ event }: { event: EventItem }) {
           </div>
         )}
 
-        <div
-          id="event-detail__right"
-          className={clsx(
-            "bg-white rounded-xl mb-4 lg:mb-0",
-            !showDescriptionContainer && "w-full",
-            showDescriptionContainer && "md:w-4/12",
-          )}
-        >
-          <div className="p-4">
-            <div className="flex">
-              {event.organization?.logoUrl && (
-                <div className="border rounded flex justify-center items-center p-2 w-[100px] h-[100px]">
-                  <NextImage
-                    className="object-contain"
-                    alt={`${event.organization?.name}'s logo`}
-                    width={200}
-                    height={200}
-                    src={event.organization.logoUrl}
-                    autoFormat
-                  />
-                </div>
-              )}
-              <div className="ml-4 flex flex-col justify-between">
-                <div>
-                  <Link
-                    className="text-2xl font-bold text-gray-600"
-                    target="_blank"
-                    href={`/${event.organization?.slug}`}
-                  >
-                    {event.organization?.name}
-                  </Link>
-                  <div className="flex items-center text-gray-500 mb-4">
-                    <span className="text-sm">
-                      <OrganizationStatus status={event.organization?.status || ""} />
-                    </span>
-                  </div>
-                </div>
-
-                <Link href={`/${event.organization?.slug}`}>
-                  <button
-                    onClick={() =>
-                      sendTrack({
-                        eventName: "click-event-portal",
-                        eventValue: {
-                          link: `/${event.organization?.slug}`,
-                        },
-                      })
-                    }
-                    className="border rounded px-2 py-1 text-sm text-gray-500 hover:border-slate-400 hover:drop-shadow transition duration-200"
-                  >
-                    {t("event.gotoOrganization")}
-                  </button>
-                </Link>
-              </div>
-            </div>
-
-            <div
-              className={clsx(
-                "items-center text-gray-500 grid gap-4 mt-4",
-                !showDescriptionContainer && "lg:grid-cols-2",
-              )}
-            >
-              {event.organization?.website && <WebsiteButton t={t} href={event.organization.website} />}
-              {event.organization?.qqGroup && <QQGroupButton t={t} text={event.organization.qqGroup} />}
-              {event.organization?.bilibili && <BiliButton t={t} href={event.organization.bilibili} />}
-
-              {event.organization?.weibo && <WeiboButton t={t} href={event.organization.weibo} />}
-
-              {event.organization?.twitter && <TwitterButton t={t} href={event.organization.twitter} />}
-
-              {event.organization?.contactMail && <EmailButton t={t} mail={event.organization.contactMail} />}
-
-              {event.organization?.plurk && <PlurkButton t={t} href={event.organization.plurk} />}
-
-              {event.organization?.facebook && <FacebookButton t={t} href={event.organization.facebook} />}
-
-              {event.organization?.rednote && <RednoteButton t={t} href={event.organization.rednote} />}
-            </div>
-          </div>
-        </div>
+        <EventOrganizationCard key={event.id} event={event} showDescriptionContainer={showDescriptionContainer} />
       </div>
     </>
   );

src/types/event.ts

@@ -82,6 +82,7 @@ export const EventSchema = z.object({
   commonFeatures: z.array(FeatureSchema).nullish(),
 
   organization: OrganizationSchema,
+  organizations: z.array(OrganizationSchema),
 });
 
 export type EventItem = z.infer<typeof EventSchema>;