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