Skip to content

Commit

Permalink
added dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@Cloud0310
Cloud0310 committed Sep 28, 2023
1 parent 869d8c6 commit 5da9004
Show file tree
Hide file tree
Showing 14 changed files with 192 additions and 75 deletions.
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,13 +11,15 @@
"lint": "next lint"
},
"dependencies": {
"@types/disqusjs": "^1.3.1",
"@types/marked": "^5.0.1",
"@types/node": "20.3.2",
"@types/prismjs": "^1.26.0",
"@types/react": "18.2.14",
"@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",
Expand Down
80 changes: 80 additions & 0 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion public/images/dark_mode.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/images/rocket.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/images/rss.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/images/search.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
57 changes: 30 additions & 27 deletions src/app/blog/[...slug]/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,33 +130,36 @@ export default function Layout({ children }: { children: ReactNode }) {
}
}, []);
return (
<div className="relative top-[60px] flex h-full w-full font-sans">
<div className="flex-1 bg-neutral-100 dark:bg-neutral-800"></div>
<div className="min-h-[calc(100vh-60px)] flex-1 border-x-neutral-300 px-20 pb-80 dark:bg-neutral-800 lg:min-w-[800px]">
{children}
<>
<div className="dark:bg-dark-800 h-[60px] w-full bg-neutral-100" />
<div className="relative flex h-full w-full font-sans">
<div className="dark:bg-dark-800 flex-1 bg-neutral-100"></div>
<div className="dark:bg-dark-700 min-h-[calc(100vh-60px)] flex-1 border-b-neutral-300 px-20 pb-80 lg:min-w-[800px]">
{children}
</div>
<div className="dark:bg-dark-800 w-full flex-1 bg-neutral-100">
<Toc />
</div>
<div className="fixed bottom-4 right-4 z-50 transition-opacity" id="scroll-to-top">
<button
type="button"
onClick={() => {
window.scrollTo(0, 0);
4;
}}
className="h-12 w-12 rounded-full p-3 opacity-70 shadow-md hover:bg-neutral-300 hover:shadow-xl"
>
<Image
src="/images/arrow_upward.svg"
height="36"
width="36"
alt="Go back to top"
className="text-neutral-700"
tabIndex={1}
/>
</button>
</div>
</div>
<div className="w-full flex-1 bg-neutral-100 dark:bg-neutral-800">
<Toc />
</div>
<div className="fixed bottom-4 right-4 z-50 transition-opacity" id="scroll-to-top">
<button
type="button"
onClick={() => {
window.scrollTo(0, 0);
4;
}}
className="h-12 w-12 rounded-full p-3 opacity-70 shadow-md hover:bg-neutral-300 hover:shadow-xl"
>
<Image
src="/images/arrow_upward.svg"
height="36"
width="36"
alt="Go back to top"
className="text-neutral-700"
tabIndex={1}
/>
</button>
</div>
</div>
</>
);
}
24 changes: 15 additions & 9 deletions src/app/blog/[...slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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 (
<div className="markdown-content">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css"
integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn"
crossOrigin="anonymous"
/>
{parse(htmlRendered)}
</div>
<>
<div className="markdown-content">
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css"
integrity="sha384-GvrOXuhMATgEsSwCs4smul74iXGOixntILdUW9XmUC6+HX0sLNAK3q71HotJqlAn"
crossOrigin="anonymous"
/>
{parse(htmlRendered)}
</div>
<div className="h-48 overflow-y-scroll">
<Comments />
</div>
</>
);
}
4 changes: 2 additions & 2 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,12 +91,12 @@ export default function RootLayout({ children }: { children: any }) {
`}
>
<body>
<div className="fixed top-0 z-10 flex h-[60px] w-full items-center justify-between border-b border-b-neutral-600 px-5 backdrop-blur-lg dark:border-b-neutral-700 dark:bg-neutral-800">
<div className="dark:border-b-dark-500 fixed top-0 z-10 flex h-[60px] w-full items-center justify-between border-b border-b-neutral-200 px-5 backdrop-blur-lg">
<div className="flex items-center gap-2.5 px-1 py-2">
<div className="text-4xl font-bold">
<Image src="/images/rocket.svg" alt="rocket" width="36" height="36" />
</div>
<div className="font-sans text-2xl font-bold">Next Blog</div>
<div className="font-sans text-2xl font-bold dark:text-neutral-500">Next Blog</div>
</div>
<div className="flex w-48 justify-between text-4xl">
<div className="mx-4 w-11 border-r">
Expand Down
11 changes: 6 additions & 5 deletions src/components/toc.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,17 +97,17 @@ export default function Toc() {
document.body.appendChild(document.createElement("toc-resolved"));
}, [titleTree.length]);
return (
<div id="toc" className="sticky left-20 top-[calc(60px+2.5rem)] m-10 w-64 pb-[1em]">
<div id="toc" className="sticky left-20 top-[calc(60px+2.5rem)] m-10 w-72 pb-[1em]">
<div className="mx-3 my-4 h-8">
<span className="font-sans font-bold text-neutral-500">On this page</span>
</div>
<nav className="mb-5 border-l border-l-neutral-300 px-3">
<nav className="mb-5 border-l border-l-neutral-300 px-3 dark:border-l-neutral-600">
<ul className="text-sm text-neutral-500">
{titleTree.map((titleL1: TreeNode, index: number) => {
return (
<li key={index}>
<Link href={"#" + slug(titleL1.this.innerText)} className="group">
<span className="hover:text-neutral-600 group-aria-[current=true]:text-primary-400">
<span className="hover:text-neutral-600 group-aria-[current=true]:text-primary-400 group-aria-[current=true]:dark:text-primary-600">
{prepareTitle(titleL1.this.innerText)}
</span>
</Link>
Expand All @@ -116,7 +116,7 @@ export default function Toc() {
return (
<li key={index}>
<Link href={"#" + slug(titleL2.this.innerText)} className="group">
<span className="hover:text-neutral-600 group-aria-[current=true]:text-primary-400">
<span className="hover:text-neutral-600 group-aria-[current=true]:text-primary-400 group-aria-[current=true]:dark:text-primary-600">
{prepareTitle(titleL2.this.innerText)}
</span>
</Link>
Expand All @@ -127,7 +127,8 @@ export default function Toc() {
<Link href={"#" + slug(titleL3.this.innerText)} className="group">
<span
className="hover:text-neutral-600
group-aria-[current=true]:text-primary-400"
group-aria-[current=true]:text-primary-400
group-aria-[current=true]:dark:text-primary-600"
>
{prepareTitle(titleL3.this.innerText)}
</span>
Expand Down
18 changes: 17 additions & 1 deletion src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,17 @@
@tailwind components;
@tailwind utilities;

@layer base {
:root[class~="dark"] {
--color-link: theme(colors.primary.600);
--color-symbol: theme(colors.neutral.200);
}
:root:not([class~="dark"]) {
--color-symbol: theme(colors.neutral.700);
--color-link: theme(colors.primary.400);
}
}

@layer components {
.symbol {
/* font-family: theme('fontFamily.symbol'), serif; TODO: replace with material symbols */
Expand All @@ -22,6 +33,10 @@
font-feature-settings: "liga";
}

/* img {
color: var(--color-symbol);
} */

#toc li a {
@apply relative;
}
Expand All @@ -47,6 +62,7 @@
}

#toc li a[aria-current]::before {
background-color: theme("colors.primary.300");
background-color: var(--color-link);
border-radius: 2px;
}
}
Loading

0 comments on commit 5da9004

Please sign in to comment.