✨ Posts

components/AppShell.tsx

@@ -15,6 +15,7 @@ import { SITE_NAME } from "@/app/consts";
 import NavigationDrawer, { DRAWER_WIDTH, AppNavigationHeader, isMobileQuery } from "@/components/NavigationDrawer";
 import MenuIcon from "@mui/icons-material/Menu";
 import Image from "next/image";
+import Link from "next/link";
 
 function HideOnScroll(props: {
   window?: () => Window;
@@ -105,11 +106,13 @@ export default function AppShell({ children }: {
               aria-label="menu"
               sx={{ ml: isMobile ? 0.5 : 0, mr: 2 }}
             >
-              <Image src="smartsheep.svg" alt="Logo" width={32} height={32} />
+              <Image src="/smartsheep.svg" alt="Logo" width={32} height={32} />
             </IconButton>
 
             <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-              {SITE_NAME}
+              <Link href="/">
+                {SITE_NAME}
+              </Link>
             </Typography>
 
             <IconButton

components/NavigationDrawer.tsx

@@ -2,15 +2,12 @@
 
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import InboxIcon from "@mui/icons-material/MoveToInbox";
-import MailIcon from "@mui/icons-material/Mail";
 import {
   Box,
   Divider,
   Drawer,
   IconButton,
   List,
-  ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
@@ -20,6 +17,7 @@ import {
 import { theme } from "@/app/theme";
 import { ReactNode } from "react";
 import HomeIcon from "@mui/icons-material/Home";
+import ArticleIcon from "@mui/icons-material/Article";
 import Link from "next/link";
 
 export interface NavigationItem {
@@ -30,7 +28,8 @@ export interface NavigationItem {
 
 export const DRAWER_WIDTH = 320;
 export const NAVIGATION_ITEMS: NavigationItem[] = [
-  { icon: <HomeIcon />, title: "首页", link: "/" }
+  { icon: <HomeIcon />, title: "首页", link: "/" },
+  { icon: <ArticleIcon />, title: "新闻", link: "/posts" },
 ];
 
 export const AppNavigationHeader = styled("div")(({ theme }) => ({

components/posts/PostContent.tsx

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