[refactor] redesign Hackathon Team page

README.md

@@ -22,10 +22,13 @@
 ## 开始
 
 ```bash
+pnpm run sync-env
 pnpm install
 pnpm dev
 ```
 
+`pnpm run sync-env` 会在你显式执行时，从 `Open-Source-Bazaar/key-vault` 同步当前项目所需的私有环境文件。出于安全考虑，仓库不会在 `pnpm install` 阶段自动下载 `.env.local`。
+
 可访问 http://localhost:3000.
 
 [1]: https://github.com/idea2app/Lark-Next-Bootstrap-ts

components/Activity/ProductCard.tsx

@@ -10,68 +10,82 @@ import styles from '../../styles/Hackathon.module.less';
 export type ProductCardProps = Product & Omit<CardProps, 'id' | 'title'>;
 
 export const ProductCard: FC<ProductCardProps> = observer(
-  ({ className = '', id, createdAt, name, sourceLink, link = sourceLink, summary, ...props }) => (
-    <Card className={`${styles.projectCard} ${className}`} {...props}>
-      <Card.Body className="d-flex flex-column">
-        <Card.Title
-          as="a"
-          className="text-dark fw-bold"
-          title={name as string}
-          target="_blank"
-          href={link as string}
-        >
-          {(name || link) as string}
-        </Card.Title>
-        <p className="text-dark opacity-75 mb-3">{summary as string}</p>
-        <div className="flex-fill mb-3">
-          <FilePreview className="w-100" path={link as string} />
-        </div>
+  ({ className = '', id, createdAt, name, sourceLink, link = sourceLink, summary, ...props }) => {
+    const createdAtValue = Number(createdAt);
+    const createdAtISO = Number.isFinite(createdAtValue)
+      ? new Date(createdAtValue).toJSON()
+      : undefined;
+    const createdAtText = Number.isFinite(createdAtValue) ? formatDate(createdAtValue) : '';
 
-        {sourceLink && (
-          <div className="d-flex flex-wrap gap-2 mb-3">
-            <Button
-              variant="dark"
-              size="sm"
-              href={sourceLink as string}
-              target="_blank"
-              rel="noreferrer"
-            >
-              GitHub
-            </Button>
-            <Button
-              variant="primary"
-              size="sm"
-              href={`https://github.dev/${(sourceLink as string).replace('https://github.com/', '')}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              GitHub.dev
-            </Button>
-            <Button
-              variant="dark"
-              size="sm"
-              href={`https://codespaces.new/${(sourceLink as string).replace('https://github.com/', '')}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              Codespaces
-            </Button>
-            <Button
-              variant="warning"
-              size="sm"
-              href={`https://gitpod.io/#${sourceLink as string}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              GitPod
-            </Button>
+    return (
+      <Card className={`${styles.projectCard} ${className}`} {...props}>
+        <Card.Body className="d-flex flex-column">
+          <Card.Title
+            as="a"
+            className="text-dark fw-bold"
+            title={name as string}
+            target="_blank"
+            href={link as string}
+          >
+            {(name || link) as string}
+          </Card.Title>
+          <p className="text-dark opacity-75 mb-3">{summary as string}</p>
+          <div className="flex-fill mb-3">
+            <FilePreview className="w-100" path={link as string} />
           </div>
-        )}
 
-        <time className="text-dark opacity-75 small" dateTime={new Date(createdAt as number).toJSON()}>
-          📅 {formatDate(createdAt as number)}
-        </time>
-      </Card.Body>
-    </Card>
-  ),
+          {sourceLink && (
+            <div className="d-flex flex-wrap gap-2 mb-3">
+              <Button
+                variant="dark"
+                size="sm"
+                href={sourceLink as string}
+                target="_blank"
+                rel="noreferrer"
+              >
+                GitHub
+              </Button>
+              <Button
+                variant="primary"
+                size="sm"
+                href={`https://github.dev/${(sourceLink as string).replace('https://github.com/', '')}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                GitHub.dev
+              </Button>
+              <Button
+                variant="dark"
+                size="sm"
+                href={`https://codespaces.new/${(sourceLink as string).replace('https://github.com/', '')}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                Codespaces
+              </Button>
+              <Button
+                variant="warning"
+                size="sm"
+                href={`https://gitpod.io/#${sourceLink as string}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                GitPod
+              </Button>
+            </div>
+          )}
+
+          {createdAtISO && (
+            <time
+              suppressHydrationWarning
+              className="text-dark opacity-75 small"
+              dateTime={createdAtISO}
+            >
+              📅 {createdAtText}
+            </time>
+          )}
+        </Card.Body>
+      </Card>
+    );
+  },
 );

package.json

@@ -5,7 +5,7 @@
   "private": true,
   "scripts": {
     "prepare": "husky",
-    "install": "pnpx git-utility download https://github.com/Open-Source-Bazaar/key-vault main Open-Source-Bazaar.github.io  ||  true",
+    "sync-env": "pnpx git-utility download https://github.com/Open-Source-Bazaar/key-vault main Open-Source-Bazaar.github.io",
     "postinstall": "next typegen",
     "dev": "next dev --webpack",
     "build": "next build --webpack",

pages/hackathon/[id].tsx

@@ -72,6 +72,7 @@ interface HackathonDetailProps {
     projects: Project[];
     templates: Template[];
   };
+  renderedAt: number;
 }
 
 export const getServerSideProps = compose<{ id: string }>(
@@ -99,12 +100,13 @@ export const getServerSideProps = compose<{ id: string }>(
       props: {
         activity,
         hackathon: { people, organizations, agenda, prizes, templates, projects },
+        renderedAt: Date.now(),
       },
     };
   },
 );
 
-const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon }) => {
+const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackathon, renderedAt }) => {
   const i18n = useContext(I18nContext);
   const { t } = i18n;
   const {
@@ -182,7 +184,7 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
       };
     })
     .filter(({ date, label }) => Boolean(date && label));
-  const now = Date.now();
+  const now = renderedAt;
   const nextAgendaItem = agendaItems.find(({ startedAt, endedAt }) => {
     const started = new Date((startedAt as string) || 0).getTime();
     const ended = new Date((endedAt as string) || 0).getTime();