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 ( +