💄 Better article

app/page.tsx

@@ -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 年。自那年起我们一直在开发让人喜欢的开源软件。
             在我们这里，“取之于开源，用之于开源” 不仅是原则，更是我们信仰的座右铭。

app/posts/[id]/page.tsx

@@ -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>

app/posts/layout.tsx

@@ -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>

app/posts/page.tsx

@@ -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">

app/theme.ts

@@ -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" },
+  },
 });

components/AppShell.tsx

@@ -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>

components/posts/PostContent.tsx

@@ -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>;
 }

package.json

@@ -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",