From 68c672c9aa5566bc53554290f9a9ed6703c815db Mon Sep 17 00:00:00 2001
From: gnehs <gnehs@gnehs.net>
Date: Thu, 21 Nov 2024 22:13:12 +0800
Subject: [PATCH] added jsonLd

---
 app/(website)/Readmore.tsx | 75 +++++++++++++++++++++++++++++++++++
 app/(website)/jsonLd.ts    | 50 +++++++++++++++++++++++
 app/(website)/page.tsx     | 81 ++++----------------------------------
 3 files changed, 132 insertions(+), 74 deletions(-)
 create mode 100644 app/(website)/Readmore.tsx
 create mode 100644 app/(website)/jsonLd.ts

diff --git a/app/(website)/Readmore.tsx b/app/(website)/Readmore.tsx
new file mode 100644
index 00000000..deecf5be
--- /dev/null
+++ b/app/(website)/Readmore.tsx
@@ -0,0 +1,75 @@
+"use client";
+import { useState } from "react";
+import { twMerge } from "tailwind-merge";
+import { motion, AnimatePresence } from "framer-motion";
+export default function Readmore({
+  content,
+  footer,
+}: {
+  content: string[];
+  footer: string;
+}) {
+  const [open, setOpen] = useState(false);
+
+  const Line = () => (
+    <div className="h-0 w-[10%] rounded border-[2px] border-[#FFB191] " />
+  );
+
+  return (
+    <div className="grid-row-2 grid place-items-center">
+      {/* TODO: this will blink when open */}
+      <div className="text-[18px] text-white">
+        <div
+          style={{
+            maskImage: open
+              ? "linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%)"
+              : `linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%)`,
+          }}
+        >
+          {content.slice(0, 3).map((item, index) => (
+            <p key={index}>{item}</p>
+          ))}
+        </div>
+        <AnimatePresence>
+          {open && (
+            <motion.div
+              className="overflow-hidden"
+              initial={{ height: 0, opacity: 0 }}
+              animate={{ height: "auto", opacity: 1 }}
+            >
+              {content.slice(3).map((item, index) => (
+                <p key={index}>{item}</p>
+              ))}
+            </motion.div>
+          )}
+        </AnimatePresence>
+        <div></div>
+      </div>
+
+      <div
+        className={twMerge(
+          "hidden w-full items-center pt-16 text-2xl  font-bold text-[#FFB191]",
+          open && "flex",
+        )}
+      >
+        <div className="md:grow" />
+        <Line />
+        <div className="grow" />
+        <p>{footer}</p>
+        <div className="grow" />
+        <Line />
+        <div className="md:grow" />
+      </div>
+
+      <button
+        className={twMerge(
+          open && "hidden",
+          "mt-8 w-fit rounded-2xl border border-white px-8 py-4 text-[18px] text-white shadow-[0px_4px_25px_0px_#FFFFFF4D]",
+        )}
+        onClick={() => setOpen(true)}
+      >
+        閱讀更多...
+      </button>
+    </div>
+  );
+}
diff --git a/app/(website)/jsonLd.ts b/app/(website)/jsonLd.ts
new file mode 100644
index 00000000..135f6fbf
--- /dev/null
+++ b/app/(website)/jsonLd.ts
@@ -0,0 +1,50 @@
+export const jsonLd = {
+  "@context": "https://schema.org",
+  "@type": "Event",
+  name: "SITCON 2025",
+  url: "https://sitcon.org/2025/",
+  startDate: "2025-03-08T08:30+08:00",
+  eventAttendanceMode: "https://schema.org/OfflineEventAttendanceMode",
+  location: {
+    "@type": "EventVenue",
+    name: "中央研究院人文社會科學館 國際會議廳 ",
+    address: "台北市南港區研究院路二段128號",
+  },
+  organizer: {
+    "@type": "Organization",
+    url: "https://sitcon.org",
+    name: "SITCON 學生計算機年會",
+    logo: "https://sitcon.org/branding/assets/logos/withname.png",
+    sameAs: [
+      "https://zh.wikipedia.org/wiki/%E5%AD%B8%E7%94%9F%E8%A8%88%E7%AE%97%E6%A9%9F%E5%B9%B4%E6%9C%83",
+      "https://www.youtube.com/@SITCONtw",
+      "https://www.facebook.com/SITCONtw/",
+      "https://www.instagram.com/sitcon.tw/",
+      "https://x.com/sitcontw",
+      "https://www.linkedin.com/company/sitcon-tw/",
+      "https://www.threads.net/@sitcon.tw",
+      "https://flickr.com/photos/sitcon",
+    ],
+  },
+  image: ["https://sitcon.org/2025/og.jpg"],
+  description:
+    "學生計算機年會（Students’ Information Technology Conference）自 2012 年發起，以學生為本、由學生自發舉辦，長期投身學生資訊教育與推廣開源精神，鼓勵學生們成為實踐者，貢獻程式碼、打造並部署服務、透過實際行動推動專案，最後將這些結晶分享出去，讓更多人能關注你認為重要的議題，打造更緊密的社群。",
+  endDate: "2025-03-08T18:00+08:00",
+  performer: {
+    "@type": "Organization",
+    url: "https://sitcon.org",
+    name: "SITCON 學生計算機年會",
+    logo: "https://sitcon.org/branding/assets/logos/withname.png",
+    sameAs: [
+      "https://zh.wikipedia.org/wiki/%E5%AD%B8%E7%94%9F%E8%A8%88%E7%AE%97%E6%A9%9F%E5%B9%B4%E6%9C%83",
+      "https://www.youtube.com/@SITCONtw",
+      "https://www.facebook.com/SITCONtw/",
+      "https://www.instagram.com/sitcon.tw/",
+      "https://x.com/sitcontw",
+      "https://www.linkedin.com/company/sitcon-tw/",
+      "https://www.threads.net/@sitcon.tw",
+      "https://flickr.com/photos/sitcon",
+    ],
+  },
+  eventStatus: "EventScheduled",
+};
diff --git a/app/(website)/page.tsx b/app/(website)/page.tsx
index b37bd586..04f65960 100644
--- a/app/(website)/page.tsx
+++ b/app/(website)/page.tsx
@@ -1,74 +1,6 @@
-"use client";
 import Button from "@/components/website/button";
