[add] Hackathon Project page & components

components/Activity/CommentBox.tsx

@@ -0,0 +1,25 @@
+import Giscus from '@giscus/react';
+import { observer } from 'mobx-react';
+import { useContext } from 'react';
+
+import { I18nContext } from '../../models/Translation';
+
+export const CommentBox = observer(() => {
+  const { currentLanguage } = useContext(I18nContext);
+
+  return (
+    <Giscus
+      repo="Open-Source-Bazaar/Open-Source-Bazaar.github.io"
+      repoId="R_kgDOGzCrLg"
+      category="Comments"
+      categoryId="DIC_kwDOGzCrLs4C0g_6"
+      mapping="pathname"
+      strict="0"
+      reactionsEnabled="1"
+      emitMetadata="0"
+      inputPosition="bottom"
+      theme="preferred_color_scheme"
+      lang={currentLanguage.startsWith('zh-') ? currentLanguage : currentLanguage.split('-')[0]}
+    />
+  );
+});

components/Activity/ProductCard.tsx

@@ -0,0 +1,77 @@
+import { observer } from 'mobx-react';
+import { FilePreview } from 'mobx-restful-table';
+import { FC } from 'react';
+import { CardProps, Card, Button } from 'react-bootstrap';
+import { formatDate } from 'web-utility';
+
+import { Product } from '../../models/Hackathon';
+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>
+
+        {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>
+        )}
+
+        <time className="text-dark opacity-75 small" dateTime={new Date(createdAt as number).toJSON()}>
+          📅 {formatDate(createdAt as number)}
+        </time>
+      </Card.Body>
+    </Card>
+  ),
+);

components/Navigator/MainNavigator.tsx

@@ -1,3 +1,4 @@
+import { textJoin } from 'mobx-i18n';
 import { observer } from 'mobx-react';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
@@ -39,11 +40,24 @@ const topNavBarMenu = ({ t }: typeof i18n): MenuItem[] => [
     subs: [
       { href: '/project', title: t('open_source_projects') },
       { href: '/issue', title: 'GitHub issues' },
+      { href: '/license-filter', title: t('license_filter') },
+    ],
+  },
+  {
+    title: t('hackathon'),
+    subs: [
       {
         href: 'https://github.com/Open-Source-Bazaar/Git-Hackathon-scaffold',
-        title: t('hackathon'),
+        title: textJoin('GitHub', t('hackathon')),
+      },
+      {
+        href: '/search/activity?keywords=Hackathon',
+        title: textJoin('Lark', t('hackathon')),
+      },
+      {
+        href: 'https://test.hackathon.fcc-cd.dev/open-source',
+        title: textJoin(t('hackathon'), t('open_source_projects')),
       },
-      { href: '/license-filter', title: t('license_filter') },
     ],
   },
   {

models/Activity.ts

@@ -2,6 +2,7 @@ import {
   BiDataQueryOptions,
   BiDataTable,
   BiSearch,
+  BiTableSchema,
   LarkPageData,
   makeSimpleFilter,
   normalizeText,
@@ -34,7 +35,9 @@ export type Activity = LarkBase &
     | 'liveLink'
     | `database${'' | 'Schema'}`,
     TableCellValue
-  >;
+  > & {
+    databaseSchema: BiTableSchema;
+  };
 
 export class ActivityModel extends BiDataTable<Activity>() {
   client = larkClient;

models/Hackathon.ts

@@ -6,6 +6,7 @@ import {
   normalizeText,
   TableCellRelation,
   TableCellText,
+  TableCellUser,
   TableCellValue,
   TableRecord,
 } from 'mobx-lark';
@@ -24,7 +25,7 @@ export class AgendaModel extends BiDataTable<Agenda>() {
     return {
       ...meta,
       ...fields,
-      summary: normalizeText(summary as TableCellText),
+      summary: (summary as TableCellText[])!.map(normalizeText),
     };
   }
 }
@@ -140,3 +141,47 @@ export class ProjectModel extends BiDataTable<Project>() {
     };
   }
 }
