[add] GitHub sign-in button & page with Strapi API

[add] Lark notification for Vercel preview URL
[optimize] Layout & Style of Team Work card & User Detail page

.github/workflows/docker.yml

@@ -6,8 +6,8 @@ name: Docker Build, Push and Publish
 # events but only for the master branch
 on:
   push:
-    branches:
-      - main
+    tags:
+      - v*
 
 # A workflow run is made up of one or more jobs that can run sequentially or in parallel
 jobs:

.github/workflows/main.yml

@@ -11,35 +11,11 @@ jobs:
       VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-
-      - uses: pnpm/action-setup@v2
-        with:
-          version: 8
-
-      - uses: actions/setup-node@v3
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        with:
-          node-version: 18
-          cache: pnpm
-
-      - name: Install Dependencies
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        run: pnpm i --frozen-lockfile
-
-      - name: Export Static pages
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        run: pnpm export
-
-      - name: Deploy to GitHub pages
-        uses: peaceiris/actions-gh-pages@v3
-        if: ${{ !env.VERCEL_TOKEN || !env.VERCEL_ORG_ID || !env.VERCEL_PROJECT_ID }}
-        with:
-          publish_dir: ./out
-          personal_token: ${{ secrets.GITHUB_TOKEN }}
-          force_orphan: true
+      - uses: actions/checkout@v4
+        if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
       - name: Deploy to Vercel
+        id: vercel-deployment
         uses: amondnet/vercel-action@v25
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
         with:
@@ -49,3 +25,29 @@ jobs:
           vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
           working-directory: ./
           vercel-args: --prod
+
+      - name: Lark notification
+        uses: foxundermoon/feishu-action@v2
+        with:
+          url: ${{ secrets.LARK_CHATBOT_HOOK_URL }}
+          msg_type: post
+          content: |
+            post:
+              zh_cn:
+                title: Vercel 预览环境
+                content:
+                  - - tag: text
+                      text: Git 仓库：
+                    - tag: a
+                      text: ${{ github.server_url }}/${{ github.repository }}
+                      href: ${{ github.server_url }}/${{ github.repository }}
+                  - - tag: text
+                      text: 代码分支：
+                    - tag: a
+                      text: ${{ github.ref }}
+                      href: ${{ github.server_url }}/${{ github.repository }}/tree/${{ github.ref_name }}
+                  - - tag: text
+                      text: 预览链接：
+                    - tag: a
+                      text: ${{ steps.vercel-deployment.outputs.preview-url }}
+                      href: ${{ steps.vercel-deployment.outputs.preview-url }}

.github/workflows/pull-request.yml

@@ -15,6 +15,7 @@ jobs:
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
 
       - name: Deploy to Vercel
+        id: vercel-deployment
         uses: amondnet/vercel-action@v25
         if: ${{ env.VERCEL_TOKEN && env.VERCEL_ORG_ID && env.VERCEL_PROJECT_ID }}
         with:
@@ -23,3 +24,29 @@ jobs:
           vercel-org-id: ${{ secrets.VERCEL_ORG_ID }}
           vercel-project-id: ${{ secrets.VERCEL_PROJECT_ID }}
           working-directory: ./
+
+      - name: Lark notification
+        uses: foxundermoon/feishu-action@v2
+        with:
+          url: ${{ secrets.LARK_CHATBOT_HOOK_URL }}
+          msg_type: post
+          content: |
+            post:
+              zh_cn:
+                title: Vercel 预览环境
+                content:
+                  - - tag: text
+                      text: Git 仓库：
+                    - tag: a
+                      text: ${{ github.server_url }}/${{ github.repository }}
+                      href: ${{ github.server_url }}/${{ github.repository }}
+                  - - tag: text
+                      text: 代码分支：
+                    - tag: a
+                      text: ${{ github.ref }}
+                      href: ${{ github.server_url }}/${{ github.repository }}/tree/${{ github.ref_name }}
+                  - - tag: text
+                      text: 预览链接：
+                    - tag: a
+                      text: ${{ steps.vercel-deployment.outputs.preview-url }}
+                      href: ${{ steps.vercel-deployment.outputs.preview-url }}