-import { useState } from "react";
-import { twMerge } from "tailwind-merge";
-import { motion, AnimatePresence } from "framer-motion";
-function Readmore({ content, footer }: { content: string[]; footer: string }) {
-  const [open, setOpen] = useState(false);
-
-  const Line = () => (
-    <div className="h-0 w-[10%] rounded border-[2px] border-[#FFB191] " />
-  );
-
-  return (
-    <div className="grid-row-2 grid place-items-center">
-      {/* TODO: this will blink when open */}
-      <div className="text-[18px] text-white">
-        <div
-          style={{
-            maskImage: open
-              ? "linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%)"
-              : `linear-gradient(180deg, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%)`,
-          }}
-        >
-          {content.slice(0, 3).map((item, index) => (
-            <p key={index}>{item}</p>
-          ))}
-        </div>
-        <AnimatePresence>
-          {open && (
-            <motion.div
-              className="overflow-hidden"
-              initial={{ height: 0, opacity: 0 }}
-              animate={{ height: "auto", opacity: 1 }}
-            >
-              {content.slice(3).map((item, index) => (
-                <p key={index}>{item}</p>
-              ))}
-            </motion.div>
-          )}
-        </AnimatePresence>
-        <div></div>
-      </div>
-
-      <div
-        className={twMerge(
-          "hidden w-full items-center pt-16 text-2xl  font-bold text-[#FFB191]",
-          open && "flex",
-        )}
-      >
-        <div className="md:grow" />
-        <Line />
-        <div className="grow" />
-        <p>{footer}</p>
-        <div className="grow" />
-        <Line />
-        <div className="md:grow" />
-      </div>
-
-      <button
-        className={twMerge(
-          open && "hidden",
-          "mt-8 w-fit rounded-2xl border border-white px-8 py-4 text-[18px] text-white shadow-[0px_4px_25px_0px_#FFFFFF4D]",
-        )}
-        onClick={() => setOpen(true)}
-      >
-        閱讀更多...
-      </button>
-    </div>
-  );
-}
-
+import Readmore from "./Readmore";
+import { jsonLd } from "./jsonLd";
 function Heading({ chinese, english }: { chinese: string; english: string }) {
   return (
     <>
@@ -283,10 +215,7 @@ export default function Page() {
             className="pointer-events-none absolute -left-[97px] -top-[6.5rem] rotate-[31.79deg] select-none lg:left-[40px] lg:top-[-4.5rem] lg:scale-[2]"
           />
           <div className="mt-4 flex min-h-[160px] flex-wrap justify-center gap-8">
-            <Button
-              color="blue"
-              url="https://forms.gle/pAyR1ztX587L85Wm7"
-            >
+            <Button color="blue" url="https://forms.gle/pAyR1ztX587L85Wm7">
               預約跳坑表單
             </Button>
             <div className="z-10 flex justify-center gap-8">
@@ -307,6 +236,10 @@ export default function Page() {
         </div>
       </div>
       {/* LOGOs */}
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
     </div>
   );
 }