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"
},
"dependencies": {
"@emotion/cache": "^11.14.0",
"@emotion/react": "^11.14.0",
"@emotion/server": "^11.11.0",
"@emotion/styled": "^11.14.0",
"@mui/icons-material": "^6.3.0",
"@mui/material": "^6.3.0",
"@mui/material-nextjs": "^6.3.1",
"@mui/x-charts": "^7.23.2",
"axios": "^1.7.9",
"axios-case-converter": "^1.1.1",

52
src/components/CapAppBar.tsx
View File

@ -1,17 +1,59 @@
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 AccountCircle from '@mui/icons-material/AccountCircle'
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() {
const userStore = useUserStore()
const theme = useTheme()
return (
<Box sx={{ flexGrow: 1 }}>
<AppBar position="absolute" elevation={0} color={'transparent'}>
<ElevationScroll elevation={2} color="white">
<AppBar position="sticky" elevation={0} color="transparent">
<Toolbar>
<IconButton size="large" edge="start" color="inherit" aria-label="menu" sx={{ mr: 2 }}>
<MenuIcon />
@ -41,6 +83,6 @@ export function CapAppBar() {
</Link>
</Toolbar>
</AppBar>
</Box>
</ElevationScroll>
)
}

3
src/pages/_app.tsx
View File

@ -13,6 +13,7 @@ const fontRoboto = Roboto({
})
const siteTheme = createTheme({
cssVariables: true,
palette: {
mode: 'light',
primary: {
@ -43,7 +44,7 @@ export default function App({ Component, pageProps }: AppProps) {
<CssBaseline />
<CapAppBar />
<Box sx={{ height: '100vh' }}>
<Box sx={{ height: 'calc(100vh - 64px)' }}>
<Component {...pageProps} />
</Box>
</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 (
<AppCacheProvider {...props}>
<Html lang="en">
<Head />
<Head>
<DocumentHeadTags {...props} />
</Head>
<body className="antialiased">
<Main />
<NextScript />
</body>
</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() {
return (
<main>
<Container sx={{ mt: 12 }}>
<Container sx={{ mt: 5 }}>
<Typography variant="h3" component="h1">
Welcome to <br />
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 }}
sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}
>
{user.badges && (
<Card>
<CardContent>
<Typography variant="h6" gutterBottom>
@ -117,6 +118,7 @@ export default function UserProfile({ user, checkIn }: InferGetServerSidePropsTy
</Box>
</CardContent>
</Card>
)}
<Card>
<CardContent>

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

@ -14,26 +14,16 @@ export default function UserItself() {
return (
<>
{userStore.account && (
{userStore.account?.banner && (
<Box sx={{ aspectRatio: 16 / 5, position: 'relative' }}>
<Image src={getAttachmentUrl(userStore.account!.banner)} alt="account banner" objectFit="cover" fill />
</Box>
)}
<Container sx={{ mt: 5 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
<Box sx={{ display: 'flex', gap: 2 }}>
{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}
<Container sx={{ mt: 4, px: 2 }}>
<Typography variant="h5" component="h1">
Your Solarpass
</Typography>
</Box>
</Box>
</Box>
<Box sx={{ mt: 5 }}></Box>
</Container>
</>
)