diff --git a/.prettierignore b/.prettierignore
index 0b01878..3f43f83 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,3 +3,4 @@ public/**.html
public/**.json
node_modules
venv
+*.yaml
diff --git a/package.json b/package.json
index 7835801..fabce01 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"format-check": "prettier --check ."
},
"dependencies": {
+ "@emotion/cache": "^11.11.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/icons-material": "^5.14.14",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f1ee03c..2d93864 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -5,6 +5,9 @@ settings:
excludeLinksFromLockfile: false
dependencies:
+ "@emotion/cache":
+ specifier: ^11.11.0
+ version: 11.11.0
"@emotion/react":
specifier: ^11.11.1
version: 11.11.1(@types/react@18.2.28)(react@18.2.0)
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
index ebe2a10..fded879 100644
--- a/src/app/[slug]/page.tsx
+++ b/src/app/[slug]/page.tsx
@@ -6,7 +6,7 @@ import rehypeRaw from "rehype-raw";
import { readFileSync } from "fs";
// Markdown Format Imports
-import { Container, TableBody, TableFooter, TableHead, TableRow } from "@mui/material";
+import { Container, TableBody, TableFooter, TableHead, TableRow, Typography } from "@mui/material";
import { MarkdownH1, MarkdownH2, MarkdownCode, MarkdownImage, MarkdownLink, MarkdownList, MarkdownListItem } from "@/lib/markdown";
import { MarkdownParagraph, MarkdownStrong, MarkdownTable, MarkdownTableCell } from "@/lib/markdown";
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 87ea5a3..a4313a4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -18,7 +18,7 @@ export default function RootLayout({ children }: { children: React.ReactNode })
- {children}
+ {children}
);
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 57a5b29..546875a 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -35,7 +35,7 @@ export default function Home() {
direction="column"
alignItems="center"
justifyContent="center"
- sx={{ minHeight: `calc(100vh)`, background: "#1E1F1F" }}
+ sx={{ minHeight: `calc(100vh)` }}
>
diff --git a/src/components/AppButtons.tsx b/src/components/AppButtons.tsx
index a9e8a05..a20b34d 100644
--- a/src/components/AppButtons.tsx
+++ b/src/components/AppButtons.tsx
@@ -152,7 +152,7 @@ export default function AppButtons({
overflowY: "hidden",
whiteSpace: "nowrap",
minHeight: "32px",
- backgroundColor: pages.length !== 0 ? (theme.palette.mode === "dark" ? "#252527" : "#f3f3f3") : "#1E1F1F",
+ backgroundColor: pages.length !== 0 ? (theme.palette.mode === "dark" ? "#252527" : "#f3f3f3") : "transparent",
"&::-webkit-scrollbar": {
height: "3px"
// backgroundColor: 'red',
diff --git a/src/components/AppTree.tsx b/src/components/AppTree.tsx
index e92fa6e..63ef49e 100644
--- a/src/components/AppTree.tsx
+++ b/src/components/AppTree.tsx
@@ -80,7 +80,10 @@ export default function AppTree({
Home
}
- color="#bdc3cf"
+ sx={{
+ color: renderTreeItemColor(-2),
+ backgroundColor: renderTreeItemBgColor(-2)
+ }}
onClick={() => {
setSelectedIndex(-1);
}}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index b9a6ceb..d88c10c 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -39,7 +39,7 @@ export default function Footer() {
}}
>
- master
+ master
- 0
+
+ 0
+
- 0
+
+ 0
+
@@ -115,7 +129,7 @@ export default function Footer() {
}}
>
- Prettier
+ Prettier
!visiblePageIndexs.includes(x.index))?.index;
@@ -78,30 +129,87 @@ export default function VSCodeLayout({ children }: { children: React.ReactNode }
useEffect(() => {
const index = routeToPage[params.slug as string]?.index;
index && setSelectedIndex(index);
+ setDarkMode(JSON.parse(localStorage.getItem("darkMode") || "true"));
}, []);
+ const [{ cache, flush }] = useState(() => {
+ const cache = createCache(options);
+ cache.compat = true;
+ const prevInsert = cache.insert;
+ let inserted: string[] = [];
+ cache.insert = (...args) => {
+ const serialized = args[1];
+ if (cache.inserted[serialized.name] === undefined) {
+ inserted.push(serialized.name);
+ }
+ return prevInsert(...args);
+ };
+ const flush = () => {
+ const prevInserted = inserted;
+ inserted = [];
+ return prevInserted;
+ };
+ return { cache, flush };
+ });
+
+ useServerInsertedHTML(() => {
+ const names = flush();
+ if (names.length === 0) {
+ return null;
+ }
+ let styles = "";
+ for (const name of names) {
+ styles += cache.inserted[name];
+ }
+ return (
+
+ );
+ });
+
return (
-
-
-
-
-
-
-
-
- {expanded && (
-
-
-
- EXPLORER
-
-
+
+
+
+
+
+
+
+
+ {expanded && (
+
+
+
+ EXPLORER
+
+
+
+
+ )}
+
+
+
+
-
-
- )}
-
-
-
-
-
-
-
+
- {children}
-
+
+ {children}
+
+
+
+
+
-
-
-
-
-
-
+
+
+
);
}
diff --git a/src/lib/markdown.tsx b/src/lib/markdown.tsx
index 0147172..0dcc33a 100644
--- a/src/lib/markdown.tsx
+++ b/src/lib/markdown.tsx
@@ -31,17 +31,11 @@ export function MarkdownTableCell(props: { children: ReactNode }) {
}
export function MarkdownList(props: { children: ReactNode }) {
- return (
-
- {props.children}
- {/* {props.children} */}
-
- );
+ return {props.children};
}
export function MarkdownListItem(props: { children: ReactNode }) {
- return ➣ {props.children};
- return ➣ {props.children};
+ return ➣ {props.children};
}
export function MarkdownCode(props: { children: ReactNode }) {
@@ -91,7 +85,7 @@ export function MarkdownH2(props: { children: ReactNode }) {
}
export function MarkdownStrong(props: { children: ReactNode }) {
- return {props.children} ;
+ return {props.children};
}
export function MarkdownImage(props: any) {