From ab8d684ef58e64c8cea2503b2e59ea2ff5eeaa64 Mon Sep 17 00:00:00 2001
From: Onni Hakala <onni@flaky.build>
Date: Fri, 1 Nov 2024 13:34:15 +0200
Subject: [PATCH 1/2] Fix Biome useImportType, useButtonType, noUselessElse and
 noArrayIndexKey errors

---
 components/Footer.tsx           |  8 +++-----
 components/NotionPageHeader.tsx | 26 +++++++++++++-------------
 components/styles.module.css    | 12 +++++++-----
 lib/preview-images.ts           |  8 ++++----
 4 files changed, 27 insertions(+), 27 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index e927b79606..d54a922117 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -38,18 +38,16 @@ export function FooterImpl() {
       <div className={styles.copyright}>
         Copyright {currentYear} {config.author}
       </div>
-
       <div className={styles.settings}>
         {hasMounted && (
-          <a
+          <button
+            type="button"
             className={styles.toggleDarkMode}
-            href='#'
-            role='button'
             onClick={onToggleDarkMode}
             title='Toggle dark mode'
           >
             {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-          </a>
+          </button>
         )}
       </div>
 
diff --git a/components/NotionPageHeader.tsx b/components/NotionPageHeader.tsx
index 5fbb087ce3..b0973bf794 100644
--- a/components/NotionPageHeader.tsx
+++ b/components/NotionPageHeader.tsx
@@ -23,12 +23,13 @@ function ToggleThemeButton() {
   }, [toggleDarkMode])
 
   return (
-    <div
+    <button
+      type="button"
       className={cs('breadcrumb', 'button', !hasMounted && styles.hidden)}
       onClick={onToggleTheme}
     >
       {hasMounted && isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-    </div>
+    </button>
   )
 }
 
@@ -59,23 +60,22 @@ export function NotionPageHeader({
                 return (
                   <components.PageLink
                     href={mapPageUrl(link.pageId)}
-                    key={index}
+                    key={`nav-${link.pageId}-${link.title}`}
                     className={cs(styles.navLink, 'breadcrumb', 'button')}
                   >
                     {link.title}
                   </components.PageLink>
                 )
-              } else {
-                return (
-                  <components.Link
-                    href={link.url}
-                    key={index}
-                    className={cs(styles.navLink, 'breadcrumb', 'button')}
-                  >
-                    {link.title}
-                  </components.Link>
-                )
               }
+              return (
+                <components.Link
+                  href={link.url}
+                  key={`nav-${link.url}-${link.title}`}
+                  className={cs(styles.navLink, 'breadcrumb', 'button')}
+                >
+                  {link.title}
+                </components.Link>
+              )
             })
             .filter(Boolean)}
 
diff --git a/components/styles.module.css b/components/styles.module.css
index bea8ff1ed9..2cc1713170 100644
--- a/components/styles.module.css
+++ b/components/styles.module.css
@@ -66,7 +66,7 @@
   user-select: none;
 }
 
-.settings a,
+.settings button,
 .social a {
   cursor: pointer;
   font-size: 2em;
@@ -76,18 +76,20 @@
   transition: color 250ms ease-out;
 }
 
-.settings a:last-of-type,
+.settings button:last-of-type,
 .social a:last-of-type {
   margin-right: 0;
 }
 
-.settings a:hover,
+.settings button:hover,
 .social a:hover {
   transition: color 50ms ease-out;
 }
 
-.toggleDarkMode:hover {
-  color: #2795e9;
+.settings button {
+  /* Reset default button styles */
+  background: none;
+  border: none;
 }
 
 .twitter:hover {
diff --git a/lib/preview-images.ts b/lib/preview-images.ts
index 385ffd8945..6b97e67c08 100644
--- a/lib/preview-images.ts
+++ b/lib/preview-images.ts
@@ -1,9 +1,9 @@
 import ky from 'ky'
 import lqip from 'lqip-modern'
-import {
-  type ExtendedRecordMap,
-  type PreviewImage,
-  type PreviewImageMap
+import type {
+  ExtendedRecordMap,
+  PreviewImage,
+  PreviewImageMap
 } from 'notion-types'
 import { getPageImageUrls, normalizeUrl } from 'notion-utils'
 import pMap from 'p-map'

From 83b9d6d8aa79314a57665ad254446a632c268a36 Mon Sep 17 00:00:00 2001
From: Onni Hakala <onni@flaky.build>
Date: Fri, 1 Nov 2024 13:39:02 +0200
Subject: [PATCH 2/2] Fix toggleDarkMode button color in dark mode

---
 styles/global.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/styles/global.css b/styles/global.css
index 7eee7abea3..0cd5e98e2e 100644
--- a/styles/global.css
+++ b/styles/global.css
@@ -2,7 +2,7 @@
   box-sizing: border-box;
 }
 
-a {
+a, button {
   color: inherit;
   text-decoration: none;
 }
@@ -57,6 +57,6 @@ body {
   background-color: var(--fg-color-1);
 }
 
-::-webkit-scrollbar-track {           
+::-webkit-scrollbar-track {
     background-color: var(--bg-color);
 }