|
@@ -3,46 +3,53 @@ import { getSetupCount } from "@/api";
|
|
|
import Features from "@/components/home/Features";
|
|
|
import Abilities from "@/components/home/Abilities";
|
|
|
import Partner from "@/components/home/Partner";
|
|
|
-import { Box, Grid, Button, Link, Typography, Container, Stack } from "@mui/material";
|
|
|
-import Image from 'next/image';
|
|
|
+import {
|
|
|
+ Box,
|
|
|
+ Grid,
|
|
|
+ Button,
|
|
|
+ Link,
|
|
|
+ Typography,
|
|
|
+ Container,
|
|
|
+ Stack,
|
|
|
+} from "@mui/material";
|
|
|
+import Image from "next/image";
|
|
|
|
|
|
const ARTICLES = [
|
|
|
- '《阮一峰·科技爱好者周刊》',
|
|
|
- '《Hello Github 月刊》',
|
|
|
- '《码农出击》',
|
|
|
- '《GitHub Daily》',
|
|
|
- '《Open Github 社区》',
|
|
|
- '《科技 lion》',
|
|
|
-]
|
|
|
+ "《阮一峰·科技爱好者周刊》",
|
|
|
+ "《Hello Github 月刊》",
|
|
|
+ "《码农出击》",
|
|
|
+ "《GitHub Daily》",
|
|
|
+ "《Open Github 社区》",
|
|
|
+ "《科技 lion》",
|
|
|
+];
|
|
|
|
|
|
const totalSx = {
|
|
|
color: "primary.main",
|
|
|
fontSize: { xs: "58px", md: "70px" },
|
|
|
- background: 'linear-gradient(90deg, #8FE5D7 0%, #0FC6C2 100%)',
|
|
|
- '-webkit-background-clip': 'text',
|
|
|
- '-webkit-text-fill-color': 'transparent',
|
|
|
+ background: "linear-gradient(90deg, #8FE5D7 0%, #0FC6C2 100%)",
|
|
|
+ "-webkit-background-clip": "text",
|
|
|
+ "-webkit-text-fill-color": "transparent",
|
|
|
lineHeight: 1.25,
|
|
|
fontFamily: "AlimamaShuHeiTi-Bold",
|
|
|
-}
|
|
|
+};
|
|
|
|
|
|
-const textAligns = ['left', 'center', 'right'];
|
|
|
+const textAligns = ["left", "center", "right"];
|
|
|
|
|
|
export async function getServerSideProps() {
|
|
|
- let total = 46151
|
|
|
+ let total = 46151;
|
|
|
try {
|
|
|
const result = await getSetupCount();
|
|
|
total = result.total;
|
|
|
-
|
|
|
} finally {
|
|
|
return {
|
|
|
props: {
|
|
|
total,
|
|
|
},
|
|
|
- }
|
|
|
+ };
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-export default function Home({ total } : { total: number }) {
|
|
|
+export default function Home({ total }: { total: number }) {
|
|
|
const totalRef = useRef(null);
|
|
|
const startRef = useRef(null);
|
|
|
|
|
@@ -52,10 +59,14 @@ export default function Home({ total } : { total: number }) {
|
|
|
duration: 2,
|
|
|
});
|
|
|
anim.start();
|
|
|
- const startAnim = new countUpModule.CountUp(startRef.current!, Math.max(0, 6.4), {
|
|
|
- duration: 2,
|
|
|
- decimalPlaces: 1,
|
|
|
- });
|
|
|
+ const startAnim = new countUpModule.CountUp(
|
|
|
+ startRef.current!,
|
|
|
+ Math.max(0, 6.4),
|
|
|
+ {
|
|
|
+ duration: 2,
|
|
|
+ decimalPlaces: 1,
|
|
|
+ }
|
|
|
+ );
|
|
|
startAnim.start();
|
|
|
};
|
|
|
|
|
@@ -70,16 +81,17 @@ export default function Home({ total } : { total: number }) {
|
|
|
sx={{
|
|
|
width: "100%",
|
|
|
height: "866px",
|
|
|
- position: 'relative',
|
|
|
+ position: "relative",
|
|
|
backgroundImage: "url(/images/home-banner.png)",
|
|
|
backgroundSize: "cover",
|
|
|
- backgroundPosition: 'center center',
|
|
|
- backgroundRepeat: 'no-repeat'
|
|
|
+ backgroundPosition: "center center",
|
|
|
+ backgroundRepeat: "no-repeat",
|
|
|
}}
|
|
|
>
|
|
|
<Box pt={26.5}>
|
|
|
<Stack alignItems="center">
|
|
|
- <Stack direction="row"
|
|
|
+ <Stack
|
|
|
+ direction="row"
|
|
|
sx={{
|
|
|
color: "#86909C",
|
|
|
letterSpacing: 8,
|
|
@@ -109,9 +121,10 @@ export default function Home({ total } : { total: number }) {
|
|
|
sx={{
|
|
|
fontFamily: "AlimamaShuHeiTi-Bold",
|
|
|
letterSpacing: 10,
|
|
|
- background: 'linear-gradient(90deg, #160847 0%, #0A7977 100%)',
|
|
|
- '-webkit-background-clip': 'text',
|
|
|
- '-webkit-text-fill-color': 'transparent',
|
|
|
+ background:
|
|
|
+ "linear-gradient(90deg, #160847 0%, #0A7977 100%)",
|
|
|
+ "-webkit-background-clip": "text",
|
|
|
+ "-webkit-text-fill-color": "transparent",
|
|
|
}}
|
|
|
>
|
|
|
<Typography
|
|
@@ -122,16 +135,20 @@ export default function Home({ total } : { total: number }) {
|
|
|
>
|
|
|
不让黑客
|
|
|
</Typography>
|
|
|
- <Typography
|
|
|
- variant="h1"
|
|
|
- sx={{}}
|
|
|
- >
|
|
|
+ <Typography variant="h1" sx={{}}>
|
|
|
越雷池一步
|
|
|
</Typography>
|
|
|
</Stack>
|
|
|
</Stack>
|
|
|
</Box>
|
|
|
- <Box sx={{ position: 'absolute', bottom: 351, left: '50%', transform: 'translateX(-50%)' }}>
|
|
|
+ <Box
|
|
|
+ sx={{
|
|
|
+ position: "absolute",
|
|
|
+ bottom: 351,
|
|
|
+ left: "50%",
|
|
|
+ transform: "translateX(-50%)",
|
|
|
+ }}
|
|
|
+ >
|
|
|
<Box sx={{ width: "369px" }}>
|
|
|
<Image
|
|
|
src="/images/gif/waf-logo.gif"
|
|
@@ -143,11 +160,11 @@ export default function Home({ total } : { total: number }) {
|
|
|
</Box>
|
|
|
</Box>
|
|
|
</Box>
|
|
|
- <Box sx={{ position: "relative", bottom: "360px", marginBottom: "-360px" }}>
|
|
|
+ <Box
|
|
|
+ sx={{ position: "relative", bottom: "360px", marginBottom: "-360px" }}
|
|
|
+ >
|
|
|
<Container>
|
|
|
- <Box
|
|
|
- sx={{ display: "flex", justifyContent: "center" }}
|
|
|
- >
|
|
|
+ <Box sx={{ display: "flex", justifyContent: "center" }}>
|
|
|
<Button
|
|
|
variant="contained"
|
|
|
target="_blank"
|
|
@@ -159,7 +176,7 @@ export default function Home({ total } : { total: number }) {
|
|
|
fontSize: "20px",
|
|
|
boxShadow: "0px 15px 25px 0px rgba(15,198,194,0.3)",
|
|
|
}}
|
|
|
- href="https://waf-ce.chaitin.cn/posts/guide_install"
|
|
|
+ href="/docs/guide/install"
|
|
|
>
|
|
|
立即安装
|
|
|
</Button>
|
|
@@ -179,35 +196,36 @@ export default function Home({ total } : { total: number }) {
|
|
|
>
|
|
|
-
|
|
|
</Typography>
|
|
|
- <Typography variant="h5">
|
|
|
- 装机量
|
|
|
- </Typography>
|
|
|
+ <Typography variant="h5">装机量</Typography>
|
|
|
</Stack>
|
|
|
</Grid>
|
|
|
- <Grid item xs={12} md={6} sx={{ display: "flex", justifyContent: "center" }}>
|
|
|
- <Link href="https://github.com/chaitin/SafeLine" target="_blank">
|
|
|
+ <Grid
|
|
|
+ item
|
|
|
+ xs={12}
|
|
|
+ md={6}
|
|
|
+ sx={{ display: "flex", justifyContent: "center" }}
|
|
|
+ >
|
|
|
+ <Link
|
|
|
+ href="https://github.com/chaitin/SafeLine"
|
|
|
+ target="_blank"
|
|
|
+ >
|
|
|
<Stack direction="row" justifyContent="center">
|
|
|
- <Stack spacing={2} alignItems="center">
|
|
|
- <Stack direction="row" sx={{ ...totalSx }}>
|
|
|
- <Typography
|
|
|
- variant="h1"
|
|
|
- ref={startRef}
|
|
|
- >
|
|
|
- -
|
|
|
- </Typography>
|
|
|
- <Typography variant="h1">k</Typography>
|
|
|
- </Stack>
|
|
|
- <Typography variant="h5">
|
|
|
- GitHub Star
|
|
|
+ <Stack spacing={2} alignItems="center">
|
|
|
+ <Stack direction="row" sx={{ ...totalSx }}>
|
|
|
+ <Typography variant="h1" ref={startRef}>
|
|
|
+ -
|
|
|
</Typography>
|
|
|
+ <Typography variant="h1">k</Typography>
|
|
|
</Stack>
|
|
|
- <Image
|
|
|
- src="/images/gif/starred.gif"
|
|
|
- alt="starred"
|
|
|
- width={80}
|
|
|
- height={78}
|
|
|
- style={{ marginTop: "6px" }}
|
|
|
- />
|
|
|
+ <Typography variant="h5">GitHub Star</Typography>
|
|
|
+ </Stack>
|
|
|
+ <Image
|
|
|
+ src="/images/gif/starred.gif"
|
|
|
+ alt="starred"
|
|
|
+ width={80}
|
|
|
+ height={78}
|
|
|
+ style={{ marginTop: "6px" }}
|
|
|
+ />
|
|
|
</Stack>
|
|
|
</Link>
|
|
|
</Grid>
|
|
@@ -223,7 +241,7 @@ export default function Home({ total } : { total: number }) {
|
|
|
variant="h5"
|
|
|
sx={{
|
|
|
color: "#86909C",
|
|
|
- textAlign: { xs: 'center', md: textAligns[index % 3] },
|
|
|
+ textAlign: { xs: "center", md: textAligns[index % 3] },
|
|
|
fontFamily: "AlimamaShuHeiTi-Bold",
|
|
|
fontSize: "20px",
|
|
|
}}
|
|
@@ -243,8 +261,8 @@ export default function Home({ total } : { total: number }) {
|
|
|
sx={{
|
|
|
backgroundImage: "url(/images/partner-bg.png)",
|
|
|
backgroundSize: "cover",
|
|
|
- backgroundPosition: 'center center',
|
|
|
- backgroundRepeat: 'no-repeat'
|
|
|
+ backgroundPosition: "center center",
|
|
|
+ backgroundRepeat: "no-repeat",
|
|
|
}}
|
|
|
>
|
|
|
<Partner />
|
|
@@ -256,8 +274,8 @@ export default function Home({ total } : { total: number }) {
|
|
|
mt: 19,
|
|
|
backgroundImage: "url(/images/enterprise-bg.svg)",
|
|
|
backgroundSize: "cover",
|
|
|
- backgroundPosition: 'center center',
|
|
|
- backgroundRepeat: 'no-repeat'
|
|
|
+ backgroundPosition: "center center",
|
|
|
+ backgroundRepeat: "no-repeat",
|
|
|
}}
|
|
|
>
|
|
|
<Container className="relative h-full">
|
|
@@ -271,7 +289,9 @@ export default function Home({ total } : { total: number }) {
|
|
|
fontFamily: "AlimamaShuHeiTi-Bold",
|
|
|
letterSpacing: "3px",
|
|
|
}}
|
|
|
- >欢迎使用雷池其他版本</Typography>
|
|
|
+ >
|
|
|
+ 欢迎使用雷池其他版本
|
|
|
+ </Typography>
|
|
|
<Button
|
|
|
variant="outlined"
|
|
|
sx={{
|
|
@@ -309,5 +329,5 @@ export default function Home({ total } : { total: number }) {
|
|
|
</Box>
|
|
|
</Box>
|
|
|
</main>
|
|
|
- )
|
|
|
+ );
|
|
|
}
|