♻️ Use sanity

components/AppShell.tsx

@@ -8,7 +8,9 @@ import {
   AppBarProps as MuiAppBarProps,
   useScrollTrigger,
   IconButton,
-  styled, Box, useMediaQuery
+  styled,
+  Box,
+  useMediaQuery,
 } from "@mui/material";
 import { ReactElement, ReactNode, useEffect, useState } from "react";
 import { SITE_NAME } from "@/app/consts";
@@ -17,13 +19,10 @@ import MenuIcon from "@mui/icons-material/Menu";
 import Image from "next/image";
 import Link from "next/link";
 
-function HideOnScroll(props: {
-  window?: () => Window;
-  children: ReactElement;
-}) {
+function HideOnScroll(props: { window?: () => Window; children: ReactElement }) {
   const { children, window } = props;
   const trigger = useScrollTrigger({
-    target: window ? window() : undefined
+    target: window ? window() : undefined,
   });
 
   return (
@@ -38,24 +37,25 @@ interface AppBarProps extends MuiAppBarProps {
 }
 
 const ShellAppBar = styled(MuiAppBar, {
-  shouldForwardProp: (prop) => prop !== "open"
+  shouldForwardProp: (prop) => prop !== "open",
 })<AppBarProps>(({ theme, open }) => {
   const isMobile = useMediaQuery(isMobileQuery);
 
-  return ({
+  return {
     transition: theme.transitions.create(["margin", "width"], {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
+      duration: theme.transitions.duration.leavingScreen,
     }),
-    ...(!isMobile && open && {
-      width: `calc(100% - ${DRAWER_WIDTH}px)`,
-      transition: theme.transitions.create(["margin", "width"], {
-        easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.enteringScreen
+    ...(!isMobile &&
+      open && {
+        width: `calc(100% - ${DRAWER_WIDTH}px)`,
+        transition: theme.transitions.create(["margin", "width"], {
+          easing: theme.transitions.easing.easeOut,
+          duration: theme.transitions.duration.enteringScreen,
+        }),
+        marginRight: DRAWER_WIDTH,
       }),
-      marginRight: DRAWER_WIDTH
-    })
-  });
+  };
 });
 
 const AppMain = styled("main", { shouldForwardProp: (prop) => prop !== "open" })<{
@@ -63,28 +63,26 @@ const AppMain = styled("main", { shouldForwardProp: (prop) => prop !== "open" })
 }>(({ theme, open }) => {
   const isMobile = useMediaQuery(isMobileQuery);
 
-  return ({
+  return {
     flexGrow: 1,
     transition: theme.transitions.create("margin", {
       easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen
+      duration: theme.transitions.duration.leavingScreen,
     }),
     marginRight: -DRAWER_WIDTH,
-    ...(!isMobile && open && {
-      transition: theme.transitions.create("margin", {
-        easing: theme.transitions.easing.easeOut,
-        duration: theme.transitions.duration.enteringScreen
+    ...(!isMobile &&
+      open && {
+        transition: theme.transitions.create("margin", {
+          easing: theme.transitions.easing.easeOut,
+          duration: theme.transitions.duration.enteringScreen,
+        }),
+        marginRight: 0,
       }),
-      marginRight: 0
-    }),
-    position: "relative"
-  });
+    position: "relative",
+  };
 });
 
-
-export default function AppShell({ children }: {
-  children: ReactNode,
-}) {
+export default function AppShell({ children }: { children: ReactNode }) {
   let documentWindow: Window;
 
   const isMobile = useMediaQuery(isMobileQuery);
@@ -110,9 +108,7 @@ export default function AppShell({ children }: {
             </IconButton>
 
             <Typography variant="h6" component="div" sx={{ flexGrow: 1, fontSize: "1.2rem" }}>
-              <Link href="/">
-                {SITE_NAME}
-              </Link>
+              <Link href="/">{SITE_NAME}</Link>
             </Typography>
 
             <IconButton
@@ -140,4 +136,4 @@ export default function AppShell({ children }: {
       </Box>
     </>
   );
-}
+}

components/NavigationDrawer.tsx

@@ -12,7 +12,7 @@ import {
   ListItemIcon,
   ListItemText,
   styled,
-  useMediaQuery
+  useMediaQuery,
 } from "@mui/material";
 import { theme } from "@/app/theme";
 import { ReactNode } from "react";
@@ -42,27 +42,25 @@ export const AppNavigationHeader = styled("div")(({ theme }) => ({
   padding: theme.spacing(0, 1),
   justifyContent: "flex-start",
   height: 64,
-  ...theme.mixins.toolbar
+  ...theme.mixins.toolbar,
 }));
 
-export function AppNavigation({ showClose, onClose }: {
-  showClose?: boolean,
-  onClose: () => void
-}) {
+export function AppNavigation({ showClose, onClose }: { showClose?: boolean; onClose: () => void }) {
   return (
     <>
       <AppNavigationHeader>
-        {
-          showClose &&
+        {showClose && (
           <IconButton onClick={onClose}>
             {theme.direction === "rtl" ? <ChevronLeftIcon /> : <ChevronRightIcon />}
           </IconButton>
-        }
+        )}
       </AppNavigationHeader>
       <Divider />
       <List>
         {NAVIGATION_ITEMS.map((item, idx) => {
-          return item.divider ? <Divider key={idx} /> : (
+          return item.divider ? (
+            <Divider key={idx} />
+          ) : (
             <Link key={idx} href={item.link ?? "/"} passHref>
               <ListItemButton>
                 <ListItemIcon>{item.icon}</ListItemIcon>
@@ -78,10 +76,7 @@ export function AppNavigation({ showClose, onClose }: {
 
 export const isMobileQuery = theme.breakpoints.down("md");
 
-export default function NavigationDrawer({ open, onClose }: {
-  open: boolean,
-  onClose: () => void,
-}) {
+export default function NavigationDrawer({ open, onClose }: { open: boolean; onClose: () => void }) {
   const isMobile = useMediaQuery(isMobileQuery);
 
   return isMobile ? (
@@ -96,8 +91,8 @@ export default function NavigationDrawer({ open, onClose }: {
         sx={{
           "& .MuiDrawer-paper": {
             boxSizing: "border-box",
-            width: DRAWER_WIDTH
-          }
+            width: DRAWER_WIDTH,
+          },
         }}
       >
         <AppNavigation onClose={onClose} />
@@ -112,11 +107,11 @@ export default function NavigationDrawer({ open, onClose }: {
         width: DRAWER_WIDTH,
         flexShrink: 0,
         "& .MuiDrawer-paper": {
-          width: DRAWER_WIDTH
-        }
+          width: DRAWER_WIDTH,
+        },
       }}
     >
       <AppNavigation showClose onClose={onClose} />
     </Drawer>
   );
-}
+}

components/posts/PostContent.tsx

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