feat(site): add team page

Author: ourai

.knosys/sites/default/src/content/config.ts

@@ -1,6 +1,42 @@
 import { defineCollection, z } from 'astro:content';
 import { docsSchema } from '@astrojs/starlight/schema';
 
+const i18nSchema = z.object({
+  en: z.string(),
+  zh: z.string(),
+});
+
+const contributors = defineCollection({
+  type: 'data',
+  schema: z.object({
+    nickname: i18nSchema,
+    avatar: z.string().url(),
+    github: z.union([
+      z.string(),
+      z.object({
+        id: z.number(),
+        username: z.string(),
+      }),
+    ]),
+    twitter: z.union([
+      z.string(),
+      i18nSchema,
+    ]).optional(),
+    homepage: z.union([
+      z.string().url(),
+      i18nSchema,
+    ]).optional(),
+    title: z.string(),
+    org: z.union([
+      z.string(),
+      z.object({
+        name: z.string(),
+        homepage: z.string().url().optional(),
+      }),
+    ]).optional(),
+  }),
+});
+
 const docs = defineCollection({ schema: docsSchema() });
 
 const postSchema = z.object({
@@ -19,6 +55,7 @@ const posts = defineCollection({
 });
 
 export const collections = {
+  contributors,
   docs,
   posts,
 };

.knosys/sites/default/src/content/contributors/ourai.yaml

@@ -0,0 +1,13 @@
+nickname:
+  en: Ourai L.
+  zh: 欧雷
+avatar: https://avatars.githubusercontent.com/u/562589
+github: ourai
+twitter:
+  en: ntksol
+  zh: fxxkol
+homepage:
+  en: https://ourai.github.io
+  zh: https://linxoid.com/ourai
+title: Front-end Engineer & DevRel
+org: OpenBuild

.knosys/sites/default/src/domain/contributor/helper.ts

@@ -0,0 +1,26 @@
+import type { SupportedLocale } from '@/types';
+import { unwrapLocalValue } from '@/utils';
+
+import type { InternalContributor, Contributor, ContributorMap } from './typing';
+
+function getGitHubHandler(c: InternalContributor): string {
+  return typeof c.github === 'string' ? c.github : c.github.username;
+}
+
+function resolveContributor({ avatar, title, ...others }: InternalContributor, locale: SupportedLocale): Contributor {
+  return {
+    nickname: unwrapLocalValue(others.nickname, locale),
+    avatar,
+    github: getGitHubHandler(others as InternalContributor),
+    twitter: typeof others.twitter === 'object' ? unwrapLocalValue(others.twitter, locale) : others.twitter,
+    homepage: typeof others.homepage === 'object' ? unwrapLocalValue(others.homepage, locale) : others.homepage,
+    title,
+    org: typeof others.org === 'string' ? { name: others.org } : (others.org || { name: '' }),
+  };
+}
+
+function resolveContributorList(githubHandlers: string[], contributorMap: ContributorMap, locale: SupportedLocale) {
+  return githubHandlers.map(githubHandler => resolveContributor(contributorMap[githubHandler], locale));
+}
+
+export { getGitHubHandler, resolveContributorList };

.knosys/sites/default/src/domain/contributor/index.ts

@@ -0,0 +1 @@
+export { default as CoreMemberListView } from './views/core-member-list';

.knosys/sites/default/src/domain/contributor/repository.ts

@@ -0,0 +1,21 @@
+import type { SupportedLocale } from '@/types';
+import { getCollection } from '@/utils';
+
+import type { InternalContributor, Contributor, ContributorMap } from './typing';
+import { getGitHubHandler, resolveContributorList } from './helper';
+
+const contributors: InternalContributor[] = await getCollection('contributors');
+const contributorMap: ContributorMap = contributors.reduce((p, c) => ({
+  ...p,
+  [getGitHubHandler(c)]: c,
+}), {});
+
+function getList(locale: SupportedLocale): Contributor[] {
+  return [];
+}
+
+function getCoreTeamMemberList(locale: SupportedLocale) {
+  return resolveContributorList(['ourai'], contributorMap, locale);
+}
+
+export { getList, getCoreTeamMemberList };

.knosys/sites/default/src/domain/contributor/typing.ts

@@ -0,0 +1,19 @@
+import type { PickCollectionData } from '@/types';
+
+type InternalContributor = PickCollectionData<'contributors'>;
+type ComplexKey = 'nickname' | 'github' | 'twitter' | 'homepage' | 'org';
+
+type Contributor = Omit<InternalContributor, ComplexKey> & {
+  nickname: string;
+  github: string;
+  twitter?: string;
+  homepage?: string;
+  org: {
+    name: string;
+    homepage?: string;
+  };
+};
+
+type ContributorMap = Record<string, InternalContributor>;
+
+export type { InternalContributor, Contributor, ContributorMap };

.knosys/sites/default/src/domain/contributor/views/core-member-list/CoreMemberList.astro

@@ -0,0 +1,16 @@
+---
+import type { SupportedLocale } from '@/types';
+
+import { getCoreTeamMemberList } from '../../repository';
+import MemberCardWidget from '../../widgets/member-card';
+
+const members = getCoreTeamMemberList(Astro.currentLocale as SupportedLocale);
+---
+
+<ul class="list-none pl-0 grid grid-cols-1 gap-4 md:grid-cols-2">
+  {members.map(m => (
+    <li class="!m-0">
+      <MemberCardWidget contributor={m} />
+    </li>
+  ))}
+</ul>

.knosys/sites/default/src/domain/contributor/views/core-member-list/index.ts

@@ -0,0 +1 @@
+export { default } from './CoreMemberList.astro';

.knosys/sites/default/src/domain/contributor/widgets/member-card/MemberCard.astro

@@ -0,0 +1,26 @@
+---
+import clsx from 'clsx';
+
+import AstroLink from '@/controls/astro-link';
+
+import type { Contributor } from '../../typing';
+import SocialList from './SocialList.astro';
+
+interface Props {
+  contributor: Contributor;
+  class?: string;
+}
+
+const { contributor, ...others } = Astro.props;
+---
+
+<div class={clsx('flex !m-0 py-4 border rounded-lg shadow-sm text-sm', others.class)}>
+  <div class="flex-shrink-0 px-4">
+    <img class="!size-20 border rounded-full" src={contributor.avatar} alt={contributor.nickname} />
+  </div>
+  <div class="flex-grow !mt-0 pr-4">
+    <h3 class="!text-xl">{contributor.homepage ? (<AstroLink class="no-underline" url={contributor.homepage}>{contributor.nickname}</AstroLink>) : contributor.nickname}</h3>
+    <p class="!mt-1 text-neutral-500">{contributor.title}{contributor.org && (<> @ {contributor.org.name}</>)}</p>
+    <SocialList class="!mt-4" contributor={contributor} />
+  </div>
+</div>

.knosys/sites/default/src/domain/contributor/widgets/member-card/SocialList.astro

@@ -0,0 +1,21 @@
+---
+import clsx from 'clsx';
+import { Icon } from '@astrojs/starlight/components';
+
+import AstroLink from '@/controls/astro-link';
+
+import type { Contributor } from '../../typing';
+
+interface Props {
+  contributor: Contributor;
+  class?: string;
+}
+
+const { contributor: { github, twitter }, ...others } = Astro.props;
+---
+
+<div class={clsx('flex items-center gap-4', others.class)}>
+  <AstroLink class="inline-flex gap-1 no-underline" url={`https://github.com/${github}`}><Icon name="github" />{github}</AstroLink>{twitter && (
+    <AstroLink class="inline-flex gap-1 no-underline" url={`https://x.com/${twitter}`}><Icon name="x.com" />{twitter}</AstroLink>
+  )}
+</div>

.knosys/sites/default/src/domain/contributor/widgets/member-card/index.ts

@@ -0,0 +1 @@
+export { default } from './MemberCard.astro';

.knosys/sites/default/src/entry/layouts/guide/helper.ts

@@ -0,0 +1,22 @@
+import type { StarlightPageProps } from '@astrojs/starlight/components/StarlightPage.astro';
+
+type SidebarKey = 'about';
+type SidebarItems = StarlightPageProps['sidebar'];
+
+const sidebarMap: Record<SidebarKey, SidebarItems> = {
+  about: [
+    {
+      label: '关于',
+      items: [
+        { label: '社区', link: '/community/' },
+        { label: '团队', link: '/team/' },
+      ],
+    }
+  ],
+};
+
+function getSidebar(key: SidebarKey) {
+  return sidebarMap[key] || [];
+}
+
+export { getSidebar };

.knosys/sites/default/src/entry/layouts/guide/index.ts

@@ -0,0 +1 @@
+export * from './helper';

.knosys/sites/default/src/pages/zh/community.astro

@@ -1,37 +1,30 @@
 ---
 import StarlightLayout from '@astrojs/starlight/components/StarlightPage.astro';
 
-const title = '社区';
-const sidebar = [
-  {
-    label: '关于',
-    items: [
-      { label: title, link: '/community/' },
-    ],
-  }
-];
+import AstroLink from '@/controls/astro-link';
+import { getSidebar } from '#/layouts/guide';
+
 const headings = [
   { depth: 2, slug: '行为规范', text: '行为规范' },
   { depth: 2, slug: '获取新闻', text: '获取新闻' },
   { depth: 2, slug: '讨论交流', text: '讨论交流' },
 ];
 ---
 
-<StarlightLayout frontmatter={{ title }} sidebar={sidebar} headings={headings}>
-  <p>OpenBuild 官网是一个社区驱动的 <a href="https://openbuildxyz.github.io/eco/zh/" target="_blank" rel="external">OpenBuild 生态</a>项目，在 2023 年由 OpenBuild 核心团队创建并研发了初始版本，<a href="https://openbuildxyz.github.io/eco/zh/posts/the-openbuild-official-website-frontend-codebase-is-open-now/" target="_blank" rel="external">于 2024 年 12 月开放源码</a>后引入社区力量协同共建。</p>
-  <p>现如今，该项目由 OpenBuild 核心团队成员与来自世界各地的志愿者共同推进，并由<a href="https://x.com/fxxkol" target="_blank" rel="external">欧雷</a>担当项目负责人。</p>
+<StarlightLayout frontmatter={{ title: '社区' }} sidebar={getSidebar('about')} headings={headings}>
+  <p>OpenBuild 官网是一个社区驱动的 <AstroLink url="https://openbuildxyz.github.io/eco/zh/">OpenBuild 生态</AstroLink>项目，在 2023 年由 OpenBuild 核心团队创建并研发了初始版本，<AstroLink url="https://openbuildxyz.github.io/eco/zh/posts/the-openbuild-official-website-frontend-codebase-is-open-now/">于 2024 年 12 月开放源码</AstroLink>后引入社区力量协同共建。</p>
+  <p>现如今，该项目由 <AstroLink url="/team/">OpenBuild 核心团队成员与来自世界各地的志愿者</AstroLink>共同推进，并由<AstroLink url="https://x.com/fxxkol">欧雷</AstroLink>担当项目负责人。</p>
   <h2 id={headings[0].slug}>{headings[0].text}</h2>
-  <p>作为由 OpenBuild 核心团队发起的项目，沿用 <a href="https://github.com/openbuildxyz/.github/blob/main/.github/CODE_OF_CONDUCT.md" target="_blank" rel="external">OpenBuild 官方统一的行为规范</a>；强烈建议在参与社区活动前仔细阅读，我们希望所有社区成员都能遵守其中的准则。</p>
+  <p>作为由 OpenBuild 核心团队发起的项目，沿用 <AstroLink url="https://github.com/openbuildxyz/.github/blob/main/.github/CODE_OF_CONDUCT.md">OpenBuild 官方统一的行为规范</AstroLink>；强烈建议在参与社区活动前仔细阅读，我们希望所有社区成员都能遵守其中的准则。</p>
   <h2 id={headings[1].slug}>{headings[1].text}</h2>
   <p>在下列地点能取得有关 OpenBuild 官网的最新动态：</p>
   <ul>
-    <li>关注微信公众号「<a href="https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU4Mjk1MTI2NA==" target="_blank" rel="external">OpenBuild</a>」；</li>
-    <li>关注<a href="https://x.com/OpenBuildxyz" target="_blank" rel="external">官方推特账号</a>。</li>
+    <li>关注<AstroLink url="https://linktr.ee/openbuild">官方社交媒体账号</AstroLink>。</li>
   </ul>
   <h2 id={headings[2].slug}>{headings[2].text}</h2>
   <p>可通过以下渠道与他人讨论 OpenBuild 官网相关话题及获得帮助等：</p>
   <ul>
     <li>微信群——专门的开源共建兴趣组微信群，可加微信 <code>fxxkol</code> 申请进群；</li>
-    <li><a href="https://github.com/openbuildxyz/openbuild-frontend" target="_blank" rel="external">GitHub</a>——借由 issue 报告缺陷或提出想法，也十分欢迎 pull request。</li>
+    <li><AstroLink url="https://github.com/openbuildxyz/openbuild-frontend">GitHub</AstroLink>——借由 issue 报告缺陷或提出想法，也十分欢迎 pull request。</li>
   </ul>
 </StarlightLayout>

.knosys/sites/default/src/pages/zh/team.astro

@@ -0,0 +1,17 @@
+---
+import StarlightLayout from '@astrojs/starlight/components/StarlightPage.astro';
+
+import { CoreMemberListView } from '~/contributor';
+import { getSidebar } from '#/layouts/guide';
+
+const headings = [
+  { depth: 2, slug: '核心团队成员', text: '核心团队成员' },
+];
+---
+
+<StarlightLayout frontmatter={{ title: '认识团队' }} sidebar={getSidebar('about')} headings={headings}>
+  <p>本页面所展示的是由以「社区共建者」身份参与 OpenBuild 官网项目研发的人员所组成的团队，与 OpenBuild 核心团队不同。</p>
+  <h2 id={headings[0].slug}>{headings[0].text}</h2>
+  <p>这些是积极参与维护 OpenBuild 官网及关联项目的人，他们做出了重大贡献，并对项目及其用户的成功做出了长期的承诺。</p>
+  <CoreMemberListView />
+</StarlightLayout>

.knosys/sites/default/src/shared/controls/astro-link/Link.astro

@@ -0,0 +1,24 @@
+---
+import { getRelativeLocaleUrl } from 'astro:i18n';
+
+import type { SupportedLocale } from '../../types';
+
+interface Props {
+  url: string;
+  external?: boolean;
+  class?: string;
+}
+
+const { url, external, ...others } = Astro.props;
+const locale = (Astro.currentLocale || 'en') as SupportedLocale;
+const linkExternal = url.toLowerCase().startsWith('http');
+
+const resolvedExternal = typeof external === 'boolean' ? external : linkExternal;
+const resolvedUrl = linkExternal ? url : getRelativeLocaleUrl(locale, url);
+---
+
+{resolvedExternal ? (
+  <a class={others.class} href={resolvedUrl} target="_blank" rel="external"><slot /></a>
+) : (
+  <a class={others.class} href={resolvedUrl}><slot /></a>
+)}

.knosys/sites/default/src/shared/controls/astro-link/index.ts

@@ -0,0 +1 @@
+export { default } from './Link.astro';

.knosys/sites/default/src/shared/types/content.ts

@@ -1,6 +1,6 @@
 import type { CollectionEntry } from 'astro:content';
 
-type DataCollectionKey = 'posts';
+type DataCollectionKey = 'contributors' | 'posts';
 
 type PickCollectionData<K extends DataCollectionKey> = CollectionEntry<K>['data'];