idea2app · TechQuery · Aug 28, 2025 · Aug 21, 2025 · Aug 22, 2025 · Aug 24, 2025
diff --git a/.dockerignore b/.dockerignore
@@ -1,6 +1,6 @@
 README.md
 node_modules/
-.eslintrc.json
+eslint.config.ts
 .next/
 .vercel/
 start.sh

diff --git a/.env b/.env
@@ -14,3 +14,7 @@ NEXT_PUBLIC_CLIENT_TABLE = tblsb0vx4fqjSrGL
 NEXT_PUBLIC_PROJECT_TABLE = tblCxasoUUub3buB
 NEXT_PUBLIC_MEMBER_TABLE = tblJ98JHGEX0o6ij
 NEXT_PUBLIC_MEMBER_VIEW = vewLf4M0P8
+
+NEXT_PUBLIC_LARK_API_HOST = https://open.feishu.cn/open-apis/
+NEXT_PUBLIC_LARK_APP_ID = cli_a2c7771153f8900c
+NEXT_PUBLIC_LARK_WIKI_URL = https://idea2app.feishu.cn/wiki/space/7318346900506181660
diff --git a/components/Git/Card.tsx b/components/Git/Card.tsx
@@ -1,10 +1,12 @@
-import { Button, Chip } from '@mui/material';
+import { Button, Chip, Divider, IconButton } from '@mui/material';
 import { GitRepository } from 'mobx-github';
 import { observer } from 'mobx-react';
 import Link from 'next/link';
 import { FC, useContext } from 'react';
 
 import { I18nContext } from '../../models/Translation';
+import { SymbolIcon } from '../Icon';
+import { GitpodIcon, OcticonIcon } from '../Layout/Svg';
 
 export interface GitCardProps
   extends Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
@@ -18,37 +20,67 @@ export const GitCard: FC<GitCardProps> = observer(
 
     return (
       <li
-        className={`${className} elevation-1 hover:elevation-8 grid grid-cols-1 grid-rows-10 gap-2 rounded-2xl border p-4 dark:border-0`}
+        className={`${className} elevation-1 hover:elevation-4 grid grid-cols-1 grid-rows-6 gap-2 rounded-2xl border border-gray-200 p-4 dark:border-0`}
       >
-        <h2 className="row-span-2 text-lg">
+        <h3 className="row-span-1 text-lg">
           <a target="_blank" href={html_url} rel="noreferrer">
             {full_name}
           </a>
-        </h2>
+        </h3>
 
-        <nav className="row-span-3 flex flex-row flex-wrap gap-2">
+        <nav className="scrollbar-none row-span-1 flex snap-x snap-mandatory flex-row flex-nowrap gap-2 overflow-x-scroll">
           {topics.map(topic => (
             <Chip
               key={topic}
               size="small"
-              component="a"
+              color="info"
+              variant="outlined"
+              component={Link}
               target="_blank"
               href={`https://github.com/topics/${topic}`}
               label={topic}
+              clickable
             />
           ))}
         </nav>
 
-        <p className="row-span-3 text-sm">{description}</p>
+        <p className="row-span-3 text-sm text-neutral-500">{description}</p>
+        <div className="row-span-1 flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <IconButton
+              component="a"
+              target="_blank"
+              href={`https://codespaces.new/${full_name}`}
+              rel="noreferrer"
+            >
+              <OcticonIcon />
+            </IconButton>
+            <IconButton
+              component="a"
+              target="_blank"
+              href={`https://gitpod.io/?autostart=true#${html_url}`}
+              rel="noreferrer"
+            >
+              <GitpodIcon className="h-6 w-6 font-extralight" />
+            </IconButton>
+            <IconButton component="a" target="_blank" href={html_url} rel="noreferrer">
+              <SymbolIcon name="code" />
+            </IconButton>
+          </div>
 
-        <Button
-          className="row-span-2 place-self-center"
-          component={Link}
-          target="_blank"
-          href={homepage ?? html_url}
-        >
-          {t('home_page')}
-        </Button>
+          <Button
+            component="a"
+            className="!rounded-full"
+            variant="contained"
+            color="info"
+            target="_blank"
+            href={homepage ?? html_url}
+            disabled={!(homepage ?? html_url)}
+            startIcon={<SymbolIcon name="visibility" />}
+          >
+            {t('preview')}
+          </Button>
+        </div>
       </li>
     );
   },

