From 267f9d842256b8b8c8a00abc42815bcd05b06f33 Mon Sep 17 00:00:00 2001 From: Dada878 Date: Wed, 27 Nov 2024 14:02:14 +0800 Subject: [PATCH 1/6] feat: install font awesome package --- package-lock.json | 78 +++++++++++++++++++++++++++++++++++++++++++++-- package.json | 5 +++ 2 files changed, 80 insertions(+), 3 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4a9a777e..79635c0e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,11 @@ "name": "2025", "version": "0.1.0", "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.1", + "@fortawesome/free-brands-svg-icons": "^6.7.1", + "@fortawesome/free-regular-svg-icons": "^6.7.1", + "@fortawesome/free-solid-svg-icons": "^6.7.1", + "@fortawesome/react-fontawesome": "^0.2.2", "@next/third-parties": "^15.0.3", "framer-motion": "^11.11.13", "next": "14.2.15", @@ -103,6 +108,76 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fortawesome/fontawesome-common-types": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.7.1.tgz", + "integrity": "sha512-gbDz3TwRrIPT3i0cDfujhshnXO9z03IT1UKRIVi/VEjpNHtSBIP2o5XSm+e816FzzCFEzAxPw09Z13n20PaQJQ==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/fontawesome-svg-core": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.7.1.tgz", + "integrity": "sha512-8dBIHbfsKlCk2jHQ9PoRBg2Z+4TwyE3vZICSnoDlnsHA6SiMlTwfmW6yX0lHsRmWJugkeb92sA0hZdkXJhuz+g==", + "license": "MIT", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-brands-svg-icons": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.7.1.tgz", + "integrity": "sha512-nJR76eqPzCnMyhbiGf6X0aclDirZriTPRcFm1YFvuupyJOGwlNF022w3YBqu+yrHRhnKRpzFX+8wJKqiIjWZkA==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-regular-svg-icons": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-regular-svg-icons/-/free-regular-svg-icons-6.7.1.tgz", + "integrity": "sha512-e13cp+bAx716RZOTQ59DhqikAgETA9u1qTBHO3e3jMQQ+4H/N1NC1ZVeFYt1V0m+Th68BrEL1/X6XplISutbXg==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/free-solid-svg-icons": { + "version": "6.7.1", + "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.7.1.tgz", + "integrity": "sha512-BTKc0b0mgjWZ2UDKVgmwaE0qt0cZs6ITcDgjrti5f/ki7aF5zs+N91V6hitGo3TItCFtnKg6cUVGdTmBFICFRg==", + "license": "(CC-BY-4.0 AND MIT)", + "dependencies": { + "@fortawesome/fontawesome-common-types": "6.7.1" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/@fortawesome/react-fontawesome": { + "version": "0.2.2", + "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.2.tgz", + "integrity": "sha512-EnkrprPNqI6SXJl//m29hpaNzOp1bruISWaOiRtkMi/xSvHJlzc2j2JAYS7egxt/EbjSNV/k6Xy0AQI6vB2+1g==", + "license": "MIT", + "dependencies": { + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "@fortawesome/fontawesome-svg-core": "~1 || ~6", + "react": ">=16.3" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -3620,7 +3695,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "license": "MIT", "engines": { "node": ">=0.10.0" @@ -4206,7 +4280,6 @@ "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "license": "MIT", "dependencies": { "loose-envify": "^1.4.0", @@ -4274,7 +4347,6 @@ "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true, "license": "MIT" }, "node_modules/read-cache": { diff --git a/package.json b/package.json index 4ccc26b9..b9fc5128 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,11 @@ "prepare": "husky" }, "dependencies": { + "@fortawesome/fontawesome-svg-core": "^6.7.1", + "@fortawesome/free-brands-svg-icons": "^6.7.1", + "@fortawesome/free-regular-svg-icons": "^6.7.1", + "@fortawesome/free-solid-svg-icons": "^6.7.1", + "@fortawesome/react-fontawesome": "^0.2.2", "@next/third-parties": "^15.0.3", "framer-motion": "^11.11.13", "next": "14.2.15", From d4bebf7187d6b522c8955a30743606ddeebb60b1 Mon Sep 17 00:00:00 2001 From: Dada878 Date: Wed, 27 Nov 2024 14:03:26 +0800 Subject: [PATCH 2/6] feat: setup fontawesome --- app/layout.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/app/layout.tsx b/app/layout.tsx index 0a0269b6..96ff63e9 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -3,6 +3,10 @@ import { Inter } from "next/font/google"; import "./cfp/globals.css"; import { GoogleTagManager } from "@next/third-parties/google"; +import { config } from "@fortawesome/fontawesome-svg-core"; +import "@fortawesome/fontawesome-svg-core/styles.css"; +config.autoAddCss = false; + const inter = Inter({ subsets: ["latin"] }); export default function Layout({ children }: { children: ReactNode }) { const jsonLd = { From e96f87268be33ca7cf98a7f8d9fdd2e2cd06ee99 Mon Sep 17 00:00:00 2001 From: Dada878 Date: Wed, 27 Nov 2024 17:27:55 +0800 Subject: [PATCH 3/6] feat: add early bird plan button --- .../(submission)/_components/early-bird.tsx | 111 ++++++++++++++++++ app/cfp/(submission)/normal/page.tsx | 5 + app/cfp/globals.css | 31 +++++ 3 files changed, 147 insertions(+) create mode 100644 app/cfp/(submission)/_components/early-bird.tsx diff --git a/app/cfp/(submission)/_components/early-bird.tsx b/app/cfp/(submission)/_components/early-bird.tsx new file mode 100644 index 00000000..87c539e9 --- /dev/null +++ b/app/cfp/(submission)/_components/early-bird.tsx @@ -0,0 +1,111 @@ +"use client"; + +import { AnimatePresence, motion } from "framer-motion"; +import { useState } from "react"; + +export default function EarlyBird() { + const [isOpen, setIsOpen] = useState(false); + return ( + <> + + + + ); +} + +function Dialog({ + isOpen, + setIsOpen, +}: { + isOpen: boolean; + setIsOpen: (isOpen: boolean) => void; +}) { + return ( + + {isOpen && ( + { + setIsOpen(false); + }} + > + e.stopPropagation()} + className="absolute inset-5 flex flex-col items-center justify-between overflow-y-scroll rounded-lg bg-background p-8 md:static md:max-w-[70%] md:justify-start lg:max-w-[60%]" + > +
+

+ 早鳥投稿計劃 +

+

+ 為了鼓勵講者儘早送出稿件,讓您的精彩想法可以更早進入我們的視野。同時也能讓您提早規劃與完善內容,以充裕的時間打造更精彩的分享。今年我們新增了「早鳥投稿」的機制! +

+

+ 凡是在早鳥投稿期間送出且{" "} + 成功錄取{" "} + 的稿件,我們將提供可在{" "} + + 年會當天使用的紀念品抵用券 + {" "} + ,讓您盡情選購 SITCON 紀念品! +

+

+ 早鳥投稿的截止時間為{" "} + 2024/12/25 23:59 + ,請把握時間搶先投稿。已送出的稿件若有需要,也可以在 2025/1/21 + 23:59 + 投稿截止前修改稿件內容,在早鳥期限截止後編輯內容不會影響您早鳥投稿的資格與權利。 +

+

+ 此外,{" "} + + 早鳥投稿不會影響審稿過程 + {" "} + ,所有稿件都將根據相同的審核標準進行公平評選。我們期望能透過早鳥投稿計劃為講者提供更多彈性和激勵,並期待收到更多創新、多元的議程投稿,讓 + SITCON 年會更精彩! +

+
+ +
+
+ )} +
+ ); +} + +function ExclamationMark() { + return ( + + + + ); +} diff --git a/app/cfp/(submission)/normal/page.tsx b/app/cfp/(submission)/normal/page.tsx index f50d4573..159a2012 100644 --- a/app/cfp/(submission)/normal/page.tsx +++ b/app/cfp/(submission)/normal/page.tsx @@ -8,6 +8,7 @@ import Presentation from "../../_components/logos/presentation"; import Link from "next/link"; import Image from "next/image"; import { ReactNode } from "react"; +import EarlyBird from "../_components/early-bird"; function PresentationBlock(presentation: { title: string; id: string }) { return ( @@ -209,6 +210,10 @@ export default function Page() { +
+ +
+
Date: Wed, 27 Nov 2024 17:37:02 +0800 Subject: [PATCH 4/6] fix: hidden scrollbar in early bird dialog when screen larger --- app/cfp/(submission)/_components/early-bird.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/cfp/(submission)/_components/early-bird.tsx b/app/cfp/(submission)/_components/early-bird.tsx index 87c539e9..745519ae 100644 --- a/app/cfp/(submission)/_components/early-bird.tsx +++ b/app/cfp/(submission)/_components/early-bird.tsx @@ -46,7 +46,7 @@ function Dialog({ exit={{ scale: 0.8 }} transition={{ duration: 0.2 }} onClick={(e) => e.stopPropagation()} - className="absolute inset-5 flex flex-col items-center justify-between overflow-y-scroll rounded-lg bg-background p-8 md:static md:max-w-[70%] md:justify-start lg:max-w-[60%]" + className="absolute inset-5 flex flex-col items-center justify-between rounded-lg bg-background p-8 max-md:overflow-y-scroll md:static md:max-w-[70%] md:justify-start lg:max-w-[60%]" >

From 7e0dd9b291d652317a82f82990800d14dacfd860 Mon Sep 17 00:00:00 2001 From: Dada878 Date: Wed, 27 Nov 2024 23:30:12 +0800 Subject: [PATCH 5/6] feat: update timeline --- .../_components/timeline copy.tsx | 209 ++++++++++++++++++ app/cfp/(submission)/_components/timeline.tsx | 149 ++++--------- app/cfp/globals.css | 12 +- 3 files changed, 259 insertions(+), 111 deletions(-) create mode 100644 app/cfp/(submission)/_components/timeline copy.tsx diff --git a/app/cfp/(submission)/_components/timeline copy.tsx b/app/cfp/(submission)/_components/timeline copy.tsx new file mode 100644 index 00000000..d8388996 --- /dev/null +++ b/app/cfp/(submission)/_components/timeline copy.tsx @@ -0,0 +1,209 @@ +import { ReactNode } from "react"; + +export default function Timeline({ isPoster }: { isPoster?: boolean }) { + return ( + <> + {/* Desktop Layout */} +
+
+
+ + {/* Main horizontal line */} + {/* Arrow */} + + + +
+ + {/* 時程 */} +
+
+ + + + flag +

2024-11-23

+

開始徵稿

+
+ + + featured_seasonal_and_gifts + + } + date="01-21 23:59" + name="早鳥截止" + /> + + + event_busy + + } + date="01-21 23:59" + name="投稿截止" + /> + + email} + date="一月下旬" + name="錄取通知" + /> + + {isPoster ? ( +
+ + + + route +

02-16

+

錄取海報檔案上傳截止

+
+ ) : ( + <> +
+ + + + mic_none +

二月

+

試講

+
+
+ + + + route +

03-07

+

彩排

+
+ + )} + + + groups + + } + date="03-08" + name="年會" + /> +
+
+
+ + {/* Mobile Layout */} +
+
    +
  • + 開始徵稿 + :2024 年 11 月 22 日(六) +
  • +
  • + 投稿截止 + :2025 年 1 月 21 日(二) 23:59 +
  • +
  • + 錄取通知 + :2025 年一月下旬 +
  • + {isPoster ? ( + <> +
  • + 錄取海報檔案上傳截止 + :2025 年 2 月 16 日(日) +
  • + + ) : ( + <> +
  • + 試講 + :2025 年二月 +
  • +
  • + 彩排 + :2025 年 3 月 7 日(五) +
  • + + )} +
  • + 年會 + :2025 年 3 月 8 日(六) +
  • +
+
+ + ); +} + +function TimelineItem({ + icon, + date, + name, +}: { + icon: ReactNode; + date: string; + name: string; +}) { + return ( +
+ + + + {icon} +

{date}

+

{name}

+
+ ); +} diff --git a/app/cfp/(submission)/_components/timeline.tsx b/app/cfp/(submission)/_components/timeline.tsx index 6b0c7a63..78b04014 100644 --- a/app/cfp/(submission)/_components/timeline.tsx +++ b/app/cfp/(submission)/_components/timeline.tsx @@ -33,115 +33,23 @@ export default function Timeline({ isPoster }: { isPoster?: boolean }) { {/* 時程 */}
-
- - - - flag -

2024-11-23

-

開始徵稿

-
- -
- - - - - event_busy - -

01-21 23:59

-

投稿截止

-
- -
- - - - email -

一月下旬

-

錄取通知

-
- + + + + {isPoster ? ( -
- - - - route -

02-16

-

錄取海報檔案上傳截止

-
+ ) : ( <> -
- - - - mic_none -

二月

-

試講

-
-
- - - - route -

03-07

-

彩排

-
+ + )} - -
- - - - groups -

03-08

-

年會

-
+

@@ -154,7 +62,11 @@ export default function Timeline({ isPoster }: { isPoster?: boolean }) { :2024 年 11 月 22 日(六)
  • - 投稿截止 + 早鳥投稿截止 + :2024 年 12 月 25 日(三)23:59 +
  • +
  • + 投稿及稿件修改截止 :2025 年 1 月 21 日(二) 23:59
  • @@ -189,3 +101,30 @@ export default function Timeline({ isPoster }: { isPoster?: boolean }) { ); } + +function TimelineItem({ + icon, + date, + name, +}: { + icon: string; + date: string; + name: string; +}) { + return ( +
    + + + + {icon} +

    {date}

    +

    {name}

    +
    + ); +} diff --git a/app/cfp/globals.css b/app/cfp/globals.css index e7dee375..6d86c8f0 100644 --- a/app/cfp/globals.css +++ b/app/cfp/globals.css @@ -137,7 +137,7 @@ html { font-family: "Material Icons"; font-weight: normal; font-style: normal; - font-size: 64px; /* Preferred icon size */ + font-size: 64px; /* Preferred icon size display: inline-block; line-height: 1; text-transform: none; @@ -184,10 +184,10 @@ html { @apply bg-primary text-background; } .optional { - @apply border-primary border-opacity-30 border-2 border-dashed + @apply border-2 border-dashed border-primary border-opacity-30; } .public { - @apply border-primary border-opacity-30 border-2 + @apply border-2 border-primary border-opacity-30; } .exclamation-mark { @@ -197,7 +197,7 @@ html { @keyframes exclamation-mark-shake { 0% { transform: rotate(0deg); - color: #BDB3FF; + color: #bdb3ff; } 10% { transform: rotate(10deg); @@ -217,6 +217,6 @@ html { } 100% { transform: rotate(0deg); - color: #BDB3FF; + color: #bdb3ff; } -} \ No newline at end of file +} From 08378b41e8e6d42afcdddbdbbd7f360b03232708 Mon Sep 17 00:00:00 2001 From: Dada878 Date: Thu, 28 Nov 2024 00:15:19 +0800 Subject: [PATCH 6/6] feat: add animations --- .../(submission)/_components/early-bird.tsx | 48 +++++++++++++++++-- 1 file changed, 44 insertions(+), 4 deletions(-) diff --git a/app/cfp/(submission)/_components/early-bird.tsx b/app/cfp/(submission)/_components/early-bird.tsx index 745519ae..12e8207a 100644 --- a/app/cfp/(submission)/_components/early-bird.tsx +++ b/app/cfp/(submission)/_components/early-bird.tsx @@ -26,6 +26,28 @@ function Dialog({ isOpen: boolean; setIsOpen: (isOpen: boolean) => void; }) { + const emojiHandMotion = { + rest: { rotate: 0, y: 0, x: 0 }, + hover: { + rotate: -15, + y: -2, + x: 3, + }, + }; + const emojiMouseMotion = { + rest: { + x: 0, + y: 0, + }, + hover: { + x: [0, -1, -1, 0], + y: [-1, 1, 0, 0], + transition: { + repeat: Infinity, + duration: 0.2, + }, + }, + }; return ( {isOpen && ( @@ -80,12 +102,30 @@ function Dialog({ SITCON 年會更精彩!

    - + 好欸 ( + + ੭ + + ˙ + + ˙) + + ੭ + + )}