refactor(about): add contributors and resources

GZTimeWalker · GZTimeWalker · commit 94e1c40adfe1 · 2025-09-06T06:31:51.000+08:00
diff --git a/src/GZCTF/ClientApp/plugins/vite-fetch-contributors.ts b/src/GZCTF/ClientApp/plugins/vite-fetch-contributors.ts
@@ -0,0 +1,40 @@
+import { Plugin } from 'vite'
+
+let contributorsData: any[] = []
+
+export function fetchContributors(): Plugin {
+  return {
+    name: 'fetch-contributors',
+    async buildStart() {
+      try {
+        const response = await fetch('https://api.github.com/repos/GZTimeWalker/GZCTF/contributors')
+        if (!response.ok) {
+          console.warn('Failed to fetch contributors from GitHub')
+          return
+        }
+        const contributors = (await response.json()) as any[]
+        contributorsData = contributors
+          .filter((c) => !c.login.includes('bot') && c.contributions > 1)
+          .map((c: any) => ({
+            login: c.login,
+            html_url: c.html_url,
+            avatar_url: c.avatar_url,
+            contributions: c.contributions,
+          }))
+        console.log('Contributors data fetched')
+      } catch (error) {
+        console.warn('Error fetching contributors:', error)
+      }
+    },
+    resolveId(id) {
+      if (id === 'virtual:contributors') {
+        return id
+      }
+    },
+    load(id) {
+      if (id === 'virtual:contributors') {
+        return `export default ${JSON.stringify(contributorsData)}`
+      }
+    },
+  }
+}
diff --git a/src/GZCTF/ClientApp/src/components/IconHeader.tsx b/src/GZCTF/ClientApp/src/components/IconHeader.tsx
@@ -26,7 +26,7 @@ export const IconHeader: FC<StickyHeaderProps> = ({ sticky, px }) => {
     >
       <LogoHeader />
       <Title className={classes.subtitle} order={3}>
-        &gt; {config?.slogan ?? 'Hack for fun not for profit'}
+        &gt;&nbsp;{config?.slogan ?? 'Hack for fun not for profit'}
         <Text span className={classes.blink}>
           _
         </Text>
diff --git a/src/GZCTF/ClientApp/src/locales/de-DE/common.json b/src/GZCTF/ClientApp/src/locales/de-DE/common.json
@@ -19,7 +19,12 @@
       "title": "Seite existiert nicht"
     },
     "about": {
-      "slogan": "Hacke aus Spaß, nicht für Profit"
+      "contributors": "Mitwirkende",
+      "documentation": "Offizielle Dokumentation",
+      "repository": "GitHub-Repository",
+      "resources": "Ressourcen",
+      "slogan": "Hacke aus Spaß, nicht für Profit",
+      "version": "Version"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/en-US/common.json b/src/GZCTF/ClientApp/src/locales/en-US/common.json
@@ -19,7 +19,12 @@
       "title": "Page does not exist"
     },
     "about": {
-      "slogan": "Hack for fun not for profit"
+      "contributors": "Contributors",
+      "documentation": "Official Documentation",
+      "repository": "GitHub Repository",
+      "resources": "Resources",
+      "slogan": "Hack for fun not for profit",
+      "version": "Version"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/es-ES/common.json b/src/GZCTF/ClientApp/src/locales/es-ES/common.json
@@ -19,7 +19,12 @@
       "title": "La página no existe"
     },
     "about": {
-      "slogan": "Hackea por diversión, sin ánimo de lucro"
+      "contributors": "Contribuyentes",
+      "documentation": "Documentación Oficial",
+      "repository": "Repositorio GitHub",
+      "resources": "Recursos",
+      "slogan": "Hackea por diversión, sin ánimo de lucro",
+      "version": "Versión"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/fr-FR/common.json b/src/GZCTF/ClientApp/src/locales/fr-FR/common.json
@@ -19,7 +19,12 @@
       "title": "Page inexistante"
     },
     "about": {
-      "slogan": "Hack for fun not for profit"
+      "contributors": "Contributeurs",
+      "documentation": "Documentation Officielle",
+      "repository": "Dépôt GitHub",
+      "resources": "Ressources",
+      "slogan": "Hack for fun not for profit",
+      "version": "Version"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/id-ID/common.json b/src/GZCTF/ClientApp/src/locales/id-ID/common.json
@@ -19,7 +19,12 @@
       "title": "Halaman tidak ada"
     },
     "about": {
-      "slogan": "Ngehack untuk senang senang bukan buat nyari profit"
+      "contributors": "Kontributor",
+      "documentation": "Dokumentasi Resmi",
+      "repository": "Repositori GitHub",
+      "resources": "Sumber Daya",
+      "slogan": "Ngehack untuk senang senang bukan buat nyari profit",
+      "version": "Versi"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/ja-JP/common.json b/src/GZCTF/ClientApp/src/locales/ja-JP/common.json
@@ -19,7 +19,12 @@
       "title": "ページが存在しません"
     },
     "about": {
-      "slogan": "Hack for fun not for profit"
+      "contributors": "貢献者",
+      "documentation": "公式ドキュメント",
+      "repository": "GitHub リポジトリ",
+      "resources": "リソース",
+      "slogan": "Hack for fun not for profit",
+      "version": "バージョン"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/ko-KR/common.json b/src/GZCTF/ClientApp/src/locales/ko-KR/common.json
@@ -19,7 +19,12 @@
       "title": "페이지가 존재하지 않습니다"
     },
     "about": {
-      "slogan": "수익이 아니라 재미를 위해 해킹을 하세요!"
+      "contributors": "기여자",
+      "documentation": "공식 문서",
+      "repository": "GitHub 저장소",
+      "resources": "리소스",
+      "slogan": "수익이 아니라 재미를 위해 해킹을 하세요!",
+      "version": "버전"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/ru-RU/common.json b/src/GZCTF/ClientApp/src/locales/ru-RU/common.json
@@ -19,7 +19,12 @@
       "title": "Страница не существует"
     },
     "about": {
-      "slogan": "Играй в удовольствие, а не ради денег"
+      "contributors": "Участники",
+      "documentation": "Официальная документация",
+      "repository": "GitHub репозиторий",
+      "resources": "Ресурсы",
+      "slogan": "Играй в удовольствие, а не ради денег",
+      "version": "Версия"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/vi-VN/common.json b/src/GZCTF/ClientApp/src/locales/vi-VN/common.json
@@ -19,7 +19,12 @@
       "title": "Trang không tồn tại"
     },
     "about": {
-      "slogan": "Hack cho vui, không vì lợi nhuận"
+      "contributors": "Người đóng góp",
+      "documentation": "Tài liệu chính thức",
+      "repository": "Kho GitHub",
+      "resources": "Tài nguyên",
+      "slogan": "Hack cho vui, không vì lợi nhuận",
+      "version": "Phiên bản"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/zh-CN/common.json b/src/GZCTF/ClientApp/src/locales/zh-CN/common.json
@@ -19,7 +19,12 @@
       "title": "页面不存在"
     },
     "about": {
-      "slogan": "Hack for fun not for profit"
+      "contributors": "贡献者",
+      "documentation": "官方文档",
+      "repository": "GitHub 仓库",
+      "resources": "相关资源",
+      "slogan": "Hack for fun not for profit",
+      "version": "版本信息"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/locales/zh-TW/common.json b/src/GZCTF/ClientApp/src/locales/zh-TW/common.json
@@ -19,7 +19,12 @@
       "title": "頁面不存在"
     },
     "about": {
-      "slogan": "Hack for fun not for profit"
+      "contributors": "貢獻者",
+      "documentation": "官方文檔",
+      "repository": "GitHub 倉庫",
+      "resources": "相關資源",
+      "slogan": "Hack for fun not for profit",
+      "version": "版本資訊"
     },
     "color": {
       "custom": {
diff --git a/src/GZCTF/ClientApp/src/pages/About.tsx b/src/GZCTF/ClientApp/src/pages/About.tsx
@@ -1,13 +1,15 @@
-import { Anchor, Badge, Center, Group, HoverCard, Stack, Text, Title, useMantineTheme } from '@mantine/core'
+import { Anchor, Center, Group, Stack, Text, Title, useMantineTheme, Flex, Paper, Badge, Card } from '@mantine/core'
+import { mdiScaleBalance, mdiFileDocumentOutline, mdiGithub, mdiTag, mdiAccountGroup, mdiLink } from '@mdi/js'
+import { Icon } from '@mdi/react'
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
+import contributorsData from 'virtual:contributors'
 import { WithNavBar } from '@Components/WithNavbar'
 import { MainIcon } from '@Components/icon/MainIcon'
 import { useConfig, ValidatedRepoMeta } from '@Hooks/useConfig'
 import { usePageTitle } from '@Hooks/usePageTitle'
 import classes from '@Styles/About.module.css'
 import logoClasses from '@Styles/LogoHeader.module.css'
-import misc from '@Styles/Misc.module.css'
 
 const About: FC = () => {
   const { config } = useConfig()
@@ -20,58 +22,111 @@ const About: FC = () => {
 
   return (
     <WithNavBar>
-      <Stack justify="space-between" h="calc(100vh - 16px)">
-        <Center h="calc(100vh - 16px)">
-          <Title order={2} className={classes.watermark}>
-            GZ::CTF
-          </Title>
-          <Text className={classes.bio}>
-            &gt; {config?.slogan ?? t('common.content.about.slogan')}
-            <Text span className={classes.blink}>
-              _
+      <Stack justify="center" align="center" h="calc(100vh - 16px)" gap="xl" p="xl">
+        <Center>
+          <Stack align="center" gap="sm">
+            <MainIcon size="5rem" />
+            <Title order={1} size="3.5rem" fw={800} ta="center">
+              GZ<span className={logoClasses.brand}>::</span>CTF
+            </Title>
+            <Text size="xl" fw={500} ta="center" c="dimmed" ff="monospace" mt="xs">
+              &gt;&nbsp;{t('common.content.about.slogan')}
+              <Text span className={classes.blink}>
+                _
+              </Text>
             </Text>
+          </Stack>
+        </Center>
+
+        <Flex gap="xl" wrap="wrap" justify="center" align="center">
+          <Stack align="center" gap="md" miw="300px">
+            <Group gap="xs" justify="center">
+              <Icon path={mdiAccountGroup} size={1} />
+              <Title order={3} fw={600} ta="center">
+                {t('common.content.about.contributors')}
+              </Title>
+            </Group>
+            <Group gap="sm" wrap="wrap" justify="center">
+              {contributorsData.map((contributor) => (
+                <Anchor
+                  key={contributor.login}
+                  href={contributor.html_url}
+                  c={theme.primaryColor}
+                  size="md"
+                  fw={500}
+                  underline="hover"
+                >
+                  @{contributor.login}
+                </Anchor>
+              ))}
+            </Group>
+          </Stack>
+
+          <Stack align="center" gap="md" miw="300px">
+            <Group gap="xs" justify="center">
+              <Icon path={mdiLink} size={1} />
+              <Title order={3} fw={600} ta="center">
+                {t('common.content.about.resources')}
+              </Title>
+            </Group>
+            <Stack gap="md" align="center">
+              <Group gap="sm" justify="center" align="center">
+                <Icon path={mdiFileDocumentOutline} size={0.8} />
+                <Anchor href="https://gzctf.gzti.me" c={theme.primaryColor} size="md" fw={500} underline="hover">
+                  {t('common.content.about.documentation')}
+                </Anchor>
+              </Group>
+              <Group gap="sm" justify="center" align="center">
+                <Icon path={mdiGithub} size={0.8} />
+                <Anchor href={repo} c={theme.primaryColor} size="md" fw={500} underline="hover">
+                  {t('common.content.about.repository')}
+                </Anchor>
+              </Group>
+              <Group gap="sm" justify="center" align="center">
+                <Icon path={mdiScaleBalance} size={0.8} />
+                <Text size="sm" fw={400} c="dimmed">
+                  Licensed&nbsp;under&nbsp;
+                  <Anchor
+                    href="https://www.gnu.org/licenses/agpl-3.0.html"
+                    c={theme.primaryColor}
+                    size="md"
+                    fw={500}
+                    underline="hover"
+                  >
+                    AGPLv3.0
+                  </Anchor>
+                </Text>
+              </Group>
+            </Stack>
+          </Stack>
+        </Flex>
+
+        <Stack align="center" gap="md">
+          <Group gap="xs" justify="center">
+            <Icon path={mdiTag} size={1} />
+            <Title order={3} fw={600} ta="center">
+              {t('common.content.about.version')}
+            </Title>
+          </Group>
+          <Flex direction="column" align="center" gap="sm">
+            <Badge size="lg" variant="dot" color={valid ? 'green' : 'red'}>
+              {valid ? `${tag}${shortSha}` : 'UNOFFICIAL'}
+            </Badge>
+            <Text size="xs" fw={400} c="gray" ta="center" ff="monospace">
+              {valid ? `Built at ${buildTime.format('YYYY-MM-DDTHH:mm:ssZ')}` : 'This release is not officially built'}
+            </Text>
+          </Flex>
+        </Stack>
+
+        <Center>
+          <Text size="sm" fw={400} c="dimmed" ta="center">
+            Copyright&nbsp;©&nbsp;2022-now&nbsp;
+            <Anchor href="https://github.com/GZTimeWalker" c="dimmed" size="sm" fw={500} underline="hover">
+              @GZTimeWalker
+            </Anchor>
+            ,&nbsp;All&nbsp;Rights&nbsp;Reserved.
           </Text>
         </Center>
-        <Group justify="right">
-          <HoverCard shadow="md" position="top-end" withArrow openDelay={200} closeDelay={400}>
-            <HoverCard.Target>
-              <Badge onClick={() => window.open(repo, '_blank')} className={misc.cPointer} size="lg" variant="outline">
-                © 2022-Now GZTime {valid ? shortSha : ''}
-              </Badge>
-            </HoverCard.Target>
-            <HoverCard.Dropdown>
-              <Stack>
-                <Group>
-                  <MainIcon size="60px" />
-                  <Stack gap="xs">
-                    <Title ml="-20px" mb="-5px" className={classes.title}>
-                      GZ<span className={logoClasses.brand}>::</span>CTF
-                    </Title>
-                    <Group ml="-18px" mt="-5px">
-                      <Anchor href="https://github.com/GZTimeWalker" c="dimmed" size="sm" fw={500} lh={1}>
-                        @GZTimeWalker
-                      </Anchor>
-                      <Badge
-                        variant={valid ? 'light' : 'filled'}
-                        color={valid ? theme.primaryColor : 'alert'}
-                        size="xs"
-                      >
-                        {valid ? `${tag}${shortSha}` : 'UNOFFICIAL'}
-                      </Badge>
-                    </Group>
-                  </Stack>
-                </Group>
-                <Group gap="xs">
-                  <Text size="xs" fw={500} c="dimmed" ff="monospace">
-                    {valid
-                      ? `Built at ${buildTime.format('YYYY-MM-DDTHH:mm:ssZ')}`
-                      : 'This release is not officially built'}
-                  </Text>
-                </Group>
-              </Stack>
-            </HoverCard.Dropdown>
-          </HoverCard>
-        </Group>
       </Stack>
     </WithNavBar>
   )
diff --git a/src/GZCTF/ClientApp/src/vite-env.d.ts b/src/GZCTF/ClientApp/src/vite-env.d.ts
@@ -16,3 +16,16 @@ declare module 'virtual:i18n-manifest' {
 
   export default manifest
 }
+
+declare module 'virtual:contributors' {
+  interface Contributor {
+    login: string
+    html_url: string
+    avatar_url: string
+    contributions: number
+  }
+
+  const contributors: Contributor[]
+
+  export default contributors
+}
diff --git a/src/GZCTF/ClientApp/vite.config.mts b/src/GZCTF/ClientApp/vite.config.mts

Original file line number	Diff line number	Diff line change
`@@ -26,7 +26,7 @@ export const IconHeader: FC<StickyHeaderProps> = ({ sticky, px }) => {`
`26`	`26`	`>`
`27`	`27`	`<LogoHeader />`
`28`	`28`	`<Title className={classes.subtitle} order={3}>`
`29`		`- > {config?.slogan ?? 'Hack for fun not for profit'}`
	`29`	`+ > {config?.slogan ?? 'Hack for fun not for profit'}`
`30`	`30`	`<Text span className={classes.blink}>`
`31`	`31`	`_`
`32`	`32`	`</Text>`