♻️ 使用 NextJS 重构 #1
@ -1 +0,0 @@
|
||||
export const SITE_NAME = "Goatshed";
|
||||
19
app/consts.tsx
Normal file
19
app/consts.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { ReactNode } from "react";
|
||||
import GitHubIcon from "@mui/icons-material/GitHub";
|
||||
import TwitterIcon from "@mui/icons-material/Twitter";
|
||||
import CoffeeIcon from "@mui/icons-material/Coffee";
|
||||
|
||||
export interface RelatedAccount {
|
||||
icon: ReactNode;
|
||||
platform: string;
|
||||
accountName: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export const SITE_NAME = "Goatshed";
|
||||
|
||||
export const RELATED_ACCOUNTS: RelatedAccount[] = [
|
||||
{ icon: <GitHubIcon />, platform: "GitHub", accountName: "@smartsheep-hq", link: "https://github.com/smartsheep-hq" },
|
||||
{ icon: <TwitterIcon />, platform: "Twitter", accountName: "@littlesheepovo", link: "https://twitter.com/littlesheepovo" },
|
||||
{ icon: <CoffeeIcon />, platform: "Ko-fi", accountName: "@littlesheep2code", link: "https://ko-fi.com/littlesheep2code" },
|
||||
];
|
||||
97
app/page.tsx
97
app/page.tsx
@ -1,35 +1,74 @@
|
||||
import { Container, Typography } from "@mui/material";
|
||||
import {
|
||||
Avatar,
|
||||
Box,
|
||||
Button,
|
||||
Card, colors,
|
||||
Container,
|
||||
Grid,
|
||||
List,
|
||||
ListItemAvatar,
|
||||
ListItemButton,
|
||||
ListItemText,
|
||||
Typography
|
||||
} from "@mui/material";
|
||||
import { RELATED_ACCOUNTS } from "@/app/consts";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
|
||||
export default function Home() {
|
||||
return (
|
||||
<Container>
|
||||
<Typography paragraph>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
|
||||
tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non
|
||||
enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus
|
||||
imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus.
|
||||
Convallis convallis tellus id interdum velit laoreet id donec ultrices.
|
||||
Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit
|
||||
adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra
|
||||
nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum
|
||||
leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis
|
||||
feugiat vivamus at augue. At augue eget arcu dictum varius duis at
|
||||
consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa
|
||||
sapien faucibus et molestie ac.
|
||||
</Typography>
|
||||
<Typography paragraph>
|
||||
Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper
|
||||
eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim
|
||||
neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra
|
||||
tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis
|
||||
sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi
|
||||
tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit
|
||||
gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem
|
||||
et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis
|
||||
tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis
|
||||
eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla
|
||||
posuere sollicitudin aliquam ultrices sagittis orci a.
|
||||
</Typography>
|
||||
<Container sx={{ scrollBehavior: "smooth", px: 5 }}>
|
||||
<Grid
|
||||
container
|
||||
id="introduce"
|
||||
alignItems="center"
|
||||
sx={{ height: "calc(100vh - 64px)" }}
|
||||
>
|
||||
<Grid item xs={12} md={6} sx={{ textAlign: { xs: "center", md: "initial" } }}>
|
||||
<Typography variant="h3" component="h1" gutterBottom>你好呀 👋</Typography>
|
||||
<Typography paragraph>
|
||||
欢迎来到 SmartSheep Studio 的官方网站！在这里了解，订阅，跟踪我们的最新消息。
|
||||
接触我们最大的官方社区，并且尝试最新产品，参与各种活动，提供反馈，让我们更好的服务您。
|
||||
</Typography>
|
||||
<Button variant="contained" href="#about-us" size="large">探索更多</Button>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} sx={{ display: "flex", justifyContent: "end" }}>
|
||||
<Box>
|
||||
<Image src="smartsheep.svg" alt="Logo" width={256} height={256} />
|
||||
</Box>
|
||||
</Grid>
|
||||
</Grid>
|
||||
|
||||
<Grid
|
||||
container
|
||||
id="about-us"
|
||||
alignItems="center"
|
||||
sx={{ height: "calc(100vh - 64px)" }}
|
||||
>
|
||||
<Grid item xs={12} md={6} sx={{ display: "flex", justifyContent: "start" }}>
|
||||
<Card sx={{ flexGrow: 1, mr: { xs: 0, md: 8 } }}>
|
||||
<List sx={{ width: "100%", bgcolor: "background.paper" }}>
|
||||
{RELATED_ACCOUNTS.map((item, idx) => (
|
||||
<Link key={idx} href={item.link} target="_blank" passHref>
|
||||
<ListItemButton>
|
||||
<ListItemAvatar>
|
||||
<Avatar sx={{ bgcolor: colors.blueGrey[700] }}>{item.icon}</Avatar>
|
||||
</ListItemAvatar>
|
||||
<ListItemText primary={item.platform} secondary={item.accountName} />
|
||||
</ListItemButton>
|
||||
</Link>
|
||||
))}
|
||||
</List>
|
||||
</Card>
|
||||
</Grid>
|
||||
<Grid item xs={12} md={6} sx={{ textAlign: { xs: "center", md: "initial" } }}>
|
||||
<Typography variant="h3" component="h1" gutterBottom>关于我们</Typography>
|
||||
<Typography paragraph>
|
||||
我们是一群充满活力、对开源充满热情的开发者。成立于 2019 年。自那年起我们一直在开发让人喜欢的开源软件。
|
||||
在我们这里，“取之于开源，用之于开源” 不仅是原则，更是我们信仰的座右铭。
|
||||
</Typography>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
@ -64,7 +64,6 @@ const AppMain = styled("main", { shouldForwardProp: (prop) => prop !== "open" })
|
||||
|
||||
return ({
|
||||
flexGrow: 1,
|
||||
padding: theme.spacing(3),
|
||||
transition: theme.transitions.create("margin", {
|
||||
easing: theme.transitions.easing.sharp,
|
||||
duration: theme.transitions.duration.leavingScreen
|
||||
@ -92,19 +91,19 @@ export default function AppShell({ children }: {
|
||||
|
||||
useEffect(() => {
|
||||
documentWindow = window;
|
||||
})
|
||||
});
|
||||
|
||||
return (
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<>
|
||||
<HideOnScroll window={() => documentWindow}>
|
||||
<ShellAppBar open={open}>
|
||||
<Toolbar>
|
||||
<ShellAppBar open={open} position="fixed">
|
||||
<Toolbar sx={{ height: 64 }}>
|
||||
<IconButton
|
||||
size="large"
|
||||
edge="start"
|
||||
color="inherit"
|
||||
aria-label="menu"
|
||||
sx={{ mr: 2 }}
|
||||
sx={{ ml: isMobile ? 0.5 : 0, mr: 2 }}
|
||||
>
|
||||
<Image src="smartsheep.svg" alt="Logo" width={32} height={32} />
|
||||
</IconButton>
|
||||
@ -127,12 +126,15 @@ export default function AppShell({ children }: {
|
||||
</ShellAppBar>
|
||||
</HideOnScroll>
|
||||
|
||||
<AppMain open={open}>
|
||||
<AppNavigationHeader />
|
||||
{children}
|
||||
</AppMain>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<AppMain open={open}>
|
||||
<AppNavigationHeader />
|
||||
|
||||
<NavigationDrawer open={open} onClose={() => setOpen(false)} />
|
||||
</Box>
|
||||
{children}
|
||||
</AppMain>
|
||||
|
||||
<NavigationDrawer open={open} onClose={() => setOpen(false)} />
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -18,14 +18,27 @@ import {
|
||||
useMediaQuery
|
||||
} from "@mui/material";
|
||||
import { theme } from "@/app/theme";
|
||||
import { ReactNode } from "react";
|
||||
import HomeIcon from "@mui/icons-material/Home";
|
||||
import Link from "next/link";
|
||||
|
||||
export interface NavigationItem {
|
||||
icon: ReactNode;
|
||||
title: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
export const DRAWER_WIDTH = 320;
|
||||
export const NAVIGATION_ITEMS: NavigationItem[] = [
|
||||
{ icon: <HomeIcon />, title: "首页", link: "/" }
|
||||
];
|
||||
|
||||
export const AppNavigationHeader = styled("div")(({ theme }) => ({
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
padding: theme.spacing(0, 1),
|
||||
justifyContent: "flex-start",
|
||||
height: 64,
|
||||
...theme.mixins.toolbar
|
||||
}));
|
||||
|
||||
@ -45,28 +58,13 @@ export function AppNavigation({ showClose, onClose }: {
|
||||
</AppNavigationHeader>
|
||||
<Divider />
|
||||
<List>
|
||||
{["Inbox", "Starred", "Send email", "Drafts"].map((text, index) => (
|
||||
<ListItem key={text} disablePadding>
|
||||
{NAVIGATION_ITEMS.map((item, idx) => (
|
||||
<Link key={idx} href={item.link} passHref>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={text} />
|
||||
<ListItemIcon>{item.icon}</ListItemIcon>
|
||||
<ListItemText primary={item.title} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
))}
|
||||
</List>
|
||||
<Divider />
|
||||
<List>
|
||||
{["All mail", "Trash", "Spam"].map((text, index) => (
|
||||
<ListItem key={text} disablePadding>
|
||||
<ListItemButton>
|
||||
<ListItemIcon>
|
||||
{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}
|
||||
</ListItemIcon>
|
||||
<ListItemText primary={text} />
|
||||
</ListItemButton>
|
||||
</ListItem>
|
||||
</Link>
|
||||
))}
|
||||
</List>
|
||||
</>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user