Merge transitive-bullshit#645

Author: onnimonni

components/Footer.tsx

@@ -39,22 +39,20 @@ export function FooterImpl() {
 
         <div className={cs(styles.settings,styles.toggleDarkModeContainer)}>
           {hasMounted && (
-            <a
-              className={styles.toggleDarkMode}
-              href='#'
-              role='button'
-              onClick={onToggleDarkMode}
-              title='Toggle dark mode'
-            >
-              {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
-            </a>
+            <button
+            type="button"
+            className={styles.toggleDarkMode}
+            onClick={onToggleDarkMode}
+            title='Toggle dark mode'
+          >
+            {isDarkMode ? <IoMoonSharp /> : <IoSunnyOutline />}
+          </button>
           )}
         </div>
         <div className={styles.social}>
           <PageSocialButtons iconSize={32} />
         </div>
       </div>
-
       <div className="SiteInfo">
         <div className={styles.siteInfoLinks}>
             {footerLinks

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>
   )
 }
 
@@ -60,23 +61,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)}
 

components/styles.module.css

@@ -81,7 +81,7 @@
   user-select: none;
 }
 
-.settings a,
+.settings button,
 .social a {
   cursor: pointer;
   font-size: 2em;
@@ -91,18 +91,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;
 }
 
 .comments {

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'

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);
 }