From 5da90046b724954230592f193c45c648149f7b5a Mon Sep 17 00:00:00 2001 From: Cloud0310 <60375730+Cloud0310@users.noreply.github.com> Date: Fri, 29 Sep 2023 00:44:01 +0800 Subject: [PATCH] added dark mode --- package.json | 2 + pnpm-lock.yaml | 80 +++++++++++++++++++++++++++++++ public/images/dark_mode.svg | 2 +- public/images/rocket.svg | 2 +- public/images/rss.svg | 2 +- public/images/search.svg | 2 +- src/app/blog/[...slug]/layout.tsx | 57 +++++++++++----------- src/app/blog/[...slug]/page.tsx | 24 ++++++---- src/app/layout.tsx | 4 +- src/components/toc.tsx | 11 +++-- src/styles/globals.css | 18 ++++++- src/styles/markdown-dark.css | 18 +++---- src/styles/markdown.css | 44 ++++++++++------- tailwind.config.js | 1 + 14 files changed, 192 insertions(+), 75 deletions(-) diff --git a/package.json b/package.json index e03ebc4..c2d3492 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "lint": "next lint" }, "dependencies": { + "@types/disqusjs": "^1.3.1", "@types/marked": "^5.0.1", "@types/node": "20.3.2", "@types/prismjs": "^1.26.0", @@ -18,6 +19,7 @@ "@types/react-dom": "18.2.6", "autoprefixer": "10.4.14", "date-fns": "^2.30.0", + "disqusjs": "3.0.3-canary.1", "eslint": "8.43.0", "eslint-config-next": "13.4.7", "github-slugger": "^2.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cb2686b..dd22697 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -5,6 +5,9 @@ settings: excludeLinksFromLockfile: false dependencies: + '@types/disqusjs': + specifier: ^1.3.1 + version: 1.3.1 '@types/marked': specifier: ^5.0.1 version: 5.0.1 @@ -26,6 +29,9 @@ dependencies: date-fns: specifier: ^2.30.0 version: 2.30.0 + disqusjs: + specifier: 3.0.3-canary.1 + version: 3.0.3-canary.1(eslint@8.43.0)(react@18.2.0) eslint: specifier: 8.43.0 version: 8.43.0 @@ -316,6 +322,10 @@ packages: engines: {node: '>= 10'} dev: false + /@types/disqusjs@1.3.1: + resolution: {integrity: sha512-Kmz5P1ZorMdVj85uWh0QHZRY6qzlwUvQMGzdpjX8E22VZTIoljGOrXSJxRoPJfJ/GjEgkqRETEQQftCfFeDCEQ==} + dev: false + /@types/dompurify@3.0.3: resolution: {integrity: sha512-odiGr/9/qMqjcBOe5UhcNLOFHSYmKFOyr+bJ/Xu3Qp4k1pNPAlNLUVNNLcLfjQI7+W7ObX58EdD3H+3p3voOvA==} dependencies: @@ -667,6 +677,12 @@ packages: update-browserslist-db: 1.0.13(browserslist@4.21.11) dev: false + /builtins@5.0.1: + resolution: {integrity: sha512-qwVpFEHNfhYJIzNRBvd2C1kyo6jz3ZSMPyyuR47OPdiKWlbYnZNyDWuyR175qDnAJLiCo5fBBqPb3RiXgWlkOQ==} + dependencies: + semver: 7.5.4 + dev: false + /busboy@1.6.0: resolution: {integrity: sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==} engines: {node: '>=10.16.0'} @@ -870,6 +886,24 @@ packages: path-type: 4.0.0 dev: false + /disqusjs@3.0.3-canary.1(eslint@8.43.0)(react@18.2.0): + resolution: {integrity: sha512-AAIWfYt4BbcZeXRJV8Lqoz8OJMW9ixTs/1W5hVFfx5F+eNIui/ghhWVleHTRGy6neeI7OqfERpU9i7+JxhdKmA==} + peerDependencies: + preact: ^10.7.1 + react: ^16.11.0 || ^17.0.0 || ^18.0.0 + peerDependenciesMeta: + preact: + optional: true + react: + optional: true + dependencies: + eslint-plugin-n: 16.1.0(eslint@8.43.0) + foxact: 0.2.20(react@18.2.0) + react: 18.2.0 + transitivePeerDependencies: + - eslint + dev: false + /dlv@1.1.3: resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} dev: false @@ -1133,6 +1167,17 @@ packages: - supports-color dev: false + /eslint-plugin-es-x@7.2.0(eslint@8.43.0): + resolution: {integrity: sha512-9dvv5CcvNjSJPqnS5uZkqb3xmbeqRLnvXKK7iI5+oK/yTusyc46zbBZKENGsOfojm/mKfszyZb+wNqNPAPeGXA==} + engines: {node: ^14.18.0 || >=16.0.0} + peerDependencies: + eslint: '>=8' + dependencies: + '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0) + '@eslint-community/regexpp': 4.8.1 + eslint: 8.43.0 + dev: false + /eslint-plugin-import@2.28.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-typescript@3.6.1)(eslint@8.43.0): resolution: {integrity: sha512-9I9hFlITvOV55alzoKBI+K9q74kv0iKMeY6av5+umsNwayt59fz692daGyjR+oStBQgx6nwR9rXldDev3Clw+A==} engines: {node: '>=4'} @@ -1193,6 +1238,24 @@ packages: semver: 6.3.1 dev: false + /eslint-plugin-n@16.1.0(eslint@8.43.0): + resolution: {integrity: sha512-3wv/TooBst0N4ND+pnvffHuz9gNPmk/NkLwAxOt2JykTl/hcuECe6yhTtLJcZjIxtZwN+GX92ACp/QTLpHA3Hg==} + engines: {node: '>=16.0.0'} + peerDependencies: + eslint: '>=7.0.0' + dependencies: + '@eslint-community/eslint-utils': 4.4.0(eslint@8.43.0) + builtins: 5.0.1 + eslint: 8.43.0 + eslint-plugin-es-x: 7.2.0(eslint@8.43.0) + get-tsconfig: 4.7.2 + ignore: 5.2.4 + is-core-module: 2.13.0 + minimatch: 3.1.2 + resolve: 1.22.6 + semver: 7.5.4 + dev: false + /eslint-plugin-react-hooks@4.6.0(eslint@8.43.0): resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} engines: {node: '>=10'} @@ -1413,6 +1476,19 @@ packages: mime-types: 2.1.35 dev: false + /foxact@0.2.20(react@18.2.0): + resolution: {integrity: sha512-7Mez3d+t1xD+Qq85Xst03OFrLw+DlTXK7qn6bicIPIgnIDEopnRG5Bkz3/RgQp74+wvWb47BrUeq+tIFGbHxIg==} + peerDependencies: + react: '*' + peerDependenciesMeta: + react: + optional: true + dependencies: + client-only: 0.0.1 + react: 18.2.0 + server-only: 0.0.1 + dev: false + /fraction.js@4.3.6: resolution: {integrity: sha512-n2aZ9tNfYDwaHhvFTkhFErqOMIb8uyzSQ+vGJBjZyanAKZVbGUQ1sngfk9FdkBw7G26O7AgNjLcecLffD1c7eg==} dev: false @@ -2727,6 +2803,10 @@ packages: lru-cache: 6.0.0 dev: false + /server-only@0.0.1: + resolution: {integrity: sha512-qepMx2JxAa5jjfzxG79yPPq+8BuFToHd1hm7kI+Z4zAq1ftQiP7HcxMhDDItrbtwVeLg/cY2JnKnrcFkmiswNA==} + dev: false + /set-function-name@2.0.1: resolution: {integrity: sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==} engines: {node: '>= 0.4'} diff --git a/public/images/dark_mode.svg b/public/images/dark_mode.svg index 875897f..20c9ad5 100644 --- a/public/images/dark_mode.svg +++ b/public/images/dark_mode.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/rocket.svg b/public/images/rocket.svg index 8d26231..4640174 100644 --- a/public/images/rocket.svg +++ b/public/images/rocket.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/rss.svg b/public/images/rss.svg index baeeb11..cf58824 100644 --- a/public/images/rss.svg +++ b/public/images/rss.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/public/images/search.svg b/public/images/search.svg index f51c924..6af0c22 100644 --- a/public/images/search.svg +++ b/public/images/search.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/src/app/blog/[...slug]/layout.tsx b/src/app/blog/[...slug]/layout.tsx index 0b077e8..8452cb7 100644 --- a/src/app/blog/[...slug]/layout.tsx +++ b/src/app/blog/[...slug]/layout.tsx @@ -130,33 +130,36 @@ export default function Layout({ children }: { children: ReactNode }) { } }, []); return ( -
-
-
- {children} + <> +
+
+
+
+ {children} +
+
+ +
+
+ +
-
- -
-
- -
-
+ ); } diff --git a/src/app/blog/[...slug]/page.tsx b/src/app/blog/[...slug]/page.tsx index 282dd23..e223d29 100644 --- a/src/app/blog/[...slug]/page.tsx +++ b/src/app/blog/[...slug]/page.tsx @@ -8,6 +8,7 @@ import { slug } from "github-slugger"; import DOMPurity from "isomorphic-dompurify"; // @ts-ignore import MarkedOptions = marked.MarkedOptions; +import Comments from "@/components/comments"; // Marked Highlight, modified from marked-highlight -------------------------------------------------------------------- // From marked helpers @@ -342,14 +343,19 @@ export default function Page({ params }: { params: { slug: string[] } }) { const markdown = fs.readFileSync(`sources/posts/${decodeURIComponent(title)}.md`, "utf-8"); const htmlRendered = markdownRenderer.parse(markdown) as string; return ( -
- - {parse(htmlRendered)} -
+ <> +
+ + {parse(htmlRendered)} +
+
+ +
+ ); } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 4952185..c69bfbd 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -91,12 +91,12 @@ export default function RootLayout({ children }: { children: any }) { `} > -
+
rocket
-
Next Blog
+
Next Blog
diff --git a/src/components/toc.tsx b/src/components/toc.tsx index c559103..d772cd2 100644 --- a/src/components/toc.tsx +++ b/src/components/toc.tsx @@ -97,17 +97,17 @@ export default function Toc() { document.body.appendChild(document.createElement("toc-resolved")); }, [titleTree.length]); return ( -
+
On this page
-