Skip to content

Commit e6bcede

Browse files
TechQuerySoecka
TechQuery
and
Soecka
authored
[add] Static pages for Lark Wiki documents (#81)
Co-authored-by: soecka <twcbnubio@gmail.com>
1 parent f09e050 commit e6bcede

33 files changed

+4064
-3285
lines changed

‎.dockerignore‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
README.md
22
node_modules/
3-
.eslintrc.json
3+
eslint.config.ts
44
.next/
55
.vercel/
66
start.sh

‎.env‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,3 +14,7 @@ NEXT_PUBLIC_CLIENT_TABLE = tblsb0vx4fqjSrGL
1414
NEXT_PUBLIC_PROJECT_TABLE = tblCxasoUUub3buB
1515
NEXT_PUBLIC_MEMBER_TABLE = tblJ98JHGEX0o6ij
1616
NEXT_PUBLIC_MEMBER_VIEW = vewLf4M0P8
17+
18+
NEXT_PUBLIC_LARK_API_HOST = https://open.feishu.cn/open-apis/
19+
NEXT_PUBLIC_LARK_APP_ID = cli_a2c7771153f8900c
20+
NEXT_PUBLIC_LARK_WIKI_URL = https://idea2app.feishu.cn/wiki/space/7318346900506181660

‎components/Git/Card.tsx‎

Lines changed: 47 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
import { Button, Chip } from '@mui/material';
1+
import { Button, Chip, Divider, IconButton } from '@mui/material';
22
import { GitRepository } from 'mobx-github';
33
import { observer } from 'mobx-react';
44
import Link from 'next/link';
55
import { FC, useContext } from 'react';
66

77
import { I18nContext } from '../../models/Translation';
8+
import { SymbolIcon } from '../Icon';
9+
import { GitpodIcon, OcticonIcon } from '../Layout/Svg';
810

911
export interface GitCardProps
1012
extends Pick<GitRepository, 'full_name' | 'html_url' | 'languages'>,
@@ -18,37 +20,67 @@ export const GitCard: FC<GitCardProps> = observer(
1820

1921
return (
2022
<li
21-
className={`${className} elevation-1 hover:elevation-8 grid grid-cols-1 grid-rows-10 gap-2 rounded-2xl border p-4 dark:border-0`}
23+
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`}
2224
>
23-
<h2 className="row-span-2 text-lg">
25+
<h3 className="row-span-1 text-lg">
2426
<a target="_blank" href={html_url} rel="noreferrer">
2527
{full_name}
2628
</a>
27-
</h2>
29+
</h3>
2830

29-
<nav className="row-span-3 flex flex-row flex-wrap gap-2">
31+
<nav className="scrollbar-none row-span-1 flex snap-x snap-mandatory flex-row flex-nowrap gap-2 overflow-x-scroll">
3032
{topics.map(topic => (
3133
<Chip
3234
key={topic}
3335
size="small"
34-
component="a"
36+
color="info"
37+
variant="outlined"
38+
component={Link}
3539
target="_blank"
3640
href={`https://github.com/topics/${topic}`}
3741
label={topic}
42+
clickable
3843
/>
3944
))}
4045
</nav>
4146

42-
<p className="row-span-3 text-sm">{description}</p>
47+
<p className="row-span-3 text-sm text-neutral-500">{description}</p>
48+
<div className="row-span-1 flex items-center justify-between">
49+
<div className="flex items-center gap-2">
50+
<IconButton
51+
component="a"
52+
target="_blank"
53+
href={`https://codespaces.new/${full_name}`}
54+
rel="noreferrer"
55+
>
56+
<OcticonIcon />
57+
</IconButton>
58+
<IconButton
59+
component="a"
60+
target="_blank"
61+
href={`https://gitpod.io/?autostart=true#${html_url}`}
62+
rel="noreferrer"
63+
>
64+
<GitpodIcon className="h-6 w-6 font-extralight" />
65+
</IconButton>
66+
<IconButton component="a" target="_blank" href={html_url} rel="noreferrer">
67+
<SymbolIcon name="code" />
68+
</IconButton>
69+
</div>
4370

44-
<Button
45-
className="row-span-2 place-self-center"
46-
component={Link}
47-
target="_blank"
48-
href={homepage ?? html_url}
49-
>
50-
{t('home_page')}
51-
</Button>
71+
<Button
72+
component="a"
73+
className="!rounded-full"
74+
variant="contained"
75+
color="info"
76+
target="_blank"
77+
href={homepage ?? html_url}
78+
disabled={!(homepage ?? html_url)}
79+
startIcon={<SymbolIcon name="visibility" />}
80+
>
81+
{t('preview')}
82+
</Button>
83+
</div>
5284
</li>
5385
);
5486
},

