feat: add light/dark mode to WalineInstance

bjut-swift · May 5, 2024 · dc508b1 · dc508b1
1 parent 2d1f498
commit dc508b1
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 16 deletions.
diff --git a/src/pages/blog/[...slug].tsx b/src/pages/blog/[...slug].tsx
@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { format } from 'date-fns';
 import { getMDXComponent } from 'mdx-bundler/client';
 import { GetStaticPaths, GetStaticProps } from 'next';
+import { useTheme } from 'next-themes';
 import { ParsedUrlQuery } from 'querystring';
 import * as React from 'react';
 import { HiOutlineClock, HiOutlineEye } from 'react-icons/hi';
@@ -19,10 +20,8 @@ import useInjectContentMeta from '@/hooks/useInjectContentMeta';
 import useScrollSpy from '@/hooks/useScrollspy';
 
 import Accent from '@/components/Accent';
-import CarbonAds from '@/components/CarbonAds';
 import BlogCard from '@/components/content/blog/BlogCard';
 import SubscribeCard from '@/components/content/blog/SubscribeCard';
-import Comment from '@/components/content/Comment';
 import LikeButton from '@/components/content/LikeButton';
 import MDXComponents from '@/components/content/MDXComponents';
 import ReloadDevtool from '@/components/content/ReloadDevtool';
@@ -97,6 +96,8 @@ export default function SingleBlogPage({
   }, [frontmatter.slug]);
   //#endregion  //*======== Scrollspy ===========
 
+  const { theme } = useTheme();
+
   return (
     <Layout>
       <Seo
@@ -228,12 +229,6 @@ export default function SingleBlogPage({
               title={frontmatter.title}
             />
 
-            <CarbonAds className='mt-8' />
-
-            <figure className='mt-12'>
-              <Comment key={frontmatter.slug} />
-            </figure>
-
             {populatedRecommendations.length > 0 && (
               <div className='mt-20'>
                 <h2>
@@ -266,6 +261,7 @@ export default function SingleBlogPage({
               <Waline
                 path={frontmatter.slug}
                 serverURL='comment.bjutswift.cn'
+                dark={theme === 'dark'}
                 // 其他你需要的 Waline 配置项
               />
             </figure>

diff --git a/src/pages/projects/[...slug].tsx b/src/pages/projects/[...slug].tsx
@@ -1,5 +1,6 @@
 import { getMDXComponent } from 'mdx-bundler/client';
 import { GetStaticPaths, GetStaticProps } from 'next';
+import { useTheme } from 'next-themes';
 import { ParsedUrlQuery } from 'querystring';
 import * as React from 'react';
 import { HiLink, HiOutlineEye, HiPlay, HiUser } from 'react-icons/hi';
@@ -10,7 +11,6 @@ import { getFileBySlug, getFileSlugArray } from '@/lib/mdx.server';
 import useContentMeta from '@/hooks/useContentMeta';
 import useScrollSpy from '@/hooks/useScrollspy';
 
-import Comment from '@/components/content/Comment';
 import LikeButton from '@/components/content/LikeButton';
 import MDXComponents from '@/components/content/MDXComponents';
 import TableOfContents, {
@@ -20,6 +20,7 @@ import CloudinaryImg from '@/components/images/CloudinaryImg';
 import Layout from '@/components/layout/Layout';
 import CustomLink from '@/components/links/CustomLink';
 import Seo from '@/components/Seo';
+import { Waline } from '@/components/Waline';
 
 import { ProjectType } from '@/types/frontmatters';
 
@@ -54,6 +55,8 @@ export default function SingleProjectPage({ code, frontmatter }: ProjectType) {
   }, [frontmatter.slug]);
   //#endregion  //*======== Scrollspy ===========
 
+  const { theme } = useTheme();
+
   return (
     <Layout>
       <Seo
@@ -175,10 +178,6 @@ export default function SingleProjectPage({ code, frontmatter }: ProjectType) {
               </aside>
             </section>
 
-            <figure className='mt-12'>
-              <Comment />
-            </figure>
-
             <div className='mt-8 flex flex-col items-start gap-4 md:flex-row-reverse md:justify-between'>
               <CustomLink
                 href={`https://github.com/theodorusclarence/theodorusclarence.com/blob/main/src/contents/projects/${frontmatter.slug}.mdx`}
@@ -187,6 +186,14 @@ export default function SingleProjectPage({ code, frontmatter }: ProjectType) {
               </CustomLink>
               <CustomLink href='/projects'>← Back to projects</CustomLink>
             </div>
+            <figure className='mt-12'>
+              <Waline
+                path={frontmatter.slug}
+                serverURL='comment.bjutswift.cn'
+                dark={theme === 'dark'}
+                // 其他你需要的 Waline 配置项
+              />
+            </figure>
           </div>
         </section>
       </main>

diff --git a/src/pages/shorts/[...slug].tsx b/src/pages/shorts/[...slug].tsx
@@ -1,5 +1,6 @@
 import { getMDXComponent } from 'mdx-bundler/client';
 import { GetStaticPaths, GetStaticProps } from 'next';
+import { useTheme } from 'next-themes';
 import { ParsedUrlQuery } from 'querystring';
 import * as React from 'react';
 import { HiOutlineEye } from 'react-icons/hi';
@@ -9,7 +10,6 @@ import useContentMeta from '@/hooks/useContentMeta';
 import useScrollSpy from '@/hooks/useScrollspy';
 
 import Accent from '@/components/Accent';
-import CarbonAds from '@/components/CarbonAds';
 import LikeButton from '@/components/content/LikeButton';
 import MDXComponents from '@/components/content/MDXComponents';
 import TableOfContents, {
@@ -19,6 +19,7 @@ import Tag from '@/components/content/Tag';
 import Layout from '@/components/layout/Layout';
 import CustomLink from '@/components/links/CustomLink';
 import Seo from '@/components/Seo';
+import { Waline } from '@/components/Waline';
 
 import { LibraryType } from '@/types/frontmatters';
 
@@ -53,6 +54,8 @@ export default function SingleShortPage({ code, frontmatter }: LibraryType) {
   }, [frontmatter.slug]);
   //#endregion  //*======== Scrollspy ===========
 
+  const { theme } = useTheme();
+
   return (
     <Layout>
       <Seo
@@ -117,8 +120,6 @@ export default function SingleShortPage({ code, frontmatter }: LibraryType) {
               </aside>
             </section>
 
-            <CarbonAds className='mt-8' />
-
             <div className='mt-8 flex flex-col items-start gap-4 md:flex-row-reverse md:justify-between'>
               <CustomLink
                 href={`https://github.com/theodorusclarence/theodorusclarence.com/blob/main/src/contents/shorts/${frontmatter.slug}.mdx`}
@@ -127,6 +128,14 @@ export default function SingleShortPage({ code, frontmatter }: LibraryType) {
               </CustomLink>
               <CustomLink href='/shorts'>← Back to shorts</CustomLink>
             </div>
+            <figure className='mt-12'>
+              <Waline
+                path={frontmatter.slug}
+                serverURL='comment.bjutswift.cn'
+                dark={theme === 'dark'}
+                // 其他你需要的 Waline 配置项
+              />
+            </figure>
           </div>
         </section>
       </main>