transitive-bullshit · onnimonni · Nov 1, 2024 · Nov 1, 2024
diff --git 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
@@ -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
@@ -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
@@ -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'

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