+
+export type Member = LarkBase &
+  Record<'summary' | 'person' | 'skills' | 'githubAccount' | 'project' | 'status', TableCellValue>;
+
+export class MemberModel extends BiDataTable<Member>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({
+    fields: { summary, person, skills, githubAccount, ...fields },
+    ...meta
+  }: TableRecord<Member>) {
+    return {
+      ...meta,
+      ...fields,
+      person: (person as TableCellUser[])?.[0],
+      summary: (summary as TableCellText[])!.map(normalizeText),
+      skills: skills?.toString().split(/\s*,\s*/) || [],
+      githubAccount: normalizeText(githubAccount as TableCellText),
+    };
+  }
+}
+
+export type Product = LarkBase &
+  Record<
+    'name' | 'project' | 'template' | 'link' | 'sourceLink' | 'file' | 'summary',
+    TableCellValue
+  >;
+
+export class ProductModel extends BiDataTable<Product>() {
+  client = larkClient;
+
+  queryOptions: BiDataQueryOptions = { text_field_as_array: false };
+
+  extractFields({ fields: { link, sourceLink, ...fields }, ...meta }: TableRecord<Product>) {
+    return {
+      ...meta,
+      ...fields,
+      link: normalizeText(link as TableCellText),
+      sourceLink: normalizeText(sourceLink as TableCellText),
+    };
+  }
+}

package.json

@@ -14,13 +14,14 @@
     "test": "lint-staged  &&  tsc --noEmit"
   },
   "dependencies": {
-    "@koa/router": "^15.1.1",
+    "@giscus/react": "^3.1.0",
+    "@koa/router": "^15.2.0",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
     "@next/mdx": "^16.1.1",
     "core-js": "^3.47.0",
     "echarts-jsx": "^0.6.0",
-    "file-type": "^21.2.0",
+    "file-type": "^21.3.0",
     "idea-react": "^2.0.0-rc.13",
     "jsonwebtoken": "^9.0.3",
     "koa": "^3.1.1",
@@ -32,7 +33,7 @@
     "mobx": "^6.15.0",
     "mobx-github": "^0.6.2",
     "mobx-i18n": "^0.7.2",
-    "mobx-lark": "^2.6.3",
+    "mobx-lark": "^2.6.4",
     "mobx-react": "^9.2.1",
     "mobx-react-helper": "^0.5.1",
     "mobx-restful": "^2.1.4",
@@ -81,7 +82,7 @@
     "lint-staged": "^16.2.7",
     "next-with-less": "^3.0.1",
     "prettier": "^3.7.4",
-    "prettier-plugin-css-order": "^2.1.2",
+    "prettier-plugin-css-order": "^2.2.0",
     "sass": "^1.97.1",
     "typescript": "~5.9.3",
     "typescript-eslint": "^8.51.0"

pages/hackathon/[id].tsx

@@ -1,5 +1,6 @@
 import { BiTableSchema, TableCellLocation, TableCellUser } from 'mobx-lark';
 import { observer } from 'mobx-react';
+import Link from 'next/link';
 import { cache, compose, errorLogger } from 'next-ssr-middleware';
 import { FC, useContext } from 'react';
 import { Badge, Card, Col, Container, Row } from 'react-bootstrap';
@@ -34,7 +35,6 @@ export const getServerSideProps = compose<{ id: string }>(
   async ({ params }) => {
     const activity = await new ActivityModel().getOne(params!.id);
 
-    // @ts-expect-error Upstream compatibility
     const { appId, tableIdMap } = activity.databaseSchema as BiTableSchema;
 
     const [people, organizations, agenda, prizes, templates, projects] = await Promise.all([
@@ -199,11 +199,18 @@ const HackathonDetail: FC<HackathonDetailProps> = observer(({ activity, hackatho
           <h2 className={styles.sectionTitle}>💡 {t('projects')}</h2>
 
           <Row as="ul" className="list-unstyled mt-4 g-3" md={2} lg={3} xl={4}>
-            {projects.map(({ name, score, summary, createdBy, members }) => (
+            {projects.map(({ id, name, score, summary, createdBy, members }) => (
               <Col as="li" key={name as string}>
                 <Card className={styles.projectCard} body>
                   <div className="d-flex justify-content-between align-items-start mb-3">
-                    <h6 className="text-white flex-grow-1">{name as string}</h6>
+                    <h6 className="text-white flex-grow-1">
+                      <Link
+                        className="stretched-link"
+                        href={`${ActivityModel.getLink(activity)}/team/${id}`}
+                      >
+                        {name as string}
+                      </Link>
+                    </h6>
                     <div className={styles.scoreCircle}>{score as number}</div>
                   </div>
                   <p className="text-white-50 small mb-3">{summary as string}</p>