components/Team/TeamWorkList.tsx

@@ -1,9 +1,9 @@
 import { faCalendarDay } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { ScrollList } from 'mobx-restful-table';
-import { FilePreview } from 'mobx-restful-table';
+import { observer } from 'mobx-react';
+import { FilePreview, ScrollList } from 'mobx-restful-table';
 import { FC, PureComponent } from 'react';
-import { Button, Card, Col, Container, Row } from 'react-bootstrap';
+import { Button, Card, CardProps, Col, Container, Row } from 'react-bootstrap';
 
 import activityStore from '../../models/Activity';
 import { TeamWork } from '../../models/Activity/Team';
@@ -12,93 +12,117 @@ import { XScrollListProps } from '../layout/ScrollList';
 
 const { t } = i18n;
 
-export interface TeamWorkListLayoutProps extends XScrollListProps<TeamWork> {
-  activity: string;
-  team: string;
-  size?: 'sm' | 'lg';
+export interface TeamWorkCardProps extends TeamWork, Omit<CardProps, 'title'> {
   controls?: boolean;
   onDelete?: (id: TeamWork['id']) => any;
 }
 
-export const TeamWorkListLayout: FC<TeamWorkListLayoutProps> = ({
-  defaultData = [],
-  size,
-  controls,
-  onDelete,
-  activity,
-  team,
-}) => (
-  <Container fluid className="pt-2">
-    {controls && (
-      <header className="mb-3">
-        <Button
-          variant="success"
-          href={`/activity/${activity}/team/${team}/work/create`}
+export const TeamWorkCard: FC<TeamWorkCardProps> = observer(
+  ({
+    className = '',
+    id,
+    type,
+    updatedAt,
+    title,
+    url,
+    description,
+    hackathonName,
+    teamId,
+    controls,
+    onDelete,
+    ...props
+  }) => (
+    <Card className={`border-success ${className}`} {...props}>
+      <Card.Body className="d-flex flex-column">
+        <Card.Title
+          as="a"
+          className="text-primary"
+          title={title}
+          target="_blank"
+          href={url}
         >
-          {t('submit_work')}
-        </Button>
-      </header>
-    )}
-    <Row
-      className="g-4"
-      xs={1}
-      sm={2}
-      {...(size === 'sm' ? {} : !size ? { lg: 3, xxl: 4 } : { lg: 4, xxl: 6 })}
-    >
-      {defaultData.map(({ id, updatedAt, type, url, title, description }) => (
-        <Col key={id}>
-          <Card className="border-success">
-            <Card.Body>
-              <Card.Title
-                as="a"
-                className="text-primary"
-                title={title}
-                target="_blank"
-                href={url}
-              >
-                {title || url}
-              </Card.Title>
-              <p className="border-bottom p-2 text-muted text-truncate">
-                {description}
-              </p>
-              <div className="border-bottom py-2 my-2">
-                <FilePreview className="w-100" type={type} path={url} />
-              </div>
-              <time
-                className="d-block p-2 text-truncate"
-                title={t('update_time')}
-                dateTime={updatedAt}
-              >
-                <FontAwesomeIcon
-                  className="text-success me-2"
-                  icon={faCalendarDay}
-                />
-                {new Date(updatedAt).toLocaleString()}
-              </time>
-            </Card.Body>
-            {controls && (
-              <Card.Footer className="d-flex">
-                <Button
-                  className="flex-fill"
-                  variant="warning"
-                  href={`/activity/${activity}/team/${team}/work/${id}/edit`}
-                >
-                  {t('edit')}
-                </Button>
-                <Button
-                  className="flex-fill ms-3"
-                  variant="danger"
-                  onClick={() => onDelete?.(id)}
-                >
-                  {t('delete')}
-                </Button>
-              </Card.Footer>
-            )}
-          </Card>
-        </Col>
-      ))}
-    </Row>
-  </Container>
+          {title || url}
+        </Card.Title>
+        <p className="border-bottom p-2 text-muted text-truncate">
+          {description}
+        </p>
+        <div className="border-bottom py-2 my-2 flex-fill">
+          <FilePreview className="w-100" type={type} path={url} />
+        </div>
+        <time
+          className="d-block p-2 text-truncate"
+          title={t('update_time')}
+          dateTime={updatedAt}
+        >
+          <FontAwesomeIcon className="text-success me-2" icon={faCalendarDay} />
+          {new Date(updatedAt).toLocaleString()}
+        </time>
+      </Card.Body>
+      {controls && (
+        <Card.Footer className="d-flex">
+          <Button
+            className="flex-fill"
+            variant="warning"
+            href={`/activity/${hackathonName}/team/${teamId}/work/${id}/edit`}
+          >
+            {t('edit')}
+          </Button>
+          <Button
+            className="flex-fill ms-3"
+            variant="danger"
+            onClick={() => onDelete?.(id)}
+          >
+            {t('delete')}
+          </Button>
+        </Card.Footer>
+      )}
+    </Card>
+  ),
+);
+
+export interface TeamWorkListLayoutProps
+  extends XScrollListProps<TeamWork>,
+    Pick<TeamWorkCardProps, 'controls' | 'onDelete'> {
+  activity: string;
+  team: string;
+  size?: 'sm' | 'lg';
+}
+
+export const TeamWorkListLayout: FC<TeamWorkListLayoutProps> = observer(
+  ({ defaultData = [], size, controls, onDelete, activity, team }) => (
+    <Container fluid className="pt-2">
+      {controls && (
+        <header className="mb-3">
+          <Button
+            variant="success"
+            href={`/activity/${activity}/team/${team}/work/create`}
+          >
+            {t('submit_work')}
+          </Button>
+        </header>
+      )}
+      <Row
+        className="g-4"
+        xs={1}
+        sm={2}
+        {...(size === 'sm'
+          ? {}
+          : !size
+            ? { lg: 3, xxl: 4 }
+            : { lg: 4, xxl: 6 })}
+      >
+        {defaultData.map(work => (
+          <Col key={work.id}>
+            <TeamWorkCard
+              className="h-100"
+              {...work}
+              {...{ controls, onDelete }}
+            />
+          </Col>
+        ))}
+      </Row>
+    </Container>
+  ),
 );
 
 export class TeamWorkList extends PureComponent<TeamWorkListLayoutProps> {

components/User/ServerSessionBox.tsx

@@ -1,13 +1,28 @@
-import dynamic from 'next/dynamic';
+import { Icon } from 'idea-react';
+import { observer } from 'mobx-react';
 import { JWTProps } from 'next-ssr-middleware';
 import { FC, HTMLAttributes } from 'react';
+import { Button } from 'react-bootstrap';
 
-const AuthingGuard = dynamic(() => import('./AuthingGuard'), { ssr: false });
+import { i18n } from '../../models/Base/Translation';
+import { strapiClient } from '../../models/User/Session';
 
 export type ServerSessionBoxProps = HTMLAttributes<HTMLDivElement> & JWTProps;
 
-export const ServerSessionBox: FC<ServerSessionBoxProps> = ({
-  jwtPayload,
-  children,
-  ...props
-}) => <div {...props}>{jwtPayload ? children : <AuthingGuard />}</div>;
+export const ServerSessionBox: FC<ServerSessionBoxProps> = observer(
+  ({ jwtPayload, children, ...props }) => (
+    <div {...props}>
+      {jwtPayload ? (
+        children
+      ) : (
+        <Button
+          variant="dark"
+          size="lg"
+          href={`${strapiClient.baseURI}connect/github`}
+        >
+          <Icon className="me-2" name="github" /> GitHub {i18n.t('sign_in')}
+        </Button>
+      )}
+    </div>
+  ),
+);