‎components/Git/Issue/Card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const IssueCard: FC<IssueCardProps> = ({
2222
}) => (
2323
<Card {...props}>
2424
<CardContent className="flex h-full flex-col justify-between gap-2">
25-
<h2 className="text-2xl">
25+
<h2 className="text-2xl font-semibold">
2626
<a
2727
href={html_url}
2828
target="_blank"

‎components/Layout/Footer.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export const Footer = () => (
2-
<div className="container mx-auto flex max-w-(--breakpoint-xl) items-center justify-between border-t-2 px-4 py-12 text-center">
2+
<div className="container mx-auto flex max-w-screen-xl items-center justify-between border-t-2 px-4 py-12 text-center">
33
© 2024 idea2app
44
<ul className="flex gap-4">
55
<li>

‎components/Layout/MainNavigator.tsx‎

Lines changed: 24 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
1-
import { AppBar, Drawer, IconButton, Menu, MenuItem, PopoverProps, Toolbar } from '@mui/material';
1+
import {
2+
AppBar,
3+
Button,
4+
Drawer,
5+
IconButton,
6+
Menu,
7+
MenuItem,
8+
PopoverProps,
9+
Toolbar,
10+
} from '@mui/material';
211
import { computed, observable } from 'mobx';
312
import { observer } from 'mobx-react';
4-
import { ObservedComponent, observePropsState } from 'mobx-react-helper';
13+
import { ObservedComponent } from 'mobx-react-helper';
514
import Link from 'next/link';
6-
import { Component } from 'react';
715

816
import { i18n, I18nContext, LanguageName } from '../../models/Translation';
917
import { SymbolIcon } from '../Icon';
1018
import { ColorModeIconDropdown } from './ColorModeDropdown';
1119
import { BrandLogo, GithubIcon } from './Svg';
1220

13-
export interface MainNavigator extends ObservedComponent<{}, typeof i18n> {}
14-
1521
@observer
16-
@observePropsState
17-
export class MainNavigator extends Component {
22+
export class MainNavigator extends ObservedComponent<{}, typeof i18n> {
1823
static contextType = I18nContext;
1924

2025
@observable accessor menuExpand = false;
@@ -26,9 +31,10 @@ export class MainNavigator extends Component {
2631

2732
return [
2833
{ title: t('latest_projects'), href: '/project' },
29-
{ title: 'GitHub-reward', href: '/project/reward/issue', target: '_top' },
3034
{ title: t('member'), href: '/member' },
3135
{ title: t('open_source_project'), href: '/open-source' },
36+
{ title: t('wiki'), href: '/wiki' },
37+
{ title: t('github_reward'), href: '/project/reward/issue', target: '_top' },
3238
];
3339
}
3440

@@ -39,9 +45,9 @@ export class MainNavigator extends Component {
3945

4046
renderLinks = () =>
4147
this.links.map(({ title, href, target }) => (
42-
<Link key={title} className="py-1" href={href} target={target}>
48+
<Button key={title} component={Link} className="py-1" href={href} target={target}>
4349
{title}
44-
</Link>
50+
</Button>
4551
));
4652

4753
renderI18nSwitch = () => {
@@ -81,7 +87,7 @@ export class MainNavigator extends Component {
8187
};
8288

8389
renderDrawer = () => (
84-
<nav className="sm:hidden">
90+
<nav className="md:hidden">
8591
<IconButton
8692
aria-label="nav links"
8793
aria-controls="drawer"
@@ -109,9 +115,9 @@ export class MainNavigator extends Component {
109115

110116
render() {
111117
return (
112-
<AppBar color="transparent" className="fixed backdrop-blur-sm" style={{ zIndex: 1201 }}>
118+
<AppBar color="transparent" className="fixed z-[1201] backdrop-blur-md">
113119
<Toolbar>
114-
<div className="container mx-auto flex max-w-(--breakpoint-xl) items-center justify-between px-3">
120+
<div className="container mx-auto flex max-w-screen-xl items-center justify-between px-3">
115121
<div className="flex flex-row items-center gap-3">
116122
{this.renderDrawer()}
117123

@@ -121,17 +127,19 @@ export class MainNavigator extends Component {
121127
</Link>
122128
</div>
123129

124-
<nav className="item-center hidden flex-row gap-4 sm:flex">{this.renderLinks()}</nav>
130+
<nav className="item-center hidden flex-row gap-4 md:flex">{this.renderLinks()}</nav>
125131

126132
<div className="flex flex-row items-center gap-3 sm:gap-6">
127-
<Link
133+
<IconButton
134+
className="!text-black dark:!text-white"
135+
component={Link}
128136
href="https://github.com/idea2app"
129137
target="_blank"
130138
rel="noopener noreferrer"
131139
aria-label="idea2app's GitHub account"
132140
>
133141
<GithubIcon />
134-
</Link>
142+
</IconButton>
135143
<ColorModeIconDropdown />
136144
{this.renderI18nSwitch()}
137145
</div>

‎components/Layout/ScrollListPage.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -31,9 +31,9 @@ export const ScrollListPage = <D extends DataObject, F extends Filter<D> = Filte
3131
const i18n = useContext(I18nContext);
3232

3333
return (
34-
<div className={`container mx-auto max-w-(--breakpoint-xl) px-4 pt-16 pb-6 ${className}`}>
34+
<div className={`container mx-auto max-w-screen-xl px-4 pt-16 pb-6 ${className}`}>
3535
<PageHead title={title} />
36-
<h1 className="my-8 text-4xl">{header}</h1>
36+
<h1 className="my-8 text-4xl font-semibold">{header}</h1>
3737

3838
{scrollList ? (
3939
<ScrollList

‎components/Layout/Section.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ export const Section: FC<SectionProps> = observer(
1414
const { t } = useContext(I18nContext);
1515

1616
return (
17-
<section className={`mx-auto flex max-w-(--breakpoint-xl) flex-col gap-6 py-8 ${className}`}>
18-
<h2 className="text-center" id={id}>
17+
<section className={`mx-auto flex max-w-screen-xl flex-col gap-6 py-8 ${className}`}>
18+
<h2 className="text-center font-semibold" id={id}>
1919
{title}
2020
</h2>
2121

‎components/Layout/Svg.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,23 @@ export const GithubIcon: FC<SvgIconProps> = props => (
77
</SvgIcon>
88
);
99

10+
export const OcticonIcon: FC<SvgIconProps> = props => (
11+
<SvgIcon {...props}>
12+
<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" />
13+
</SvgIcon>
14+
);
15+
16+
export const GitpodIcon: FC<SvgIconProps> = props => (
17+
<SvgIcon {...props}>
18+
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 189 208">
19+
<path
20+
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"
21+
clip-rule="evenodd"
22+
/>
23+
</svg>
24+
</SvgIcon>
25+
);
26+
1027
export const BrandLogo: FC<SvgIconProps> = props => (
1128
<SvgIcon {...props}>
1229
<svg

‎components/Member/Card.tsx‎

Lines changed: 32 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { CardProps, Chip } from '@mui/material';
1+
import { Button, CardProps, Chip, IconButton } from '@mui/material';
22
import { marked } from 'marked';
33
import { observer } from 'mobx-react';
44
import Link from 'next/link';
@@ -12,42 +12,56 @@ export type MemberCardProps = Member & Omit<CardProps, 'id'>;
1212
export const MemberCard: FC<MemberCardProps> = observer(
1313
({ className = '', nickname, skill, position, summary, github }) => (
1414
<li
15-
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`}
15+
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`}
1616
>
1717
{github && (
18-
<a
19-
className="absolute top-4 right-4"
18+
<IconButton
19+
component={Link}
20+
className="!absolute top-4 right-4"
2021
href={`https://github.com/${String(github)}`}
2122
target="_blank"
2223
rel="noreferrer"
2324
aria-label={`${String(nickname)}'s GitHub account`}
2425
>
2526
<GithubIcon />
26-
</a>
27+
</IconButton>
2728
)}
2829

2930
<div className="flex w-auto items-center gap-4">
3031
{github && (
31-
<img
32-
style={{ width: '4rem', height: '4rem' }}
33-
className="rounded-full object-cover"
34-
src={`https://github.com/${String(github)}.png`}
35-
alt={String(github)}
36-
/>
32+
<Link href={`/member/${String(nickname)}`} aria-label={String(nickname)}>
33+
<img
34+
style={{ width: '4rem', height: '4rem' }}
35+
className="rounded-full object-cover"
36+
src={`https://github.com/${String(github)}.png`}
37+
alt={String(github)}
38+
/>
39+
</Link>
3740
)}
38-
<Link href={`/member/${String(nickname)}`} aria-label={String(nickname)}>
39-
<h2 className="text-base">{String(nickname)}</h2>
40-
<p className="text-sm">{String(position ?? '')}</p>
41-
</Link>
41+
<hgroup>
42+
<h4 className="text-base font-bold">{String(nickname)}</h4>
43+
<p className="text-sm text-neutral-400">{String(position ?? '')}</p>
44+
</hgroup>
4245
</div>
4346

44-
<ul className="flex flex-wrap items-center gap-2">
47+
<ul className="scrollbar-none scroll-snap-x flex snap-mandatory flex-nowrap gap-2 overflow-x-scroll">
4548
{(skill as string[]).map(value => (
46-
<Chip key={value} size="small" component="li" label={value} />
49+
<Chip
50+
key={value}
51+
className=""
52+
size="small"
53+
component="li"
54+
variant="outlined"
55+
color="primary"
56+
label={value}
57+
/>
4758
))}
4859
</ul>
4960

50-
<div dangerouslySetInnerHTML={{ __html: marked(summary as string) }} />
61+
<p
62+
dangerouslySetInnerHTML={{ __html: marked((summary as string) || '') }}
63+
className="text-neutral-500"
64+
/>
5165
</li>
5266
),
5367
);

0 commit comments

Comments
 (0)