diff --git a/components/Git/Issue/Card.tsx b/components/Git/Issue/Card.tsx
@@ -22,7 +22,7 @@ export const IssueCard: FC<IssueCardProps> = ({
 }) => (
   <Card {...props}>
     <CardContent className="flex h-full flex-col justify-between gap-2">
-      <h2 className="text-2xl">
+      <h2 className="text-2xl font-semibold">
         <a
           href={html_url}
           target="_blank"

diff --git a/components/Layout/Footer.tsx b/components/Layout/Footer.tsx
@@ -1,5 +1,5 @@
 export const Footer = () => (
-  <div className="container mx-auto flex max-w-(--breakpoint-xl) items-center justify-between border-t-2 px-4 py-12 text-center">
+  <div className="container mx-auto flex max-w-screen-xl items-center justify-between border-t-2 px-4 py-12 text-center">
     © 2024 idea2app
     <ul className="flex gap-4">
       <li>

diff --git a/components/Layout/MainNavigator.tsx b/components/Layout/MainNavigator.tsx
@@ -1,20 +1,25 @@
-import { AppBar, Drawer, IconButton, Menu, MenuItem, PopoverProps, Toolbar } from '@mui/material';
+import {
+  AppBar,
+  Button,
+  Drawer,
+  IconButton,
+  Menu,
+  MenuItem,
+  PopoverProps,
+  Toolbar,
+} from '@mui/material';
 import { computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
-import { ObservedComponent, observePropsState } from 'mobx-react-helper';
+import { ObservedComponent } from 'mobx-react-helper';
 import Link from 'next/link';
-import { Component } from 'react';
 
 import { i18n, I18nContext, LanguageName } from '../../models/Translation';
 import { SymbolIcon } from '../Icon';
 import { ColorModeIconDropdown } from './ColorModeDropdown';
 import { BrandLogo, GithubIcon } from './Svg';
 
-export interface MainNavigator extends ObservedComponent<{}, typeof i18n> {}
-
 @observer
-@observePropsState
-export class MainNavigator extends Component {
+export class MainNavigator extends ObservedComponent<{}, typeof i18n> {
   static contextType = I18nContext;
 
   @observable accessor menuExpand = false;
@@ -26,9 +31,10 @@ export class MainNavigator extends Component {
 
     return [
       { title: t('latest_projects'), href: '/project' },
-      { title: 'GitHub-reward', href: '/project/reward/issue', target: '_top' },
       { title: t('member'), href: '/member' },
       { title: t('open_source_project'), href: '/open-source' },
+      { title: t('wiki'), href: '/wiki' },
+      { title: t('github_reward'), href: '/project/reward/issue', target: '_top' },
     ];
   }
 
@@ -39,9 +45,9 @@ export class MainNavigator extends Component {
 
   renderLinks = () =>
     this.links.map(({ title, href, target }) => (
-      <Link key={title} className="py-1" href={href} target={target}>
+      <Button key={title} component={Link} className="py-1" href={href} target={target}>
         {title}
-      </Link>
+      </Button>
     ));
 
   renderI18nSwitch = () => {
@@ -81,7 +87,7 @@ export class MainNavigator extends Component {
   };
 
   renderDrawer = () => (
-    <nav className="sm:hidden">
+    <nav className="md:hidden">
       <IconButton
         aria-label="nav links"
         aria-controls="drawer"
@@ -109,9 +115,9 @@ export class MainNavigator extends Component {
 
   render() {
     return (
-      <AppBar color="transparent" className="fixed backdrop-blur-sm" style={{ zIndex: 1201 }}>
+      <AppBar color="transparent" className="fixed z-[1201] backdrop-blur-md">
         <Toolbar>
-          <div className="container mx-auto flex max-w-(--breakpoint-xl) items-center justify-between px-3">
+          <div className="container mx-auto flex max-w-screen-xl items-center justify-between px-3">
             <div className="flex flex-row items-center gap-3">
               {this.renderDrawer()}
 
@@ -121,17 +127,19 @@ export class MainNavigator extends Component {
               </Link>
             </div>
 
-            <nav className="item-center hidden flex-row gap-4 sm:flex">{this.renderLinks()}</nav>
+            <nav className="item-center hidden flex-row gap-4 md:flex">{this.renderLinks()}</nav>
 
             <div className="flex flex-row items-center gap-3 sm:gap-6">
-              <Link
+              <IconButton
+                className="!text-black dark:!text-white"
+                component={Link}
                 href="https://github.com/idea2app"
                 target="_blank"
                 rel="noopener noreferrer"
                 aria-label="idea2app's GitHub account"
               >
                 <GithubIcon />
-              </Link>
+              </IconButton>
               <ColorModeIconDropdown />
               {this.renderI18nSwitch()}
             </div>

diff --git a/components/Layout/ScrollListPage.tsx b/components/Layout/ScrollListPage.tsx
@@ -31,9 +31,9 @@ export const ScrollListPage = <D extends DataObject, F extends Filter<D> = Filte
   const i18n = useContext(I18nContext);
 
   return (
-    <div className={`container mx-auto max-w-(--breakpoint-xl) px-4 pt-16 pb-6 ${className}`}>
+    <div className={`container mx-auto max-w-screen-xl px-4 pt-16 pb-6 ${className}`}>
       <PageHead title={title} />
-      <h1 className="my-8 text-4xl">{header}</h1>
+      <h1 className="my-8 text-4xl font-semibold">{header}</h1>
 
       {scrollList ? (
         <ScrollList

diff --git a/components/Layout/Section.tsx b/components/Layout/Section.tsx
@@ -14,8 +14,8 @@ export const Section: FC<SectionProps> = observer(
     const { t } = useContext(I18nContext);
 
     return (
-      <section className={`mx-auto flex max-w-(--breakpoint-xl) flex-col gap-6 py-8 ${className}`}>
-        <h2 className="text-center" id={id}>
+      <section className={`mx-auto flex max-w-screen-xl flex-col gap-6 py-8 ${className}`}>
+        <h2 className="text-center font-semibold" id={id}>
           {title}
         </h2>
 

diff --git a/components/Layout/Svg.tsx b/components/Layout/Svg.tsx
@@ -7,6 +7,23 @@ export const GithubIcon: FC<SvgIconProps> = props => (
   </SvgIcon>
 );
 
+export const OcticonIcon: FC<SvgIconProps> = props => (
+  <SvgIcon {...props}>
+    <path d="M3.5 3.75C3.5 2.784 4.284 2 5.25 2h13.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0 1 18.75 13H5.25a1.75 1.75 0 0 1-1.75-1.75Zm-2 12c0-.966.784-1.75 1.75-1.75h17.5c.966 0 1.75.784 1.75 1.75v4a1.75 1.75 0 0 1-1.75 1.75H3.25a1.75 1.75 0 0 1-1.75-1.75ZM5.25 3.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h13.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Zm-2 12a.25.25 0 0 0-.25.25v4c0 .138.112.25.25.25h17.5a.25.25 0 0 0 .25-.25v-4a.25.25 0 0 0-.25-.25Z" />
+  </SvgIcon>
+);
+
+export const GitpodIcon: FC<SvgIconProps> = props => (
+  <SvgIcon {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 189 208">
+      <path
+        d="M112.287 10.358c5.613 9.855 2.2 22.409-7.623 28.04L43.586 73.41a5.2 5.2 0 0 0-2.614 4.51V132.9c0 1.864.997 3.584 2.614 4.511l48.326 27.703a5.202 5.202 0 0 0 5.176 0l48.326-27.703a5.199 5.199 0 0 0 2.614-4.511v-34.19l-43.461 24.6c-9.854 5.577-22.35 2.085-27.909-7.8-5.56-9.885-2.079-22.42 7.775-27.997l62.187-35.2C165.563 41.592 189 55.322 189 77.14v59.926c0 14.036-7.497 26.996-19.645 33.96l-55.511 31.821a38.883 38.883 0 0 1-38.688 0l-55.51-31.821C7.496 164.062 0 151.102 0 137.066V73.754c0-14.036 7.497-26.996 19.645-33.96L84.336 2.712c9.823-5.63 22.337-2.207 27.951 7.647Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  </SvgIcon>
+);
+
 export const BrandLogo: FC<SvgIconProps> = props => (
   <SvgIcon {...props}>
     <svg

diff --git a/components/Member/Card.tsx b/components/Member/Card.tsx
@@ -1,4 +1,4 @@
-import { CardProps, Chip } from '@mui/material';
+import { Button, CardProps, Chip, IconButton } from '@mui/material';
 import { marked } from 'marked';
 import { observer } from 'mobx-react';
 import Link from 'next/link';
@@ -12,42 +12,56 @@ export type MemberCardProps = Member & Omit<CardProps, 'id'>;
 export const MemberCard: FC<MemberCardProps> = observer(
   ({ className = '', nickname, skill, position, summary, github }) => (
     <li
-      className={`elevation-1 hover:elevation-8 relative rounded-2xl border p-4 dark:border-0 ${className} mb-4 flex break-inside-avoid flex-col gap-3`}
+      className={`elevation-1 hover:elevation-4 relative rounded-2xl border border-gray-200 p-4 dark:border-0 ${className} mb-4 flex break-inside-avoid flex-col gap-3`}
     >
       {github && (
-        <a
-          className="absolute top-4 right-4"
+        <IconButton
+          component={Link}
+          className="!absolute top-4 right-4"
           href={`https://github.com/${String(github)}`}
           target="_blank"
           rel="noreferrer"
           aria-label={`${String(nickname)}'s GitHub account`}
         >
           <GithubIcon />
-        </a>
+        </IconButton>
       )}
 
       <div className="flex w-auto items-center gap-4">
         {github && (
-          <img
-            style={{ width: '4rem', height: '4rem' }}
-            className="rounded-full object-cover"
-            src={`https://github.com/${String(github)}.png`}
-            alt={String(github)}
-          />
+          <Link href={`/member/${String(nickname)}`} aria-label={String(nickname)}>
+            <img
+              style={{ width: '4rem', height: '4rem' }}
+              className="rounded-full object-cover"
+              src={`https://github.com/${String(github)}.png`}
+              alt={String(github)}
+            />
+          </Link>
         )}
-        <Link href={`/member/${String(nickname)}`} aria-label={String(nickname)}>
-          <h2 className="text-base">{String(nickname)}</h2>
-          <p className="text-sm">{String(position ?? '')}</p>
-        </Link>
+        <hgroup>
+          <h4 className="text-base font-bold">{String(nickname)}</h4>
+          <p className="text-sm text-neutral-400">{String(position ?? '')}</p>
+        </hgroup>
       </div>
 
-      <ul className="flex flex-wrap items-center gap-2">
+      <ul className="scrollbar-none scroll-snap-x flex snap-mandatory flex-nowrap gap-2 overflow-x-scroll">
         {(skill as string[]).map(value => (
-          <Chip key={value} size="small" component="li" label={value} />
+          <Chip
+            key={value}
+            className=""
+            size="small"
+            component="li"
+            variant="outlined"
+            color="primary"
+            label={value}
+          />
         ))}
       </ul>
 
-      <div dangerouslySetInnerHTML={{ __html: marked(summary as string) }} />
+      <p
+        dangerouslySetInnerHTML={{ __html: marked((summary as string) || '') }}
+        className="text-neutral-500"
+      />
     </li>
   ),
 );
diff --git a/eslint.config.ts b/eslint.config.ts
@@ -1,6 +1,5 @@
 import cspellPlugin from '@cspell/eslint-plugin';
 import eslint from '@eslint/js';
-// @ts-expect-error eslint-plugin-next doesn't come with TypeScript definitions
 import nextPlugin from '@next/eslint-plugin-next';
 import stylistic from '@stylistic/eslint-plugin';
 import eslintConfigPrettier from 'eslint-config-prettier';
@@ -48,6 +47,7 @@ export default tsEslint.config(
         warnOnUnsupportedTypeScriptVersion: false,
       },
     },
+    // @ts-expect-error https://github.com/vercel/next.js/issues/81695
     rules: {
       // spellchecker
       '@cspell/spellchecker': [

diff --git a/models/Document.ts b/models/Document.ts
@@ -0,0 +1,10 @@
+import { DocumentModel } from 'mobx-lark';
+
+import { lark } from '../pages/api/Lark/core';
+import { LarkWikiDomain } from './configuration';
+
+export class MyDocumentModel extends DocumentModel {
+  client = lark.client;
+}
+
+export default new MyDocumentModel(LarkWikiDomain);
diff --git a/models/Wiki.ts b/models/Wiki.ts
@@ -0,0 +1,10 @@
+import { WikiNodeModel } from 'mobx-lark';
+
+import { lark } from '../pages/api/Lark/core';
+import { LarkWikiDomain, LarkWikiId } from './configuration';
+
+export class MyWikiNodeModel extends WikiNodeModel {
+  client = lark.client;
+}
+
+export default new MyWikiNodeModel(LarkWikiDomain, LarkWikiId);