💄 Better article

This commit is contained in:
LittleSheep 2024-02-24 18:29:29 +08:00
parent f9fcae6c7c
commit ea50f739b3
9 changed files with 27 additions and 21 deletions

View File

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

View File

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

View File

@ -5,7 +5,7 @@ export default function PostLayout({children}: Readonly<{
children: ReactNode; children: ReactNode;
}>) { }>) {
return ( 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 }}> <Box sx={{ flexGrow: 1, maxWidth: 720 }}>
{children} {children}
</Box> </Box>

View File

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

View File

@ -1,4 +1,4 @@
"use client" "use client";
import { createTheme } from "@mui/material/styles"; import { createTheme } from "@mui/material/styles";
@ -10,5 +10,13 @@ export const theme = createTheme({
secondary: { secondary: {
main: "#d43630" 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} /> <Image src="/smartsheep.svg" alt="Logo" width={32} height={32} />
</IconButton> </IconButton>
<Typography variant="h6" component="div" sx={{ flexGrow: 1 }}> <Typography variant="h6" component="div" sx={{ flexGrow: 1, fontSize: "1.2rem" }}>
<Link href="/"> <Link href="/">
{SITE_NAME} {SITE_NAME}
</Link> </Link>

View File

@ -1,7 +1,7 @@
"use client"; "use client";
import MuiMarkdown from "mui-markdown"; import Markdown from "react-markdown";
export default function PostContent({ content }: { content: string }) { 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", "@next/mdx": "^14.1.0",
"@types/mdx": "^2.0.11", "@types/mdx": "^2.0.11",
"gray-matter": "^4.0.3", "gray-matter": "^4.0.3",
"html-react-parser": "^5.1.7",
"marked": "^12.0.0",
"mui-markdown": "^1.1.13",
"next": "14.1.0", "next": "14.1.0",
"react": "^18", "react": "^18",
"react-dom": "^18" "react-dom": "^18",
"react-markdown": "^9.0.1"
}, },
"devDependencies": { "devDependencies": {
"@tailwindcss/typography": "^0.5.10", "@tailwindcss/typography": "^0.5.10",