Add placeholder icons

* modify article fonts
* adjust article font size

components/DarkModeBtn.tsx

@@ -1,6 +1,6 @@
 import { useTheme } from 'next-themes';
 import { useEffect, useState } from 'react';
-import { FiMoon, FiSun } from 'react-icons/fi';
+import { FiMoon, FiSun, FiHeart } from 'react-icons/fi';
 
 const DarkModeBtn = () => {
   const [mounted, setMounted] = useState(false);
@@ -10,7 +10,12 @@ const DarkModeBtn = () => {
 
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
-  if (!mounted) return null;
+  if (!mounted)
+    return (
+      <button>
+        <FiHeart className="w-5 h-5" />
+      </button>
+    );
 
   return (
     <>

components/NavBar.tsx

@@ -111,7 +111,7 @@ const HeadBar = () => {
               <DarkModeBtn />
             </li>
             <li className="DocSearch-wrapper">
-              {mounted && (
+              {mounted ? (
                 <DocSearch
                   appId={process.env.NEXT_PUBLIC_ALGOLIA_APP_ID ?? ''}
                   indexName="RUA"
@@ -120,6 +120,13 @@ const HeadBar = () => {
                   }
                   placeholder="Search..."
                 />
+              ) : (
+                <div
+                  className={cn(
+                    'w-[164.453px] h-[30px]',
+                    'bg-[#ebedf0] rounded-[40px] animate-pulse'
+                  )}
+                ></div>
               )}
             </li>
           </ul>

components/post/PostTOC.tsx

@@ -18,7 +18,8 @@ const PostTOC = ({ headings }: Props) => {
       <div
         className={classNames(
           'rounded-lg transition-all',
-          'duration-500 overflow-hidden'
+          'duration-500 overflow-hidden',
+          'my-4'
         )}
         style={{
           maxHeight: show ? (headings?.length ?? 0) * 50 + 70 : 70,
@@ -31,7 +32,8 @@ const PostTOC = ({ headings }: Props) => {
             'rounded-lg border border-gray-300',
             'dark:bg-rua-gray-800 dark:border-rua-gray-600',
             'select-none cursor-pointer',
-            'flex justify-between items-center'
+            'flex justify-between items-center',
+            '!text-2xl'
           )}
           onClick={handleClick}
         >

pages/_document.tsx

@@ -7,9 +7,9 @@ export default function Document() {
         <link rel="preconnect" href="https://fonts.googleapis.com" />
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Aleo&family=Aref+Ruqaa&family=Barlow:ital,wght@0,400;0,600;1,400;1,600&family=Poppins:ital@0;1&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Aleo&family=Aref+Ruqaa&family=Barlow:ital@0;1&family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500;1,600&family=Poppins:ital@0;1&display=swap"
           rel="stylesheet"
-        />
+        ></link>
         <link
           rel="preconnect"
           href="https://ZUYZBUJBQW-dsn.algolia.net"

styles/globals.css

@@ -21,12 +21,16 @@
 font-family: 'Aleo', serif;
 font-family: 'Aref Ruqaa', serif;
 font-family: 'Barlow', sans-serif;
+font-family: 'JetBrains Mono', monospace;
 font-family: 'Poppins', sans-serif;
 */
 
 @layer base {
   body {
-    @apply text-gray-600 bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200 font-Poppins;
+    @apply text-gray-600 bg-bluish-gray dark:bg-rua-gray-900 dark:text-gray-200;
+    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
+      Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', miui,
+      'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
   }
 
   img,

styles/rua.css

@@ -244,6 +244,7 @@ h6:hover::before {
   font-size: 85%;
   background-color: var(--color-neutral-muted);
   border-radius: 6px;
+  font-family: 'JetBrains Mono', -apple-system, monospace;
 }
 #article pre > code {
   padding: 0;
@@ -252,14 +253,16 @@ h6:hover::before {
   white-space: pre;
   background: transparent;
   border: 0;
+  font-family: 'JetBrains Mono', -apple-system, monospace;
 }
 
 #article code,
 #article kbd,
 #article pre,
 #article samp {
-  font-family: monospace, monospace;
-  font-size: 17px;
+  /* font-family: monospace, monospace; */
+  font-family: 'JetBrains Mono', -apple-system, monospace;
+  font-size: 16px;
 }
 
 #article mark {
@@ -336,3 +339,8 @@ h6:hover::before {
 #article img {
   border-radius: 6px;
 }
+
+#article .cm-editor .cm-line {
+  font-size: 15px;
+  font-family: 'JetBrains Mono', -apple-system, monospace;
+}

tailwind.config.js

@@ -12,6 +12,7 @@ module.exports = {
         'Aref-Ruqaa': ['Aref Ruqaa', 'serif'],
         Barlow: ['Barlow', 'sans-serif'],
         Poppins: ['Poppins', 'sans-serif'],
+        Mono: ['JetBrains Mono', 'monospace'],
       },
       colors: {
         bluish: {