feat: init repo
This commit is contained in:
commit
e85d11b83d
GPG key ID:
0C656827F9F80080
40 changed files with 6839 additions and 0 deletions
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
28
eslint.config.js
Normal file
28
eslint.config.js
Normal file
|
|
@ -0,0 +1,28 @@
|
||||||
|
import js from '@eslint/js';
|
||||||
|
import globals from 'globals';
|
||||||
|
import reactHooks from 'eslint-plugin-react-hooks';
|
||||||
|
import reactRefresh from 'eslint-plugin-react-refresh';
|
||||||
|
import tseslint from 'typescript-eslint';
|
||||||
|
|
||||||
|
export default tseslint.config(
|
||||||
|
{ ignores: ['dist'] },
|
||||||
|
{
|
||||||
|
extends: [js.configs.recommended, ...tseslint.configs.recommended],
|
||||||
|
files: ['**/*.{ts,tsx}'],
|
||||||
|
languageOptions: {
|
||||||
|
ecmaVersion: 2020,
|
||||||
|
globals: globals.browser,
|
||||||
|
},
|
||||||
|
plugins: {
|
||||||
|
'react-hooks': reactHooks,
|
||||||
|
'react-refresh': reactRefresh,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
...reactHooks.configs.recommended.rules,
|
||||||
|
'react-refresh/only-export-components': [
|
||||||
|
'warn',
|
||||||
|
{ allowConstantExport: true },
|
||||||
|
],
|
||||||
|
},
|
||||||
|
}
|
||||||
|
);
|
||||||
13
index.html
Normal file
13
index.html
Normal file
|
|
@ -0,0 +1,13 @@
|
||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>STARSET Mirror</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="root"></div>
|
||||||
|
<script type="module" src="/src/main.tsx"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
46
package.json
Normal file
46
package.json
Normal file
|
|
@ -0,0 +1,46 @@
|
||||||
|
{
|
||||||
|
"name": "vite-react-typescript-starter",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"lint": "eslint .",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^5.6.0",
|
||||||
|
"antd": "^5.23.3",
|
||||||
|
"clsx": "^2.1.1",
|
||||||
|
"i18next": "^23.16.8",
|
||||||
|
"i18next-browser-languagedetector": "^7.2.2",
|
||||||
|
"lucide-react": "^0.344.0",
|
||||||
|
"marked": "^12.0.2",
|
||||||
|
"react": "^18.3.1",
|
||||||
|
"react-dom": "^18.3.1",
|
||||||
|
"react-i18next": "^14.1.3",
|
||||||
|
"react-icons": "^5.4.0",
|
||||||
|
"react-router-dom": "^6.28.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/js": "^9.19.0",
|
||||||
|
"@tailwindcss/typography": "^0.5.16",
|
||||||
|
"@types/glob": "^8.1.0",
|
||||||
|
"@types/react": "^18.3.18",
|
||||||
|
"@types/react-dom": "^18.3.5",
|
||||||
|
"@vitejs/plugin-react": "^4.3.4",
|
||||||
|
"autoprefixer": "^10.4.20",
|
||||||
|
"eslint": "^9.19.0",
|
||||||
|
"eslint-plugin-react-hooks": "^5.1.0",
|
||||||
|
"eslint-plugin-react-refresh": "^0.4.18",
|
||||||
|
"glob": "^11.0.1",
|
||||||
|
"globals": "^15.14.0",
|
||||||
|
"postcss": "^8.5.1",
|
||||||
|
"tailwindcss": "^3.4.17",
|
||||||
|
"tsx": "^4.19.2",
|
||||||
|
"typescript": "^5.7.3",
|
||||||
|
"typescript-eslint": "^8.22.0",
|
||||||
|
"vite": "^5.4.14"
|
||||||
|
}
|
||||||
|
}
|
||||||
3976
pnpm-lock.yaml
generated
Normal file
3976
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load diff
6
postcss.config.js
Normal file
6
postcss.config.js
Normal file
|
|
@ -0,0 +1,6 @@
|
||||||
|
export default {
|
||||||
|
plugins: {
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
},
|
||||||
|
};
|
||||||
63
src/App.tsx
Normal file
63
src/App.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { ThemeProvider } from './contexts/ThemeContext';
|
||||||
|
import Navbar from './components/Navbar';
|
||||||
|
import HomePage from './pages/HomePage';
|
||||||
|
import ProjectsPage from './pages/ProjectsPage';
|
||||||
|
import UpdatesPage from './pages/UpdatesPage';
|
||||||
|
import UpdateDetailPage from './pages/UpdateDetailPage';
|
||||||
|
import ContributorsPage from './pages/ContributorsPage';
|
||||||
|
import AboutPage from './pages/AboutPage';
|
||||||
|
import iconMap from './utils/iconMap';
|
||||||
|
|
||||||
|
function App() {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const socialLinks = t('social.links', { returnObjects: true });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeProvider>
|
||||||
|
<Router>
|
||||||
|
<div className="min-h-screen bg-white dark:bg-gray-900 transition-colors">
|
||||||
|
<Navbar />
|
||||||
|
<main className="pt-14">
|
||||||
|
<Routes>
|
||||||
|
<Route path="/" element={<HomePage />} />
|
||||||
|
<Route path="/projects" element={<ProjectsPage />} />
|
||||||
|
<Route path="/updates" element={<UpdatesPage />} />
|
||||||
|
<Route path="/updates/:id" element={<UpdateDetailPage />} />
|
||||||
|
<Route path="/contributors" element={<ContributorsPage />} />
|
||||||
|
<Route path="/about" element={<AboutPage />} />
|
||||||
|
</Routes>
|
||||||
|
</main>
|
||||||
|
<footer className="bg-gray-900 dark:bg-gray-950 text-white py-6">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="flex flex-col items-center">
|
||||||
|
<p className="text-gray-400 mb-4">{t('footer.copyright')}</p>
|
||||||
|
<div className="flex space-x-6">
|
||||||
|
{socialLinks.map((link: any) => {
|
||||||
|
const Icon = iconMap[link.icon as keyof typeof iconMap];
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={link.name}
|
||||||
|
href={link.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="transition-colors"
|
||||||
|
title={link.name}
|
||||||
|
>
|
||||||
|
<Icon className={`h-5 w-5 ${link.color}`} />
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
</div>
|
||||||
|
</Router>
|
||||||
|
</ThemeProvider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App;
|
||||||
660
src/LICENSE.md
Normal file
660
src/LICENSE.md
Normal file
|
|
@ -0,0 +1,660 @@
|
||||||
|
# GNU AFFERO GENERAL PUBLIC LICENSE
|
||||||
|
|
||||||
|
Version 3, 19 November 2007
|
||||||
|
|
||||||
|
Copyright (C) 2007 Free Software Foundation, Inc.
|
||||||
|
<https://fsf.org/>
|
||||||
|
|
||||||
|
Everyone is permitted to copy and distribute verbatim copies of this
|
||||||
|
license document, but changing it is not allowed.
|
||||||
|
|
||||||
|
## Preamble
|
||||||
|
|
||||||
|
The GNU Affero General Public License is a free, copyleft license for
|
||||||
|
software and other kinds of works, specifically designed to ensure
|
||||||
|
cooperation with the community in the case of network server software.
|
||||||
|
|
||||||
|
The licenses for most software and other practical works are designed
|
||||||
|
to take away your freedom to share and change the works. By contrast,
|
||||||
|
our General Public Licenses are intended to guarantee your freedom to
|
||||||
|
share and change all versions of a program--to make sure it remains
|
||||||
|
free software for all its users.
|
||||||
|
|
||||||
|
When we speak of free software, we are referring to freedom, not
|
||||||
|
price. Our General Public Licenses are designed to make sure that you
|
||||||
|
have the freedom to distribute copies of free software (and charge for
|
||||||
|
them if you wish), that you receive source code or can get it if you
|
||||||
|
want it, that you can change the software or use pieces of it in new
|
||||||
|
free programs, and that you know you can do these things.
|
||||||
|
|
||||||
|
Developers that use our General Public Licenses protect your rights
|
||||||
|
with two steps: (1) assert copyright on the software, and (2) offer
|
||||||
|
you this License which gives you legal permission to copy, distribute
|
||||||
|
and/or modify the software.
|
||||||
|
|
||||||
|
A secondary benefit of defending all users' freedom is that
|
||||||
|
improvements made in alternate versions of the program, if they
|
||||||
|
receive widespread use, become available for other developers to
|
||||||
|
incorporate. Many developers of free software are heartened and
|
||||||
|
encouraged by the resulting cooperation. However, in the case of
|
||||||
|
software used on network servers, this result may fail to come about.
|
||||||
|
The GNU General Public License permits making a modified version and
|
||||||
|
letting the public access it on a server without ever releasing its
|
||||||
|
source code to the public.
|
||||||
|
|
||||||
|
The GNU Affero General Public License is designed specifically to
|
||||||
|
ensure that, in such cases, the modified source code becomes available
|
||||||
|
to the community. It requires the operator of a network server to
|
||||||
|
provide the source code of the modified version running there to the
|
||||||
|
users of that server. Therefore, public use of a modified version, on
|
||||||
|
a publicly accessible server, gives the public access to the source
|
||||||
|
code of the modified version.
|
||||||
|
|
||||||
|
An older license, called the Affero General Public License and
|
||||||
|
published by Affero, was designed to accomplish similar goals. This is
|
||||||
|
a different license, not a version of the Affero GPL, but Affero has
|
||||||
|
released a new version of the Affero GPL which permits relicensing
|
||||||
|
under this license.
|
||||||
|
|
||||||
|
The precise terms and conditions for copying, distribution and
|
||||||
|
modification follow.
|
||||||
|
|
||||||
|
## TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
### 0. Definitions.
|
||||||
|
|
||||||
|
"This License" refers to version 3 of the GNU Affero General Public
|
||||||
|
License.
|
||||||
|
|
||||||
|
"Copyright" also means copyright-like laws that apply to other kinds
|
||||||
|
of works, such as semiconductor masks.
|
||||||
|
|
||||||
|
"The Program" refers to any copyrightable work licensed under this
|
||||||
|
License. Each licensee is addressed as "you". "Licensees" and
|
||||||
|
"recipients" may be individuals or organizations.
|
||||||
|
|
||||||
|
To "modify" a work means to copy from or adapt all or part of the work
|
||||||
|
in a fashion requiring copyright permission, other than the making of
|
||||||
|
an exact copy. The resulting work is called a "modified version" of
|
||||||
|
the earlier work or a work "based on" the earlier work.
|
||||||
|
|
||||||
|
A "covered work" means either the unmodified Program or a work based
|
||||||
|
on the Program.
|
||||||
|
|
||||||
|
To "propagate" a work means to do anything with it that, without
|
||||||
|
permission, would make you directly or secondarily liable for
|
||||||
|
infringement under applicable copyright law, except executing it on a
|
||||||
|
computer or modifying a private copy. Propagation includes copying,
|
||||||
|
distribution (with or without modification), making available to the
|
||||||
|
public, and in some countries other activities as well.
|
||||||
|
|
||||||
|
To "convey" a work means any kind of propagation that enables other
|
||||||
|
parties to make or receive copies. Mere interaction with a user
|
||||||
|
through a computer network, with no transfer of a copy, is not
|
||||||
|
conveying.
|
||||||
|
|
||||||
|
An interactive user interface displays "Appropriate Legal Notices" to
|
||||||
|
the extent that it includes a convenient and prominently visible
|
||||||
|
feature that (1) displays an appropriate copyright notice, and (2)
|
||||||
|
tells the user that there is no warranty for the work (except to the
|
||||||
|
extent that warranties are provided), that licensees may convey the
|
||||||
|
work under this License, and how to view a copy of this License. If
|
||||||
|
the interface presents a list of user commands or options, such as a
|
||||||
|
menu, a prominent item in the list meets this criterion.
|
||||||
|
|
||||||
|
### 1. Source Code.
|
||||||
|
|
||||||
|
The "source code" for a work means the preferred form of the work for
|
||||||
|
making modifications to it. "Object code" means any non-source form of
|
||||||
|
a work.
|
||||||
|
|
||||||
|
A "Standard Interface" means an interface that either is an official
|
||||||
|
standard defined by a recognized standards body, or, in the case of
|
||||||
|
interfaces specified for a particular programming language, one that
|
||||||
|
is widely used among developers working in that language.
|
||||||
|
|
||||||
|
The "System Libraries" of an executable work include anything, other
|
||||||
|
than the work as a whole, that (a) is included in the normal form of
|
||||||
|
packaging a Major Component, but which is not part of that Major
|
||||||
|
Component, and (b) serves only to enable use of the work with that
|
||||||
|
Major Component, or to implement a Standard Interface for which an
|
||||||
|
implementation is available to the public in source code form. A
|
||||||
|
"Major Component", in this context, means a major essential component
|
||||||
|
(kernel, window system, and so on) of the specific operating system
|
||||||
|
(if any) on which the executable work runs, or a compiler used to
|
||||||
|
produce the work, or an object code interpreter used to run it.
|
||||||
|
|
||||||
|
The "Corresponding Source" for a work in object code form means all
|
||||||
|
the source code needed to generate, install, and (for an executable
|
||||||
|
work) run the object code and to modify the work, including scripts to
|
||||||
|
control those activities. However, it does not include the work's
|
||||||
|
System Libraries, or general-purpose tools or generally available free
|
||||||
|
programs which are used unmodified in performing those activities but
|
||||||
|
which are not part of the work. For example, Corresponding Source
|
||||||
|
includes interface definition files associated with source files for
|
||||||
|
the work, and the source code for shared libraries and dynamically
|
||||||
|
linked subprograms that the work is specifically designed to require,
|
||||||
|
such as by intimate data communication or control flow between those
|
||||||
|
subprograms and other parts of the work.
|
||||||
|
|
||||||
|
The Corresponding Source need not include anything that users can
|
||||||
|
regenerate automatically from other parts of the Corresponding Source.
|
||||||
|
|
||||||
|
The Corresponding Source for a work in source code form is that same
|
||||||
|
work.
|
||||||
|
|
||||||
|
### 2. Basic Permissions.
|
||||||
|
|
||||||
|
All rights granted under this License are granted for the term of
|
||||||
|
copyright on the Program, and are irrevocable provided the stated
|
||||||
|
conditions are met. This License explicitly affirms your unlimited
|
||||||
|
permission to run the unmodified Program. The output from running a
|
||||||
|
covered work is covered by this License only if the output, given its
|
||||||
|
content, constitutes a covered work. This License acknowledges your
|
||||||
|
rights of fair use or other equivalent, as provided by copyright law.
|
||||||
|
|
||||||
|
You may make, run and propagate covered works that you do not convey,
|
||||||
|
without conditions so long as your license otherwise remains in force.
|
||||||
|
You may convey covered works to others for the sole purpose of having
|
||||||
|
them make modifications exclusively for you, or provide you with
|
||||||
|
facilities for running those works, provided that you comply with the
|
||||||
|
terms of this License in conveying all material for which you do not
|
||||||
|
control copyright. Those thus making or running the covered works for
|
||||||
|
you must do so exclusively on your behalf, under your direction and
|
||||||
|
control, on terms that prohibit them from making any copies of your
|
||||||
|
copyrighted material outside their relationship with you.
|
||||||
|
|
||||||
|
Conveying under any other circumstances is permitted solely under the
|
||||||
|
conditions stated below. Sublicensing is not allowed; section 10 makes
|
||||||
|
it unnecessary.
|
||||||
|
|
||||||
|
### 3. Protecting Users' Legal Rights From Anti-Circumvention Law.
|
||||||
|
|
||||||
|
No covered work shall be deemed part of an effective technological
|
||||||
|
measure under any applicable law fulfilling obligations under article
|
||||||
|
11 of the WIPO copyright treaty adopted on 20 December 1996, or
|
||||||
|
similar laws prohibiting or restricting circumvention of such
|
||||||
|
measures.
|
||||||
|
|
||||||
|
When you convey a covered work, you waive any legal power to forbid
|
||||||
|
circumvention of technological measures to the extent such
|
||||||
|
circumvention is effected by exercising rights under this License with
|
||||||
|
respect to the covered work, and you disclaim any intention to limit
|
||||||
|
operation or modification of the work as a means of enforcing, against
|
||||||
|
the work's users, your or third parties' legal rights to forbid
|
||||||
|
circumvention of technological measures.
|
||||||
|
|
||||||
|
### 4. Conveying Verbatim Copies.
|
||||||
|
|
||||||
|
You may convey verbatim copies of the Program's source code as you
|
||||||
|
receive it, in any medium, provided that you conspicuously and
|
||||||
|
appropriately publish on each copy an appropriate copyright notice;
|
||||||
|
keep intact all notices stating that this License and any
|
||||||
|
non-permissive terms added in accord with section 7 apply to the code;
|
||||||
|
keep intact all notices of the absence of any warranty; and give all
|
||||||
|
recipients a copy of this License along with the Program.
|
||||||
|
|
||||||
|
You may charge any price or no price for each copy that you convey,
|
||||||
|
and you may offer support or warranty protection for a fee.
|
||||||
|
|
||||||
|
### 5. Conveying Modified Source Versions.
|
||||||
|
|
||||||
|
You may convey a work based on the Program, or the modifications to
|
||||||
|
produce it from the Program, in the form of source code under the
|
||||||
|
terms of section 4, provided that you also meet all of these
|
||||||
|
conditions:
|
||||||
|
|
||||||
|
- a) The work must carry prominent notices stating that you modified
|
||||||
|
it, and giving a relevant date.
|
||||||
|
- b) The work must carry prominent notices stating that it is
|
||||||
|
released under this License and any conditions added under
|
||||||
|
section 7. This requirement modifies the requirement in section 4
|
||||||
|
to "keep intact all notices".
|
||||||
|
- c) You must license the entire work, as a whole, under this
|
||||||
|
License to anyone who comes into possession of a copy. This
|
||||||
|
License will therefore apply, along with any applicable section 7
|
||||||
|
additional terms, to the whole of the work, and all its parts,
|
||||||
|
regardless of how they are packaged. This License gives no
|
||||||
|
permission to license the work in any other way, but it does not
|
||||||
|
invalidate such permission if you have separately received it.
|
||||||
|
- d) If the work has interactive user interfaces, each must display
|
||||||
|
Appropriate Legal Notices; however, if the Program has interactive
|
||||||
|
interfaces that do not display Appropriate Legal Notices, your
|
||||||
|
work need not make them do so.
|
||||||
|
|
||||||
|
A compilation of a covered work with other separate and independent
|
||||||
|
works, which are not by their nature extensions of the covered work,
|
||||||
|
and which are not combined with it such as to form a larger program,
|
||||||
|
in or on a volume of a storage or distribution medium, is called an
|
||||||
|
"aggregate" if the compilation and its resulting copyright are not
|
||||||
|
used to limit the access or legal rights of the compilation's users
|
||||||
|
beyond what the individual works permit. Inclusion of a covered work
|
||||||
|
in an aggregate does not cause this License to apply to the other
|
||||||
|
parts of the aggregate.
|
||||||
|
|
||||||
|
### 6. Conveying Non-Source Forms.
|
||||||
|
|
||||||
|
You may convey a covered work in object code form under the terms of
|
||||||
|
sections 4 and 5, provided that you also convey the machine-readable
|
||||||
|
Corresponding Source under the terms of this License, in one of these
|
||||||
|
ways:
|
||||||
|
|
||||||
|
- a) Convey the object code in, or embodied in, a physical product
|
||||||
|
(including a physical distribution medium), accompanied by the
|
||||||
|
Corresponding Source fixed on a durable physical medium
|
||||||
|
customarily used for software interchange.
|
||||||
|
- b) Convey the object code in, or embodied in, a physical product
|
||||||
|
(including a physical distribution medium), accompanied by a
|
||||||
|
written offer, valid for at least three years and valid for as
|
||||||
|
long as you offer spare parts or customer support for that product
|
||||||
|
model, to give anyone who possesses the object code either (1) a
|
||||||
|
copy of the Corresponding Source for all the software in the
|
||||||
|
product that is covered by this License, on a durable physical
|
||||||
|
medium customarily used for software interchange, for a price no
|
||||||
|
more than your reasonable cost of physically performing this
|
||||||
|
conveying of source, or (2) access to copy the Corresponding
|
||||||
|
Source from a network server at no charge.
|
||||||
|
- c) Convey individual copies of the object code with a copy of the
|
||||||
|
written offer to provide the Corresponding Source. This
|
||||||
|
alternative is allowed only occasionally and noncommercially, and
|
||||||
|
only if you received the object code with such an offer, in accord
|
||||||
|
with subsection 6b.
|
||||||
|
- d) Convey the object code by offering access from a designated
|
||||||
|
place (gratis or for a charge), and offer equivalent access to the
|
||||||
|
Corresponding Source in the same way through the same place at no
|
||||||
|
further charge. You need not require recipients to copy the
|
||||||
|
Corresponding Source along with the object code. If the place to
|
||||||
|
copy the object code is a network server, the Corresponding Source
|
||||||
|
may be on a different server (operated by you or a third party)
|
||||||
|
that supports equivalent copying facilities, provided you maintain
|
||||||
|
clear directions next to the object code saying where to find the
|
||||||
|
Corresponding Source. Regardless of what server hosts the
|
||||||
|
Corresponding Source, you remain obligated to ensure that it is
|
||||||
|
available for as long as needed to satisfy these requirements.
|
||||||
|
- e) Convey the object code using peer-to-peer transmission,
|
||||||
|
provided you inform other peers where the object code and
|
||||||
|
Corresponding Source of the work are being offered to the general
|
||||||
|
public at no charge under subsection 6d.
|
||||||
|
|
||||||
|
A separable portion of the object code, whose source code is excluded
|
||||||
|
from the Corresponding Source as a System Library, need not be
|
||||||
|
included in conveying the object code work.
|
||||||
|
|
||||||
|
A "User Product" is either (1) a "consumer product", which means any
|
||||||
|
tangible personal property which is normally used for personal,
|
||||||
|
family, or household purposes, or (2) anything designed or sold for
|
||||||
|
incorporation into a dwelling. In determining whether a product is a
|
||||||
|
consumer product, doubtful cases shall be resolved in favor of
|
||||||
|
coverage. For a particular product received by a particular user,
|
||||||
|
"normally used" refers to a typical or common use of that class of
|
||||||
|
product, regardless of the status of the particular user or of the way
|
||||||
|
in which the particular user actually uses, or expects or is expected
|
||||||
|
to use, the product. A product is a consumer product regardless of
|
||||||
|
whether the product has substantial commercial, industrial or
|
||||||
|
non-consumer uses, unless such uses represent the only significant
|
||||||
|
mode of use of the product.
|
||||||
|
|
||||||
|
"Installation Information" for a User Product means any methods,
|
||||||
|
procedures, authorization keys, or other information required to
|
||||||
|
install and execute modified versions of a covered work in that User
|
||||||
|
Product from a modified version of its Corresponding Source. The
|
||||||
|
information must suffice to ensure that the continued functioning of
|
||||||
|
the modified object code is in no case prevented or interfered with
|
||||||
|
solely because modification has been made.
|
||||||
|
|
||||||
|
If you convey an object code work under this section in, or with, or
|
||||||
|
specifically for use in, a User Product, and the conveying occurs as
|
||||||
|
part of a transaction in which the right of possession and use of the
|
||||||
|
User Product is transferred to the recipient in perpetuity or for a
|
||||||
|
fixed term (regardless of how the transaction is characterized), the
|
||||||
|
Corresponding Source conveyed under this section must be accompanied
|
||||||
|
by the Installation Information. But this requirement does not apply
|
||||||
|
if neither you nor any third party retains the ability to install
|
||||||
|
modified object code on the User Product (for example, the work has
|
||||||
|
been installed in ROM).
|
||||||
|
|
||||||
|
The requirement to provide Installation Information does not include a
|
||||||
|
requirement to continue to provide support service, warranty, or
|
||||||
|
updates for a work that has been modified or installed by the
|
||||||
|
recipient, or for the User Product in which it has been modified or
|
||||||
|
installed. Access to a network may be denied when the modification
|
||||||
|
itself materially and adversely affects the operation of the network
|
||||||
|
or violates the rules and protocols for communication across the
|
||||||
|
network.
|
||||||
|
|
||||||
|
Corresponding Source conveyed, and Installation Information provided,
|
||||||
|
in accord with this section must be in a format that is publicly
|
||||||
|
documented (and with an implementation available to the public in
|
||||||
|
source code form), and must require no special password or key for
|
||||||
|
unpacking, reading or copying.
|
||||||
|
|
||||||
|
### 7. Additional Terms.
|
||||||
|
|
||||||
|
"Additional permissions" are terms that supplement the terms of this
|
||||||
|
License by making exceptions from one or more of its conditions.
|
||||||
|
Additional permissions that are applicable to the entire Program shall
|
||||||
|
be treated as though they were included in this License, to the extent
|
||||||
|
that they are valid under applicable law. If additional permissions
|
||||||
|
apply only to part of the Program, that part may be used separately
|
||||||
|
under those permissions, but the entire Program remains governed by
|
||||||
|
this License without regard to the additional permissions.
|
||||||
|
|
||||||
|
When you convey a copy of a covered work, you may at your option
|
||||||
|
remove any additional permissions from that copy, or from any part of
|
||||||
|
it. (Additional permissions may be written to require their own
|
||||||
|
removal in certain cases when you modify the work.) You may place
|
||||||
|
additional permissions on material, added by you to a covered work,
|
||||||
|
for which you have or can give appropriate copyright permission.
|
||||||
|
|
||||||
|
Notwithstanding any other provision of this License, for material you
|
||||||
|
add to a covered work, you may (if authorized by the copyright holders
|
||||||
|
of that material) supplement the terms of this License with terms:
|
||||||
|
|
||||||
|
- a) Disclaiming warranty or limiting liability differently from the
|
||||||
|
terms of sections 15 and 16 of this License; or
|
||||||
|
- b) Requiring preservation of specified reasonable legal notices or
|
||||||
|
author attributions in that material or in the Appropriate Legal
|
||||||
|
Notices displayed by works containing it; or
|
||||||
|
- c) Prohibiting misrepresentation of the origin of that material,
|
||||||
|
or requiring that modified versions of such material be marked in
|
||||||
|
reasonable ways as different from the original version; or
|
||||||
|
- d) Limiting the use for publicity purposes of names of licensors
|
||||||
|
or authors of the material; or
|
||||||
|
- e) Declining to grant rights under trademark law for use of some
|
||||||
|
trade names, trademarks, or service marks; or
|
||||||
|
- f) Requiring indemnification of licensors and authors of that
|
||||||
|
material by anyone who conveys the material (or modified versions
|
||||||
|
of it) with contractual assumptions of liability to the recipient,
|
||||||
|
for any liability that these contractual assumptions directly
|
||||||
|
impose on those licensors and authors.
|
||||||
|
|
||||||
|
All other non-permissive additional terms are considered "further
|
||||||
|
restrictions" within the meaning of section 10. If the Program as you
|
||||||
|
received it, or any part of it, contains a notice stating that it is
|
||||||
|
governed by this License along with a term that is a further
|
||||||
|
restriction, you may remove that term. If a license document contains
|
||||||
|
a further restriction but permits relicensing or conveying under this
|
||||||
|
License, you may add to a covered work material governed by the terms
|
||||||
|
of that license document, provided that the further restriction does
|
||||||
|
not survive such relicensing or conveying.
|
||||||
|
|
||||||
|
If you add terms to a covered work in accord with this section, you
|
||||||
|
must place, in the relevant source files, a statement of the
|
||||||
|
additional terms that apply to those files, or a notice indicating
|
||||||
|
where to find the applicable terms.
|
||||||
|
|
||||||
|
Additional terms, permissive or non-permissive, may be stated in the
|
||||||
|
form of a separately written license, or stated as exceptions; the
|
||||||
|
above requirements apply either way.
|
||||||
|
|
||||||
|
### 8. Termination.
|
||||||
|
|
||||||
|
You may not propagate or modify a covered work except as expressly
|
||||||
|
provided under this License. Any attempt otherwise to propagate or
|
||||||
|
modify it is void, and will automatically terminate your rights under
|
||||||
|
this License (including any patent licenses granted under the third
|
||||||
|
paragraph of section 11).
|
||||||
|
|
||||||
|
However, if you cease all violation of this License, then your license
|
||||||
|
from a particular copyright holder is reinstated (a) provisionally,
|
||||||
|
unless and until the copyright holder explicitly and finally
|
||||||
|
terminates your license, and (b) permanently, if the copyright holder
|
||||||
|
fails to notify you of the violation by some reasonable means prior to
|
||||||
|
60 days after the cessation.
|
||||||
|
|
||||||
|
Moreover, your license from a particular copyright holder is
|
||||||
|
reinstated permanently if the copyright holder notifies you of the
|
||||||
|
violation by some reasonable means, this is the first time you have
|
||||||
|
received notice of violation of this License (for any work) from that
|
||||||
|
copyright holder, and you cure the violation prior to 30 days after
|
||||||
|
your receipt of the notice.
|
||||||
|
|
||||||
|
Termination of your rights under this section does not terminate the
|
||||||
|
licenses of parties who have received copies or rights from you under
|
||||||
|
this License. If your rights have been terminated and not permanently
|
||||||
|
reinstated, you do not qualify to receive new licenses for the same
|
||||||
|
material under section 10.
|
||||||
|
|
||||||
|
### 9. Acceptance Not Required for Having Copies.
|
||||||
|
|
||||||
|
You are not required to accept this License in order to receive or run
|
||||||
|
a copy of the Program. Ancillary propagation of a covered work
|
||||||
|
occurring solely as a consequence of using peer-to-peer transmission
|
||||||
|
to receive a copy likewise does not require acceptance. However,
|
||||||
|
nothing other than this License grants you permission to propagate or
|
||||||
|
modify any covered work. These actions infringe copyright if you do
|
||||||
|
not accept this License. Therefore, by modifying or propagating a
|
||||||
|
covered work, you indicate your acceptance of this License to do so.
|
||||||
|
|
||||||
|
### 10. Automatic Licensing of Downstream Recipients.
|
||||||
|
|
||||||
|
Each time you convey a covered work, the recipient automatically
|
||||||
|
receives a license from the original licensors, to run, modify and
|
||||||
|
propagate that work, subject to this License. You are not responsible
|
||||||
|
for enforcing compliance by third parties with this License.
|
||||||
|
|
||||||
|
An "entity transaction" is a transaction transferring control of an
|
||||||
|
organization, or substantially all assets of one, or subdividing an
|
||||||
|
organization, or merging organizations. If propagation of a covered
|
||||||
|
work results from an entity transaction, each party to that
|
||||||
|
transaction who receives a copy of the work also receives whatever
|
||||||
|
licenses to the work the party's predecessor in interest had or could
|
||||||
|
give under the previous paragraph, plus a right to possession of the
|
||||||
|
Corresponding Source of the work from the predecessor in interest, if
|
||||||
|
the predecessor has it or can get it with reasonable efforts.
|
||||||
|
|
||||||
|
You may not impose any further restrictions on the exercise of the
|
||||||
|
rights granted or affirmed under this License. For example, you may
|
||||||
|
not impose a license fee, royalty, or other charge for exercise of
|
||||||
|
rights granted under this License, and you may not initiate litigation
|
||||||
|
(including a cross-claim or counterclaim in a lawsuit) alleging that
|
||||||
|
any patent claim is infringed by making, using, selling, offering for
|
||||||
|
sale, or importing the Program or any portion of it.
|
||||||
|
|
||||||
|
### 11. Patents.
|
||||||
|
|
||||||
|
A "contributor" is a copyright holder who authorizes use under this
|
||||||
|
License of the Program or a work on which the Program is based. The
|
||||||
|
work thus licensed is called the contributor's "contributor version".
|
||||||
|
|
||||||
|
A contributor's "essential patent claims" are all patent claims owned
|
||||||
|
or controlled by the contributor, whether already acquired or
|
||||||
|
hereafter acquired, that would be infringed by some manner, permitted
|
||||||
|
by this License, of making, using, or selling its contributor version,
|
||||||
|
but do not include claims that would be infringed only as a
|
||||||
|
consequence of further modification of the contributor version. For
|
||||||
|
purposes of this definition, "control" includes the right to grant
|
||||||
|
patent sublicenses in a manner consistent with the requirements of
|
||||||
|
this License.
|
||||||
|
|
||||||
|
Each contributor grants you a non-exclusive, worldwide, royalty-free
|
||||||
|
patent license under the contributor's essential patent claims, to
|
||||||
|
make, use, sell, offer for sale, import and otherwise run, modify and
|
||||||
|
propagate the contents of its contributor version.
|
||||||
|
|
||||||
|
In the following three paragraphs, a "patent license" is any express
|
||||||
|
agreement or commitment, however denominated, not to enforce a patent
|
||||||
|
(such as an express permission to practice a patent or covenant not to
|
||||||
|
sue for patent infringement). To "grant" such a patent license to a
|
||||||
|
party means to make such an agreement or commitment not to enforce a
|
||||||
|
patent against the party.
|
||||||
|
|
||||||
|
If you convey a covered work, knowingly relying on a patent license,
|
||||||
|
and the Corresponding Source of the work is not available for anyone
|
||||||
|
to copy, free of charge and under the terms of this License, through a
|
||||||
|
publicly available network server or other readily accessible means,
|
||||||
|
then you must either (1) cause the Corresponding Source to be so
|
||||||
|
available, or (2) arrange to deprive yourself of the benefit of the
|
||||||
|
patent license for this particular work, or (3) arrange, in a manner
|
||||||
|
consistent with the requirements of this License, to extend the patent
|
||||||
|
license to downstream recipients. "Knowingly relying" means you have
|
||||||
|
actual knowledge that, but for the patent license, your conveying the
|
||||||
|
covered work in a country, or your recipient's use of the covered work
|
||||||
|
in a country, would infringe one or more identifiable patents in that
|
||||||
|
country that you have reason to believe are valid.
|
||||||
|
|
||||||
|
If, pursuant to or in connection with a single transaction or
|
||||||
|
arrangement, you convey, or propagate by procuring conveyance of, a
|
||||||
|
covered work, and grant a patent license to some of the parties
|
||||||
|
receiving the covered work authorizing them to use, propagate, modify
|
||||||
|
or convey a specific copy of the covered work, then the patent license
|
||||||
|
you grant is automatically extended to all recipients of the covered
|
||||||
|
work and works based on it.
|
||||||
|
|
||||||
|
A patent license is "discriminatory" if it does not include within the
|
||||||
|
scope of its coverage, prohibits the exercise of, or is conditioned on
|
||||||
|
the non-exercise of one or more of the rights that are specifically
|
||||||
|
granted under this License. You may not convey a covered work if you
|
||||||
|
are a party to an arrangement with a third party that is in the
|
||||||
|
business of distributing software, under which you make payment to the
|
||||||
|
third party based on the extent of your activity of conveying the
|
||||||
|
work, and under which the third party grants, to any of the parties
|
||||||
|
who would receive the covered work from you, a discriminatory patent
|
||||||
|
license (a) in connection with copies of the covered work conveyed by
|
||||||
|
you (or copies made from those copies), or (b) primarily for and in
|
||||||
|
connection with specific products or compilations that contain the
|
||||||
|
covered work, unless you entered into that arrangement, or that patent
|
||||||
|
license was granted, prior to 28 March 2007.
|
||||||
|
|
||||||
|
Nothing in this License shall be construed as excluding or limiting
|
||||||
|
any implied license or other defenses to infringement that may
|
||||||
|
otherwise be available to you under applicable patent law.
|
||||||
|
|
||||||
|
### 12. No Surrender of Others' Freedom.
|
||||||
|
|
||||||
|
If conditions are imposed on you (whether by court order, agreement or
|
||||||
|
otherwise) that contradict the conditions of this License, they do not
|
||||||
|
excuse you from the conditions of this License. If you cannot convey a
|
||||||
|
covered work so as to satisfy simultaneously your obligations under
|
||||||
|
this License and any other pertinent obligations, then as a
|
||||||
|
consequence you may not convey it at all. For example, if you agree to
|
||||||
|
terms that obligate you to collect a royalty for further conveying
|
||||||
|
from those to whom you convey the Program, the only way you could
|
||||||
|
satisfy both those terms and this License would be to refrain entirely
|
||||||
|
from conveying the Program.
|
||||||
|
|
||||||
|
### 13. Remote Network Interaction; Use with the GNU General Public License.
|
||||||
|
|
||||||
|
Notwithstanding any other provision of this License, if you modify the
|
||||||
|
Program, your modified version must prominently offer all users
|
||||||
|
interacting with it remotely through a computer network (if your
|
||||||
|
version supports such interaction) an opportunity to receive the
|
||||||
|
Corresponding Source of your version by providing access to the
|
||||||
|
Corresponding Source from a network server at no charge, through some
|
||||||
|
standard or customary means of facilitating copying of software. This
|
||||||
|
Corresponding Source shall include the Corresponding Source for any
|
||||||
|
work covered by version 3 of the GNU General Public License that is
|
||||||
|
incorporated pursuant to the following paragraph.
|
||||||
|
|
||||||
|
Notwithstanding any other provision of this License, you have
|
||||||
|
permission to link or combine any covered work with a work licensed
|
||||||
|
under version 3 of the GNU General Public License into a single
|
||||||
|
combined work, and to convey the resulting work. The terms of this
|
||||||
|
License will continue to apply to the part which is the covered work,
|
||||||
|
but the work with which it is combined will remain governed by version
|
||||||
|
3 of the GNU General Public License.
|
||||||
|
|
||||||
|
### 14. Revised Versions of this License.
|
||||||
|
|
||||||
|
The Free Software Foundation may publish revised and/or new versions
|
||||||
|
of the GNU Affero General Public License from time to time. Such new
|
||||||
|
versions will be similar in spirit to the present version, but may
|
||||||
|
differ in detail to address new problems or concerns.
|
||||||
|
|
||||||
|
Each version is given a distinguishing version number. If the Program
|
||||||
|
specifies that a certain numbered version of the GNU Affero General
|
||||||
|
Public License "or any later version" applies to it, you have the
|
||||||
|
option of following the terms and conditions either of that numbered
|
||||||
|
version or of any later version published by the Free Software
|
||||||
|
Foundation. If the Program does not specify a version number of the
|
||||||
|
GNU Affero General Public License, you may choose any version ever
|
||||||
|
published by the Free Software Foundation.
|
||||||
|
|
||||||
|
If the Program specifies that a proxy can decide which future versions
|
||||||
|
of the GNU Affero General Public License can be used, that proxy's
|
||||||
|
public statement of acceptance of a version permanently authorizes you
|
||||||
|
to choose that version for the Program.
|
||||||
|
|
||||||
|
Later license versions may give you additional or different
|
||||||
|
permissions. However, no additional obligations are imposed on any
|
||||||
|
author or copyright holder as a result of your choosing to follow a
|
||||||
|
later version.
|
||||||
|
|
||||||
|
### 15. Disclaimer of Warranty.
|
||||||
|
|
||||||
|
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
|
||||||
|
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
|
||||||
|
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT
|
||||||
|
WARRANTY OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT
|
||||||
|
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
|
||||||
|
A PARTICULAR PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND
|
||||||
|
PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE PROGRAM PROVE
|
||||||
|
DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, REPAIR OR
|
||||||
|
CORRECTION.
|
||||||
|
|
||||||
|
### 16. Limitation of Liability.
|
||||||
|
|
||||||
|
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
|
||||||
|
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR
|
||||||
|
CONVEYS THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
|
||||||
|
INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES
|
||||||
|
ARISING OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT
|
||||||
|
NOT LIMITED TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR
|
||||||
|
LOSSES SUSTAINED BY YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM
|
||||||
|
TO OPERATE WITH ANY OTHER PROGRAMS), EVEN IF SUCH HOLDER OR OTHER
|
||||||
|
PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF SUCH DAMAGES.
|
||||||
|
|
||||||
|
### 17. Interpretation of Sections 15 and 16.
|
||||||
|
|
||||||
|
If the disclaimer of warranty and limitation of liability provided
|
||||||
|
above cannot be given local legal effect according to their terms,
|
||||||
|
reviewing courts shall apply local law that most closely approximates
|
||||||
|
an absolute waiver of all civil liability in connection with the
|
||||||
|
Program, unless a warranty or assumption of liability accompanies a
|
||||||
|
copy of the Program in return for a fee.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
## How to Apply These Terms to Your New Programs
|
||||||
|
|
||||||
|
If you develop a new program, and you want it to be of the greatest
|
||||||
|
possible use to the public, the best way to achieve this is to make it
|
||||||
|
free software which everyone can redistribute and change under these
|
||||||
|
terms.
|
||||||
|
|
||||||
|
To do so, attach the following notices to the program. It is safest to
|
||||||
|
attach them to the start of each source file to most effectively state
|
||||||
|
the exclusion of warranty; and each file should have at least the
|
||||||
|
"copyright" line and a pointer to where the full notice is found.
|
||||||
|
|
||||||
|
<one line to give the program's name and a brief idea of what it does.>
|
||||||
|
Copyright (C) <year> <name of author>
|
||||||
|
|
||||||
|
This program is free software: you can redistribute it and/or modify
|
||||||
|
it under the terms of the GNU Affero General Public License as
|
||||||
|
published by the Free Software Foundation, either version 3 of the
|
||||||
|
License, or (at your option) any later version.
|
||||||
|
|
||||||
|
This program is distributed in the hope that it will be useful,
|
||||||
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
GNU Affero General Public License for more details.
|
||||||
|
|
||||||
|
You should have received a copy of the GNU Affero General Public License
|
||||||
|
along with this program. If not, see <https://www.gnu.org/licenses/>.
|
||||||
|
|
||||||
|
Also add information on how to contact you by electronic and paper
|
||||||
|
mail.
|
||||||
|
|
||||||
|
If your software can interact with users remotely through a computer
|
||||||
|
network, you should also make sure that it provides a way for users to
|
||||||
|
get its source. For example, if your program is a web application, its
|
||||||
|
interface could display a "Source" link that leads users to an archive
|
||||||
|
of the code. There are many ways you could offer source, and different
|
||||||
|
solutions will be better for different programs; see section 13 for
|
||||||
|
the specific requirements.
|
||||||
|
|
||||||
|
You should also get your employer (if you work as a programmer) or
|
||||||
|
school, if any, to sign a "copyright disclaimer" for the program, if
|
||||||
|
necessary. For more information on this, and how to apply and follow
|
||||||
|
the GNU AGPL, see <https://www.gnu.org/licenses/>.
|
||||||
87
src/components/About.tsx
Normal file
87
src/components/About.tsx
Normal file
|
|
@ -0,0 +1,87 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import iconMap from '../utils/iconMap';
|
||||||
|
|
||||||
|
const About = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const aboutData = t('data.about', { returnObjects: true });
|
||||||
|
const socialLinks = t('social.links', { returnObjects: true });
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-2 md:px-4">
|
||||||
|
<div className="max-w-3xl mx-auto">
|
||||||
|
<h2 className="text-3xl font-bold text-center mb-8 text-gray-900 dark:text-white">{t('about.title')}</h2>
|
||||||
|
<div className="prose prose-lg mx-auto dark:prose-invert">
|
||||||
|
{aboutData.content.intro.map((paragraph: string, index: number) => (
|
||||||
|
<p key={index} className="text-gray-600 dark:text-gray-300 mb-6">
|
||||||
|
{paragraph}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-12">
|
||||||
|
{aboutData.stats.map((stat: { value: string; label: string }, index: number) => (
|
||||||
|
<div key={index} className="text-center">
|
||||||
|
<h3 className="text-4xl font-bold text-blue-600 dark:text-blue-400 mb-2">{stat.value}</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">{stat.label}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{aboutData.content.workScope && (
|
||||||
|
<div className="mt-12">
|
||||||
|
<h3 className="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">工作范围</h3>
|
||||||
|
<ol className="space-y-4">
|
||||||
|
{aboutData.content.workScope.map((item: string, index: number) => (
|
||||||
|
<li key={index} className="flex items-center space-x-4 text-gray-600 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400 transition-colors">
|
||||||
|
<span className="flex-shrink-0 w-8 h-8 flex items-center justify-center rounded-full bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-400 font-semibold">
|
||||||
|
{index + 1}
|
||||||
|
</span>
|
||||||
|
<span className="text-lg">{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ol>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<div className="mt-12">
|
||||||
|
<h3 className="text-2xl font-semibold mb-6 text-gray-900 dark:text-white">{t('about.contact.title')}</h3>
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-6">
|
||||||
|
{socialLinks.map((link: any) => {
|
||||||
|
const Icon = iconMap[link.icon as keyof typeof iconMap];
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={link.name}
|
||||||
|
href={link.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="flex items-center p-4 rounded-lg border border-gray-200 dark:border-gray-700 hover:shadow-md transition-shadow bg-white dark:bg-gray-800 no-underline"
|
||||||
|
>
|
||||||
|
<Icon className={`h-6 w-6 ${link.color} mr-3`} />
|
||||||
|
<span className="text-gray-700 dark:text-gray-300">{link.name}</span>
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="mt-12">
|
||||||
|
<h3 className="text-2xl font-semibold mb-4 text-gray-900 dark:text-white">{t('about.join.title')}</h3>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">
|
||||||
|
{aboutData.content.contact.description}
|
||||||
|
</p>
|
||||||
|
<div className="mt-4">
|
||||||
|
<a
|
||||||
|
href={`mailto:${aboutData.content.contact.email}`}
|
||||||
|
className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 no-underline"
|
||||||
|
>
|
||||||
|
{aboutData.content.contact.email}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default About;
|
||||||
152
src/components/Contributors.tsx
Normal file
152
src/components/Contributors.tsx
Normal file
|
|
@ -0,0 +1,152 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Tabs } from 'antd';
|
||||||
|
import type { TabsProps } from 'antd';
|
||||||
|
import Sponsors from './Sponsors';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import clsx from 'clsx';
|
||||||
|
import iconMap from '../utils/iconMap';
|
||||||
|
|
||||||
|
interface Link {
|
||||||
|
name: string;
|
||||||
|
url: string;
|
||||||
|
color: string;
|
||||||
|
icon: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Contributor {
|
||||||
|
name: string;
|
||||||
|
avatar: string;
|
||||||
|
role: string;
|
||||||
|
links: Link[];
|
||||||
|
isCore?: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Contributors: React.FC = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const members = t('data.contributors.members', { returnObjects: true }) as Contributor[];
|
||||||
|
|
||||||
|
// Fisher-Yates shuffle algorithm
|
||||||
|
const shuffleArray = <T,>(array: T[]): T[] => {
|
||||||
|
const shuffled = [...array];
|
||||||
|
for (let i = shuffled.length - 1; i > 0; i--) {
|
||||||
|
const j = Math.floor(Math.random() * (i + 1));
|
||||||
|
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
|
||||||
|
}
|
||||||
|
return shuffled;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ContributorCard: React.FC<{ member: Contributor }> = ({ member }) => (
|
||||||
|
<div
|
||||||
|
className={clsx(
|
||||||
|
"bg-white dark:bg-gray-800/50 rounded-lg shadow-lg text-center transition-colors hover:dark:bg-gray-800/70",
|
||||||
|
member.isCore ? "p-8 min-w-[400px]" : "p-4 min-w-[200px]"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={member.avatar}
|
||||||
|
alt={member.name}
|
||||||
|
className={clsx(
|
||||||
|
"rounded-full mx-auto mb-4 object-cover",
|
||||||
|
member.isCore ? "w-32 h-32" : "w-16 h-16"
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<h3 className={clsx(
|
||||||
|
"font-semibold mb-2 text-gray-900 dark:text-white",
|
||||||
|
member.isCore ? "text-2xl" : "text-base"
|
||||||
|
)}>
|
||||||
|
{member.name}
|
||||||
|
</h3>
|
||||||
|
<p className={clsx(
|
||||||
|
"text-gray-600 dark:text-gray-300 mb-4",
|
||||||
|
member.isCore ? "text-base" : "text-sm"
|
||||||
|
)}>
|
||||||
|
{member.role}
|
||||||
|
</p>
|
||||||
|
<div className="flex justify-center space-x-4 mb-4">
|
||||||
|
{member.links?.map((link, index) => {
|
||||||
|
const Icon = iconMap[link.icon as keyof typeof iconMap];
|
||||||
|
if (!Icon) return null;
|
||||||
|
return (
|
||||||
|
<a
|
||||||
|
key={index}
|
||||||
|
href={link.url}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className={link.color}
|
||||||
|
title={link.name}
|
||||||
|
>
|
||||||
|
<Icon className={clsx(member.isCore ? "h-6 w-6" : "h-4 w-4")} />
|
||||||
|
</a>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
const SectionTitle: React.FC<{ title: string }> = ({ title }) => (
|
||||||
|
<div className="relative">
|
||||||
|
<div className="absolute inset-0 flex items-center" aria-hidden="true">
|
||||||
|
<div className="w-full border-t border-gray-300 dark:border-gray-700" />
|
||||||
|
</div>
|
||||||
|
<div className="relative flex justify-center">
|
||||||
|
<span className="bg-gray-50 dark:bg-gray-900 px-6 text-lg font-semibold text-gray-900 dark:text-gray-100">
|
||||||
|
{title}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
// 将成员按照是否为核心贡献者分组
|
||||||
|
const coreMembers = members.filter(member => member.isCore);
|
||||||
|
const regularMembers = shuffleArray(members.filter(member => !member.isCore));
|
||||||
|
|
||||||
|
const items: TabsProps['items'] = [
|
||||||
|
{
|
||||||
|
key: t('contributors.tabs.contributors'),
|
||||||
|
label: t('contributors.tabs.contributors'),
|
||||||
|
children: (
|
||||||
|
<div className="space-y-12 max-w-screen-2xl mx-auto pt-8">
|
||||||
|
{/* 核心贡献者标题 */}
|
||||||
|
<SectionTitle title={t('contributors.core_members')} />
|
||||||
|
{/* 核心贡献者 */}
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-8">
|
||||||
|
{coreMembers.map((member, index) => (
|
||||||
|
<ContributorCard key={`core-${index}`} member={member} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
{/* 普通贡献者标题 */}
|
||||||
|
<SectionTitle title={t('contributors.regular_members')} />
|
||||||
|
{/* 普通贡献者 */}
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-4">
|
||||||
|
{regularMembers.map((member, index) => (
|
||||||
|
<ContributorCard key={`regular-${index}`} member={member} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: t('contributors.tabs.sponsors'),
|
||||||
|
label: t('contributors.tabs.sponsors'),
|
||||||
|
children: <Sponsors />,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-900">
|
||||||
|
<div className="max-w-[2000px] mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||||
|
<div className="flex justify-center mb-8">
|
||||||
|
<Tabs
|
||||||
|
defaultActiveKey={t('contributors.tabs.contributors')}
|
||||||
|
items={items}
|
||||||
|
centered
|
||||||
|
className="contributors-tabs"
|
||||||
|
type="card"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Contributors;
|
||||||
38
src/components/Hero.tsx
Normal file
38
src/components/Hero.tsx
Normal file
|
|
@ -0,0 +1,38 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
|
import TranslationBackground from './TranslationBackground';
|
||||||
|
|
||||||
|
const Hero = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative h-screen flex items-center justify-center overflow-hidden">
|
||||||
|
<TranslationBackground />
|
||||||
|
<div className="relative z-10 text-center text-white">
|
||||||
|
<h1 className="text-5xl md:text-6xl font-bold mb-6">
|
||||||
|
{t('hero.title')}
|
||||||
|
</h1>
|
||||||
|
<p className="text-xl md:text-2xl mb-8">
|
||||||
|
{t('hero.subtitle')}
|
||||||
|
</p>
|
||||||
|
<div className="space-x-4">
|
||||||
|
<Link
|
||||||
|
to="/projects"
|
||||||
|
className="inline-flex items-center bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition-colors"
|
||||||
|
>
|
||||||
|
{t('hero.cta.projects')}
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
to="/updates"
|
||||||
|
className="inline-flex items-center bg-transparent text-white border-2 border-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-blue-600 transition-colors"
|
||||||
|
>
|
||||||
|
{t('hero.cta.updates')}
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Hero;
|
||||||
63
src/components/LanguageSwitcher.tsx
Normal file
63
src/components/LanguageSwitcher.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
||||||
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Globe } from 'lucide-react';
|
||||||
|
|
||||||
|
const LanguageSwitcher = () => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
const languages = [
|
||||||
|
{ code: 'zh-CN', name: '简体中文' },
|
||||||
|
{ code: 'zh-TW', name: '繁體中文' },
|
||||||
|
{ code: 'en-US', name: 'English' }
|
||||||
|
];
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const handleLanguageChange = (code: string) => {
|
||||||
|
i18n.changeLanguage(code);
|
||||||
|
setIsOpen(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" ref={menuRef}>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="p-1.5 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
||||||
|
aria-label="Change language"
|
||||||
|
>
|
||||||
|
<Globe className="w-5 h-5" />
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className="absolute right-0 mt-1 w-28 bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden border border-gray-200 dark:border-gray-700">
|
||||||
|
{languages.map((lang) => (
|
||||||
|
<button
|
||||||
|
key={lang.code}
|
||||||
|
onClick={() => handleLanguageChange(lang.code)}
|
||||||
|
className={`w-full px-3 py-1.5 text-sm text-left ${
|
||||||
|
i18n.language === lang.code
|
||||||
|
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50'
|
||||||
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{lang.name}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default LanguageSwitcher;
|
||||||
98
src/components/Navbar.tsx
Normal file
98
src/components/Navbar.tsx
Normal file
|
|
@ -0,0 +1,98 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Link, useLocation } from 'react-router-dom';
|
||||||
|
import { Book, Menu, X } from 'lucide-react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import LanguageSwitcher from './LanguageSwitcher';
|
||||||
|
import ThemeSwitcher from './ThemeSwitcher';
|
||||||
|
|
||||||
|
const Navbar = () => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const location = useLocation();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const navItems = [
|
||||||
|
{ name: t('nav.home'), href: '/' },
|
||||||
|
{ name: t('nav.projects'), href: '/projects' },
|
||||||
|
{ name: t('nav.updates'), href: '/updates' },
|
||||||
|
{ name: t('nav.contributors'), href: '/contributors' },
|
||||||
|
{ name: t('nav.about'), href: '/about' }
|
||||||
|
];
|
||||||
|
|
||||||
|
const isActive = (path: string) => {
|
||||||
|
return location.pathname === path;
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="bg-white dark:bg-gray-900 shadow-lg fixed w-full z-50 transition-colors">
|
||||||
|
<div className="container mx-auto px-8">
|
||||||
|
<div className="flex justify-between items-center h-14">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<Link to="/" className="flex items-center">
|
||||||
|
<Book className="h-6 w-6 text-blue-600 dark:text-blue-400" />
|
||||||
|
<span className="ml-2 text-lg font-bold text-gray-900 dark:text-white">{t('brand.name')}</span>
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Desktop Navigation */}
|
||||||
|
<div className="hidden md:flex items-center">
|
||||||
|
<div className="flex items-center space-x-6">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
to={item.href}
|
||||||
|
className={`px-2.5 py-1.5 rounded-md text-sm font-medium transition-colors ${
|
||||||
|
isActive(item.href)
|
||||||
|
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50'
|
||||||
|
: 'text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="ml-6 flex items-center space-x-1.5">
|
||||||
|
<ThemeSwitcher />
|
||||||
|
<LanguageSwitcher />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Navigation Button */}
|
||||||
|
<div className="md:hidden flex items-center space-x-1.5">
|
||||||
|
<ThemeSwitcher />
|
||||||
|
<LanguageSwitcher />
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="p-1.5 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||||
|
>
|
||||||
|
{isOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Navigation Menu */}
|
||||||
|
{isOpen && (
|
||||||
|
<div className="md:hidden">
|
||||||
|
<div className="px-2 pt-2 pb-3 space-y-1">
|
||||||
|
{navItems.map((item) => (
|
||||||
|
<Link
|
||||||
|
key={item.name}
|
||||||
|
to={item.href}
|
||||||
|
className={`block px-3 py-2 rounded-md text-base font-medium ${
|
||||||
|
isActive(item.href)
|
||||||
|
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50'
|
||||||
|
: 'text-gray-700 dark:text-gray-300 hover:text-blue-600 dark:hover:text-blue-400'
|
||||||
|
}`}
|
||||||
|
onClick={() => setIsOpen(false)}
|
||||||
|
>
|
||||||
|
{item.name}
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
155
src/components/Projects.tsx
Normal file
155
src/components/Projects.tsx
Normal file
|
|
@ -0,0 +1,155 @@
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { ExternalLink } from 'lucide-react';
|
||||||
|
|
||||||
|
interface Project {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
image: string;
|
||||||
|
status?: 'planning' | 'approved' | 'in_progress' | 'launched' | 'completed';
|
||||||
|
tags: string[];
|
||||||
|
link?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Projects = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const projects = t('data.projects.projects', { returnObjects: true }) as Project[];
|
||||||
|
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
||||||
|
|
||||||
|
// 获取所有可用的标签
|
||||||
|
const allTags = Array.from(
|
||||||
|
new Set(projects.flatMap(project => project.tags))
|
||||||
|
);
|
||||||
|
|
||||||
|
// 根据选中的标签筛选项目
|
||||||
|
const filteredProjects = selectedTags.length > 0
|
||||||
|
? projects.filter(project =>
|
||||||
|
selectedTags.every(tag => project.tags.includes(tag))
|
||||||
|
)
|
||||||
|
: projects;
|
||||||
|
|
||||||
|
const handleTagClick = (tag: string) => {
|
||||||
|
setSelectedTags(prev =>
|
||||||
|
prev.includes(tag)
|
||||||
|
? prev.filter(t => t !== tag)
|
||||||
|
: [...prev, tag]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取状态标签的样式
|
||||||
|
const getStatusStyle = (status?: string) => {
|
||||||
|
if (!status) return '';
|
||||||
|
|
||||||
|
const styles = {
|
||||||
|
planning: 'bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300',
|
||||||
|
approved: 'bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-200',
|
||||||
|
in_progress: 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200',
|
||||||
|
launched: 'bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200',
|
||||||
|
completed: 'bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200'
|
||||||
|
};
|
||||||
|
|
||||||
|
return styles[status as keyof typeof styles];
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-12 md:px-20">
|
||||||
|
<div className="mb-12">
|
||||||
|
<h2 className="text-3xl font-bold text-center text-gray-900 dark:text-white">
|
||||||
|
{t('projects.title')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
{/* 只在有选中的标签时显示筛选器 */}
|
||||||
|
{selectedTags.length > 0 && (
|
||||||
|
<div className="mt-6 flex flex-wrap gap-2 justify-center">
|
||||||
|
{selectedTags.map((tag) => (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => handleTagClick(tag)}
|
||||||
|
className="inline-flex items-center px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
|
||||||
|
>
|
||||||
|
{t(`projects.tags.${tag}`)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
onClick={() => setSelectedTags([])}
|
||||||
|
className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-sm"
|
||||||
|
>
|
||||||
|
{t('updates.filter.clear')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{filteredProjects.map((project, index) => (
|
||||||
|
<div key={index} className="bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden transition-colors flex flex-col">
|
||||||
|
<img
|
||||||
|
src={project.image}
|
||||||
|
alt={project.title}
|
||||||
|
className="w-full h-48 object-cover"
|
||||||
|
/>
|
||||||
|
<div className="p-6 flex-1 flex flex-col">
|
||||||
|
{/* 标题区域固定高度 */}
|
||||||
|
<div className="h-16 mb-3">
|
||||||
|
<div className="flex items-start justify-between">
|
||||||
|
<a
|
||||||
|
href={project.link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="group flex-1"
|
||||||
|
>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 dark:group-hover:text-blue-400 transition-colors line-clamp-2">
|
||||||
|
{project.title}
|
||||||
|
</h3>
|
||||||
|
</a>
|
||||||
|
{project.link && (
|
||||||
|
<a
|
||||||
|
href={project.link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="ml-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 flex-shrink-0"
|
||||||
|
title={t('Visit project')}
|
||||||
|
>
|
||||||
|
<ExternalLink className="w-5 h-5" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 标签区域固定高度 */}
|
||||||
|
<div className="h-8 mb-4 flex items-center overflow-x-auto">
|
||||||
|
<div className="flex gap-2">
|
||||||
|
{project.tags.map((tag) => (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => handleTagClick(tag)}
|
||||||
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors flex-shrink-0 ${
|
||||||
|
selectedTags.includes(tag)
|
||||||
|
? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'
|
||||||
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t(`projects.tags.${tag}`)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{project.status && (
|
||||||
|
<span className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium flex-shrink-0 ${getStatusStyle(project.status)}`}>
|
||||||
|
{t(`projects.status.${project.status}`)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 描述区域 */}
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 flex-1">
|
||||||
|
{project.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Projects;
|
||||||
92
src/components/Sponsors.tsx
Normal file
92
src/components/Sponsors.tsx
Normal file
|
|
@ -0,0 +1,92 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Card, Avatar, Tag } from 'antd';
|
||||||
|
import { GithubOutlined, TwitterOutlined } from '@ant-design/icons';
|
||||||
|
import sponsorsData from '../../data/zh-CN/sponsors.json';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
interface SponsorType {
|
||||||
|
nickname: string;
|
||||||
|
avatar?: string;
|
||||||
|
year: number;
|
||||||
|
amount: string;
|
||||||
|
socialLinks?: {
|
||||||
|
github?: string;
|
||||||
|
twitter?: string;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const Sponsors: React.FC = () => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
|
||||||
|
const getMessage = () => {
|
||||||
|
switch (i18n.language) {
|
||||||
|
case 'zh-CN':
|
||||||
|
return '赞助人信息仍在同步，将在晚些时候上线。';
|
||||||
|
case 'zh-TW':
|
||||||
|
return '贊助人資訊仍在同步，將在晚些時候上線。';
|
||||||
|
case 'en-US':
|
||||||
|
default:
|
||||||
|
return 'Sponsor information is still being synchronized and will be available later.';
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex items-center justify-center min-h-[300px] text-gray-600 dark:text-gray-300 text-lg">
|
||||||
|
{getMessage()}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
|
// Original sponsors display code
|
||||||
|
/*
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-6 max-w-screen-xl mx-auto">
|
||||||
|
{sponsorsData.map((sponsor: SponsorType, index: number) => (
|
||||||
|
<div key={index} className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-4 text-center transition-colors min-w-[240px]">
|
||||||
|
{sponsor.avatar && (
|
||||||
|
<div className="w-16 h-16 mx-auto mb-3">
|
||||||
|
<Avatar
|
||||||
|
size={64}
|
||||||
|
src={sponsor.avatar}
|
||||||
|
className="w-full h-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<h3 className="text-lg font-semibold mb-3 text-gray-900 dark:text-white">{sponsor.nickname}</h3>
|
||||||
|
<div className="space-y-4">
|
||||||
|
<div className="flex justify-center gap-3">
|
||||||
|
<Tag color="gold">{sponsor.year}</Tag>
|
||||||
|
<Tag color="green">{sponsor.amount}</Tag>
|
||||||
|
</div>
|
||||||
|
{sponsor.socialLinks && (
|
||||||
|
<div className="flex justify-center gap-4">
|
||||||
|
{sponsor.socialLinks.github && (
|
||||||
|
<a
|
||||||
|
href={sponsor.socialLinks.github}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
<GithubOutlined className="text-xl" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
{sponsor.socialLinks.twitter && (
|
||||||
|
<a
|
||||||
|
href={sponsor.socialLinks.twitter}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-gray-600 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400"
|
||||||
|
>
|
||||||
|
<TwitterOutlined className="text-xl" />
|
||||||
|
</a>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
*/
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Sponsors;
|
||||||
30
src/components/ThemeSwitcher.tsx
Normal file
30
src/components/ThemeSwitcher.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { Sun, Moon, Monitor } from 'lucide-react';
|
||||||
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import Dropdown from './ui/Dropdown';
|
||||||
|
|
||||||
|
const ThemeSwitcher = () => {
|
||||||
|
const { theme, setTheme, isDark } = useTheme();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
const themes = [
|
||||||
|
{ value: 'light', icon: <Sun className="w-4 h-4" />, label: t('theme.light') },
|
||||||
|
{ value: 'dark', icon: <Moon className="w-4 h-4" />, label: t('theme.dark') },
|
||||||
|
{ value: 'system', icon: <Monitor className="w-4 h-4" />, label: t('theme.system') }
|
||||||
|
];
|
||||||
|
|
||||||
|
// 根据当前主题显示对应的图标
|
||||||
|
const currentIcon = isDark ? <Moon className="w-5 h-5" /> : <Sun className="w-5 h-5" />;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dropdown
|
||||||
|
icon={currentIcon}
|
||||||
|
items={themes}
|
||||||
|
value={theme}
|
||||||
|
onChange={setTheme}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ThemeSwitcher;
|
||||||
206
src/components/Timeline.tsx
Normal file
206
src/components/Timeline.tsx
Normal file
|
|
@ -0,0 +1,206 @@
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Link, useSearchParams } from 'react-router-dom';
|
||||||
|
import { ChevronLeft, ChevronRight, ExternalLink } from 'lucide-react';
|
||||||
|
import { Update, useUpdates, getUpdateUrl } from '../utils/updates';
|
||||||
|
import TagFilter from './ui/TagFilter';
|
||||||
|
|
||||||
|
interface PaginationProps {
|
||||||
|
currentPage: number;
|
||||||
|
totalPages: number;
|
||||||
|
onPageChange: (page: number) => void;
|
||||||
|
hasNextPage: boolean;
|
||||||
|
hasPrevPage: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const Pagination: React.FC<PaginationProps> = ({
|
||||||
|
currentPage,
|
||||||
|
totalPages,
|
||||||
|
onPageChange,
|
||||||
|
hasNextPage,
|
||||||
|
hasPrevPage
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex justify-center items-center space-x-4 mt-12">
|
||||||
|
<button
|
||||||
|
onClick={() => hasPrevPage && onPageChange(currentPage - 1)}
|
||||||
|
disabled={!hasPrevPage}
|
||||||
|
className={`flex items-center space-x-1 px-4 py-2 rounded-lg transition-colors ${
|
||||||
|
hasPrevPage
|
||||||
|
? 'text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/50'
|
||||||
|
: 'text-gray-400 dark:text-gray-600 cursor-not-allowed opacity-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-4 h-4" />
|
||||||
|
<span>{t('updates.pagination.previous')}</span>
|
||||||
|
</button>
|
||||||
|
<span className="text-gray-600 dark:text-gray-400">
|
||||||
|
{t('updates.pagination.page_info', {
|
||||||
|
current: currentPage,
|
||||||
|
total: totalPages
|
||||||
|
})}
|
||||||
|
</span>
|
||||||
|
<button
|
||||||
|
onClick={() => hasNextPage && onPageChange(currentPage + 1)}
|
||||||
|
disabled={!hasNextPage}
|
||||||
|
className={`flex items-center space-x-1 px-4 py-2 rounded-lg transition-colors ${
|
||||||
|
hasNextPage
|
||||||
|
? 'text-blue-600 dark:text-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/50'
|
||||||
|
: 'text-gray-400 dark:text-gray-600 cursor-not-allowed opacity-50'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span>{t('updates.pagination.next')}</span>
|
||||||
|
<ChevronRight className="w-4 h-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Timeline = () => {
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
|
const [searchParams, setSearchParams] = useSearchParams();
|
||||||
|
const [updates, setUpdates] = useState<Update[]>([]);
|
||||||
|
const [pagination, setPagination] = useState({
|
||||||
|
currentPage: 1,
|
||||||
|
totalPages: 1,
|
||||||
|
totalItems: 0,
|
||||||
|
hasNextPage: false,
|
||||||
|
hasPrevPage: false
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取当前页码和标签筛选
|
||||||
|
const currentPage = Math.max(1, parseInt(searchParams.get('page') || '1', 10));
|
||||||
|
const selectedTags = searchParams.get('tags')?.split(',').filter(Boolean) || [];
|
||||||
|
const { getPaginatedUpdates } = useUpdates(currentPage);
|
||||||
|
|
||||||
|
// 获取所有可用的标签
|
||||||
|
const availableTags = Object.keys(t('updates.tags', { returnObjects: true }));
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUpdates = async () => {
|
||||||
|
try {
|
||||||
|
const result = await getPaginatedUpdates(selectedTags);
|
||||||
|
setUpdates(result.updates);
|
||||||
|
setPagination(result.pagination);
|
||||||
|
|
||||||
|
// 如果当前页码超出范围，自动调整到最后一页
|
||||||
|
if (currentPage > result.pagination.totalPages) {
|
||||||
|
setSearchParams((prev) => {
|
||||||
|
prev.set('page', result.pagination.totalPages.toString());
|
||||||
|
return prev;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch updates:', error);
|
||||||
|
setUpdates([]);
|
||||||
|
setPagination({
|
||||||
|
currentPage: 1,
|
||||||
|
totalPages: 1,
|
||||||
|
totalItems: 0,
|
||||||
|
hasNextPage: false,
|
||||||
|
hasPrevPage: false
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
fetchUpdates();
|
||||||
|
}, [currentPage, selectedTags, i18n.language, getPaginatedUpdates, setSearchParams]);
|
||||||
|
|
||||||
|
const handlePageChange = (page: number) => {
|
||||||
|
setSearchParams((prev) => {
|
||||||
|
prev.set('page', page.toString());
|
||||||
|
return prev;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleTagsChange = (tags: string[]) => {
|
||||||
|
setSearchParams((prev) => {
|
||||||
|
if (tags.length > 0) {
|
||||||
|
prev.set('tags', tags.join(','));
|
||||||
|
} else {
|
||||||
|
prev.delete('tags');
|
||||||
|
}
|
||||||
|
prev.set('page', '1'); // 重置页码
|
||||||
|
return prev;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container mx-auto px-8 md:px-20 lg:px-32 xl:px-48 2xl:px-64">
|
||||||
|
<div className="max-w-5xl">
|
||||||
|
<div className="flex flex-col md:flex-row md:items-center justify-between mb-12 pl-16">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 dark:text-white mb-4 md:mb-0">
|
||||||
|
{t('updates.title')}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<TagFilter
|
||||||
|
availableTags={availableTags}
|
||||||
|
selectedTags={selectedTags}
|
||||||
|
onTagsChange={handleTagsChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="relative">
|
||||||
|
{/* Timeline line */}
|
||||||
|
<div className="absolute left-6 top-0 h-full w-0.5 bg-blue-200 dark:bg-blue-900"></div>
|
||||||
|
|
||||||
|
<div className="space-y-8">
|
||||||
|
{updates.map((update) => (
|
||||||
|
<div key={update.id} className="relative flex items-start group">
|
||||||
|
{/* Timeline dot */}
|
||||||
|
<div className="absolute left-6 transform -translate-x-1/2 w-2.5 h-2.5 bg-blue-600 dark:bg-blue-500 rounded-full mt-2 group-hover:scale-125 transition-transform"></div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="ml-16 w-full">
|
||||||
|
<span className="text-sm text-blue-600 dark:text-blue-400 font-medium block mb-1">{update.date}</span>
|
||||||
|
<Link
|
||||||
|
to={getUpdateUrl(update)}
|
||||||
|
target={update.link ? "_blank" : undefined}
|
||||||
|
className="group/link"
|
||||||
|
>
|
||||||
|
<h3 className="text-xl font-semibold text-gray-900 dark:text-white mb-2 hover:text-blue-600 dark:hover:text-blue-400 inline-flex items-center">
|
||||||
|
{update.title}
|
||||||
|
{update.link && (
|
||||||
|
<ExternalLink className="w-4 h-4 ml-1 opacity-0 group-hover/link:opacity-100 transition-opacity" />
|
||||||
|
)}
|
||||||
|
</h3>
|
||||||
|
</Link>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">{update.summary}</p>
|
||||||
|
<div className="mt-4 flex items-center space-x-2">
|
||||||
|
{update.tags.map((tag) => (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => handleTagsChange([...selectedTags, tag])}
|
||||||
|
className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors ${
|
||||||
|
selectedTags.includes(tag)
|
||||||
|
? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'
|
||||||
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{t(`updates.tags.${tag}`)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className="mt-4 border-b border-gray-100 dark:border-gray-800"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{pagination.totalPages > 0 && (
|
||||||
|
<Pagination
|
||||||
|
currentPage={pagination.currentPage}
|
||||||
|
totalPages={pagination.totalPages}
|
||||||
|
onPageChange={handlePageChange}
|
||||||
|
hasNextPage={pagination.hasNextPage}
|
||||||
|
hasPrevPage={pagination.hasPrevPage}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Timeline;
|
||||||
129
src/components/TranslationBackground.tsx
Normal file
129
src/components/TranslationBackground.tsx
Normal file
|
|
@ -0,0 +1,129 @@
|
||||||
|
import React, { useEffect, useState, useMemo } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
|
import translations from '../../data/featured-translations.json';
|
||||||
|
|
||||||
|
const TranslationBackground = () => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
const { isDark } = useTheme();
|
||||||
|
const [isVisible, setIsVisible] = useState(false);
|
||||||
|
|
||||||
|
// 使用 useMemo 预先准备好数据，避免每次重渲染都重新计算
|
||||||
|
const scrollGroups = useMemo(() => {
|
||||||
|
const totalTranslations = translations.translations.length;
|
||||||
|
const baseGroupSize = Math.floor(totalTranslations / 4); // 基础组大小
|
||||||
|
const remainder = totalTranslations % 4; // 剩余的翻译数量
|
||||||
|
|
||||||
|
// 创建一个包含所有索引的数组
|
||||||
|
const allIndices = Array.from({ length: totalTranslations }, (_, i) => i);
|
||||||
|
|
||||||
|
// 创建四个组
|
||||||
|
const groups = Array(4).fill(null).map((_, groupIndex) => {
|
||||||
|
const startIndex = groupIndex * baseGroupSize;
|
||||||
|
const extraItem = groupIndex < remainder ? 1 : 0;
|
||||||
|
const endIndex = startIndex + baseGroupSize + (groupIndex === 3 ? remainder : extraItem);
|
||||||
|
|
||||||
|
// 从剩余的索引中随机选择所需数量的元素
|
||||||
|
return allIndices.slice(startIndex, endIndex);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 对每个组内的元素进行随机排序
|
||||||
|
return groups.map(group => [...group].sort(() => Math.random() - 0.5));
|
||||||
|
}, []); // 空依赖数组意味着这些组只会在组件首次渲染时创建
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// 组件挂载后立即开始淡入动画
|
||||||
|
setIsVisible(true);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const getMainText = (translation: typeof translations.translations[0]) => {
|
||||||
|
switch (i18n.language) {
|
||||||
|
case 'zh-CN':
|
||||||
|
return translation.zh_CN;
|
||||||
|
case 'zh-TW':
|
||||||
|
return translation.zh_TW;
|
||||||
|
default:
|
||||||
|
return translation.en;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const getSecondaryText = (translation: typeof translations.translations[0]) => {
|
||||||
|
switch (i18n.language) {
|
||||||
|
case 'zh-CN':
|
||||||
|
case 'zh-TW':
|
||||||
|
return translation.en;
|
||||||
|
default:
|
||||||
|
return translation.zh_CN;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="absolute inset-0 overflow-hidden">
|
||||||
|
<div className={`absolute inset-0 bg-gradient-to-r ${
|
||||||
|
isDark
|
||||||
|
? 'from-blue-950 to-indigo-950'
|
||||||
|
: 'from-blue-600 to-indigo-600'
|
||||||
|
}`} />
|
||||||
|
|
||||||
|
<div className={`transition-opacity duration-1000 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
|
||||||
|
{scrollGroups.map((group, groupIndex) => (
|
||||||
|
<div
|
||||||
|
key={groupIndex}
|
||||||
|
className="absolute w-full whitespace-nowrap"
|
||||||
|
style={{
|
||||||
|
top: `${5 + groupIndex * 22}%`,
|
||||||
|
animation: `scroll${groupIndex % 2 === 0 ? 'Left' : 'Right'} ${80 + groupIndex * 20}s linear infinite`
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* 重复两次内容以实现无缝滚动 */}
|
||||||
|
{[0, 1].map((repeat) => (
|
||||||
|
<div key={repeat} className="inline-block">
|
||||||
|
{group.map((index, i) => {
|
||||||
|
const translation = translations.translations[index];
|
||||||
|
// 计算在当前组中的相对位置（0-1之间）
|
||||||
|
const position = i / group.length;
|
||||||
|
// 创建一个基于位置的透明度曲线，中间低两边高
|
||||||
|
const opacityMultiplier = Math.sin((position - 0.5) * Math.PI) * 0.5 + 0.5;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={`${groupIndex}-${index}-${repeat}`}
|
||||||
|
className="inline-block mx-12 font-bold text-center text-white transition-opacity duration-1000"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="mb-1"
|
||||||
|
style={{
|
||||||
|
fontSize: `${2.2 + Math.random() * 0.6}rem`,
|
||||||
|
opacity: 0.35 + opacityMultiplier * 0.4, // 主文本透明度：0.35-0.75
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getMainText(translation)}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
fontSize: `${1.8 + Math.random() * 0.4}rem`,
|
||||||
|
opacity: 0.3 + opacityMultiplier * 0.35, // 次要文本透明度：0.3-0.65
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{getSecondaryText(translation)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* 添加渐变遮罩，加强两边的不透明度 */}
|
||||||
|
<div className={`absolute inset-0 bg-gradient-to-r ${
|
||||||
|
isDark
|
||||||
|
? 'from-blue-950/90 via-transparent to-indigo-950/90'
|
||||||
|
: 'from-blue-600/90 via-transparent to-indigo-600/90'
|
||||||
|
}`} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TranslationBackground;
|
||||||
59
src/components/UpdateDetail.tsx
Normal file
59
src/components/UpdateDetail.tsx
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { ChevronLeft } from 'lucide-react';
|
||||||
|
import { Update } from '../utils/updates';
|
||||||
|
|
||||||
|
interface UpdateDetailProps {
|
||||||
|
update: Update;
|
||||||
|
content?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const UpdateDetail: React.FC<UpdateDetailProps> = ({ update, content }) => {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="max-w-4xl mx-auto px-6">
|
||||||
|
<button
|
||||||
|
onClick={() => navigate('/updates')}
|
||||||
|
className="flex items-center space-x-2 text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300 mb-8 transition-colors"
|
||||||
|
>
|
||||||
|
<ChevronLeft className="w-4 h-4" />
|
||||||
|
<span>{t('updates.back_to_list')}</span>
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<article className="prose prose-lg dark:prose-invert max-w-none">
|
||||||
|
<header className="mb-8">
|
||||||
|
<div className="flex items-center space-x-2 text-sm text-blue-600 dark:text-blue-400 mb-2">
|
||||||
|
<time dateTime={update.date}>{update.date}</time>
|
||||||
|
<span>•</span>
|
||||||
|
<div className="flex space-x-2">
|
||||||
|
{update.tags.map((tag) => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
|
||||||
|
>
|
||||||
|
{t(`updates.tags.${tag}`)}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
|
||||||
|
{update.title}
|
||||||
|
</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
{content ? (
|
||||||
|
<div dangerouslySetInnerHTML={{ __html: content }} />
|
||||||
|
) : (
|
||||||
|
<p className="text-gray-600 dark:text-gray-300 text-lg">
|
||||||
|
{update.summary}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UpdateDetail;
|
||||||
71
src/components/ui/Dropdown.tsx
Normal file
71
src/components/ui/Dropdown.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
||||||
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
|
||||||
|
interface DropdownProps {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
items: {
|
||||||
|
value: string;
|
||||||
|
label: string;
|
||||||
|
icon?: React.ReactNode;
|
||||||
|
}[];
|
||||||
|
value: string;
|
||||||
|
onChange: (value: string) => void;
|
||||||
|
position?: 'left' | 'right';
|
||||||
|
}
|
||||||
|
|
||||||
|
const Dropdown = ({ icon, items, value, onChange, position = 'right' }: DropdownProps) => {
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
const menuRef = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" ref={dropdownRef}>
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className="p-1.5 rounded-lg text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900"
|
||||||
|
aria-label="Toggle dropdown"
|
||||||
|
>
|
||||||
|
{icon}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div
|
||||||
|
ref={menuRef}
|
||||||
|
className={`absolute top-full mt-1 ${position === 'right' ? 'right-0' : 'left-0'}
|
||||||
|
w-32 bg-white dark:bg-gray-800 rounded-lg shadow-lg py-1 z-50
|
||||||
|
border border-gray-200 dark:border-gray-700`}
|
||||||
|
>
|
||||||
|
{items.map((item) => (
|
||||||
|
<button
|
||||||
|
key={item.value}
|
||||||
|
onClick={() => {
|
||||||
|
onChange(item.value);
|
||||||
|
setIsOpen(false);
|
||||||
|
}}
|
||||||
|
className={`w-full px-3 py-1.5 text-left flex items-center space-x-2 text-sm ${
|
||||||
|
item.value === value
|
||||||
|
? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/50'
|
||||||
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{item.icon && <span className="w-4 h-4">{item.icon}</span>}
|
||||||
|
<span>{item.label}</span>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Dropdown;
|
||||||
144
src/components/ui/TagFilter.tsx
Normal file
144
src/components/ui/TagFilter.tsx
Normal file
|
|
@ -0,0 +1,144 @@
|
||||||
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Search, X } from 'lucide-react';
|
||||||
|
|
||||||
|
interface TagFilterProps {
|
||||||
|
availableTags: string[];
|
||||||
|
selectedTags: string[];
|
||||||
|
onTagsChange: (tags: string[]) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
const TagFilter: React.FC<TagFilterProps> = ({
|
||||||
|
availableTags,
|
||||||
|
selectedTags,
|
||||||
|
onTagsChange,
|
||||||
|
}) => {
|
||||||
|
const { t } = useTranslation();
|
||||||
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
const dropdownRef = useRef<HTMLDivElement>(null);
|
||||||
|
const inputRef = useRef<HTMLInputElement>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const handleClickOutside = (event: MouseEvent) => {
|
||||||
|
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
|
||||||
|
setIsOpen(false);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
document.addEventListener('mousedown', handleClickOutside);
|
||||||
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
// 当下拉菜单打开时，聚焦搜索框
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen && inputRef.current) {
|
||||||
|
inputRef.current.focus();
|
||||||
|
}
|
||||||
|
}, [isOpen]);
|
||||||
|
|
||||||
|
const filteredTags = availableTags.filter(tag =>
|
||||||
|
t(`updates.tags.${tag}`).toLowerCase().includes(searchQuery.toLowerCase())
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleTagToggle = (tag: string) => {
|
||||||
|
const newTags = selectedTags.includes(tag)
|
||||||
|
? selectedTags.filter(t => t !== tag)
|
||||||
|
: [...selectedTags, tag];
|
||||||
|
onTagsChange(newTags);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleRemoveTag = (tagToRemove: string) => {
|
||||||
|
onTagsChange(selectedTags.filter(tag => tag !== tagToRemove));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClearAll = () => {
|
||||||
|
onTagsChange([]);
|
||||||
|
setSearchQuery('');
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="relative" ref={dropdownRef}>
|
||||||
|
<div className="flex flex-wrap items-center gap-2">
|
||||||
|
{selectedTags.length > 0 && (
|
||||||
|
<div className="flex flex-wrap gap-2 items-center">
|
||||||
|
{selectedTags.map(tag => (
|
||||||
|
<span
|
||||||
|
key={tag}
|
||||||
|
className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
|
||||||
|
>
|
||||||
|
{t(`updates.tags.${tag}`)}
|
||||||
|
<button
|
||||||
|
onClick={() => handleRemoveTag(tag)}
|
||||||
|
className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
<button
|
||||||
|
onClick={handleClearAll}
|
||||||
|
className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-sm"
|
||||||
|
>
|
||||||
|
{t('updates.filter.clear')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<button
|
||||||
|
onClick={() => setIsOpen(!isOpen)}
|
||||||
|
className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
|
||||||
|
isOpen
|
||||||
|
? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'
|
||||||
|
: 'bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<Search className="h-4 w-4" />
|
||||||
|
{t('updates.filter.title')}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{isOpen && (
|
||||||
|
<div className="absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50">
|
||||||
|
<div className="p-3">
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
ref={inputRef}
|
||||||
|
type="text"
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
placeholder={t('updates.filter.search_placeholder')}
|
||||||
|
className="w-full px-4 py-2.5 pl-10 text-sm rounded-lg bg-gray-100 dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-500 dark:placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||||
|
/>
|
||||||
|
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="max-h-72 overflow-y-auto">
|
||||||
|
{filteredTags.map((tag) => (
|
||||||
|
<button
|
||||||
|
key={tag}
|
||||||
|
onClick={() => handleTagToggle(tag)}
|
||||||
|
className={`w-full px-4 py-2.5 text-left text-sm flex items-center justify-between ${
|
||||||
|
selectedTags.includes(tag)
|
||||||
|
? 'bg-blue-50 dark:bg-blue-900/50 text-blue-800 dark:text-blue-200'
|
||||||
|
: 'text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<span>{t(`updates.tags.${tag}`)}</span>
|
||||||
|
{selectedTags.includes(tag) && (
|
||||||
|
<span className="w-2 h-2 rounded-full bg-blue-500 dark:bg-blue-400" />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
{filteredTags.length === 0 && (
|
||||||
|
<div className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
||||||
|
{t('updates.filter.no_results')}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TagFilter;
|
||||||
104
src/contexts/ThemeContext.tsx
Normal file
104
src/contexts/ThemeContext.tsx
Normal file
|
|
@ -0,0 +1,104 @@
|
||||||
|
import React, { createContext, useContext, useEffect, useState, useCallback, useMemo } from 'react';
|
||||||
|
|
||||||
|
type Theme = 'light' | 'dark' | 'system';
|
||||||
|
|
||||||
|
interface ThemeContextType {
|
||||||
|
theme: Theme;
|
||||||
|
setTheme: (theme: Theme) => void;
|
||||||
|
isDark: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||||
|
|
||||||
|
const defineThemeColors = (isDark: boolean) => {
|
||||||
|
const root = document.documentElement;
|
||||||
|
if (isDark) {
|
||||||
|
root.style.setProperty('--bg-primary', '#111827');
|
||||||
|
root.style.setProperty('--bg-secondary', '#1f2937');
|
||||||
|
root.style.setProperty('--text-primary', '#ffffff');
|
||||||
|
root.style.setProperty('--text-secondary', '#9ca3af');
|
||||||
|
root.style.setProperty('--accent-primary', '#60a5fa');
|
||||||
|
root.style.setProperty('--accent-secondary', '#3b82f6');
|
||||||
|
} else {
|
||||||
|
root.style.setProperty('--bg-primary', '#ffffff');
|
||||||
|
root.style.setProperty('--bg-secondary', '#f3f4f6');
|
||||||
|
root.style.setProperty('--text-primary', '#111827');
|
||||||
|
root.style.setProperty('--text-secondary', '#4b5563');
|
||||||
|
root.style.setProperty('--accent-primary', '#2563eb');
|
||||||
|
root.style.setProperty('--accent-secondary', '#3b82f6');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 初始化主题函数
|
||||||
|
const initializeTheme = () => {
|
||||||
|
const savedTheme = localStorage.getItem('theme') as Theme;
|
||||||
|
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
const isDark = savedTheme === 'dark' || ((!savedTheme || savedTheme === 'system') && systemDark);
|
||||||
|
|
||||||
|
// 立即应用主题
|
||||||
|
document.documentElement.classList.toggle('dark', isDark);
|
||||||
|
defineThemeColors(isDark);
|
||||||
|
|
||||||
|
return {
|
||||||
|
theme: savedTheme || 'system',
|
||||||
|
isDark
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export function ThemeProvider({ children }: { children: React.ReactNode }) {
|
||||||
|
// 使用初始化函数设置初始状态
|
||||||
|
const initialTheme = useMemo(initializeTheme, []);
|
||||||
|
const [theme, setTheme] = useState<Theme>(initialTheme.theme);
|
||||||
|
const [isDark, setIsDark] = useState(initialTheme.isDark);
|
||||||
|
|
||||||
|
const updateTheme = useCallback((newTheme: Theme) => {
|
||||||
|
const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||||
|
const nextIsDark = newTheme === 'dark' || (newTheme === 'system' && systemDark);
|
||||||
|
|
||||||
|
if (nextIsDark !== isDark) {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
document.documentElement.classList.toggle('dark', nextIsDark);
|
||||||
|
defineThemeColors(nextIsDark);
|
||||||
|
setIsDark(nextIsDark);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, [isDark]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
localStorage.setItem('theme', theme);
|
||||||
|
updateTheme(theme);
|
||||||
|
}, [theme, updateTheme]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
|
||||||
|
|
||||||
|
const handler = () => {
|
||||||
|
if (theme === 'system') {
|
||||||
|
updateTheme('system');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
mediaQuery.addEventListener('change', handler);
|
||||||
|
return () => mediaQuery.removeEventListener('change', handler);
|
||||||
|
}, [theme, updateTheme]);
|
||||||
|
|
||||||
|
const contextValue = useMemo(() => ({
|
||||||
|
theme,
|
||||||
|
setTheme,
|
||||||
|
isDark
|
||||||
|
}), [theme, isDark]);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ThemeContext.Provider value={contextValue}>
|
||||||
|
{children}
|
||||||
|
</ThemeContext.Provider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useTheme() {
|
||||||
|
const context = useContext(ThemeContext);
|
||||||
|
if (context === undefined) {
|
||||||
|
throw new Error('useTheme must be used within a ThemeProvider');
|
||||||
|
}
|
||||||
|
return context;
|
||||||
|
}
|
||||||
78
src/i18n/index.ts
Normal file
78
src/i18n/index.ts
Normal file
|
|
@ -0,0 +1,78 @@
|
||||||
|
import i18n from 'i18next';
|
||||||
|
import { initReactI18next } from 'react-i18next';
|
||||||
|
import LanguageDetector from 'i18next-browser-languagedetector';
|
||||||
|
|
||||||
|
// 导入翻译文件
|
||||||
|
import zhCNTranslation from '../../data/zh-CN/index.json';
|
||||||
|
import zhTWTranslation from '../../data/zh-TW/index.json';
|
||||||
|
import enUSTranslation from '../../data/en-US/index.json';
|
||||||
|
|
||||||
|
// 导入数据文件
|
||||||
|
import zhCNAbout from '../../data/zh-CN/about.json';
|
||||||
|
import zhCNProjects from '../../data/zh-CN/projects.json';
|
||||||
|
import zhCNContributors from '../../data/zh-CN/contributors.json';
|
||||||
|
import zhCNUpdates from '../../data/zh-CN/updates.json';
|
||||||
|
|
||||||
|
import zhTWAbout from '../../data/zh-TW/about.json';
|
||||||
|
import zhTWProjects from '../../data/zh-TW/projects.json';
|
||||||
|
import zhTWContributors from '../../data/zh-TW/contributors.json';
|
||||||
|
import zhTWUpdates from '../../data/zh-TW/updates.json';
|
||||||
|
|
||||||
|
import enUSAbout from '../../data/en-US/about.json';
|
||||||
|
import enUSProjects from '../../data/en-US/projects.json';
|
||||||
|
import enUSContributors from '../../data/en-US/contributors.json';
|
||||||
|
import enUSUpdates from '../../data/en-US/updates.json';
|
||||||
|
|
||||||
|
i18n
|
||||||
|
.use(LanguageDetector)
|
||||||
|
.use(initReactI18next)
|
||||||
|
.init({
|
||||||
|
resources: {
|
||||||
|
'zh-CN': {
|
||||||
|
translation: zhCNTranslation.translation
|
||||||
|
},
|
||||||
|
'zh-TW': {
|
||||||
|
translation: zhTWTranslation.translation
|
||||||
|
},
|
||||||
|
'en-US': {
|
||||||
|
translation: enUSTranslation.translation
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fallbackLng: 'zh-CN',
|
||||||
|
interpolation: {
|
||||||
|
escapeValue: false,
|
||||||
|
},
|
||||||
|
react: {
|
||||||
|
useSuspense: false
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 添加数据命名空间
|
||||||
|
i18n.addResourceBundle('zh-CN', 'translation', {
|
||||||
|
data: {
|
||||||
|
about: zhCNAbout,
|
||||||
|
projects: zhCNProjects,
|
||||||
|
contributors: zhCNContributors,
|
||||||
|
updates: zhCNUpdates
|
||||||
|
}
|
||||||
|
}, true, true);
|
||||||
|
|
||||||
|
i18n.addResourceBundle('zh-TW', 'translation', {
|
||||||
|
data: {
|
||||||
|
about: zhTWAbout,
|
||||||
|
projects: zhTWProjects,
|
||||||
|
contributors: zhTWContributors,
|
||||||
|
updates: zhTWUpdates
|
||||||
|
}
|
||||||
|
}, true, true);
|
||||||
|
|
||||||
|
i18n.addResourceBundle('en-US', 'translation', {
|
||||||
|
data: {
|
||||||
|
about: enUSAbout,
|
||||||
|
projects: enUSProjects,
|
||||||
|
contributors: enUSContributors,
|
||||||
|
updates: enUSUpdates
|
||||||
|
}
|
||||||
|
}, true, true);
|
||||||
|
|
||||||
|
export default i18n;
|
||||||
88
src/index.css
Normal file
88
src/index.css
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--bg-primary: #ffffff;
|
||||||
|
--bg-secondary: #f3f4f6;
|
||||||
|
--text-primary: #111827;
|
||||||
|
--text-secondary: #4b5563;
|
||||||
|
--accent-primary: #2563eb;
|
||||||
|
--accent-secondary: #3b82f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 使用 CSS 变量定义主题颜色 */
|
||||||
|
@layer base {
|
||||||
|
.dark {
|
||||||
|
--bg-primary: #111827;
|
||||||
|
--bg-secondary: #1f2937;
|
||||||
|
--text-primary: #ffffff;
|
||||||
|
--text-secondary: #9ca3af;
|
||||||
|
--accent-primary: #60a5fa;
|
||||||
|
--accent-secondary: #3b82f6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 自定义 Tabs 样式 */
|
||||||
|
.contributors-tabs .ant-tabs-nav {
|
||||||
|
margin-bottom: 24px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contributors-tabs .ant-tabs-nav::before {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contributors-tabs .ant-tabs-nav-list {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
padding: 4px;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contributors-tabs .ant-tabs-tab {
|
||||||
|
border: none !important;
|
||||||
|
background: transparent !important;
|
||||||
|
padding: 6px 16px !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
border-radius: 6px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.contributors-tabs .ant-tabs-tab-active {
|
||||||
|
background: var(--bg-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .contributors-tabs .ant-tabs-tab {
|
||||||
|
color: var(--text-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .contributors-tabs .ant-tabs-tab-active {
|
||||||
|
color: var(--text-primary) !important;
|
||||||
|
background: var(--bg-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark .contributors-tabs .ant-tabs-nav-list {
|
||||||
|
background: var(--bg-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 添加平滑过渡效果 */
|
||||||
|
.transition-theme {
|
||||||
|
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scrollLeft {
|
||||||
|
0% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes scrollRight {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-50%);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
11
src/main.tsx
Normal file
11
src/main.tsx
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { StrictMode } from 'react';
|
||||||
|
import { createRoot } from 'react-dom/client';
|
||||||
|
import App from './App.tsx';
|
||||||
|
import './i18n';
|
||||||
|
import './index.css';
|
||||||
|
|
||||||
|
createRoot(document.getElementById('root')!).render(
|
||||||
|
<StrictMode>
|
||||||
|
<App />
|
||||||
|
</StrictMode>
|
||||||
|
);
|
||||||
12
src/pages/AboutPage.tsx
Normal file
12
src/pages/AboutPage.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import About from '../components/About';
|
||||||
|
|
||||||
|
const AboutPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="py-20">
|
||||||
|
<About />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default AboutPage;
|
||||||
12
src/pages/ContributorsPage.tsx
Normal file
12
src/pages/ContributorsPage.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Contributors from '../components/Contributors';
|
||||||
|
|
||||||
|
const ContributorsPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="pb-20">
|
||||||
|
<Contributors />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContributorsPage;
|
||||||
12
src/pages/HomePage.tsx
Normal file
12
src/pages/HomePage.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Hero from '../components/Hero';
|
||||||
|
|
||||||
|
const HomePage = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Hero />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
12
src/pages/ProjectsPage.tsx
Normal file
12
src/pages/ProjectsPage.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Projects from '../components/Projects';
|
||||||
|
|
||||||
|
const ProjectsPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="py-20 bg-gray-50 dark:bg-gray-900 transition-colors">
|
||||||
|
<Projects />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ProjectsPage;
|
||||||
12
src/pages/TeamPage.tsx
Normal file
12
src/pages/TeamPage.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Team from '../components/Team';
|
||||||
|
|
||||||
|
const ContributorsPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="py-20 bg-gray-50 dark:bg-gray-900 transition-colors">
|
||||||
|
<Team />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ContributorsPage;
|
||||||
118
src/pages/UpdateDetailPage.tsx
Normal file
118
src/pages/UpdateDetailPage.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
import React, { useEffect, useState } from 'react';
|
||||||
|
import { useParams } from 'react-router-dom';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { marked } from 'marked';
|
||||||
|
import UpdateDetail from '../components/UpdateDetail';
|
||||||
|
import { useUpdates, Update } from '../utils/updates';
|
||||||
|
|
||||||
|
const UpdateDetailPage: React.FC = () => {
|
||||||
|
const { id } = useParams<{ id: string }>();
|
||||||
|
const { i18n, t } = useTranslation();
|
||||||
|
const { getAllUpdates } = useUpdates();
|
||||||
|
const [update, setUpdate] = useState<Update | null>(null);
|
||||||
|
const [content, setContent] = useState<string | null>(null);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const fetchUpdateData = async () => {
|
||||||
|
if (!id) {
|
||||||
|
setUpdate(null);
|
||||||
|
setContent(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 获取所有更新条目
|
||||||
|
const allUpdates = await getAllUpdates();
|
||||||
|
// 查找对应 id 的更新条目
|
||||||
|
const foundUpdate = allUpdates.find(u => u.id === id);
|
||||||
|
|
||||||
|
if (!foundUpdate) {
|
||||||
|
setUpdate(null);
|
||||||
|
setContent(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
setUpdate(foundUpdate);
|
||||||
|
|
||||||
|
// 如果该更新有 link 属性，则说明为外链，详情页不需要加载内容
|
||||||
|
if (foundUpdate.link) {
|
||||||
|
setContent(null);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 从日期中提取年份
|
||||||
|
const year = new Date(foundUpdate.date).getFullYear();
|
||||||
|
|
||||||
|
try {
|
||||||
|
// 尝试加载 Markdown 文件
|
||||||
|
const mdPath = `/data/${i18n.language}/updates/${year}/${foundUpdate.id}.md`;
|
||||||
|
const response = await fetch(mdPath);
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error('Markdown file not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
const mdText = await response.text();
|
||||||
|
// 将 Markdown 转换为 HTML
|
||||||
|
setContent(marked(mdText));
|
||||||
|
} catch (error) {
|
||||||
|
// 如果 Markdown 文件未找到或加载失败，使用 summary 作为内容
|
||||||
|
setContent(foundUpdate.summary);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch update data:', error);
|
||||||
|
setUpdate(null);
|
||||||
|
setContent(null);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
fetchUpdateData();
|
||||||
|
}, [id, i18n.language, getAllUpdates]);
|
||||||
|
|
||||||
|
if (!update) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
{t('updates.notFound.title')}
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">
|
||||||
|
{t('updates.notFound.description')}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果是外链，显示提示信息
|
||||||
|
if (update.link) {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen flex items-center justify-center">
|
||||||
|
<div className="text-center">
|
||||||
|
<h2 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
|
||||||
|
External Link
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 dark:text-gray-300">
|
||||||
|
This update links to an external resource. You will be redirected to:
|
||||||
|
</p>
|
||||||
|
<a
|
||||||
|
href={update.link}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
className="text-blue-500 hover:text-blue-600 mt-2 block"
|
||||||
|
>
|
||||||
|
{update.link}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="py-20">
|
||||||
|
<UpdateDetail update={update} content={content || undefined} />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UpdateDetailPage;
|
||||||
12
src/pages/UpdatesPage.tsx
Normal file
12
src/pages/UpdatesPage.tsx
Normal file
|
|
@ -0,0 +1,12 @@
|
||||||
|
import React from 'react';
|
||||||
|
import Timeline from '../components/Timeline';
|
||||||
|
|
||||||
|
const UpdatesPage = () => {
|
||||||
|
return (
|
||||||
|
<div className="py-20">
|
||||||
|
<Timeline />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default UpdatesPage;
|
||||||
21
src/utils/iconMap.ts
Normal file
21
src/utils/iconMap.ts
Normal file
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { MdVerified, MdHome } from 'react-icons/md';
|
||||||
|
import { AiFillBilibili } from 'react-icons/ai';
|
||||||
|
import { SiNeteasecloudmusic, SiTencentqq, SiYoutube, SiForgejo } from 'react-icons/si';
|
||||||
|
import { PiFediverseLogo } from 'react-icons/pi';
|
||||||
|
import { FaTwitter, FaDiscord, FaWeibo } from 'react-icons/fa';
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
Keyoxide: MdVerified,
|
||||||
|
Bilibili: AiFillBilibili,
|
||||||
|
NetEaseMusic: SiNeteasecloudmusic,
|
||||||
|
QQGroup: SiTencentqq,
|
||||||
|
YouTube: SiYoutube,
|
||||||
|
Fediverse: PiFediverseLogo,
|
||||||
|
Twitter: FaTwitter,
|
||||||
|
Discord: FaDiscord,
|
||||||
|
Forgejo: SiForgejo,
|
||||||
|
Weibo: FaWeibo,
|
||||||
|
Home: MdHome
|
||||||
|
};
|
||||||
|
|
||||||
|
export default iconMap;
|
||||||
126
src/utils/updates.ts
Normal file
126
src/utils/updates.ts
Normal file
|
|
@ -0,0 +1,126 @@
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
|
export interface Update {
|
||||||
|
id: string;
|
||||||
|
date: string;
|
||||||
|
title: string;
|
||||||
|
summary: string;
|
||||||
|
tags: string[];
|
||||||
|
link?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface YearUpdates {
|
||||||
|
updates: Update[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface UpdatesIndex {
|
||||||
|
years: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useUpdates = (page: number = 1, pageSize: number = 10) => {
|
||||||
|
const { i18n } = useTranslation();
|
||||||
|
|
||||||
|
// 获取更新年份列表
|
||||||
|
const getUpdateYears = async (): Promise<string[]> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/data/${i18n.language}/updates.json`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to load updates index, status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const index: UpdatesIndex = await response.json();
|
||||||
|
return index.years || [];
|
||||||
|
} catch (error) {
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
console.warn(`Failed to load updates index:`, error);
|
||||||
|
}
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 动态获取指定的年度更新
|
||||||
|
const getYearUpdates = async (yearFile: string): Promise<YearUpdates | null> => {
|
||||||
|
try {
|
||||||
|
const response = await fetch(`/data/${i18n.language}/updates/${yearFile}`);
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`Failed to load updates from ${yearFile}, status: ${response.status}`);
|
||||||
|
}
|
||||||
|
const data: YearUpdates = await response.json();
|
||||||
|
return data;
|
||||||
|
} catch (error) {
|
||||||
|
if (process.env.NODE_ENV === 'development') {
|
||||||
|
console.warn(`Failed to load updates from ${yearFile}:`, error);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取所有更新并按日期排序
|
||||||
|
const getAllUpdates = async (selectedTags: string[] = []): Promise<Update[]> => {
|
||||||
|
const allUpdates: Update[] = [];
|
||||||
|
|
||||||
|
// 从索引文件获取年份列表
|
||||||
|
const yearFiles = await getUpdateYears();
|
||||||
|
|
||||||
|
// 加载所有年份的更新
|
||||||
|
for (const yearFile of yearFiles) {
|
||||||
|
const yearData = await getYearUpdates(yearFile);
|
||||||
|
if (yearData?.updates?.length) {
|
||||||
|
// 如果指定了标签，只添加包含所有选定标签的更新
|
||||||
|
const filteredUpdates = selectedTags.length > 0
|
||||||
|
? yearData.updates.filter(update =>
|
||||||
|
selectedTags.every(tag => update.tags.includes(tag))
|
||||||
|
)
|
||||||
|
: yearData.updates;
|
||||||
|
|
||||||
|
allUpdates.push(...filteredUpdates);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 按日期降序排序
|
||||||
|
return allUpdates.sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime());
|
||||||
|
};
|
||||||
|
|
||||||
|
// 获取分页的更新列表
|
||||||
|
const getPaginatedUpdates = async (selectedTags: string[] = []) => {
|
||||||
|
const allUpdates = await getAllUpdates(selectedTags);
|
||||||
|
const totalItems = allUpdates.length;
|
||||||
|
|
||||||
|
// 如果没有更新，返回空结果
|
||||||
|
if (totalItems === 0) {
|
||||||
|
return {
|
||||||
|
updates: [],
|
||||||
|
pagination: {
|
||||||
|
currentPage: 1,
|
||||||
|
totalPages: 0,
|
||||||
|
totalItems: 0,
|
||||||
|
hasNextPage: false,
|
||||||
|
hasPrevPage: false
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const totalPages = Math.ceil(totalItems / pageSize);
|
||||||
|
const safeCurrentPage = Math.min(Math.max(1, page), totalPages);
|
||||||
|
|
||||||
|
const start = (safeCurrentPage - 1) * pageSize;
|
||||||
|
const end = Math.min(start + pageSize, totalItems);
|
||||||
|
const updates = allUpdates.slice(start, end);
|
||||||
|
|
||||||
|
return {
|
||||||
|
updates,
|
||||||
|
pagination: {
|
||||||
|
currentPage: safeCurrentPage,
|
||||||
|
totalPages,
|
||||||
|
totalItems,
|
||||||
|
hasNextPage: safeCurrentPage < totalPages,
|
||||||
|
hasPrevPage: safeCurrentPage > 1
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
return { getPaginatedUpdates, getAllUpdates };
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getUpdateUrl = (update: Update): string => {
|
||||||
|
return update.link || `/updates/${update.id}`;
|
||||||
|
};
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
|
|
@ -0,0 +1 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
11
tailwind.config.js
Normal file
11
tailwind.config.js
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
/** @type {import('tailwindcss').Config} */
|
||||||
|
export default {
|
||||||
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
||||||
|
darkMode: 'class',
|
||||||
|
theme: {
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
require('@tailwindcss/typography'),
|
||||||
|
],
|
||||||
|
};
|
||||||
24
tsconfig.app.json
Normal file
24
tsconfig.app.json
Normal file
|
|
@ -0,0 +1,24 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
7
tsconfig.json
Normal file
7
tsconfig.json
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
{
|
||||||
|
"files": [],
|
||||||
|
"references": [
|
||||||
|
{ "path": "./tsconfig.app.json" },
|
||||||
|
{ "path": "./tsconfig.node.json" }
|
||||||
|
]
|
||||||
|
}
|
||||||
22
tsconfig.node.json
Normal file
22
tsconfig.node.json
Normal file
|
|
@ -0,0 +1,22 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2022",
|
||||||
|
"lib": ["ES2023"],
|
||||||
|
"module": "ESNext",
|
||||||
|
"skipLibCheck": true,
|
||||||
|
|
||||||
|
/* Bundler mode */
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"allowImportingTsExtensions": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"moduleDetection": "force",
|
||||||
|
"noEmit": true,
|
||||||
|
|
||||||
|
/* Linting */
|
||||||
|
"strict": true,
|
||||||
|
"noUnusedLocals": true,
|
||||||
|
"noUnusedParameters": true,
|
||||||
|
"noFallthroughCasesInSwitch": true
|
||||||
|
},
|
||||||
|
"include": ["vite.config.ts"]
|
||||||
|
}
|
||||||
16
vite.config.ts
Normal file
16
vite.config.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { defineConfig } from 'vite';
|
||||||
|
import react from '@vitejs/plugin-react';
|
||||||
|
import path from 'path';
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
optimizeDeps: {
|
||||||
|
exclude: ['lucide-react'],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': path.resolve(__dirname, './'),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue