♻️ 使用 NextJS 重构 #1

Merged
LittleSheep merged 12 commits from refactor/v2 into master 2024-02-24 14:19:52 +00:00
9 changed files with 27 additions and 21 deletions
Showing only changes of commit ea50f739b3 - Show all commits

View File

@ -24,8 +24,8 @@ export default function Home() {
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>
<Grid item xs={12} sm={6} sx={{ textAlign: { xs: "center", sm: "initial" } }}>
<Typography variant="h1" gutterBottom> 👋</Typography>
<Typography paragraph>
SmartSheep Studio
@ -35,8 +35,8 @@ export default function Home() {
<Grid
item
xs={12}
md={6}
sx={{ display: "flex", justifyContent: { xs: "center", lg: "end" }, order: { xs: -100, lg: 0 } }}
sm={6}
sx={{ display: "flex", justifyContent: { xs: "center", sm: "end" }, order: { xs: -100, sm: 0 } }}
>
<Box>
<Image src="/smartsheep.svg" alt="Logo" width={256} height={256} />
@ -50,8 +50,8 @@ export default function Home() {
alignItems="center"
sx={{ height: "calc(100vh - 64px)" }}
>
<Grid item xs={12} md={6} sx={{ display: "flex", justifyContent: { xs: "center", lg: "end" } }}>
<Card sx={{ flexGrow: 1, mr: { xs: 0, md: 8 } }}>
<Grid item xs={12} sm={6} sx={{ display: "flex", justifyContent: { xs: "center", sm: "end" } }}>
<Card sx={{ flexGrow: 1, mr: { xs: 0, sm: 4, md: 8 } }}>
<List sx={{ width: "100%", bgcolor: "background.paper" }}>
{RELATED_ACCOUNTS.map((item, idx) => (
<Link key={idx} href={item.link} target="_blank" passHref>
@ -66,8 +66,8 @@ export default function Home() {
</List>
</Card>
</Grid>
<Grid item xs={12} md={6} sx={{ textAlign: { xs: "center", md: "initial" } }}>
<Typography variant="h3" component="h1" gutterBottom></Typography>
<Grid item xs={12} sm={6} sx={{ textAlign: { xs: "center", sm: "initial" } }}>
<Typography variant="h1" gutterBottom></Typography>
<Typography paragraph>
2019

View File

@ -22,7 +22,7 @@ export default function PostDetailPage({ params }: { params: { id: string } }) {
<CardContent sx={{ paddingX: 5, paddingY: 3 }}>
<Box>
<Typography gutterBottom variant="h5" component="h1">
<Typography gutterBottom variant="h2">
{post.title}
</Typography>
<Typography color="text.secondary" variant="body2">
@ -30,7 +30,7 @@ export default function PostDetailPage({ params }: { params: { id: string } }) {
</Typography>
</Box>
<Divider sx={{ my: 5 }} />
<Box component="article" sx={{ minWidth: 0 }}>
<Box component="article" className="prose max-w-none" sx={{ minWidth: 0 }}>
<PostContent content={post.content ?? ""} />
</Box>
</CardContent>

View File

@ -5,7 +5,7 @@ export default function PostLayout({children}: Readonly<{
children: ReactNode;
}>) {
return (
<Container sx={{ display: "flex", justifyContent: "center", gap: 4, py: 4 }}>
<Container sx={{ display: "flex", justifyContent: "center", gap: 4, py: 2 }}>
<Box sx={{ flexGrow: 1, maxWidth: 720 }}>
{children}
</Box>

View File

@ -22,7 +22,7 @@ export default function PostList() {
}
<CardContent sx={{ paddingX: 5, paddingY: 3 }}>
<Typography gutterBottom variant="h5" component="h2">
<Typography gutterBottom variant="h3">
{post.title}
</Typography>
<Typography variant="body2" color="text.secondary">

View File

@ -1,4 +1,4 @@
"use client"
"use client";
import { createTheme } from "@mui/material/styles";
@ -10,5 +10,13 @@ export const theme = createTheme({
secondary: {
main: "#d43630"
}
}
},
typography: {
h1: { fontSize: "2.5rem" },
h2: { fontSize: "2rem" },
h3: { fontSize: "1.75rem" },
h4: { fontSize: "1.5rem" },
h5: { fontSize: "1.25rem" },
h6: { fontSize: "1.15rem" },
},
});

BIN
bun.lockb

Binary file not shown.

View File

@ -109,7 +109,7 @@ export default function AppShell({ children }: {
<Image src="/smartsheep.svg" alt="Logo" width={32} height={32} />
</IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
<Typography variant="h6" component="div" sx={{ flexGrow: 1, fontSize: "1.2rem" }}>
<Link href="/">
{SITE_NAME}
</Link>

View File

@ -1,7 +1,7 @@
"use client";
import MuiMarkdown from "mui-markdown";
import Markdown from "react-markdown";
export default function PostContent({ content }: { content: string }) {
return <MuiMarkdown>{content}</MuiMarkdown>;
return <Markdown>{content}</Markdown>;
}

View File

@ -21,12 +21,10 @@
"@next/mdx": "^14.1.0",
"@types/mdx": "^2.0.11",
"gray-matter": "^4.0.3",
"html-react-parser": "^5.1.7",
"marked": "^12.0.0",
"mui-markdown": "^1.1.13",
"next": "14.1.0",
"react": "^18",
"react-dom": "^18"
"react-dom": "^18",
"react-markdown": "^9.0.1"
},
"devDependencies": {
"@tailwindcss/typography": "^0.5.10",