feat(docs/meetup-2-guide): refactor badge customization

- Linked badge customization button to its own document

Signed-off-by: Noa Virellia <noa@requiem.garden>

astro.config.mjs

@@ -31,7 +31,7 @@ export default defineConfig({
                     href: 'https://github.com/NixOS-CN/nixcn-web',
                 },
             ],
-            sidebar: ['meetup-2-guide'],
+            sidebar: ['meetup-2-guide', 'badge-customization'],
             plugins: [],
         }),
         mdx(),

src/components/BadgeTemplates.astro

@@ -0,0 +1,25 @@
+---
+import NormalBadgeTemplate from '@assets/badges/normal.svg';
+import RainbowBadgeTemplate from '@assets/badges/rainbow.svg';
+import TransBadgeTemplate from '@assets/badges/trans.svg';
+---
+
+<div class="badge-row">
+    <NormalBadgeTemplate class="badge" />
+    <RainbowBadgeTemplate class="badge" />
+    <TransBadgeTemplate class="badge" />
+</div>
+
+<style>
+    .badge-row {
+        display: flex;
+        gap: 1.5rem;
+        align-items: flex-start;
+    }
+
+    .badge {
+        margin-top: 0;
+        width: clamp(180px, 24vw, 240px);
+        height: auto;
+    }
+</style>

src/content/docs/badge-customization.mdx

@@ -0,0 +1,29 @@
+---
+title: '会议名牌定制说明'
+description: '会议名牌定制说明'
+sidebar:
+    label: '会议名牌定制说明'
+---
+import BadgeTemplates from '@components/BadgeTemplates.astro';
+import { LinkButton } from '@astrojs/starlight/components';
+
+我们提供三种预设的会议名牌模板：
+
+<BadgeTemplates />
+
+对于所有参会者，默认会使用第一种模板样式（Nix 配色）制作名牌。
+
+名牌上的 `#name` 和 `#type` 字段，将由您在报名时填写的信息和您的与会身份（参会者/志愿者/讲者）决定。
+
+如果需要选择模板或有其他定制需求，您可以在这里提交申请：
+
+<LinkButton href='#' icon='external' variant='secondary' iconPlacement='end'>
+    填写名牌定制需求表（尚未开放）
+</LinkButton>
+
+※ 目前支持以下内容的定制：
+- `#name` 定制（可以与报名时填写的昵称不同）
+- 下方文字颜色定制
+- Flake 标志定制
+    - 请使用[此文件](https://meetup-files.nixos.org.cn/nixos-template.svg)作为定制基础。
+    - 请勿修改原文件的比例。

src/content/docs/meetup-2-guide.mdx

@@ -20,8 +20,8 @@ Nix/NixOS CN Meetup #2 是国内第二次以 Nix 为主题的聚会。我们希
 <LinkButton href='https://www.wjx.top/vm/Qi3eqxV.aspx' icon='external' variant='secondary' iconPlacement='end'>
     填写议程收集表
 </LinkButton>
-<LinkButton href='#' icon='external' variant='secondary' iconPlacement='end'>
-    填写名牌定制需求表（尚未开放）
+<LinkButton href='/badge-customization/' icon='external' variant='secondary' iconPlacement='end'>
+    会议名牌定制说明
 </LinkButton>
 
 ## 交通信息

tsconfig.json

@@ -1,5 +1,11 @@
 {
     "extends": "astro/tsconfigs/strict",
     "include": [".astro/types.d.ts", "**/*"],
+    "compilerOptions": {
+        "paths": {
+            "@assets/*": ["./src/assets/*"],
+            "@components/*": ["./src/components/*"]
+        }
+    },
     "exclude": ["dist"]
 }