([]);
39 | const onSelect = useCallback((emblaApi: EmblaCarouselType) => {
40 | onButtonSelect(emblaApi.selectedScrollSnap());
41 | }, []);
42 | const onScroll = useCallback(() => {
43 | if (!emblaApi) return;
44 |
45 | const engine = emblaApi.internalEngine();
46 | const scrollProgress = emblaApi.scrollProgress();
47 |
48 | const styles = emblaApi.scrollSnapList().map((scrollSnap, index) => {
49 | let diffToTarget = scrollSnap - scrollProgress;
50 |
51 | if (engine.options.loop) {
52 | engine.slideLooper.loopPoints.forEach((loopItem) => {
53 | const target = loopItem.target();
54 | if (index === loopItem.index && target !== 0) {
55 | const sign = Math.sign(target);
56 | if (sign === -1) diffToTarget = scrollSnap - (1 + scrollProgress);
57 | if (sign === 1) diffToTarget = scrollSnap + (1 - scrollProgress);
58 | }
59 | });
60 | }
61 | const tweenValue = 1 - Math.abs(diffToTarget * TWEEN_FACTOR);
62 | return numberWithinRange(tweenValue, 0, 1);
63 | });
64 | setTweenValues(styles);
65 | }, [emblaApi, setTweenValues]);
66 | useEffect(() => {
67 | if (!emblaApi) return;
68 |
69 | onSelect(emblaApi);
70 | onScroll();
71 | emblaApi.on('scroll', () => {
72 | flushSync(() => onScroll());
73 | });
74 | emblaApi.on('reInit', onScroll);
75 | emblaApi.on('reInit', onSelect);
76 | emblaApi.on('select', onSelect);
77 | }, [emblaApi, onSelect]);
78 | return (
79 |
80 |
81 |
82 | {services.map((service, index) => (
83 |
87 |
{
91 | onButtonSelect(index);
92 | emblaApi?.scrollTo(index);
93 | }}
94 | title={service.name}
95 | style={{
96 | ...(tweenValues.length && {
97 | transform: `scale(${tweenValues[index]})`,
98 | }),
99 | }}
100 | >
101 |
102 | {index === selected &&
}
103 |
104 |
105 | ))}
106 |
107 |
108 |
115 | {services.map((service, index) => (
116 |
{
121 | onSelect(index);
122 | }}
123 | title={service.name}
124 | >
125 |
131 | {index === selected &&
}
132 |
133 | ))}
134 |
150 |
151 |
156 |
161 |
162 |
163 |
164 |
165 |
166 | {services[selected].url !== undefined ? (
167 |
168 | {services[selected].name}
169 |
170 | ) : (
171 | services[selected].name
172 | )}
173 |
174 |
175 |
176 | {services[selected].url && (
177 |
183 |
184 |
185 | )}
186 |
195 |
196 |
197 |
21 | 作为一名北邮人，一个不能不知道，也不能不去的地方，就是北邮人论坛。建站于2003年9月26日，它是北邮人的温馨家园，支持网页和
22 | App 访问。超过 90% 的同学使用北邮人论坛获取信息。
23 |
24 | {/*
25 | 北邮人论坛（bbs.byr.cn）于2003年9月26日建站，论坛内版块全面，信息丰富，能够解答北邮人方方面面的问题，无论你是想咨询选课、发表论文、奖学金、考研保研出国校招的各类攻略，还是想谈天说地、恋爱征友、寻找出游攻略等，北邮人论坛都是最好的打开方式。
26 |
27 |
28 | 18年前的九月，北邮人论坛进入了北邮人的世界，从此架起来无数北邮人沟通的桥梁。这里，是新生有问必答的百宝箱，是工作在外的学长学姐心灵的归属，是迷茫的同学微弱的指路光芒。
29 |
*/}
30 |
31 | ),
32 | slogan: '“北邮人共同的精神原乡 对一代又一代的北邮人而言 既是逗号 也是起点”',
33 | url: 'https://bbs.byr.cn',
34 | },
35 | {
36 | name: '北邮第二课堂',
37 | image: ServiceDekt.src,
38 | description: (
39 | <>
40 |
41 | 北邮第二课堂主要通过活动申请、管理、发布、报名、签到、评价等功能记录学生在第一课堂之外的活动，对学生综合素质进行评定，生成用户画像帮助同学们正确了解自身优势、弥补自身不足，并为学校决策提供科学依据。
42 |
43 |
44 |
45 | ),
46 | slogan: <>“我们致力于保障师生参加活动的体验”,
47 | url: 'https://dekt.bupt.edu.cn/qr?f=mp',
48 | },
49 | {
50 | name: '校园网指南',
51 | image: ServiceNetWiki.src,
52 | description: (
53 | <>
54 |
55 | “校园网该怎么连？” “mobile和portal有什么区别？”
56 |
57 | “北邮校园网收费吗？” “不在校内又该怎么访问校内网站？”
58 | “我怎么又上不了网了？” “游戏延迟为什么这么高？”
59 | “不是吧，怎么网又炸了！”
60 |
61 | 校内诊断平台链接{' '}
62 |
67 | link
68 |
69 |
70 |
71 | ),
72 | slogan: <>“网又炸了？校园网使用指南和诊断平台重磅上线！”,
73 | url: 'https://wiki.buptnet.icu',
74 | },
75 | {
76 | name: 'Bitwarden',
77 | image: ServiceBitwarden.src,
78 | description: (
79 | <>
80 |
81 | Bitwarden是一款自由且开源的密码管理服务，用户可在加密的保管库中存储敏感信息。Bitwarden平台提供有多种客户端应用程序，包括网页用户界面、桌面应用，浏览器扩展、移动应用以及命令行界面。Bitwarden提供云端托管服务，并支持自行部署解决方案。
82 |
83 |
84 | ),
85 | slogan: <>“自从用了bitwarden，我再也不需要记密码了！”,
86 | url: 'https://bitwarden.byrio.work',
87 | },
88 | {
89 | name: 'Byrio社区',
90 | image: ServiceByrio.src,
91 | description: (
92 | <>
93 |
94 | BYRIOSC是一个围绕互联网技术与开源文化，主题涵盖科技、开发、设计、媒体，由开发者和创意工作者组成的线上交流、线下活动的学生社区。我们力求吸引富有热情和兴趣的开发者、创造者们加入，凝聚北邮各大学生技术组织的力量，建设成为最富有活力和创造力的学生技术社区。
95 |
96 |
97 | ),
98 | slogan: <>“FOR HACKER, GEEK & CREATOR LIKE YOU”,
99 | url: 'https://byrio.org',
100 | },
101 | {
102 | name: 'Gitlab',
103 | image: ServiceGitlab.src,
104 | description: (
105 | <>
106 |
107 | GitLab是由GitLab公司开发的、基于Git的集成软件开发平台。另外，GitLab且具有wiki以及在线编辑、issue跟踪功能、CI/CD等功能。
108 |
109 |
110 | ),
111 | slogan: <>“CI/CD真是太好用了.jpg”,
112 | url: 'https://git.byr.moe',
113 | },
114 | // {
115 | // name: 'Codimd',
116 | // image: ServiceCodimd.src,
117 | // description: (
118 | // <>
119 | //
120 | // CodiMD是一个开源的实时协作markdown笔记本。它可以让你在网页上编辑markdown笔记，并且可以实时预览。你可以邀请其他人来协作编辑笔记，也可以将笔记分享给其他人。
121 | //
122 | //
123 | // ),
124 | // slogan: <>“Markdown了解一下！”,
125 | // url: 'https://md.byr.moe',
126 | // },
127 | {
128 | name: '开源镜像服务',
129 | image: ServiceMirrors.src,
130 | description: (
131 | <>
132 |
133 | 当你还在为pip install, go add, cargo build, npm
134 | install发愁的时候，可以使用这个。
135 | {/*
136 | link
137 | */}
138 |
139 | {/*
140 | 如果你需要linux相关的镜像源还可以使用这个。
141 |
145 | link
146 |
147 |
*/}
148 |
149 | ),
150 | slogan: <>“一个字：快！”,
151 | url: 'https://mirrors.byr.ink',
152 | },
153 | {
154 | name: 'Overleaf',
155 | image: ServiceOverleaf.src,
156 | description: (
157 | <>
158 |
159 | Overleaf是一个云端协作式LaTeX编辑器，可用于编写和发布论文。这一编辑器与很多科学杂志出版商有合作关系，不但提供官方期刊的LaTeX模板，还能直接将文件提交至这些出版社。
160 |
161 |
162 | ),
163 | slogan: <>“科研必备”,
164 | url: 'https://overleaf.byrio.work/',
165 | },
166 | {
167 | name: '研效体系',
168 | image: ServiceEfficiency.src,
169 | description: (
170 | <>
171 | 我们拥有比肩大厂的研效体系，blazing
172 | fast的CI/CD流程，超丝滑的docker部署方案。
173 |
174 | ),
175 | slogan: <>“自动化部署什么的真是太酷了！”,
176 | },
177 | ] as Array<{
178 | name: string;
179 | image: string;
180 | description: ReactNode;
181 | slogan: ReactNode;
182 | url?: string;
183 | }>;
184 |
185 | export default services;
186 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 | output: 'export',
4 | images: {
5 | unoptimized: true,
6 | },
7 | trailingSlash: true,
8 | webpack(config, { isServer }) {
9 | // ref: https://react-svgr.com/docs/webpack/
10 | config.module.rules.push({
11 | test: /\.svg$/i,
12 | type: 'asset/resource',
13 | resourceQuery: /url/, // *.svg?url
14 | });
15 | config.module.rules.push({
16 | test: /\.svg$/i,
17 | issuer: /\.[jt]sx?$/,
18 | resourceQuery: { not: [/url/, /raw/] }, // exclude react component if *.svg?url
19 | loader: require.resolve('@svgr/webpack'),
20 | options: {
21 | svgoConfig: {
22 | plugins: [
23 | {
24 | name: 'preset-default',
25 | params: {
26 | overrides: {
27 | removeViewBox: false,
28 | cleanupIds: false,
29 | },
30 | },
31 | },
32 | ],
33 | },
34 | },
35 | });
36 | return config;
37 | },
38 | };
39 |
40 | module.exports = nextConfig;
41 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "byrteam2023",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "next dev --port 4444",
7 | "build": "next build",
8 | "start": "next start",
9 | "lint": "next lint"
10 | },
11 | "dependencies": {
12 | "@motionone/utils": "^10.15.1",
13 | "@radix-ui/react-scroll-area": "^1.0.4",
14 | "@types/node": "20.5.1",
15 | "@types/react": "18.2.20",
16 | "@types/react-dom": "18.2.7",
17 | "autoprefixer": "10.4.15",
18 | "clsx": "^2.0.0",
19 | "dayjs": "^1.11.9",
20 | "embla-carousel-autoplay": "8.0.0-rc12",
21 | "embla-carousel-react": "8.0.0-rc12",
22 | "eslint": "8.47.0",
23 | "eslint-config-next": "13.4.19",
24 | "framer-motion": "^10.16.1",
25 | "lodash": "^4.17.21",
26 | "motion": "^10.16.2",
27 | "next": "13.4.19",
28 | "postcss": "8.4.28",
29 | "react": "18.2.0",
30 | "react-dom": "18.2.0",
31 | "react-hot-toast": "^2.4.1",
32 | "sass": "^1.66.1",
33 | "typescript": "5.1.6"
34 | },
35 | "devDependencies": {
36 | "@svgr/webpack": "^8.1.0",
37 | "@types/lodash": "^4.14.198",
38 | "eslint-config-prettier": "^9.0.0",
39 | "prettier": "3.0.2",
40 | "prettier-plugin-tailwindcss": "^0.5.3",
41 | "tailwindcss": "^3.3.3",
42 | "tailwindcss-gradient": "^1.0.1"
43 | }
44 | }
45 |
--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
7 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('tailwindcss').Config} */
2 | module.exports = {
3 | content: [
4 | './pages/**/*.{js,ts,jsx,tsx,mdx}',
5 | './components/**/*.{js,ts,jsx,tsx,mdx}',
6 | './app/**/*.{js,ts,jsx,tsx,mdx}',
7 | ],
8 | theme: {
9 | extend: {
10 | backgroundImage: {
11 | 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 | 'gradient-conic':
13 | 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 | },
15 | fontFamily: {
16 | smiley: ['var(--font-smiley)'],
17 | dfphei: ['var(--font-dfphei)'],
18 | 'poppins-800': ['var(--font-poppins-800)'],
19 | },
20 | },
21 | },
22 | plugins: [require('tailwindcss-gradient')],
23 | };
24 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es5",
4 | "lib": ["dom", "dom.iterable", "esnext"],
5 | "allowJs": true,
6 | "skipLibCheck": true,
7 | "strict": true,
8 | "noEmit": true,
9 | "esModuleInterop": true,
10 | "module": "esnext",
11 | "moduleResolution": "bundler",
12 | "resolveJsonModule": true,
13 | "isolatedModules": true,
14 | "jsx": "preserve",
15 | "incremental": true,
16 | "plugins": [
17 | {
18 | "name": "next"
19 | }
20 | ],
21 | "paths": {
22 | "@/*": ["./*"]
23 | }
24 | },
25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
26 | "exclude": ["node_modules"]
27 | }
28 |
--------------------------------------------------------------------------------
/vercel.json:
--------------------------------------------------------------------------------
1 | {
2 | "outputDirectory": "out",
3 | "rewrites": [{ "source": "/(.*)", "destination": "/404.html" }]
4 | }
5 |
--------------------------------------------------------------------------------