Goatworks/Capital
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

⚡ Add optimization for nextjs

Browse Source
This commit is contained in:
LittleSheep 2025-01-03 22:23:45 +08:00
parent 799fa2e475
commit 4c5236de41
8 changed files with 101 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
bun.lockb
View File

Binary file not shown.

3
package.json
View File

@ -9,10 +9,13 @@
"lint": "next lint" "lint": "next lint"
}, },
"dependencies": { "dependencies": {
"@emotion/cache": "^11.14.0",
"@emotion/react": "^11.14.0", "@emotion/react": "^11.14.0",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.14.0", "@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.3.0", "@mui/icons-material": "^6.3.0",
"@mui/material": "^6.3.0", "@mui/material": "^6.3.0",
"@mui/material-nextjs": "^6.3.1",
"@mui/x-charts": "^7.23.2", "@mui/x-charts": "^7.23.2",
"axios": "^1.7.9", "axios": "^1.7.9",
"axios-case-converter": "^1.1.1", "axios-case-converter": "^1.1.1",

52
src/components/CapAppBar.tsx
View File

@ -1,17 +1,59 @@
import { useUserStore } from '@/services/user' import { useUserStore } from '@/services/user'
import { AppBar, Avatar, Box, IconButton, Toolbar, Typography, useTheme } from '@mui/material' import {
AppBar,
AppBarProps,
Avatar,
createTheme,
IconButton,
ThemeProvider,
Toolbar,
Typography,
useScrollTrigger,
useTheme,
} from '@mui/material'
import { getAttachmentUrl } from '@/services/network'
import MenuIcon from '@mui/icons-material/Menu' import MenuIcon from '@mui/icons-material/Menu'
import AccountCircle from '@mui/icons-material/AccountCircle' import AccountCircle from '@mui/icons-material/AccountCircle'
import Link from 'next/link' import Link from 'next/link'
import { getAttachmentUrl } from '@/services/network' import React from 'react'
interface ElevationAppBarProps {
elevation?: number
color?: any
children?: React.ReactElement<{ elevation?: number } & AppBarProps>
}
function ElevationScroll(props: ElevationAppBarProps) {
if (typeof window === 'undefined') return props.children
const trigger = useScrollTrigger({
disableHysteresis: true,
threshold: 0,
target: window,
})
const commonStyle = {
transition: 'all',
transitionDuration: '300ms',
}
return props.children
? React.cloneElement(props.children, {
elevation: trigger ? props.elevation : 0,
sx: trigger
? { backgroundColor: props.color, ...commonStyle }
: { backgroundColor: 'transparent', ...commonStyle },
})
: null
}
export function CapAppBar() { export function CapAppBar() {
const userStore = useUserStore() const userStore = useUserStore()
const theme = useTheme() const theme = useTheme()
return ( return (
<Box sx={{ flexGrow: 1 }}> <ElevationScroll elevation={2} color="white">
<AppBar position="absolute" elevation={0} color={'transparent'}> <AppBar position="sticky" elevation={0} color="transparent">
<Toolbar> <Toolbar>
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}> <IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
<MenuIcon /> <MenuIcon />
@ -41,6 +83,6 @@ export function CapAppBar() {
</Link> </Link>
</Toolbar> </Toolbar>
</AppBar> </AppBar>
</Box> </ElevationScroll>
) )
} }

3
src/pages/_app.tsx
View File

@ -13,6 +13,7 @@ const fontRoboto = Roboto({
}) })
const siteTheme = createTheme({ const siteTheme = createTheme({
cssVariables: true,
palette: { palette: {
mode: 'light', mode: 'light',
primary: { primary: {
@ -43,7 +44,7 @@ export default function App({ Component, pageProps }: AppProps) {
<CssBaseline /> <CssBaseline />
<CapAppBar /> <CapAppBar />
<Box sx={{ height: '100vh' }}> <Box sx={{ height: 'calc(100vh - 64px)' }}>
<Component {...pageProps} /> <Component {...pageProps} />
</Box> </Box>
</ThemeProvider> </ThemeProvider>

21
src/pages/_document.tsx
View File

@ -1,13 +1,28 @@
import { Html, Head, Main, NextScript } from 'next/document' import {
AppCacheProvider,
DocumentHeadTags,
DocumentHeadTagsProps,
documentGetInitialProps,
} from '@mui/material-nextjs/v15-pagesRouter'
import { Html, Head, Main, NextScript, DocumentContext, DocumentProps } from 'next/document'
export default function Document() { export default function Document(props: DocumentProps & DocumentHeadTagsProps) {
return ( return (
<AppCacheProvider {...props}>
<Html lang="en"> <Html lang="en">
<Head /> <Head>
<DocumentHeadTags {...props} />
</Head>
<body className="antialiased"> <body className="antialiased">
<Main /> <Main />
<NextScript /> <NextScript />
</body> </body>
</Html> </Html>
</AppCacheProvider>
) )
} }
Document.getInitialProps = async (ctx: DocumentContext) => {
const finalProps = await documentGetInitialProps(ctx)
return finalProps
}

2
src/pages/index.tsx
View File

@ -3,7 +3,7 @@ import { Container, Typography } from '@mui/material'
export default function Home() { export default function Home() {
return ( return (
<main> <main>
<Container sx={{ mt: 12 }}> <Container sx={{ mt: 5 }}>
<Typography variant="h3" component="h1"> <Typography variant="h3" component="h1">
Welcome to <br /> Welcome to <br />
the Solsynth Capital. the Solsynth Capital.

2
src/pages/users/[name].tsx
View File

@ -98,6 +98,7 @@ export default function UserProfile({ user, checkIn }: InferGetServerSidePropsTy
order={{ xs: -1, sm: -1, md: 1 }} order={{ xs: -1, sm: -1, md: 1 }}
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }} sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
> >
{user.badges && (
<Card> <Card>
<CardContent> <CardContent>
<Typography variant="h6" gutterBottom> <Typography variant="h6" gutterBottom>
@ -117,6 +118,7 @@ export default function UserProfile({ user, checkIn }: InferGetServerSidePropsTy
</Box> </Box>
</CardContent> </CardContent>
</Card> </Card>
)}
<Card> <Card>
<CardContent> <CardContent>

18
src/pages/users/me.tsx
View File

@ -14,26 +14,16 @@ export default function UserItself() {
return ( return (
<> <>
{userStore.account && ( {userStore.account?.banner && (
<Box sx={{ aspectRatio: 16 / 5, position: 'relative' }}> <Box sx={{ aspectRatio: 16 / 5, position: 'relative' }}>
<Image src={getAttachmentUrl(userStore.account!.banner)} alt="account banner" objectFit="cover" fill /> <Image src={getAttachmentUrl(userStore.account!.banner)} alt="account banner" objectFit="cover" fill />
</Box> </Box>
)} )}
<Container sx={{ mt: 5 }}> <Container sx={{ mt: 4, px: 2 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}> <Typography variant="h5" component="h1">
<Box sx={{ display: 'flex', gap: 2 }}> Your Solarpass
{userStore.account && <Avatar src={getAttachmentUrl(userStore.account!.avatar)} />}
<Box sx={{ display: 'flex', flexDirection: 'column' }}>
<Typography fontWeight="bold">{userStore.account?.nick}</Typography>
<Typography fontFamily="monospace" fontSize={13}>
@{userStore.account?.name}
</Typography> </Typography>
</Box>
</Box>
</Box>
<Box sx={{ mt: 5 }}></Box>
</Container> </Container>
</> </>
) )